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.
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.
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.
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.
Earlier this year, we began seeing more traffic to our client websites coming from mobile devices. As a result, we began revising our website templates. Today, we we’re happy to launch Blue Utopia’s new web publishing system. Like the previous award-winning system, the new system allows you to create a great-looking website with an enormous number of features in literally just a few clicks. Unlike the previous system though, the websites are now all mobile friendly, and come with a lot of new enhancements.
Highlights of what’s new:
Mobile Display. The new system makes use of a new templating system that automatically responds to your visitors' device --- pc, mobile, tablet, etc -- and displays properly on any device.
Hundreds of canned options. There about 20 color themes for every template, meaning you can select from about 250 different template+theme options by doing nothing more than making two selections. This makes is very easy for the novice to publish a full great-looking site.
Easy Basic Customizations. If the above themes don’t give you the exact look you’re looking for, we have now implemented LESS variable system. This allows you to choose colors, fonts, background images and more and automatically update your css files. This gives a lot of control over your look and feel without having to modify css files directly, making it perfect for the intermediate user.
Much More Flexibility. You now have the ability to leave your css files (those that control the look of your site) in the cloud and take full advantage of our continuous improvements. We are constantly tweaking and making our templates better and when you rely on these cloud files, you automatically get the benefits. However, some webmasters want more control over customization and now your webmaster can download the css files locally and make comprehensive customizations. This gives your advanced webmaster much more control than they've had in the past.
To learn more about our website system, go to blueutopia.com/website
Current Clients. This upgrade is included at no cost. So if you are thinking about an upgrade to your site, this is a great opportunity to get it. We will even help you do it. Simply start a support case, let us know you want to go through this template upgrade process and we’ll prepare your system.
For a long time, in the early phases of mobile, it was enough if your website displayed okay but required the user to zoom in, for instance, fill out a form or read longer text. In Apirl 2015 though, Google changed the conversation about mobile, making it clear to all that it was time for companies that derived traffic from mobile to take the stet of being mobile-friendly, not just display on mobile device without breaking. I wrote about that effort from Google and what it meant here.
So if you have a website or need to put one up soon, do you really need to care and what does mobile-friendly mean?
Do you need to care? The answer is probably yes. At this point, pretty much everyone who generates website traffic gets at least a reasonable part of their traffic from mobile. Some more and some less but even those that are not very mobile-centric are still probably getting enough traffic to matter. We wrote about mobile traffic here.
The next question is what does mobile-friendly mean? For this, there is a list of things that are required. Not every item is required to be considered mobile-friendly but the more you have the better your site will display and perform.
OPTIONAL BUT IMPORTANT FOR THE USER EXPEREINCE:
Is your site mobile friendly? You can test it here: https://www.google.com/webmasters/tools/mobile-friendly/
In April 2015 Google announced it was updating its search algorithm to show preference for sites that were mobile-friendly. This announcement brought some real panic and craziness for a while but has since settled a bit. I wrote about the actual impacts of this change here.
In short, most of the panic about Google’s changes was unwarranted. However, the announcement did usher in some useful milestones.
For years we’ve been hearing about the dominance of mobile. Mobile was where it was at. All mobile, all the time. But how much do you need to care about mobile? The answer has been, it depends – it depends mostly, on how much of your traffic is mobile.
There is no shortage of reports about overall mobile traffic. One report by ComScore in 2014 noted that 60% of all traffic was coming from mobile devices but that was for all traffic, including from mobile apps. Another study by The Brick Factory, which serves the political space, pegged mobile traffic in the range of 20%. Here at Blue Utopia, we run websites for hundreds of political clients and have seen mobile traffic grow from around 8% in 2014 to around 18% in 2016. That’s considerably less than the rates seen for news and media, as you would expect, but probably more in line with the expectations for a political campaign website.
So back to the question of whether you need to care or not. Up until 2015, the vast majority of mobile traffic was to core activities like mobile apps and news and entertainment, which are inhernetly aligned with the consumption of mobile content. But starting in 2015, mobile behavior began to spill over into other areas, including campaign websitess. Thus the doubling of mobile traffic we've seen here with our own client web traffic. In 2015, we launched all new mobile-friendly website templates.
We wrote about what mobile-friendly actualy means here.
To see if your own website is mobile-friendly, plug in your domain into the testing tool here: