Making Your Website Mobile Friendly

Chances are, most of your website design and content development processes happen on your laptop or desktop computer. However, most of your viewers will be interacting with your content on a mobile device, so it’s super important that you ensure that users can easily interact with your content on any mobile device. But making your site mobile friendly doesn’t have to be complicated—in fact, designing for mobile often means simplifying your site by minimizing distractions, and removing unnecessary elements. Consider the following checklist when working to make your site mobile friendly.

 

1.  Test at multiple resolutions.

The most popular screen resolution on desktops is 1366 x 768, but mobile is drastically less, in the neighborhood of 375 x 667. Throw in the challenges of a flipped aspect ratio, and you’ll find that your site may look and act markedly different on phone and tablet. Luckily, Divi is a mobile friendly theme, but it’s still important to preview your site on mobile, to check for any inconsistencies or design flaws.

The Divi theme makes it easy to check multiple resolutions on your device. When previewing modules you have the option to preview desktop, tablet, or mobile view. You can also make site-wide adjustments via the theme customizer. See the video below for additional instruction on using the theme customizer to view your site on both tablet and mobile resolutions. 

ElegantThemes.com

2.  Menus

 

It’s always important to keep your navigation simple, so that users can easily find content on your site. But it’s especially important to check this on mobile. You may notice that on tablet view or even small laptops, five or more top level navigation items can create a line break when screen size reaches between 980-1100 pixels. This can create a bit of a mess when combined with a logo, site title, and/or tagline. To fix this, consider making your menu fill width, or possibly even hiding your site logo on mobile, placing it instead on the footer, or other area of the site. You might also need to adjust text size or style. These little changes can make a big difference in keeping your site streamlined and professional. 

By default, Divi changes your main navigation on mobile to a button that drops down your menu options into a list. Sometimes, however, if there are excessive options, this might require some additional simplification. Consider minimizing the amount of nested menu items that you have on your site.

 

 

3.  Images

Often we worry about images becoming fuzzy or degraded when viewed at a high resolution, but sometimes low resolutions can also impair your images. Some steps that you can take to improve images on your mobile site include:

  • Only include the most important images
  • Consider using scalable image types, such as SVGs
  • Crop your images carefully so that their focal points look great even at a small size

Be sure to keep in mind, images that are extremely complex, such as detailed infographics, may not be possible to use adapt to mobile.

 

 

4.  Readability

 

The last thing you want is for a viewer to have to pinch and zoom just to read your content. There are several steps you can take to avoid this:

  • Pick a readable font
  • Use subheadings and white space to make you content scannable
  • Make sure the size doesn’t shrink when viewed on mobile. Divi has options to customized text size based on different devices.

5.  Click-ability: Buttons, Links, Forms, Etc.

Make sure that all of the elements of your site are easy to interact with. Using fingers instead of a mouse changes the way most users will interact with your content. Eliminate or resize anything that doesn’t work on mobile, and make sure there is not overlap over any critical elements, which could cause users to click on the wrong one.

 

6.  Avoid pop-ups

While you might find popups or sticky widgets useful on your site, consider opt-in forms or CTAs when designing for mobile.

 

 

7.  Test your website’ loading times

Try using Google’s free tool to check your site’s loading times. Long loading times can discourage users from visiting your site. Try optimizing your images to take up less space or use a caching solution.

Final Thoughts

I hope these tips provide you guidance into knowing how to make your website more mobile-friendly.