Real Estate Marketing Academy

How to Spot a Responsive Design Website

By Colin Ryan

About

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.

MacBook Pro:

iPad:

Galaxy SIII:

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.

MacBook Pro:

an example of a responsive website

iPad:

example of a responsive design website

Galaxy SIII:

example of a responsive design website

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.

[eBook] Responsive Design for Real Estate

Download eBook Now

Related Articles

featured image- best real estate plays 2017 The Best Real Estate Marketing Plays from 2017
real estate website design Real Estate Website Design Tips from BrandCo's Ken Granger
responsive real estate website design 6 Reasons a Responsive Real Estate Website Will Improve Your Business
responsive websites will help grow your business How a Responsive Website Will Help You Grow Your Real Estate Business

Comments

Get our Newsletter Follow Placester