Intro to Responsive Web Design: A Case Study
0
0
0
0
The most popular term at the moment in web design circles could very well be “responsive design”, and for good reason; after all, responsive web design isn’t some meaningless buzzword, it’s a whole new of thinking. Responsive design is all about creating a flexible user experience, which automatically adapts to the user’s device, whether that device is a desktop, laptop, tablet, or smartphone.
It is well known that the average web site visitor is becoming increasingly mobile (in fact, research firm IDC believes that by 2015, more than half of U.S. web users will connect via mobile devices). Many site owners have created mobile versions of their sites, to accommodate this ever-growing sector of their user base. This can do a good job of addressing smartphone users, but typically throws all other devices into the same bucket. Is the the optimal approach, though? Will an interface tailored to a 2560×1600 resolution iMac work optimally for someone connecting via a 768×1024 iPad? Probably not. What if your website could automatically detect what the type and size of device the visitor was using, and present the user with the optimal experience for his/her device? Enter responsive web design.
Responsive web sites are becoming more and more common (you’re actually viewing one right now), but chances are if the site is well designed, you haven’t even been able to tell. This is because the purpose of responsive design is to provide an optimal user experience, no matter what device you are using to connect to it.
One could write an entire book about responsive web design, and several already have. As this post is intended only as an introduction, I have chosen to examine how a popular responsive website, Starbucks.com, adapts to various devices (and screen resolutions).
1. Computer (desktop/laptop)
This is the Starbucks home page that one sees from a desktop or laptop computer, and will essentially serve as the baseline for our examples. The designer has a lot of horizontal space to work with; a wide layout prevents the user from having to scroll much vertically. The search bar is located in the upper right of the page, and each navigation item has a subtitle, allowing Starbucks to elaborate a bit on the links. The slideshow navigation features thumbnails and text, and is located to the right of the slideshow. The “What’s New” features are displayed in a 3×2 grid, and the wide canvas allows the designer to incorporate a sidebar, in this case, social media links and links the recent blog posts. The footer is split into five columns.
2. Tablet (iPad)
Here is the same page when viewed on an iPad in portrait mode. Notice that although much of the layout has changed, the page maintains the same visual style as when viewed on a computer, and all links remain accessable. The search bar has been moved from the upper right of the page to the footer section, and the navigation subtitles have been removed. Both these modifications allow for the slideshow and part of the “What’s New” section to be visible “above the fold,” meaning that one does not need to do any scrolling to see them after the page has loaded. As the designer has a narrower canvas to work with, the slideshow navigation has been moved from the right of to below the main slideshow image, which results in a large, powerful image. The “What’s New” section remains a 3×2 grid, however it now spans the full width of the page, with the social media and blog links now appearing below. The footer retains the same layout as if viewed on a computer.
3. Smartphone (iPhone / Android)
We begin to notice more radical layout changes when the page is viewed via smartphone. In order for the graphical elements on the page to be suitably large for viewing and navigation, responsive web sites typically utilize a single column for devices with a very narrow viewing area, such as iPhones or Android phones. The most major change we see when the Starbucks site is viewed on a smartphone is the conversion of the menu from a horizontal list of links to a vertical list that is only visible after tapping the icon with three horizontal lines (which is now a standard icon on mobile websites). The slideshow spans the full width of the window, and the slideshow navigation has been replaced with simple dots, rather than thumbnail images, which reduces the amount of scrolling needed to navigate the page on a smartphone. The “What’s New” section has been converted to a 1×6 grid, as opposed to the 3×2 setup we see when viewing the site on devices with larger resolutions. The social networking and blog links are displayed directly below. The footer links are presented in a 2-column layout rather than the 5-column one as shown on larger devices, which allows the font size to be large enough to view on small screens.
The Starbucks website illustrates how responsive web design can provide an excellent user experience, incorporating good design practices and accessibliity no matter what device a visitor may use to access the site. As the number of different web-capable devices increases, web site owners will be tasked with ensuring their sites continue to be attractive and functional. The flexible layouts and techniques used in responsive web design provide a great solution to the challenge, now and in the future.
Regal Creative of Milwaukee provides excellent responsive web design services to businesses of all sizes. Is your company’s website up to the challenge of an ever-changing web user base? With our help, it can be; give us a buzz.