Apr 07, 2011
Tips on how to optimize your website for mobile devices
| Optimizing web content for the mobile device is awesome and a relatively easy task. In this article, I'm going to share five tips on how to get started with mobile web development. |
1. Mobile Documentation
Read Safari's Web Content Guide
It's very in-depth and helpful documentation. It includes tons of references and sample code, this is always great for reference details. But don't stop here, I have more tips you may find useful!
2. Design for Mobile
Give your current site a brief analysis. You'll need to determine which content will be most important to your viewers. You may consider reducing lengthy details such as tags, text descriptions and large images. You may consider using large font sizes and large buttons and links. A great way to get mobile web inspiration is to check out "mobile only" site galleries and showcases. Consider subscribing to these lovely sites.
There are several ways you can do this. The quickest and easiest way I prefer to do this in Wordpress, is to utilize the Mobile Theme Switcher Plugin. Its a very simple plugin that allows you to set different wp themes for the iPad, iPhone/iPod Touch, and Android Browsers. If your looking to simply mobilize existing content, you could do it by loading a specific stylesheet for mobile browsers, check out Safari's Mobile Web Guide.
4. Build and Test on Devices or Simulators
You should begin with setting up a local dev site via MAMP or WAMP. Once you've created and setup your dev site, create an empty theme in wordpress. Install and Activate the MTS plugin and select your newly created theme. Your mobile devices and simulators should display only that selected theme. Here is a quick tip on how to test your local dev site on your JB (Jailbroken) iPhone or iPod Touch.
##If you don't have a mobile device at hand, you can always use Apples iOS Simulator, Palm Simulator, or Android simulators. You could also use your desktop browser and which the user agent to a mobile browser (Safari 5 does this well).
5. Animation, Transitions and Final Touches
twitter for any questions, comments or suggestions, thank you for reading!