Last Updated Apr 07, 2011 — App Management expert
Tips on how to optimize your website for mobile devices
App Management
| 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.3. Display Mobile Content 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 Once you've laid out the main foundation and have a solid theme, consider adding a adding javascript to enhance the user experience. You may consider the following JS framework optimized for mobile:I've created this article to help those just getting started with mobile web dev. Optimizing your web content for mobile is a relatively simple task that should require a good amount of planning and play testing. It's been five years since the rise of mobile devices and a lot of the web has already been optimized , its no wonder why you definitely need to! I hope you've enjoyed this article. You can follow me on twitter for any questions, comments or suggestions, thank you for reading! |
