Create a Site Mobile Visitors Appreciate
If you’re building a website that’s designed to be mobile friendly, read this carefully.
Creating a website that’s friendly for mobile website requires thinking through quite a few usability concerns that most people just don’t think about.
While there remains a lot of discussion about whether or not you need a mobile (ready) website, most agree you probably do.
Here are five tips for improving the mobile friendliness of your website.
==> Use Responsive Design & Fluid Widths
Avoid fixed widths like the plague. With so many different devices out there, from the dozens of Android models to the iPhone to the iPad and all the tablet devices out there, trying to create one fixed width to work on all devices simply isn’t realistic.
Recommended for YouWebcast: A Week in the Life of an Agile Creative Team
Instead, try to use fluid widths wherever you can. Fluid widths will automatically adapt to the width of the web browser, making your site look good on any device.
You can make this happen easily in WordPress by starting with a theme that was developed with “mobile responsive design” in mind. Genesis, one of the top two framework themes on the market, has this feature built right in since version 1.8. So does WordPress TwentyEleven that came with your WordPress site.
==> Compress Images
Images hog bandwidth when not adaquately “compressed” for web use. This does not mean making the width/height of the image smaller but rather reducing the file size that has to be downloaded. (Slightly confusing I know but not hard.)
Forcing users to download a lot of data content on their mobile phones is never good when it’s avoidable.
Compressing the file size itself is vitally important to good loading speeds on both PC & mobile devices. (This helps your SEO overall.) While a designer needs to compress the theme images, you can easily compress your in-post images using the WP-SmushIt plugin.
==> Make Buttons at Least 44 Pixels
Most smartphones today use a finger tap to simulate a mouse click. In order to make buttons easy to click on, they should be large enough that someone can press on it without having to zoom in.
A general consensus in the design community is to make buttons designed for smartphones at least 44 pixels wide and 44 pixels tall. This makes them easy enough to click on by any smartphone device.
While some smart phones today do a good job with pinch-zoom, many do not, and even when they do, assuming a visitor is comfortable taking those extra steps is damaging.
==> Minimize Choices
If you’re building a website for a desktop viewer, it might make sense to have a dozen different links in your navigation bar and ten pages of content on the home page.
However, if you’re building a site for mobile devices, it’s best to narrow down choices. Try to have at most five different choices for navigation. Make the main parts of your site easily accessible.
Make sure a link to your full version site is at the bottom of your footer.
If you’re using a separate mobile site (or mobile plugin) instead of a mobile responsive WordPress theme, be sure to simplify your mobile site. Also, pay attention to ensure people can access the full site from the footer, if they desire.
==> Test, Test, Test
Don’t assume that just because your site looks good on an iPhone that it’ll look good on an Android. Don’t assume that because it looks good on a Samsung tablet that it’ll look good on an iPad.
Test your website on as many different devices as you can get your hands on. You’ll likely find that your site looks good on some devices, but doesn’t display properly on some operating systems.
Actively seek out errors and fix them.
To learn more about plugins available for WordPress that can optimize a site (that is not using a mobile responsive theme) for mobile compatibility, click here.
Douglas over at smedio.com shares 7 Don’ts of Mobile Marketing that you might enjoy checking out.
These five mobile marketing tips will help you create websites for mobile devices that look great, no matter what phone or tablet your customer is using.
image source: WordPress.org