Blue Utopia Blog

What is Responsive Design? (The Basics)

Wed, May 4, 2016 - 01:43 PM

Responsive design gets a lot of airtime but for people who don’t regularly create websites -- which is a lot of people in the political campaign world -- it’s not always clear what it means. So we’re going to give a quick background and explain the basics.

This post is by no means a full explanation. It does not include the implications on search, or conversion, etc. It is simply a basic description of mobile display and what responsive means for someone just starting to try to figure this out for their own campaigns.

Windows Mobile was relevant and ColdPlay was cool *

In the early days, smartphones were equipped with a mobile browser but website formatting was mostly lost in translation so mobile sites tended to look a little jumbled and much more text-oriented --- buttons were translated to text, containers overlapped or collided and most html was stripped from the mobile site.
* We're just kidding around. Coldplay was never cool.

iPhones, Android and Justin Bieber

Starting in 2007, mobile traffic starts picking up and mobile browsers get much better. Within a year or two, most website CMS's implement technology that makes your standard website to be correctly displayed on a mobile device. This was generally referred to as 'mobile-friendly' and what you ended up with was a pretty nice experience but where you needed to zoom to see the full screen or read small text. Anyone who remembers how great the zoom feature was at the time it was introduced can easily picture this.

The reason you had to zoom was because of the hard-coded width of websites. In the years leading up to this stage, almost all monitors were roughly the same size. As a result, websites were designed with widths that were specific to standard monitors. At about this time, when displaying a website on a mobile device became reasonable, all websites were designed for a regular full-sized monitor.

The result was that your website displayed great but since your mobile screen was only 400px wide and your website was hard-coded to be 900-1280px wide, you'd only see 40-50% of your website at a time. The other content was there. You just had to scroll over to see it. So mobile-friendly is a giant leap forward but text is still hard to read and forms are not easy to complete. Both require scrolling and/or zooming in.

Of course your grandpa has a smartphone and R.I.P. Prince

With responsive design, the website displays differently. Think of it as displaying your content in terms of layers and blocks. In the image below, the objects that are displayed in the monitor are treated more like independent objects (blocks). On a mobile device, the action buttons (which are just to the right of the slider on a desktop monitor) automatically display on the layer below the slider on a mobile device. Same with the containers below the slider - instead of displaying side-by-side, they are displayed on top of each other.

In addition to your content layout responding to the device, there are also rules for text that make your text a readable size on all devices. The end result is a display where all of your original content displays almost exactly as it would on your full monitor but in a very different layout -- typically much more vertical -- that works better on a small mobile device.

  • Share It!