Designing Websites for the Mobile Web

Published by Posted on

More and more business is being conducted on the internet these days, and getting online is easier than ever thanks to mobile technology like smartphones.

It used to be that accessing the internet from your mobile device was a novelty, but today it’s commonplace. In 2015, 85% of young adults in America were smartphone users, and a staggering 97% of people in this group used their smartphone to access the internet on a regular basis.

Percentages of adults that own or have access to a smartphone and mobile internet
The Smartphone Dependant Population. Stats by Pew Research Centre 2014

Clearly, the generation poised to inherit the world relies heavily on mobile technology for getting information and conducting business.

The implication of such a fact is obvious: companies who hope to remain competitive in the future will have to make themselves as mobile friendly as possible.

Responsive design

Designing responsive websites is quite easy provided you know what you are doing.

Quite often we speak to fantastic designers who work solely with print based applications and then try to design for the web. Because they are different, they end up running into issues. Designing for the web is very similar to print however some parts simply must be taken into consideration.

These considerations are especially important if you are designing for the mobile web where multiple screen sizes come in to play.

I am going to demonstrate some best practices to ensure your next design will work great on the web.

Firstly, we should clarify what responsive web design is. Here is a quick demonstration video:

The biggest thing to keep in mind is that when you design a website for mobile and desktop users, you are actually designing for hundreds of different screen sizes.

Gone are the days where you can build one layout at a fixed size and have it work across every visitors devices. Your design needs to scale and adapt to be usable on all devices. What might be an easy website to use on a large computer screen might be almost impossible to use on a mobile phone and Vice versa.

To overcome this challenge, it is important to ensure that your design has been built in a way that will adapt to different screen sizes. This is where responsive web design comes in. Using a responsive grid system will surely help.

Grid systems

All professionally built websites will utilise a grid system in one way or another to ensure all objects are in-line and consistent with each other. Grid systems help to enhance the visual experience for visitors and also helps them follow the consistency of the site as a whole.

Web3 Case Studies Grid
Web3 uses a 3 column grid layout on our case studies page.

Not only are grid systems good for usability sake, they help us website developers when building the layout so that it is well thought-out and consistent.

There is a lot of theory behind grid systems. Developing grids is all about numbers, proportions, and other equally unsavoury things.

To keep it simple, just remember that a grid is made up of consistently sized squares or rectangles across the page. These columns will span down the page in different rows. If your grid system is using a responsive approach, it will rearrange these columns to fit the screen size.

For example, If your page is using 4 columns on a desktop, it may push the next 2 columns down underneath to accommodate more room horizontally.

Web3 case studies mobile and desktop layouts

When it comes to designing, often it is thought to be about freedom and expression. The idea of using a calculator during design is not the sexiest of ideas. As a result, we often tend to drop the subject.

Grids take work and planning and it is often thought that it would put a halt to the creative process. This is simply not the case and all successful websites will use a grid in one way or another.

Here is what a general website usually looks like in its most basic form laid out in a grid:

Notice that it is using a very strong, well thought out grid system. This sort of planing is what will ensure your website works across all of its pages.

Does your website work for your business?

Your website should be number one at sales and marketing your business. If not, you need one that is.

I need a better website


Here is 2 of the most visited websites in Australia that use grid systems:

Apple Web Design using grid systems
Apple Australia using a 6 column grid system
Yahoo Web Design using a grid system
Yahoo!7 Also using a grid system spanning across 3 columns.

To start designing websites in a grid you should use representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page.

Be sure to decide how many columns the page will have. Once you have created the layout, ask yourself “do the elements on this page look consistent with each other”. You will then want to ask “Will this general layout be able to be used on each additional page I want to include on my site?”

You want to aim to have consistent and logical layouts across your site to ensure a good usability flow for visitors. The aim after all is to direct users to the content that you want them to either read or take action upon.

Once the general layout has been decided upon, you should be able to put your text and graphics into the page without having to stop and rethink the basic design approach when creating a new page.

Well designed grid systems can make your designs not only more beautiful and legible, but more usable.

Gutters

Gutters are the gaps or “padding” in between each column. They are there so both text and images from different columns don’t run into each other and have room to breathe.

Make sure your columns have gutters in-between them. Which image below is easier to read?

Web Design without Gutters
This grid system is not using gutters
Web Design with Gutters
This grid system is using gutters

Mobile Web Best Practices

Use a grid system. Add spacing in-between the columns and make sure your design is going to be usable across all screen layouts.

Designing a website layout:

  1. Divide page into even horizontal columns
  2. Add spacing between columns
  3. Start designing and stick to putting content in the columns.

I hope that helps when designing your next website layout. Are there any additional requirements you follow when designing your website?

Yes sure there are dozens of factors. Let us know your favourite in the comments below.

What does getting mobile-friendly mean today?

At this point, one of the biggest steps a company can take is to optimise its website for mobile use (if it hasn’t already done so). If you’re the designer for such a company, this could mean several things: you might want to tweak your existing mobile site, or construct a brand new mobile-friendly page from scratch.

Since smartphones are evolving extremely quickly, a page from several years ago may no longer be sufficient to keep up with new tools and features that users will expect to be supported.

5g mobile connected to devices

Here’s an example: since 4K resolution displays and 5G network capabilities are set to become the new normal, mobile devices are going to be able to access a lot more visual content than they were able to in previous years.

This doesn’t mean that users will be accessing desktop pages with their smartphones, though, because studies show that the same people are drawn to different kinds of content depending on how they access the web.

Building for the mobile web

Smartphone users have always been partial to content with plenty of images and short videos, so the fewer restrictions they face in terms of bandwidth and speed, the more you can expect this type of content to thrive.

What happens if I don’t optimise my site for mobile use?

There’s another huge reason that businesses need to have mobile-friendly websites, and that’s Google.

An algorithm update imposed major penalties on websites that didn’t match Google’s criteria for mobile-friendliness, causing a drop in rankings for almost half of all non-mobile friendly URLs.

Mobilegeddon mythical depiction

At first, many people dismissed the consequences of “Mobilegeddon” (as it was called), but many quickly realised their mistake when the hard data arrived. The evidence didn’t lie: good mobile design helped businesses, while poor design (or none at all) proved to be detrimental.

With the number of people accessing websites from smartphones, the growing trend in mobile technology to embrace and enhance internet access, and the cost of not having an up-to-date mobile site, your question as a marketer shouldn’t be whether or not to have one.

Rather, you should be asking yourself how you can design the best mobile site possible. You’ll also want to keep an eye out for other articles and sources of information on new mobile trends as time goes by.

Keeping up with new technology means you’ll be the first to acquire the customers who use it.

How is your business adapting to the mobile world we live in today?

Leave a comment below and let’s start a discussion on all things mobile.

Joseph Chesterton

Published by

Co-founder and managing director at Web3. You’ll find me taking care or all the technical and developmental aspects at Web3. I ensure every WordPress website we build is powerful and high performing so that you can have the fastest and best website investment possible. I also teach WordPress at WP Absolute and help businesses grow through better workspace software at Lemodus.

Speed Up WordPress ebook cover

Your Free eBook: 99 Ways to Speed Up Your WordPress Website

Nearly half of the internet expects your site to load in 2 seconds or less. If you want to speed up WordPress and generate more sales, this guide is absolutely critical for you. In this eBook, you will discover:

  • 99 actionable ways to make your WordPress site load faster
  • Actionable tips on how to optimise your design for speed
  • Detailed guides on how to write better performing code
  • And much, much more…

Complete the field below to receive your free copy!

  • This field is for validation purposes and should be left unchanged.