Want to know the biggest UX mistake a website can make? Not being mobile friendly.
It is estimated that approximately 2 billion people access the internet solely through their smartphone. As mobile usage increases and capabilities become more sophisticated, it is time to embrace the advent of mobile-first design.
If your website isn’t optimised for mobile, your UX will be pitiful and your search engine ranking… even more so. But, if you are eager to adapt to the new age, here is the guide you need to mobile-first design.
What is Mobile-First Design?
Mobile-first design is literally designing for mobiles first. Instead of designing websites for desktops then adapting them to mobile, with the mobile-first design philosophy, the smallest screens are designed first, working up from mobile to tablet and desktop.
Using this method, designers are forced to go back to basics, focus on what is important, and ultimately, create great UX. And we all know, without great UX, your bounce rate will soar.
There are numerous reasons why this is important, however the most prominent is the ever-increasing use of mobiles to view websites. In fact, mobile searches surpassed desktop searches in 2018 (Statistica), highlighting the need for a switch in focus.
Responsive Web Design
A critical feature of mobile-friendly websites is responsive design; whereby websites adjust automatically to fit the device/screen size. Users no longer have to pinch, zoom, crop and scroll themselves; the website sorts itself out.
Here at Squarebird we pride ourselves on our responsive websites. We appreciate users turn to a range of devices to use the internet, and that your site should be compatible with them all.
Want a super-fast responsive website that will get you results? Find out more.
Progressive Advancement vs Graceful Degradation
These two approaches are important to mobile-first design;
Progressive Advancement: where websites are designed for the lower browser (mobile) to ensure the basics are perfected before the design is advanced to desktop.
Graceful Degradation: alternatively, where websites are designed for desktop and given all the advanced capabilities and technical features, then made compatible for mobile, losing features on the way.
Mobile-first design is a textbook example of Progressive Advancement, as it is focusses on key elements for UX, nailing the basics and designed with further advancement in mind. Designing desktop first can lead to degradation of quality, UX and features that don’t translate across devices.
Why do Mobile-First Design?
Aside from the uninspiring term for the opposite method, ‘Graceful Degradation’, there are plenty of reasons why a website should be designed mobile-first. Here are some of the key points:
Mobile use is growing exponentially
As alluded to earlier, mobile phones are everywhere, in every pocket across every country. If a website is not mobile-friendly, think of the huge audiences missing out! The fact that mobiles are even overtaking desktops for internet access shows the need for change.
By putting mobile-first, websites are more accessible, more catered to UX, and therefore, more likely to get results from millions of mobile users across the world.
Mobile-first design = prioritisation
When the screen is smaller and the pixels you have to play with are limited, every word counts. This means designers are forced to evaluate and prioritise content in order to make sure the important bits are seen.
On a desktop website there may be blog posts, testimonials and Twitter feeds on the homepage, however on a mobile-first design these elements are usually some of the first to be pushed to the bottom.
Fear not, the content remains the same across a website regardless of device, just the order and flow may change. It’s all for the good of UX and ensuring CTAs and user action is streamlined by the website design.
See more: Why Your Website Should Drive Conversions and How to Monitor Them
Mobile capabilities
Mobile-first designs are not as limited as some may think. In fact, mobiles provide a lot of capabilities that can be leveraged in designs to get more results for businesses. Features such as iPhone multi-touch input or Google GPS location integration mean that mobile sites are just as dynamic and useful as desktop.
Search engine ranking
Since 2015, Google has been favouring websites that are mobile-friendly and somewhat penalises those that aren’t. Then, in 2018, Google started ‘mobile-first indexing’, i.e. indexing websites on their mobile version and not the desktop version for the first time. This is not to say that only mobile optimised websites rank highly, as desktop sites can if the content is particularly good and catered to SEO, but it certainly helps get a website on page one.
Wondering exactly how Google defines a mobile-friendly website? Here are the criteria:
- Does not use software not commonly found on phones (aka Flash).
- Uses text that can be read without having to zoom in.
- Auto adjusts website content so users don’t have to rotate their screen or zoom.
- Places links an adequate distance apart so it is easy to click on the correct one.
If you are looking to improve your website’s search engine ranking, check out our SEO services!
See more: What is SEO and How Does it Work?
Tips for Mobile-First Design
So, you now know what it is and why it’s important, but now you need some tips on mobile-first design…
Resist mobile-only design
Mobile-first design is not mobile-only. Designers should bear in mind that website designs should be applicable across devices and UX maintained.
Consider journey-driven design
Journey-driven design focuses on the journey users go on to complete their objectives. Considering this approach in mobile-first design can highlight key needs and prominent features to include and where.
Research
Whether you look at how existing customers use your current website or create brand new customer personas, it’s important designers understand who will be using the website and why. This is critical when considering the prioritisation of content. Work out the main intentions users on your website will have and consequently, the information, links and actions they will need.
Combine content
Beyond the design components, a mobile-first website design needs to be carefully constructed in line with content. Get the content strategist involved with designers early to ensure priorities and messaging are consistent. As space is limited in mobile design, content is key!
Make navigation simple
Mobile websites have unique navigation systems and provide a wealth of options in terms of nav bars, dropdowns and menus. The simpler a site is to navigate, the quicker a user finds what you are looking for = happy, converting user.
A large, and often overlooked, component of mobile website navigation are buttons and links. It is critical these are slightly enlarged and easy to select – fingers are far larger than pixel-precise cursors. Anyone who has ever struggled to click a button on a mobile will appreciate the frustration!
Get creative
… of course designers are good at this, but they may feel limited with mobile-first design. For example, designers like to include hovers and mouseover effects to engage users and create dynamic pages, however this function is not available on mobiles.
Test test test!
Having a great mobile-first design is all well and good until you realise the navigation is all muddled, or that the buttons are too small, or that your header image doesn’t translate well to small screens. The only way to know how great a design really is, is to build it and get testing. Importantly, this must be done on a mobile!
Mobile-First Website Design with Squarebird
At Squarebird we adapt with the times, with the understanding that if you can’t keep up with users and their expectations, you will fall behind the competition. So, we help businesses get measurable results, increased conversions and happy customers with slick responsive websites designed for all devices.
If you want to stay ahead of the game and ensure your website is compatible with mobiles, don’t hesitate to get in touch! We work closely with our clients through every stage of the project, from initial consulting and drafting to website build and ongoing marketing activity.