Responsive Web Design: Is Your Website Viewable on Mobile?

How’s It Look? Can You See It? Can You Use It?
Responsive Web Design

[last updated July 2, 2016]

Just about everyone is concerned with making sure their website is viewable across all devices and platforms nowadays. Or they should be. “Will it be mobile friendly?” That’s a question most of our clients ask and if they don’t, we bring up the subject for discussion. Why would you want your hard won resources and time poured into a new website design if it won’t be viewable under so many conditions? You wouldn’t.

When designing a website, it’s common practice for us to consider who your audience is, how to grab their attention and how to make your site aesthetically pleasing and seductive (among many other things), but now we must go further.  Smart phone and tablet usage is on the fast-rise and people are viewing websites as they move around and are on the run. Naturally, this is an important issue for website developers and it’s one we can’t ignore.

Some interesting Google Mobile Friendly algorithm info and stats:

UPDATE July 2, 2106:

The first Google Mobile Friendly algorithm update was announced on April 21, 2015. Quoted on Search Engine Roundtable:

“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

According to Google on March 16, 2016,

“Getting good, relevant answers when you search shouldn’t depend on what device you’re using. You should get the best answer possible, whether you’re on a phone, desktop or tablet. Last year, we started using mobile-friendliness as a ranking signal on mobile searches. Today we’re announcing that beginning in May, we’ll start rolling out an update to mobile search results that increases the effect of the ranking signal to help our users find even more pages that are relevant and mobile-friendly.”

Google’s new user-friendly tool released in early June, 2-16 makes it easier for small businesses to see how their sites rank in terms of being mobile-friendly and speed.

According to Barry Schwartz on Search Engine Land, we can now:

Get all three scores from one test. Receive an email from Google that gives you a comprehensive report that you can share with your team. Receive a 0 out of a 100 score for how mobile-friendly your website is. Better than a simple “yes” or “no” on if it is mobile-friendly or not.

Here’s what you’ll learn the following about your website:

Mobile-friendliness: The quality of the experience your customers have of your website on their phone. The site should have tappable buttons, be easy to navigate from a small screen and have the most important information up front and center.

Mobile speed: This is how long it takes your site to load on mobile devices. This is super important to keep your customers from moving on to another site.

Desktop speed: This is how long it takes your site to load on desktop computers. Your customer’s connection speed isn’t the only factor. Elements of your website determine your site speed.

Data from Adobe in 2013 showed global websites are now getting more traffic from tablets than smartphones, at 8% and 7% of monthly page views respectively.

Jasmine Jaume at smallbusiness.yahoo.com writes:

New stats from Pew Internet Project’s research related to mobile technology show that 91% of American adults have a cell phone, and, for the first time, the majority of Americans (56%) now own a smartphone. Desktop ownership was down to 58% in April last year, whilst 34% of America adults also own a tablet and 26% have an eReader, according to Pew.

Clearly, it is important that your website is mobile accessible.  According to NPD DisplaySearch a marketing research firm, mobile device sales will grow from 347 million units in 2012 to more than 809 million by 2017. Tablets will be leading the way for that massive growth in the next few years.

When you view websites on mobile devices, you are entering new territory.

Let’s break it down:

To avoid over complicating things, let’s just say there are three main branches of mobile websites which include

1. Mobile Optimized websites
2. Mobile Friendly websites
3. And lastly, the newest and most recommended; Responsive Websites.

Mobile Optimized

Mobile optimized sites are those websites that have been purposefully designed and coded for mobile devices.  A mobile optimized website is a condensed format of the original website which usually aims to be highly functional yet simple to use and navigate. At one point this was the best there was and companies were moving to get their websites optimized for mobile, but unfortunately, this can incur unnecessary costs and so the second option was conceived and became the next new big thing.

Mobile Friendly

Mobile friendly websites were next in the lineup because companies could have it all in one package when having their websites developed.  Because of recent trends towards simple design, motivated in part by all of these issues, Mobile Friendly fits right into the context of current design. It will look the same on a desktop or mobile device only smaller. These websites function well if you aren’t concerned with the extra scrolling and zooming needed because the size shift. They tend to focus almost exclusively on the functionality and often prioritize customer-centric information. When a client doesn’t opt for Responsive, websites designed by Fat Eyes are at least Mobile Friendly.

Responsive Web Design

The new trend towards responsive websites has risen increasingly over the last few years.  So what is a responsive website? These are websites that have been specifically designed to optimize their viewing capability on multiple screen sizes and from a variety of different sources including smart televisions, cell phones, tablets, computers, and internet ready media players.

I always like Wikipedia definitions so here it is straight from the horse’s mouth:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Responsive design utilizes various design factors such as flexible layouts, CSS file alternatives and flexible images. It has a “fluid grid” for page sizes so they can adapt to fit almost any device.  Images will also be flexible in order to maximize the use of space on the screen.

Limiting your business website for viewing in only two or three formats can cost you visits and conversions.  Every week there are new devices in new sizes with different operating systems, browsers, and platforms which your website will need to be compatible with. Make sure you are making an informed decision and consider moving towards Responsive in your next website iteration.

photo credit: torbakhopper via photopin cc