Mobile first: Where UX designers are still going wrong with dynamic sites

It’s been nearly a decade since Google announced ‘Mobile First’ – its strategy to focus on mobile internet services, rather than desktop. Ten years and we’re still not thinking about mobiles until long after we’ve designed our desktop sites.

According to the Global Stats StatCounter, almost 51% of all internet traffic worldwide in the last 12 months was on a mobile phone. Meanwhile, another report says that Google data shows more than 60% of organic search is done on a phone. As to your social media advertising, around 80% of social media access comes from mobile say Smart Insights.

With these kind of stats not only reported, but increasing year-on-year, it’s becoming obvious that ‘mobile first’ is reaching its zenith and we’ll soon need to start thinking ‘mobile only’.

This is especially relevant with the advent of technologies like Samsung DeX – a mobile that plugs into a monitor and keyboard, and acts as the hard disk to a basic PC – and Chromecast, which lets you fling video from your mobile screen onto the nearest monitor like you’re in a sci-fi movie.

It’s pretty clear that the way things are headed is for all our data to be stored in the cloud and accessed through tiny devices we keep in our pockets, rather than having a home office with a desk, keyboard and monitor.

As such, designing your tools for your users as websites with an ancillary mobile version or app just isn’t enough any more. We should be designing apps and mobile sites first, with desktop sites the secondary consideration.

Take Twitter as an example. Their desktop interface was recently updated to the below:

Shrink your window down and the trending column on the right disappears and the menu on the left cuts down to just icons. In this state, it’s almost indistinguishable from the Twitter app interface. One dynamic design that works across any device – economical for your development time and also recognisable to the user.

In addition to this, Google’s Mobile First strategy means that its algorithm prefers sites that are designed for mobile. This means changing your design to a dynamic or mobile layout will actually improve your search ranking; and it might improve your conversion too.

Econsultancy and Shopify surveys confirm the rational assumption that shorter checkout processes mean fewer customers abandon their purchase half done. Mobile sites have shorter checkouts and options for quick payment, such as Google or Apply Pay.

Generally, there’s nothing to be lost and a lot to be gained from a mobile-first design process; but how exactly is designing for mobile different from designing for websites?

Break the rules

When you’re building an app, you’re not defined by how your users’ browsers work. You’re still limited by the OS and rules of the app store of the users’ phones, but the actual user journey and UI is completely up to you.

You don’t need a standard landing page and introduction as your users have already found and downloaded your app, so you’re free to throw something truly unique at them from the first moment. Be brave, be daring. Make that first time the user opens the app something really memorable.

Spotify’s app, for example, opens to a full-screen video of a hipster paradise playing behind the login options:

Keep it brief

It’s not true that users won’t read long text on a mobile, though I’m sure you’ve heard it a lot. Everyone reads Kindle books on their mobile during their commute, and – if you’re anything like me – you read long Buzzfeed and Cracked articles on your phone when you really should be doing something else.

What is true, however, is that users making purchases on their phones are usually doing it on the go and making that process as quick and simple as possible will ease their frustration. That means, short, clear, useful text; helpful imagery; and exemplary UX design, minimising taps and optimising the user journey. No pressure.

Tapping not clicking

To optimise a UI for mobile, you have to change your toolkit. Drop-down menus are painful to use on a touch screen, and there’s no need at all to use them when you have options like auto-fill, audio input, Google Assistant, Apple Pay, location services and haptic responses.

Likewise, you can’t just have all your links underline when the mouse hovers over them – no mouse. As such, your navigation has to be signposted in an intuitive way. Big, finger-sized buttons, just at thumb’s reach and carousels with encroaching content that you can see needs to be swiped onto the screen.

Make it quick

Keeping your UI lean so it loads quickly and users don’t give up is perhaps the most important part of UX design. I’ve spoken before about how sites like Craigslist stay popular by being simple, quick and practical, rather than pretty or high-tech. That applies even more to mobile design.

Users may sit down at a desktop computer with the intention of spending some time booking a holiday or finding the right car; but they whip out their mobile for instant results in the two minutes they have before they reach their bus stop. Your app is on a countdown timer to get your customer through that checkout process before they have to put their phone down, so make sure it doesn’t take too long.

NOW think desktop

Once you have a mobile site that fits all those specifications, then you can start thinking about offering desktop access. When you do though, you site will get an SEO boost from Mobile First, it will have a unique interface and navigation, punchy content and a super-fast checkout – all very good things.

Not to mention, with your site designed for a small, portrait screen, it will already look great on tablets and touch-screen laptops, as well as being prepared to dynamically fit browser windows that aren’t being run full screen.

With all of this in mind, you have to ask yourself why we’re still designing mobile versions as an afterthought, or worse, just a portrait version of the desktop site. So next time you think about designing a UI, think mobile first and then figure out if you really even need a desktop site.