As of July 2015 mobile media time had moved past desktop usage. What does this mean for you and your website? If your website is not responsively enabled, then you’re potentially missing the opportunity to connect with your audience through mobile devices and tablets.
Sure, your non-responsive website is still accessible over a mobile device, though your audience’s mobile experience is going to be less than optimal. When your competitor has a user-friendly, mobile responsive website it isn’t hard to guess where potential clients are going to go.
It is also important to point out that as of April 2015 Google began boosting rankings of mobile-friendly pages.
With the New Year just around the corner there is no better time than now to get up to speed and to optimize your website for responsiveness. Get a fresh start and give your audience the mobile experience they deserve.
Responsive Checklist
For those of you just beginning in web design and development we’ve put together a quick checklist of tools, resources, and more to help you on your responsive web development path.
There are an enormous amount of tools, tutorials, and other resources on the web to aid in your understanding as well as speeding up your development. Our list is by no means a complete list and should be considered a general introduction to get you on your way.
Responsive Structure:
Below you will find some general points regarding the structure of your responsive website. These are only the tip of the responsive iceberg and we highly recommend you spend some time further investigating these points.
- Meta tags: Meta tags for viewports allow devices to read media queries. Example: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>. Be aware that setting the scale to maximum-scale=1.0 disables pinch-to-zoom functionality!
- Percentages: Ensure you are using percentages when setting up containers and columns. While there are always exceptions, a responsive site will predominately use percentages for containers and columns.
- Typography: Arguments vary on type settings (pixels vs. em’s vs. rem’s). Setting your type to em’s allows a visitor to zoom the site text in their browser settings versus zooming the whole site. Your approach to this may vary. You can find numerous pixel to em conversion sites with a quick Google search.
Responsive Media:
- Images: In a nutshell you’ll want to ensure your CSS selector for img is set to max-width:100%; height: auto;. You can read more about responsive images here: alistapart.com
- Video: Video presents its own challenges when it comes to site responsiveness. There are a variety of solutions to handling video, from wrapping the video in a parent container to using JavaScript. You can read more about solutions to responsive video here: css-tricks.com
Responsive Frameworks:
To get up and running with your responsive design you can use time saving frameworks such as Bootstrap, Foundation, and Skeleton. Each framework presents its own approach to responsive design and some investigation is recommended.
Arguments vary regarding the usefulness of front-end frameworks such as these. As always, a core understanding of responsive web design principles, practices, and approaches cannot be underestimated. You can get a great introduction to responsive web design with Ethan Marcotte’s book “Responsive Web Design”.
You can view a quick primer on the differences between the above mentioned frameworks here: responsive.vermilion.com
Tools, Links, Reference, and More:
Web Developer tools such as Chrome Dev Tools are indispensable. Built into the browser, these tools allow for fine-grained inspection of elements and styles, built-in device emulation, on-the-fly editing, debugging, and more.
All major browsers have dev tools built right in which aids in diagnosing and troubleshooting browser specific bugs and styling issues.
Speaking of browsers: be sure to test your sites in all available browsers. That means, at a minimum, Chrome, Firefox, IE, and Safari.
Below you will find links to tools, frameworks, and other valuable assets.
Frameworks:
Dev Tools:
Emulation:
Reference:
The Take Away
2015 saw mobile usage surpass desktop usage and it has never been more critical to ensure your website is responsively enabled. Along with growing mobile usage, Google now boosts mobile-friendly pages in mobile search results. With the New Year just around the corner there is no better time to give your website a refresh and give your audience the mobile experience they deserve.
We’ve provided a responsive checklist for those who may just be starting out in responsive web design and development as well as those whom may simply want to learn more. Use this responsive checklist as a general starting point and be sure to investigate, test, and explore other options. There are untold numbers of tools and resources when it comes to responsive design, development, and testing.
