Since the advent of smartphones and 3G connections, the Internet has become a mobile-first world for a lot of industries. Overall the stats for split between mobile and desktop devices is roughly 50/50 in the Western world. But when you strip out work related activities, and bring in countries such as India which is heavily dominated by mobile devices, a smartphone is the prominent means of accessing the Internet for most people.
This has caused a revolution in design and development approaches when it comes to websites and Internet-related applications. Where previously you were designing for 1024×768 screens, with ample space for images, text and buttons, now you’re not only designing for a much smaller space, but also having to cater for a whole range of screen sizes of devices your website could be viewed on.
A responsive approach
This began with responsive design. Building a design that evolved as the screen size adjusted so you could cater for any new device that came along. However in the early days this was still very much built from a starting point of a desktop monitor, and scaling down assets as the screen size reduced. It was still a Desktop first approach.
Moving to mobile-first design
As many industries and businesses are now seeing their website traffic dominated by mobile devices, the approach needs to change again; to that of mobile first: Designing a website which is still responsive to screen size, but with the starting point and a focus on its functionality being optimised for mobiles as the primary user devices. Essentially, starting with the mobile screen and working up from there.
What does this mean for website design?
A focus on page file size
As previously blogged about page speed is an increasingly important consideration for user experience and search engine optimisation. This is largely due to the growth in mobile internet and people’s reliance on mobile networks to download web pages. Image heavy pages are out, lightweight pages with content that works on smaller screens are in.
A change in navigations
In the desktop-first, responsive world, designs used two website navigations. One for desktop and wider screens and a different one for mobile devices. With break points where they changed. More and more we will see what we considered to be mobile menu icons appearing on desktop versions of the websites too.
More space around buttons
Your desktop mouse is a precise tool. You can click on a precise location on the screen without too much effort and near 100% accuracy. Your fingers are slightly less precise. In order to aid the accuracy and reduce misplaced clicks, more white space is applied around buttons and clickable areas on a mobile design.
Reduced reliance on hovers
A lot of nice design elements rely on the position of the mouse cursor and a change of state when it hovers over a point. This hover state doesn’t exist in a mobile world as there is no cursor. So if you have any elements which rely on it, they won’t be part of a mobile-first design.
Where do you start?
In many cases, if you have a responsive website you will probably find that it suffices unless you want a redesign or rework of your online presence. Once you reach that point you need to shift your thinking from people viewing your website on a large desktop screen and ultra fast Internet connection, to those on smaller screen and a 3G/4G one. It is a small shift in mindset but has big implications for how you approach a design project.