How does your website content look on mobile devices? Earlier we looked at how to test your site on many different mobile devices. Now let’s turn our attention to the content in our site, not just our theme.
There are some typical web layout features that work, and then there are some that really don’t work on mobile devices. Here are the do’s and don’ts of website layouts for mobile devices:
Do:
- Resize your graphics and videos to fit 320px by 240px
- Use alt tag descriptions as some visitors conserve bandwidth by blocking multimedia
- Keep mobile landing pages sparse
Don’t:
- Use tables or fixed size elements
- Use frames, flash players, scripting elements or other design elements not supported by most mobile browsers. For videos, even if the video is a supported format, the player buttons around it might be flash-based. Best to stick with Youtube for content you are willing to host there, or consider Easy Video Player for formats you want to self host. These will play on all smart phones and mobile tablets.
- Insert large graphics files – even resized to fit the screen, this drains valuable mobile bandwidth
Not every page of your website needs to be in the mobile navigation, and likewise, you may not be attempting to attract visitors on mobile devices. Some of that is beyond your control, such as visitors subscribed to your blog via email. While you will want to keep mobile landing pages short, you do not need to do so for every page on your website.
Best practice is, skip the Don’ts when creating blog posts or more static pages, and your site will generally load well on most mobile devices.
By optimizing your site for mobile visitors, you will improve their experience when visiting your site.
