Have you ever visited a website on your smartphone or tablet that just didn’t look quite right? Maybe the elements on the page were all out of place, or maybe the text was way too small and you were forced to zoom in just to be able to read it? You probably left that page pretty quickly to find a different page, one that you could actually read and use on your mobile device.
A few years ago, companies could get away with not caring about mobile visitors. There really weren’t that many of them, and they weren’t going to convert from their mobile devices anyway. Those days are over.
The amount of web traffic from mobile devices is growing, and growing quickly. Mobile devices currently account for approximately 20% of all web traffic. If you use your website for anything significant (shopping cart, lead generation, technical support, etc.) and you’re not paying attention to the mobile user experience, then you’re in danger of losing to competitors who are paying attention.
Welcome to the need for responsive design.
Responsive design uses media queries and Cascading Style Sheets (CSS) together to create websites which can alter the output of a page based on certain characteristics, such as screen width, of the viewing device. For example, a responsive design style sheet might have three different sets of styling rules: one for a standard PC or laptop screen, one for tablet-sized screens, and one for smartphone-sized screens. The media query statements determine whether the device is a PC, tablet or smartphone, and then the appropriate styling rules are applied to render the page.
Responsive design also, thankfully, signals the end of the “web design as an extension of print design” school of thought, where print designers who became web designers out of necessity sought to maintain the same sort of control over layout that they had when designing for physical media such as magazines and newspapers. These designers would create rigid CSS rules which would, for example, set the width of the display area of the site to a specific number of pixels, regardless of the size of the screen used to view the site. This worked (sort of) when all screens were approximately the same size, but breaks down in the face of the wide array of screen sizes available today.
Of course, every designer (even those “the web should be just like print” dinosaurs) thinks that his or her way is best. Fortunately, we’ve likely reached the point where design decisions will not be made in some ivory tower design vacuum, but will be made for business reasons as well. Still clinging to your 1000-pixels-wide site? Say goodbye to approximately one fifth of your potential web conversions, because those visitors will be converting elsewhere, and say goodbye to an even greater slice of your potential conversions going forward as mobile use continues to grow.
The web is evolving. Evolve with it or risk extinction.
About the author: Dan Vuksanovich is the Website Traffic Increaser Guy. He works exclusively with small businesses on getting more targeted web traffic and increasing conversion rates.