The value of mobile has been apparent since internet usage on smartphones surpassed that of desktop computers back in 2016. Agencies such as Xpedia Tyre as well as our clients have revolutionised their websites. We have adopted a responsive design to cater for all devices. Some companies have even designed their websites as ‘mobile-first’, as the majority of their users are in fact coming from browsers on smartphones.

It therefore doesn’t take much convincing to get someone who wants a successful website to consider designing it in a mobile-friendly way. But will a responsive website be enough, or is mobile-only the way to go?

 

How Mobile Designs have Evolved

When smartphone-specific designs were first introduced, we could easily spot them as they were in effect separate websites. They were often hosted on a different directory to the desktop version of the site. For example, many websites had an ‘m’ prefix before the URL. this is why mobile websites became known as ‘Mdot’ sites to people in the industry. For example our website can be found at http://xpediatyre.co.uk/. However, yet if we had a mobile-specific layout for the website it would be accesses at http://m.xpediatyre.co.uk/. At the time this was a useful way of doing things because it meant that web designers could create customised designs for mobile websites. These designs considered the associated restrictions that came with using a website on a smartphone. However it was laborious from a designer’s perspective. And it was a constant battle to keep both the mobile website and the desktop version in sync with each other.

 

Responsive Design

Over the past couple of years, website technology such as CSS have developed to allow much more fluid elements. This means that blocks essentially float on the screen and adapt to the screen size of the device that we are viewing them on. So there’s no need to build a separate website for each screen resolution. The site itself would respond to the device using to view it – hence the term ‘Responsive’ web site.

The only downside to this is that the majority of reputable web designers preferred to stick with what they knew. So they would design the desktop version of a website as per usual. Then they would adapt it so that it responds to the screen sizes of various different devices out there. This meant that the way in which many websites were viewed on a mobile device turned out to be little more than an afterthought.

There were ways around this. Including and excluding particular elements, and telling each element how to behave with the others. But this didn’t really solve the problem. If mobile devices account for the primary usage online, then why are we not designing websites for smartphones first? And then adapted to fit around larger devices? This is where mobile-first design comes in.

 

Mobile First

When it comes to designing a website that’s responsive across all different browsers, there’s one key question:

“Do you create a desktop version and then strip it back to suit mobile devices, or do you create a mobile version with the essentials and then layer it up for desktop devices?”

There are definitely times when starting with a fully-functional desktop-friendly website and stripping it back would be appropriate. However for the majority of projects (including ours), we prefer to progressively enhance the websites from the ground up. This means that we start with the essential foundations, and then layer up for the various larger devices.

Doing things this way means that you can focus on the core objectives of the website. And without us getting too caught up in the glitz, glamour and other exciting features that you can add to a desktop-friendly website. When you design mobile-first you can’t help but focus on what the user really wants. Also, it’s easier and less labour intensive to add to something than it is to create something and then strip it down again.

Mobile-first design improves the mobile experience for the user. It also means that all the items of the website have a core focus on usability and accessibility. As opposed to simply being the afterthought of a stripped-back, ‘acceptable’ version of an otherwise good website.