Skip to main content
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.
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.
##
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost
10.0.1.92 website.dev
10.0.1.92 www.website.dev
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!

Apperian

More from the Blog
Sep 19, 2018

Arr Matey, Hear a Tale about Cyber-Piracy

It’s Talk Like A Pirate Day.
Read more
Sep 18, 2018

The App Is The Endpoint

Traditional Endpoint Security is dead, that is to say that hardening the laptop, desktop, or device is not a panacea. ...
Read more
Aug 29, 2018

Using real-time threat analytics to thwart a serial app attacker

How Arxan helped shut down continuous reverse engineering attacks Operating in the Dark It started after releasing an app u ...
Read more