Designing for Mobile

Consider these facts:

1. Mobile web traffic first surpassed desktop in 2015, and has continued to increase to the point where up to 70% of web traffic is viewed on mobile.^[1]
2. 75% of all emails are opened on smartphones in the U.S.^[2]
3. 88% of people who go on a business’ mobile site call that business within 24 hours.^[3]

Every business owner should consider how their website, emails, and Facebook posts appear on a mobile device. We design mobile-friendly websites and email templates, meaning that they can be easily accessed and viewed on a mobile device. Here are three rules we follow when designing for mobile:

Consider User Experience

While someone visiting a website on a desktop device is more likely to be exploring the website, someone visiting on their phone is more likely to just need information like the phone number, business hours, and address. 88% of people who go on a business’ mobile site call that business within 24 hours.^[4] This means that information like business location and phone number should be dynamic and Click to Action – meaning that if someone clicks on a phone number, their phone should automatically call it, and if they click on an address it should automatically open in Google maps.

75% of smartphone users use their thumbs to tap on the screen.^[5] Since the majority of people are right-handed, this means that the area of the screen most accessible is the green area shown on the below image. This means that buttons and important information should appear on this part of the screen when viewed on a mobile device.^[6]

Less is More

Considering that a user’s purpose for visiting a website can be different on a desktop vs. a mobile device, it’s important to identity what website elements can be left out when designing for mobile in order to maximize functionality. According to Simplicity Lone Beacon’s Vice President of Digital Media, Kirby Mack, “mobile sites should be more bare bones with a simplified design, because most mobile users are visiting sites for hard info and not for curiosity or general interest. The goal is to provide mobile users with the information they want and nothing extra that detracts from the site’s functionality.”

For example, long forms that require scrolling can be problematic, as can high resolution images and features like calculators. Pop ups can be a good idea for desktop, but less so for mobile: A pop-up may take longer to load on mobile and then take up the entire screen, which can end up being more of a turn-off for the user.

Details Matter

The websites we build have a responsive design – this means that they detect what kind of device someone is using and adjust the layout accordingly. Content may be displayed in a three-column format on desktop, a two-column format on a tablet, and a one-column format on a smartphone.

Mobile pages “stack” left to right. This means that when the size of a screen shrinks, images and content on the right side of the page will end up underneath was is on the left side of the page. So, it’s important to think about the order you want the viewer to experience content and images on the site from this perspective – for example, a CTA button should go on the right side of the page when viewed on desktop so that it will end up on the bottom of the page on mobile.

Subtle design elements such as having drop shadows and features to indicate that a page is loading can make for a better mobile experience. For users with slow or broken connectivity, this can signal to them that the button they’ve tapped on is working and that they should wait for a new page to load. Otherwise, they could end up furiously tapping their screen in the same place and end up in the wrong place on the site.

Shapes and colors can have a significant impact as well: Research shows that rounded edges attract more attention and are easier for the eyes to distinguish. These are colloquially referred to as “friendly rectangles,” and there is evidence to suggest that they make people feel better about using a product or service.[7]

Looking to the Future

We’re constantly looking for ways to improve our website designs based on new trends in user experience. This means always thinking about mobile display with designing and updating our advisors’ websites, as well as designing our email templates. Reach out to us to find out more about how you can transform your marketing approach with mobile-friendly designs!