Have you noticed that if you visit some Web sites on your phone, they redirect you to a page sized for your phone? Other sites don’t and look terrible. It amazes me how many big web sites have not taken a few simple steps to customize their home page for smart phones. If you have access to the HTML, you can tidy this up in a few minutes.
Before |
After |
First off, if you use WordPress for your blog or CMS, I recommend the WPtouch plug in. You can install the free version from with your WordPress admin console. I installed this plugin on my WordPress blog and it seems to work great on both iPhone and Android.
Otherwise, if you have access to the HTML or code that generates your home page, there are a couple quick steps you can take to make it look better on a phone. I’ve included some sample code below, you can also download the complete sample project.
1. Add code (a meta tag inside your page’s <head> tag) to make sure the page is zoomed to fit a phone.
<meta name="viewport" content="width=device-width, user-scalable=no">
2. Allow the page to be full screen once bookmarked
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel=”apple-touch-icon” href=”/images/phone_icon_72.png” />
4. Add a launch screen graphic that shows while your page is loading.
<link rel="apple-touch-startup-image" href="/images/launch_screen.png">
Advanced:
5. How to re-direct or display different content
You can do this on your Web server (before the page gets to the client using your server side script PHP, ASP, Ruby, Java or you can do this with a few lines of javascript
if (navigator.userAgent.indexOf('Android') > -1 ||
navigator.userAgent.indexOf('iPhone') > -1) {
window.location.href = ‘mobile_page.html’
}6. Prompt visitors to add (bookmark) your page to their home screen.
if (window.navigator.standalone) {
alert(‘Please click “add to Home Screen”
to view the page full screen’);
}7. Add scrolling, Tabs, and other fanciness. From here it requires more programming to make your Web page more like an app. Some of the libraries I’ve used recently are Sencha, jqTouch, and iScroll. For more detail, please see my post on mobile Web development with HTML and Javascript.
But doesn’t wordpress automatically show the default mobile theme whenever a mobile user is detected. AFAIK you can edit and completely change that theme.
You see, it’s really easy when you run wordpress site, not sure about joomla (which I prefer) , but the problem comes in when you use some custom made script … Than it;s not that easy. There is an army of bloggers and webmasters who are not technically that good with html. As the market of smart phones grow and their duplicability in this area, more and more webmasters will invest in turning their pages in phone friendly portals
But doesn’t wordpress automatically show the default mobile theme whenever a mobile user is detected. Anyway great article i like it Thanks for info
But this is only for WP. 🙁
hello,
was wondering if you take on freelance work? thx
It’s really easy for WordPress site, not sure about joomla orDrupal, but the main issue comes in when an user use some custom made script, than it’s not that easy. There are lots of newbie bloggers, who are not technically good with html or php. Anyway nice sharing, thanks a lot, love to see lots more from you.
Regards, Daniel.