7 Tactics for Building Better Mobile Responsive Websites – WPCAST017

In this episode, we discuss mobile responsive design: what it is, why it’s needed, and our 7 tactics for making better responsive websites.

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