No website is complete these days without at least considering mobile. Based on comScore’s latest annual report on the mobile landscape, ‘2012 Mobile Future in Focus‘?,
smartphones and tablets were responsible for nearly 8% of all observed internet traffic in the United States at the end of 2011.
Another study from comScore showed that more than 70% of users who use mobile social media use it daily. It’s imperative now, more than ever, that your site is both accessible via mobile devices and easy to interact with. So, how to make that happen? Let’s dive into some geek speak’?¬¶
Responsive Design
A responsive website is simply a design that can stretch and rearrange itself based on the width of the browser rendering the site. In the past, servers would serve up whole different websites after detecting whether a user was viewing their site on a PC or a mobile device. These standalone, mobile-formatted sites were simplified versions of their parent sites, usually with limited functionality to increase page speeds over a slow connection.
When tablets started becoming more prominent, there was a need for websites that sat somewhere between a smart phone and a PC. Then, as smartphones became smarter, you had higher quality resolutions with different layout modes — which ultimately meant a lot to account for if you were developing individual sites for each device.
Responsive design solves the problem at a very low level by resizing and rearranging elements on the screen to fit the user’s device. This is usually accomplished through a combination of fluid grids, flexible images and media queries.
Responsive design is a lot easier to implement and maintain as websites evolve with more functionality.
Progressive Enhancement
Sometimes you will run across a website on your phone that simply does not work. Sometimes you can’t navigate the dropdown menus. Other times, there is just too much content.
Progressive enhancement is the practice of catering to the lowest common denominator and selectively adding functionality based on a user’s capabilities. Web developers have been using a similar approach for a while in order to ensure features in newer browsers (e.g. Chrome and Firefox) degrade nicely in older browsers (e.g. IE6).
Responsive Design + Progressive Enhancement = Adaptive Design
Now, take what we’ve learned about responsive design, add in our concept of progressive enhancement, and we have adaptive design. There is still some debate over the use of “adaptive design” vs “adaptive layout,” but I don’t want to argue semantics as the idea is much more important.
The important thing to note is by using progressive enhancement along with a responsive layout, we can conditionally introduce functionality like multi-touch, geo-location and native smartphone integration. This allows us to create a better user experience based on a user’s capabilities.
There are plenty of excellent resources out there to help guide you down the responsive/adaptive road, so for the purpose of this post I’m going to try and keep things as simple as possible. You can learn more in this A List Apart article about Responsive Design and this Smashing Magazine article about Responsive Design.
Don’t Fight The Future
The web is changing to meet the changing needs of its users. We started with crazy flash intros and entire websites stuffed into tables. Now, we’re starting to see the importance of accessibility and developing sites to meet different use cases. If you think this is just a trend, you will get left behind.
If you made it this far, it’s time for you to test your own site on your phone. Make sure to click around a bit. Even better, ask a friend to access your website on their own phone and give you feedback. Here are some online tools to help with testing:
Happy smart phone browsing!
Want to learn more? Check out what our Web Development Agency can do for your brand.
