By Jana Crye

Designing for mobile is extremely important in a time when it is highly likely that more people will access your website on their phone rather than on a desktop. Over 50% of the Internet traffic across the world takes place on mobile devices, with smartphones strongly beating out tablets.

People viewing your site on their smartphones are more likely to be in a rush or on the go, leaving less time to pay attention and figure out a complicated website. Your website on mobile needs to be easy to read and navigate, with features that are intuitive and large enough for fingers (big and tiny alike) to scroll through and tap on.

Here are some of the best practices to keep in mind when for designing for mobile:

 

Simplify Menus and Your Site Navigation

Mobile users want to find what they’re looking for fast, so digging through a complicated, multi-level navigation won’t provide the best experience. Reduce the number of pages listed in your mobile site navigation if possible so that users can easily find the most important pages, such as those describing your services and providing contact information.

 

Keep Your Content Simple

As you reduce the screen size of your design, you should also reduce the amount of displayed content. Don’t try to cram a ton of content and graphics onto each page. Mobile users are used to vertical scrolling so they will be willing to do it, but they will leave your site quickly if forced to scroll too far to find what they’re looking for. Keep your content easy to read with clear headers and bullet points instead of long paragraphs of copy.

 

Ensure Speedy Page Load

Mobile users don’t have any patience to wait for your site to load and will likely leave if they are required to wait longer than a few seconds. To increase page load speed, keep your image file sizes small, less than 200kb, and hide any unnecessary videos or graphics.

 

Check Your Mobile Breakpoints

There are tons of devices out there, with new ones being marketed every day. All of these devices have different screen sizes so designing responsively means checking your design at all possible browser widths. Use percentage widths for content containers on your site so that they can react fluidly to changes in screen size.

 

Don’t Rely on Hover Effects

Adding hover effects can be an awesome tool for creating interactive content on the desktop version of a site, but on a mobile device where users can only tap or swipe, all of these interactions become invisible. Make sure all content is accessible and all buttons are easy to see without requiring a hover state.

 

Link Your Phone Numbers

Many devices will automatically recognize phone numbers on your site and link them for you, but it’s important to account for those that do not. Ensure that all phone numbers on your site click to call by adding a “tel:PHONENUMBER” link.

Fitting your design onto small screen sizes may seem daunting, but carefully thinking through the most important things users need to do and find on your site and following these tips will help you build a mobile-friendly site. If you’re looking for help building a beautiful website that is also mobile friendly, contact us – we’re one of the leading digital marketing teams in the Raleigh area!

WRAL Digital Solutions
Assign a menu in the Right Menu options.

Sign up for our newsletter!

Sign Up Now