How to Spot a Responsive Design Website
By Colin Ryan
About Website Design
Web designers everywhere are extolling the virtues of responsive design for building websites that provide a great browsing experience on both your desktop and mobile devices. But what exactly does a responsive design website look like? Here are a couple examples that should help you spot one in the wild.
First, let’s look at a traditional website, Louisiana.gov, on three different devices.
While the middle section of the page is slightly narrower on the iPad and Galaxy, everything else is pretty much identical. Notice that text is difficult to read and links are nearly impossible to click without zooming in. Because it maintains all the sidebars and widgets on a smaller screen, the page feels cluttered and confusing.
Now let’s look at a responsive design website: TIME.com.
Before we even get to the iPad and Galaxy, it’s clear that this site is more mobile-ready than the first. It’s smaller, simpler, and cleaner than Louisiana.gov. There’s less clutter, less text, and more white space.
Now, looking at the smaller screens, you can see that this site is not static: the layout and elements actually change to accommodate each device. Text wraps and grows or shrinks depending on screen size. Photos are cropped, resized, and rearranged. Sidebars and buttons relocate or disappear. The navigation menu and search bar at the top collapse to a click-to-expand format.
Unlike traditional sites like louisiana.com, which shrink to fit everything onscreen, responsive sites like TIME.com make minor adjustments to maximize the amount of content that’s “above the fold” (i.e., viewable without scrolling or zooming out) without compromising usability. This makes for a site that’s just as easy to consume on your smartphone as it is on your laptop.
Want to learn more about responsive design websites? Check out our free eBook below: Responsive Design for the Real Estate Industry: How to Choose a Mobile Theme That Drives Sales.
Published on April 9, 2013
[eBook] Responsive Design for Real EstateDownload eBook Now Free