2015 Guide To Mobile Responsive Web Design

Author: from Click Engine

Responsive web design is a technique that allows your website to be viewed properly on mobile, tablet and desktop devices. Only a few years ago, websites only needed to be one size because desktop and laptop computers were the only devices capable of displaying them. This meant that a website had a standard width of 900px. This of course all changed with the introduction of the iPhone, with the need to cater to this ever-growing market. As of today, more than half of all websites are viewed on a mobile device, yet about 70% of websites are only designed to be viewed on a desktop or laptop. So as we delve into what is the awesomeness of responsive web design, the benefit for businesses to adopt this technology will become more and more apparent (if not already!). 

 Responsive Web Design

 

1. The Grid System

Ok, I will admit this is a bit of a crash course in responsive web design if you’re not a web designer, but remember that knowledge is power and knowing the basics of how your website should be performing is very important. The grid system is the basis of all responsive websites and allows the designer to decide how the layout of the website will look on different sized devices. There are a few different ways of doing this but we will explain the technique we use at Click Engine. The grid is basically 12 imaginary columns running the entire length (height) of the website. So let’s look at a basic example; on a mobile device I want a picture to take up the whole width of the screen, but on a desktop I only want it to take up half the width of the screen. So using the 12 column grid system, I would make the picture 12 columns wide on the mobile device and 6 columns wide on the desktop device. So the next thing we need to understand is how does the website knows when to show the correct sized picture.

 

 

 

2. Media Queries

Media query means “if the user is looking at my website on a particular sized device then show this…” So when we write a media query code on a website, this is how the website in the Grid system example would know to show a 12 column picture on a mobile and a 6 column picture on a desktop. Media queries also give us added control beyond the grid system and let us control literally everything on the website page so we can customize it for a specific device size. Now before you say “yeah great but there’s like a 100 different device sizes out there, this would take you forever”, we actually create media queries for just three size ranges; mobile, tablet and desktop devices. We can change the size of the font, the position of a form or even hide a picture if we think it takes up too much room on a mobile device but then show it on a desktop device instead. Even the file size of a picture can be changed so that it’s smaller on a mobile device and doesn’t take a long time to download and slow down your website.

 


 Illustration: Foundation

3. Mobile First Design

The latest trend in responsive design is to design the mobile layout first and then change the layout for the larger devices. This at first may seem odd but let me explain. Firstly, if the majority of your customers are viewing your website on a mobile device (which is more than likely the case) then it makes sense fro the designer to invest their time into perfecting the mobile version, before moving onto the tablet and desktop versions. It still amazes me that the majority of websites that are actually responsive look and function poorly on a mobile device, and this would be most likely because the designer created the mobile version as an after thought and prioritized their time in perfecting the desktop version. Secondly, from a coding point of view, it does make it a lot faster to build a website based on a mobile version and then write media queries to override anything you want to change for larger devices. At Click Engine we use a great open source platform called Foundation, and the benefit of this is that it’s been developed by super smart people that have tested its’ functionality across all major browsers. As you can see below, mobile internet usage is now #1 in the world.

 Mobile Internet Usage 2015

Photo: comScore 

4. Menus

A menu’s just a menu right? Well, not anymore! Because there is not enough space for a traditional desktop navigation menu on a mobile, we need to change the menu to fit on the screen. The most popular way of doing this is having the entire menu as a dropdown list, however techniques on this are evolving. One of the trends is to have the menu slide out from the side of the screen, and another is to show the traditional desktop menu all in a single column. The real test to know which one is best for your website is to look at your Google Analytics which will tell you if people are using your menu or not. It also depends on your type of website; if it’s a news website you might want the menu not hidden so users are encouraged to click on different topics, however if you have a website that is designed to generate leads (capture a potential customers contact information) then keeping them focused on the content of the page and having a dropdown menu instead may be more beneficial. We’ve drifted into page optimisation territory here but I thought it was worth mentioning and an important development to keep an eye on.

 

  

5. Retina Display Devices

I see great websites get reduced to mediocre websites all the time when I look at them on an any of my iPhone and iPad as they are retina display devices. This basically means that items such as logos and any other illustrations that aren’t photos (in other words .png and .gif files) appear blurry! This is because the iPhone is displaying twice as many pixels in a logo that is was designed for, which makes everything else on your iPhone look beautiful, but not your logo. So the traditional way of fixing this is to write a time consuming media query and make a second logo for it. However, in recent times we can simply use a different file type called .svg and it will be nice and crisp on all devices no matter their size. So, if you have a website that has blurry logos and illustrations, email your web designer now and kindly ask them to convert them to .svg files. You’re welcome! 

Traditional .png file as seen on a retina display device

Modern .svg file as seen on a retina display device

6. The Future Of Responsive Web Design

Just as we get our heads around the real importance of responsive design, the factor that will drive future design standards will be what we can learn from the way visitors interact with our websites. Quite simply, the way consumers prefer to use the website will be the way we will design it. Other indicators to observe are how Apple and Android apps familiarize customers with their standards in navigation and layout structure, as this can transcend into what consumers will be comfortable with when looking at a normal website on a mobile. Last but not least, Google recently brought out an algorithm update that rocked the web design world, giving priority search result rankings on mobile devices to websites that it deemed to be mobile friendly. That is a design lesson in itself, always design what’s best for the user and your business will eventually be rewarded for it. I call it digital karma.

RECENT POSTS
TAGS