April 5, 2011
Optimizing web content for the mobile device is awesome and a relatively easy task. In this article, I’m going to list a few tips on how to get started with mobile web development.
1. Mobile Documentation
It’s very in-depth and helpful. Includes sample code which is always great to reference details. But don’t stop here, I have more tips you may find useful!
2. Design for Mobile
You’ll want to conduct a brief analysis on your current site. 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. Consider using large font sizes and large tappable 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 sites.
3. Display Mobile Content
There are several ways you can do this. The quickest and easiest way I prefer in WordPress is to install 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. Now your mobile devices and simulators should display only that theme. Here is a quick tip on how to test your local dev site on your JB (Jailbroken) iPhone or iPod Touch.
- Ensure you have OpenSSH installed (Download it from Cydia)
- Open a SFTP client on your desktop and connect to your mobile device (Use the device wifi iP address)
- Goto this location, “/private/etc” and open the file “hosts” in a plain Text Editor
- Add your local dev site IP address and domain in the following format (Use desktop wifi IP address)
# Host Database
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
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
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!