The Benefits of Mobile Design in 2019

Preaching the value of mobile has been the rhetoric since internet usage on mobile phones overtook that of desktops back in 2016. Web design agencies and clients alike have adopted responsive design, some are even designing their sites as ‘mobile-first’ to satisfy the change in device usage amongst their target audience. As such, we don’t think you will need convincing that incorporating mobile friendly designs are a good idea, the facts leave very little room for argument. What we want to do is to highlight the difference between responsive and mobile-first designs, the pros and cons of each, and why designing for mobile achieves far more than simply allowing people access to your website from a mobile device.

The Evolution of Mobile Designs

When mobile specific designs were first introduced, they were actually separate websites to their desktop counterparts with an ‘m’ preceding the normal URL (which is why they became known as ‘Mdot’ sites). As an example, our desktop website would display on https://weareyellowball.com, whereas if we had a mobile specific site this would have displayed on https://m.weareyellowball.com. This was useful because it meant that designers were able to create bespoke designs for mobiles and factor in the associated restrictions with mobile at the time. However, it was a nightmare trying to keep them updated and synced with the desktop site from a marketing perspective.In stepped responsive design. Website technology and CSS had developed to allow more fluid elements, essentially allowing blocks to float on the screen and adapt to the screen size of a device. This meant that a website would respond to the device, rather than needing a separate website for each screen resolution. Wonderful. Just wonderful.But it wasn’t (and isn’t) quite right.The issue is that web designers stuck with what they knew. They would design the desktop version as per usual and would then allow it to respond to each device. The problem being that the experience on mobile is somewhat left to chance in how the elements respond and subsequently stack on the screen. Sure, if you’re a bit cleverer you can include/exclude elements and dictate how elements respond and stack on each other.However, this still doesn’t solve the problem. If mobile devices account for more usage, why not design the mobile site as the primary site? Hence ‘mobile-first’ design. It seems like a simple solution that everyone would adopt, but the reality never fits the theory.

Mobile First Design

The main argument of whether to design a website as desktop or mobile first is known as “Graceful Degradation vs Progressive Enhancement”. They stand at polar opposites of the spectrum, albeit both fulfilling the same goal of a website design that is able to adapt to various circumstances. Graceful degradation applies to desktop first, whereas progressive enhancement applies to mobile first. Both terms are actually more often used by the web development community but are still highly applicable to the design process.The question goes something like this: do you add everything you can to a desktop version and strip back for mobile, or do you start with the essentials on mobile and gradually add layers for desktop?There are scenarios in which graceful degradation might be more appropriate, but on the whole it is more effective to utilise a progressive enhancement methodology. After all, it means that you don’t get distracted by all the glitz and glamour of additional features or engaging javascript without delivering on your core objectives. It focusses you on what the user really wants. It’s also just easier to start with something small and add to it, rather than having to choose what to strip away for those pesky smaller devices.Adopting mobile-first design doesn’t just make the mobile experience better, it means that all screen size related iterations of the website have a core focus on usability rather than the potential of a stripped back version that is just ‘acceptable’.

Mobile First Indexing

As the title suggest (rather heavy handedly), mobile-first designs and subsequently progressive enhancement delivers more than just a user’s ability to navigate a website on mobile phones.The largest search engine on the planet, Google, has taken this shift towards mobile very seriously indeed. In 2018 they rolled out their mobile first index – if you read our other blog posts you’ll probably have seen this come up quite a lot! For those of you who do not know, Google now looks at a mobile version of a website before the desktop version to determine how relevant and valuable your website is to any given search query. As such, mobile designs and usability are incredibly important for your website’s SEO.Therefore, being able to ensure that you are delivering content impeccably via a mobile device should, on the whole, be more important than on desktop. There are some businesses that are likely to gain substantially more traffic from desktops than mobile. However, if more people are using mobile, and a major search engine like Google prioritise mobile, why wouldn’t you prioritise mobile design?Again whilst the theory is sound, it is a slightly difficult concept for some to get their heads around. Much like the design community, searchers and consumers alike have spent the majority of their short digitally-led lives searching the web on desktops. Our behaviour may have changed but there is likely something deep down inside of us that still associates using websites with desktops.Perception is not always reality though and, this perception will disappear quicker than Bebo and MySpace. Mobile is the future. So sayeth Google.There are hundreds of factors that need to be carefully thought about and and actioned when it comes to designing for mobile. We have detailed below five factors that are essential to ensure a user friendly website on mobile.

