In this episode, we discuss mobile responsive design: what it is, why it’s needed, and our 7 tactics for making better responsive websites.
Podcast: Play in new window | Download (Duration: 16:27 — 15.1MB)
The Changelog
- Doug launched the new Suitcase Entrepreneur design with cool responsive design elements
- Marcus Couch contacted us – WordPress Plugins A -Z and WordPress Weekly podcasts
- David launched Ninja Forms – Zapier plugin
- David launching new version of Easy Pricing Tables with comparison table design
The Core
What is responsive design?
- Making your site look good on all device sizes, especially mobile.
- Responsive design is absolutely essential these days.
- Technical aspects – easiest way is to use CSS media queries.
- You can apply new attributes to elements at certain screen widths.
- Examples:
- @media only screen and (max-width: 960px) { }
- @media only screen and (max-width: 959px) and (min-width: 768px) { }
- Consider the mobile first approach to start the design, then add new CSS for larger screen sizes
Why responsive design?
- Don’t use “m.example.com” sites for mobile – more maintenance, SEO implications, etc.
- Increasing mobile web use, people are expecting mobile friendly websites.
Our 7 tactics:
- Test by resizing your browser window and make sure it works as the width changes.
- Better to do it this way than try to accommodate every device size.
- Modern.ie for browser testing.
- Choose a theme that is responsive out of the box, i.e. Dynamik [affiliate link].
- Don’t try to adapt a non-responsive theme, it’s a lot of work.
- Mobile plugins (i.e. WP Touch) strip your design, not a replacement for responsive.
- Use rems as your measurement unit for font size.
- You can change the font size for the html element, and the text will adjust accordingly.
- If you have a lot of navigation items, consider a responsive “hamburger menu” to save space.
- Consider hiding entire sections on mobile, i.e. the sidebar.
- Check elements that may have fixed widths such as tables, iframes, video embeds.
- These can prevent the responsive effects from occurring.
- For videos, use the Advanced Responsive Video Embedder plugin
- Use divs instead of tables when possible. Only use tables for tabular data. Divs are more fluid.
Tips & Tricks
- Web fonts and icons – Google Web Fonts, Font Awesome (font icons)
- ScreenFlow – screen recording tool
Podcast: Play in new window | Download (Duration: 16:27 — 15.1MB)
Thanks for listening! If you liked this episode, please leave us a review in iTunes.
We’d love for you to comment below, or leave us a voicemail or message with your feedback.