In what seems like a few short years, mobile devices have overtaken desktop as the top source of web traffic.
More than half of the visitors to your site will be using their phones or tablets. It’s pretty clear that your business needs a mobile-optimized website.
So how do you get started? Here are some mobile design tips to keep in mind when developing your site.
Use Responsive Design
When smartphones first started to find their ways into people’s pockets, mobile web browsing was a mess.
Websites were designed for desktop monitors, which are in landscape orientation. Meanwhile, these new mobile devices were most naturally used in a portrait orientation.
Understandably, the viewport of the phones didn’t match the layout of the sites. The result was text and images falling off the side of the screen, awkward zooming defaults, and other mayhem that made visiting a website a very unfriendly experience.
Over the years, developers tinkered with ways to solve this new problem. And now we have a great mobile design solution: Responsive design.
Responsive design uses the website’s CSS code to make adjustments to page elements’ size and position depending on the size of the screen being used by the visitor.
The main advantage of responsive design is only needing one website. Without it, companies would actually need to build two separate websites with different sets of code and different URLs – one for desktop, one for mobile. Sticking to one site saves money on design, maintenance, and hosting.
Getting to set parameters for any given screen size means your site is ready to adapt to future technology trends. If, say, square screens become popular in 5 years, your site infrastructure is already prepared to deal with it.
Optimize Images for Speed
High-resolution images look great on your site, but improper formatting could cause your site to slow to a crawl.
Slow load times mean bad news for your bounce rates. 53% of people leave a mobile site if it’s not loaded within 3 seconds.
User experience isn’t the only thing that suffers because of slow speeds. Starting in July 2018, Google’s algorithm will start to punish slow mobile sites on their rankings more than ever. A sluggish site means your SEO will nosedive.
When uploading images, be mindful of their size and format. You might need to do some editing to ensure your site is as fast as possible.
In many cases with mobile design, less is more.
It can be tempting to let your creativity flow and use a lot of unique typefaces and funky aesthetics. But visual layout choices that are fun aren’t always practical.
Remember that audiences are looking at a screen that’s only a few inches tall. It’s easy to overstuff such a small space.
An overly complicated layout or loud visuals can distract your visitors. To keep the focus on your message and your products, stick to the basics.
Choose easily legible typefaces and font size. Make sure any buttons or icons are big enough to easily tap. And keep in mind that a little white space doesn’t hurt.
Learn More About Mobile Design
Having a great mobile site is a necessity for your business to thrive online.
To learn more about how to get started designing your mobile website, keep an eye on our blog.