Five factors to focus on when designing for mobile

1. Easy navigation:

If a site is hard to use, the user is more likely to simply leave the site and go back to the Google results page(s). Simple. This principle is particularly relevant for mobile sites, so it is important that your mobile site is as easy to navigate around as possible. With mobile you are working with a much smaller screen, so a clunky and hard to use menu is not going to provide for an enjoyable user experience. This is why burger menus are well suited for mobile use, as the user can choose when to display the site’s menu with a quick tap of the thumb without the menu constantly using precious space on the screen constantly. That said not all burger menus are created equal. Small differences in design can have large impacts in usability, especially on mobile devices. As such, it is important that menus are designed bespokely with the sitemap/content in mind. For example a format that will work perfectly for a single line menu will not work for websites using large mega menus (Multiple dropdowns).

2. Forms

Most websites include a form of some kind as part of their interface; whether it be for creating an account, applying for a job or submitting payment details to complete a purchase. While these forms are usually straightforward on desktops, this is not the case with mobile as you don’t have the added luxury of a large screen and a physical keyboard. As with navigating, forms need to be as easy to use as possible.Where possible, try and avoid manual data input to reduce the amount of information the user has to submit (i.e. using GPS to find the user’s location). In the fields where the user will have to enter information themselves, look for ways to offer a helping hand. You could do this by including “@” and “.com” on your form keyboard and displaying a number pad for the fields that require phone numbers. Also, keep forms as short as possible. For example, there’s no need to have three separate fields for “First Name”, “Middle Name” and “Last Name” when a simple “Full Name” field would suffice.It is essential that forms are sized correctly for mobile, often when websites reduce to mobile screens the form fields are tiny, making it harder for the users to not only see what they are typing but also causing issues when the user is tapping between the fields or trying to use a dropdown function. Ensure that your fields are of sufficient size or look at incorporating large next buttons that automatically allow the user to start typing information into the next available field.

3. Text size:

Optimizing the size of your site’s text for mobile usage is all about finding the right balance. While you don’t want text to be so big that words take up the entire phone screen, you also don’t want your users squinting at their screens to read your content. Google recommend that the text of mobile sites should have a minimum font size of 12 pixels, although we believe body copy should be between 16-19px. We’ll leave it with you to determine what works best for your site. It is worth testing out various font sizes and finding which one is going to deliver the best experience for your user.4. Declutter: As you might have gathered, simplicity is key when designing a site that displays well on mobile. You don’t want to overload your users with a cluttered screen that attempts to mirror your desktop site. Large images, flash video and pop ups will not only increase the load time of your page, but also take up valuable space. However, you also don’t want to create a site that is so bare that the key elements of your site are hidden. Identify the critical components of your website and build from there (progressive enhancement). A clothing retailer, for example, would need to have elements such as product search, product listings and shopping cart at the forefront of their mobile site. Any additional features should be used exclusively for desktop, where the extra space is afforded.5. Finger friendly buttons: With mobile sites, you need to remember that you are designing for the finger, not the mouse. When designing for mobile, it is vital that the buttons throughout the site are big enough to be easily pressed by the user. Buttons that are too small are obviously harder to press, and can sometimes lead to the user pressing the wrong button when dealing with neighbouring targets. This is where Fitts’ Law comes into play. A portion of Fitts’ Law dictates that the bigger a target is the quicker it is to reach. As always, it is important to find a suitable balance and test out various sizes to see what button size best suits your site. Buttons should be big enough for a finger to tap easily – you should also allow for slightly more button width so you can provide the user with a visual feedback such as a small loading wheel. So how big should a button really be? The pixel width of the finger is between 45-57 pixels, while the pixel width of the average thumb is around 72 pixels. Hopefully these numbers provide useful guidance when you come to creating your buttons!Mobile phones and the internet have become an integral part of our daily lives. Whilst apps may throw a spanner in the works, website usage on mobile is continuing to increase. As consumers, expect our expectations to change with this demand. We have already passed the point where websites are expected to function well on mobile. We may not expect websites to function as well as they do on desktop just yet, but that time is rapidly approaching. Mobile designs have simplicity at their heart. As website designers we need to avoid frustration. We need to take into account how Google indexes mobile versions, we need to deliver core functionality with ease, we need to treat mobile as the front runner. Hopefully this article provides some useful tips on call to actions and mobile menu layouts – if you’re ever in doubt, just reach into your pocket and go to a website on your smartphone. We’re all users!