A Foundation for Responsive Design in Today's Consumer Market
The Handheld Web
Years ago, surfing the internet consisted of sitting at a desk, hunching over a bulky, flickering CRT screen and clicking away in Internet Explorer or AOL at blazing fast 5kbps speeds. Today, people have the freedom to read their favorite blog from their favorite café, shop for surfboards while tanning at the beach, or read ghost stories while sitting around a campfire. This is made possible by the availability of wireless internet signals, cell tower connectivity and certainly the availability of handheld mobile browsing devices.
The Web-Enabled Consumer Market Today
With the increasing number of web-enabled devices available in the market today, web design standards have to become as flexible as the varying screen resolutions today. Screen resolutions vary greatly in mobile devices as more pixels are being packed into mobile screens. This allows hardware manufacturers to offer screens with sharper graphics and crisp text at mind-blowing resolutions - and web designers respond to these changes.
In the 1990’s and through the early 2000’s, computer screen resolutions were very standard and predictable. According to w3Schools.com, January 2000 boasted a dominant screen resolution of 800x600px, represented by nearly 60% of web users. Fast forward to 2012 and we see that number drop to less than 1% of web users. Only four years ago, half of web users viewed the web at 1024x768 pixels. Today, that number is only 13%. What should we gather from these stats is simple: over time, the viewing environment on the web changes, and sometimes drastically.
Website layout, content placement and menu positioning has always relied on a consistent web-viewing environment. Today, screen resolutions are much more varied than what was typical even a few years ago. Screen resolutions can get as high as 1920x1200 pixels while web-enabled tablets and phones might be as small as 320x480 pixels. You can see a comparison in the graphic below:
Current Device Statistics
The percentage of people using mobile devices to browse the web is growing by leaps and bounds. Trends show that while web browsing from a desktop computer is diminishing, web browsing from mobile devices is soaring.
According to the Pew Research Center, September 2012 studies show that 45% of American adults have smartphones, 61% have a laptop and 18% have a tablet or an e-reader respectively. As of early 2012, only 58% of American adults have a desktop computer but do not necessarily use it as their main web browsing device. In April 2012, 55% of adult cell phone owners use their mobile phone to browse the internet. Of current cell phone users, 21% say that they mostly go online using their cell phone. These statistics reflect a cultural shift in how people connect to information, each other, and their world.
These statistics should encourage individuals seeking to develop a website for their business to consider how their content and brand are being viewed on any web-enabled device being used.
The Case for Responsive Design
If you have browsed the web using a smartphone or tablet in the past couple of years, you may have noticed that some websites are difficult to read or navigate. Buttons are too small, text is virtually impossible to read, and you find yourself constantly zooming and panning around the site. Sure, they’re sharp –but browsing on mobile screens can be difficult!
The issue of varying screen sizes poses challenges especially for web developers who plan out their designs based on designable area. Imagine being asked to paint a picture without being told the size or the shape of the canvas you would be given. Imagine being asked to take a photo that has to fit into any frame, regardless of size and shape. Website developers took notice of this issue and responded. A trend in website development has become a mainstream solution over the past few years: responsive web design.
Smashing Magazine's Kayla Knight defines responsive web design this way:
At Full Media, we define responsive design as a method by which a website provides a consistent, fluid, and highly flexible web experience for web users regardless of the device on which the website is viewed. Responsive web design is more than just an industry buzz term for “trendy web design”. Responsive web design provides an answer to the question “How do we create the best site experience for every website visitor no matter how they’re seeing us online?” Ethan Marcotte from A List Apart describes the mechanics behind responsive design in his article here. Through the power of CSS styles and media queries, these sites are able to present themselves in the best possible way by responding to the width of the device on which the site is being viewed – that’s why we call it “Responsive” design: websites that respond to the environmentt in which they are viewed.
A Look At Responsive Design
Websites using responsive design present navigation and content in a much more accommodating way – a design closely related to the full desktop site. Viewing a responsive site on an iPad or iPhone may show navigation items consolidated into a few items or a menu tab fixed at the top of the site. Images may shift around and shrink or even disappear. Perhaps on your iPhone or Android device, the company logo fills the top portion of the screen with a big “Contact Us” button underneath. But here is the beautiful part: you're still viewing the same exact website. No matter how it changes in layout or appearance, site users are visiting the same website with the same content that is maintained in one place. There is no need for a totally separate mobile site or even an app. Search Engine Optimization becomes even more effective and vital because content is localized in one comprehensive place on the web, serving people on all devices.These design and layout accommodations can make the website experience even easier than browsing in a full-desktop site environment.
A Working Example
Full Media implemented responsive design in a website for Burkett Oil Company, Inc. The full-site uses a jQuery-based photo slider and flexible-width, floated content columns. As the browser width is brought inward, you can see parts sliding, moving, whole blocks shifting and contact information becoming more prominent. We felt that clients learning about this company using their phone’s web browser would be more likely to call if the number was front, center, and easy to touch.
View this project: http://www.burkettoil.com/
For more information on how Full Media helps clients with responsive web design, contact us.
By Ryan Brackett