Why You Should Make Your Content Look Great on All Devices

Today, responsive web design is a way for developers to create smooth transitions between various viewport sizes using media queries. The media queries tell the browser, if a person is viewing from 320px width device, look like this (a condensed version of the desktop version to fit a mobile phone).

Desktop, tablet and mobile phones are common devices we see today. Within those 3 categories, each have different resolution sizes. For example, the different resolution size between an iPhone5 (1136 x 640 pixels) and a Galaxy S4 (1080 x 1920 pixels).

Responsive Web Design was created to comply with future devices and even accommodate older devices without having to create HTML markup for desktop, tablet or mobile.

Know thy user

Before even considering a responsive website, it is important to understand who will be viewing your website and on what device. For example, I almost always look up restaurant locations and hours through my iPhone or iPad.

In “Mobile Path-to-Purchase” it was found that mobile search behavior – by people who search the Internet for good food using their phones or tablets – has a nearly 90 percent conversion rate.

So if you are in the food business it is probably a good idea to have a mobile and tablet version of your full site.

Knowing your user will help you decide how to build a user-friendly site. In many cases, having a fixed site will be the best solution if most users view your site on a computer.

In some cases, designers will choose Mobile First, creating an HTML markup and CSS of a mobile version and then build up to tablet and desktop.

I love Joshua Johnson’s insight on Mobile First: Why it’s great and why it sucks. Again, there are so many approaches to consider but understanding who you will serve your content, will help make the best decision.

Displaying content properly on each device

In responsive design we develop a full version of desktop and use degradation to minimize the content that is served on a tablet and mobile.

Let’s examine Enochs, a beautiful responsive website in the UK. Go ahead and grab the bottom right corner of your screen and move it in and out. Take a look at how the content moves around and how the navigation changes.

The nav goes from a single row navigation, to a two-column two-row. Then in the mobile, they keep the two-column two-row but include it between the header image and intro paragraph.

What about the rest of the layout?

There are no really big differences between desktop to tablet version. The biggest change in layout is in the mobile version, which you see all the content stacks to fit the width of the mobile.

Did you see how long the mobile page gets? Yeah, I know, I hate scrolling infinitely to get to the never-ending bottom too. They have placed an anchor on all versions of the website which takes you back to the top navigation. Even with the anchor, it does not help because all that content on the desktop is not needed on the tablet and mobile version.

This is what I mean about displaying the content properly. A mobile user just needs certain amount of content that is most important. In my example, they display the interactive game, as shown on tv, etc..

A mobile user is probably just looking for the menu or contact information. Did they really need to keep all that content?

Hiding content can cause slower loading

Just like in Joshua Johnson’s blog post, he and several developers have agreed that one con to responsive design is that you can hide content from the desktop to display certain things on the mobile site.

You can hide content through your CSS stylesheets but it will still upload all the HTML content. Since they share the same HTML markup it can make mobile user experience slow. This is a side effect to responsive design that could be solved through mobile first.

Building minimally and progressing

Using mobile first approach is a backwards process in which developers focus on the mobile design first. This allows designers to prioritize content into its simplest form — mobile — and then have it respond to larger devices.

Many choose to design for mobile first, so that they do not design a heavy-content site on desktop and then have to “hide” content.

Offer the right flavor

Now it’s your decision to choose the best solution in building a website. Understand who your market is by researching how many users access your content through what devices. Take advantage of what responsive design can do for your company.

Reach out to your consumer, hold their hand and walk them through your web content. Do not let them to wander to other sites because you gave them a banana split sundae when all they wanted was an ice cream cone. Yes, it’s true that they cannot always get the flavor they want but it is your job to give them several choices to fit their needs.

Be the right flavor from the start by researching what they like. Be dynamic, go responsive.