Making Your Website 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.
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.
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.
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.
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.
I hope these tips provide you guidance into knowing how to make your website more mobile-friendly. If you have any questions or suggestions, make sure you leave a comment in the comment section below!