More than half of all internet traffic comes from smartphones, yet many companies are slow to develop their websites with a mobile mentality. For much of the past 20 years, web designers have focused on desktops, and it’s their go-to for creative endeavors and business content creation. While desktop web design might be what you know, it’s not how your customers are reaching you, and you could be turning them off (and losing business) as a result. Follow these five web design rules to create a killer mobile user experience.
Cater to People With Large Fingers
Many smartphone users have felt the pain of trying to press the close button on a pop-up ad only to click on the ad itself. This is because the “X” button is too small for the average human finger. If you want audiences to appreciate your design, make it easy to click and browse content without having to zoom in or treat their smartphones like a game of Operation.
This tip isn’t just about buttons, it applies to text too. A small font will force your readers to pinch, squint, and scroll through your copy, which is frustrating when you’re looking for specific information.
Simplify Your Design
Try as you might, you can’t fit everything from your desktop site into your mobile design without creating clutter. To prevent this, make a list of “must-haves” on your mobile site, and then a list of optional items. Make sure the must-haves make it into the design, and then sprinkle the optional items in where there’s room.
Image via Flickr by miniyo73
Trying to cram everything into your mobile site will slow it down and cause readers to do the pinch, scroll, and struggle to select the content they want. Try to think like your audience. What do they want? How are they going to navigate to get it?
Get Creative With Icons
Major cell phone carriers sell larger phones, like T-Mobile’s Samsung Galaxy S6. Users with a 5.1-inch screen might not have trouble reading words on your site. However, those with smaller models, such as the popular iPhone SE or LG 450 flip phone, both available from T-Mobile, may struggle with the small text.
Experts suggest switching your headers up with icons instead. They take up the same amount of space (if not less) than text, and are easier for your audience to understand. For example, instead of the word “Home”, use an icon of a house, or a phone icon instead of the words “Contact Us.” This also allows you to get visually creative with your design.
Optimize Images for Mobile
Users have no patience for websites that take a long time to load, and get even more frustrated when the site loads without images. The icons you added in the last section are useless if they load as empty boxes because the file size is off.
Start by cropping your images for a vertical screen. This way your users won’t have to constantly rotate their phones to see your content. Next, adjust the image size and resolution for easy loading. You want the images to be as compressed as possible without losing resolution and looking fuzzy.
Build It Once, Build It Right
As mobile began to grow, designers tried to cram desktop designs into mobile tools, or convert sites from one to the other. Today, many designers are building mobile-optimized sites from the start, so their desktop and mobile designs work together right away. This reduces the number of design projects from two to one, saving time and resources.
There’s one more thing to note; Many companies treat the tablet UI like a desktop, so they don’t have to create a third interface type. If you’re working with a client, ask whether their tablet users behave like desktop or mobile traffic to better understand their needs.
These are just a few common practices that will make your web design process easier and help users better navigate your sites. When it comes to mobile design, less is more, so don’t be afraid to go minimalist.