Skip to main content
App management icon

This post is from the Apperian blog and has not been updated since the original publish date.

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.
  • 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.
## localhost broadcasthost
::1 localhost
fe80::1%lo0 localhost
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!

More from the Blog

View more
Apr 30, 2020

Mobile Application Management: A Forward View

App Management
  IT Is Adapting in the Midst of the COVID-19 Pandemic The Coron ...
Read More
Nov 19, 2018

Breaking Down the New California IoT Law

Application Security
Recently California passed legislation regarding the security of all I ...
Read More
Nov 14, 2018

Securing mobile apps against reverse engineering and hacking [Podcast]

Application Security
Listen to Alissa Knight interview Ken Jochims about Arxan Technologies ...
Read More
Oct 25, 2018

Securing Connected Medical Device Apps [Infographic]

Application Security
Contact Us