Redesigning Your Business Site for the Mobile Era

Mobile-first design explained

Mobile-First Web Design Explained

Smartphone Users Now Dominate

Google’s latest update reflects a changing digital world, a world that has quickly become dominated by smartphone use. Take a look at this graphic as an example of how quickly the landscape is shifting from desktop/laptop use to smartphone & tablets:

chavan-whitehouse-2015-04-007

What this means for your business, is that if your website doesn’t provide an excellent user experience on a smartphone sized screen, you are losing business to a competitor who’s website does.

Fortunately, the solution has been in development for a while now and it’s called “Mobile-First Design”.

Mobile-first design is the complete opposite approach from the way web design was practiced when I started back in 1998. Back then the goal was a rich user experience, with maximum bells and whistles, with lots of Flash animation and wow-factor. The trend in those days was larger and larger screens, with visually impressive graphics intended to make good use of all those pixels.

Those days are long gone.

How Does Mobile-First Web Design Work?

Mobile-first design starts with a concept that will allow for an easy and engaging user experience (UX) on a small mobile screen. Graphics are minimal, images shrunk down. Menus are abbreviated and text should appear at a size that is easy to read and uncluttered.

From here, through something in the code called ‘media queries’, multiple versions of your website are all present in your code, one for mobile, one for tablets, one for laptops and lastly one for huge screens. Though it’s true that you can add back in those bells and whistles in the versions designed for larger screen sizes, you can see from the above traffic trends that your ROI for that effort is diminishing, since most of your visits now will come from smaller screen sizes.

Here’s a graphic showing how a website layout is re-arranged by the code to display differently based on screen size:

m-d

 

As you can see the elements change size and position, in order to best populate various screen sizes. These adjustments tailor the UX for each screen size, automatically, once the website code detects what platform a user is viewing the site from.

 

Mobile-First Web Design Explained

Mobile-First Web Design Explained

Smartphone Users Now Dominate

Google’s latest algorithm update reflects a changing digital world, a world that has quickly become dominated by smartphone use. Take a look at this graphic as an example of how quickly the landscape is shifting from desktop/laptop use to smartphone & tablets:

chavan-whitehouse-2015-04-007

What this means for your business is that if your website doesn’t provide an excellent user experience (UX) on a smartphone sized touchscreen, you are losing business to a competitor that does have a such a website.

Fortunately, the solution has been in development for a while now and it’s called “Mobile-First Design”.

Mobile-first design is the complete opposite approach from the way web design was practiced when I started back in 1998. Back then the goal was a rich user experience, with maximum bells and whistles, with lots of Flash animation and wow-factor. The trend in those days was larger and larger screens, with visually impressive graphics intended to make good use of all those pixels.

Those days are long gone.

How Does Mobile-First Web Design Work?

Mobile-first design starts with a minimal version of your site’s calls to actions and content, allowing for an easy and engaging user experience on a small mobile screen. Graphics are minimal, images shrink down. Menus are abbreviated and text should appear at a size that is easy to read and uncluttered. Adobe Flash has become obsolete, but thanks to HTML5 and CSS3 animation can still be used.

From here, through something in the code called ‘media queries’, multiple versions of your website are all present in this type of design, one for mobile, one for tablets, one for laptops and lastly one for huge screens. This concept is referred to as ‘responsive design’ and should be clearly mentioned in any design you consider when updating. Though it’s true that you can add back in those bells and whistles in the versions designed for larger screen sizes, you can see from the above traffic trends that your ROI for that effort is diminishing, since most of your visits now will come from smaller screen sizes.

Here’s a graphic showing how a ‘responsive’ layout’s code re-arranges a web design to display differently based on screen size:

m-d

As you can see the text and image elements change size and position, in order to best populate various screen sizes. These adjustments tailor the UX for each screen size automatically, once the website code detects what platform a user is viewing the site from. You can use seattletechsolutions.com as a good example of this effect: try viewing this article on your smartphone, then compare it with the version that appears on your laptop or desktop computer.

How Does Your Website Rate?

You can start by checking your website with Google’s own tool designed to tell you whether your site measures up or not. If it doesn’t, you need a new site design. Though you can spend money on converting what you have to be compliant with this new standard, this paradigm shift is so massive that it’s likely a new design from the ground up designed for a mobile-first world is a better choice in the long run. You can still use your previous content in the new design, after whittling your page’s functionality down to the bare minimum essentials.

We Can Help

At Seattle Tech Solutions, we take a big picture approach to our clients’ operations with the goal of getting their sales to the next level, including mobile-first redesigns. If you’d like help getting your website converted to the new mobile-first standard, give us a call or shoot us an email today for an initial consultation and estimate.