Your website looks amazing. Mobile-first isn’t even in your vocabulary at this point. You painstakingly selected your color palette. You went through at least 20 fonts before you found the perfect pairing to achieve the proper typographical hierarchy. The images make your brand look as awesome as you know it is. Every element is exactly where it should be to create the most excellent impression on users and turn them into subscribers, buyers, or clients.
The site seems perfect… Until you see it on your co-worker’s iPad or your wife’s Android or your own mobile device, and you realize that the site really only looks good and works well on screens exactly the size of the laptop computer you used when you created it.
With about 2 billion smartphone users worldwide, if your website doesn’t perform well across devices, you’re missing a pretty huge chunk of potential business. Don’t panic, though. Optimizing your website’s user experience to work on any device is easier than you think. You just have to start with mobile users in mind.
Mobile-First Web Design
Image Source:www.en.twt-rb.de
Starting your designs with mobile users in mind is called mobile-first design. It might seem counter-intuitive, but if you’re designing a layout for a website, you should start with how the site will look and function on the smallest screen size, and then work outward to larger screen sizes.
If your website makes sense on a smartphone, it’ll probably still make sense on a laptop. However, if you created your website only thinking of larger screen sizes, chances are it won’t have a logical flow on a mobile device, or users will constantly have to scroll and zoom in and out to find the information they want. This leads to a poor user experience and lost business for you.
At its most basic, mobile-first design might just mean that elements on your website align vertically at one screen size and horizontally at another. Travel journalism site Roads & Kingdoms does this with their home page. On smaller screen sizes, their articles align vertically on the screen, but at larger sizes, they align horizontally. Again, this is a very basic example of mobile-first design, but this site is easy to use because it takes into account the number of users who will be visiting it from their mobile devices.
How Do You Create A Site With Mobile-First Design?
Image Source:www.uxmag.com
Like any good design, if we’re creating a good user experience across devices with our website, we have to start with our user in mind. Some questions you want to ask yourself when optimizing your site for mobile are:
- Why do people visit your site? When you clearly understand your visitors’ objectives, you can design your site in a way to make it easy for them to accomplish what they came there for.
- What do you want people to do before they leave your site? Once a visitor lands on your website, it should be clear and easy for them to find this call to action.
These questions are important to ask, mobile or not, but if you know your users’ objectives and your ideal outcomes, then you can build a design across devices that makes this process easier. After you know what you’re designing for, start with what you want your website to look like on the smallest screen. If you’re using a website creator, like Wix, you’ll probably see a phone, tablet, and desktop icon in the website editor. Clicking these icons allows you to see what your site will look like on each of these devices and make changes to them specifically at these screen sizes.
Once you have a pleasing, easy to use site that works for a smartphone, arrange the elements on your website in such a way that your site now looks and works perfectly on a tablet. Finally, when your site is working great on smaller screens, make it excellent for desktop users.
A Few Other Things For Mobile-Friendly Designs
If you consider mobile designs your baseline, your entire site will look better at every screen size. A few more things to keep in mind when designing mobile-first for a visitor-first user experience are:
- Never use a font size lower than 16px. If you want people to read your content, make it easy to see.
- Make your buttons big. People are tapping with their thumbs (the fattest finger), so the bigger the button, the better.
- Simplify everything. Your user should be able to be drunk or completely tech-averse and still navigate the website.
Building a website is a fun process, even if it is challenging. The more you think about your user, the better your site will be, and if you start with mobile in mind, your brand can shine across any device!
