We live in a world of rapidly increasing technology. According to mobiThinking 25% of all internet users in the United States are mobile-only; mobile ad spending amounted to $3.3 billion in 2011 and is projected to be $20.6 billion by 2015; 1 in 7 searches are sent from a mobile device. This amounts to the fact that consumers are accessing websites from their iPhone, Android, Blackberry, iPad, Kindle, netbook, nook, the list goes on. This is not to mention the wide variety of laptop and desktop screen sizes and resolutions. The question becomes this: How do we make sure everyone visiting our website has the same experience? Responsive Web Design.
Responsive Web Design is an approach that says design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation. In the past a separate website would have to be created for each platform or device. This method, while useful, can cost much more to develop and greatly increase the development time of projects. In addition there are so many device sizes now that creating a separate site for each would take far too much time and be so costly it would be near impossible. With responsive design we can now create a site that will respond and scale for an infinite number of devices.
Bellow is an example of the Brushfire site responding to Apple devices.
In the desktop version we have a two column layout on the homepage with our most recent blog post to the left and most recent tweets to the right. Also the menu is in the top right and logo top left.
When we move to the iPad version the two column layout changes to a single column layout. Because we view our blog post as more important than the tweet, the posts show on top. The logo and menu also move to the center for a more centered layout.
Lastly, on the iPhone we keep the single column and centered layout, but because the menu would have to be very small in order to fit to the smaller screen size we ditch the menu and opt for the universal: By clicking on this icon the user is presented with the menu sliding in from the left side.
Images & Font Size
You will also notice the slider with our recent portfolio items scales to fit the screen size of each device. With responsive design we can make images scale to fit any resolution, no more images taking over the entire screen on smaller devices. In addition to the layout changing slightly for each resolution we also optimized the font sizes for each size. No more zooming in and scrolling around to be able to read the text. The text should be easily readable the second the user gets to the page.
While responsive design is wonderful it still does not address every issue. However, while combining responsive design with other design and development practices, a great user experience can be achieved no matter the platform or device.