The smart phone revolution is truly upon us, and for those companies that haven’t engaged in planning their mobile website, this is a wake-up call. Today, smart phones have become an extension of the desktop experience. Let me present some interesting trivia via the graphic below, to get you thinking about your mobile business strategy.
Also, consider this announcement Google recently made:
“In the coming weeks, we will be introducing the mobile optimization of a website as a new factor of ads quality for AdWords campaigns that are driving mobile search traffic. As a result of this change, ads that have mobile optimized landing pages will perform better in AdWords — they will generally drive more mobile traffic at a lower cost.”
Mobile Website Development and Design Checklist
The following are some issues that need to be considered when creating a dedicated mobile website.
Screen size: Most websites are designed for users with a minimum screen width of 1024 pixels and render well on laptops/desktop. However the real estate available on smart mobile phones is about 320 pixels or greater, which will render well on screens as small as 3 inches.
Flash: Does your website have some parts developed in Flash? A huge number of mobile phones are unable to render Flash (think iPhone, iPad and older Android mobile phones). Further, Adobe recently announced that they will no longer continue to develop Flash Player in the browser to work with new mobile device configurations.
Recommendation: In order to make sure your website can be viewed on phones such as the iPhone, use JavaScript and HTML5 in place of Flash.
Recommendation: Remember in mobile website design, you should keep the “Rule of thumb” in mind. Simplify navigation to include top landing pages in the mobile site as large buttons that can be easily pressed by the thumb.
Heavy images and JavaScript: Check your website to see if it has heavy images or JavaScript, you will need to optimize these to reduce the load time of the website on the mobile devices.
Recommendation: Purge all the unnecessary JavaScript that may not be required and using CSS3 for basic transitions and animations instead. Reduce the size of images as mobile phones have a lower resolution than desktops. Save the images in PNG 8bit, JPEG, GIF.
Content: Remember the real estate available on mobile phones is minimal, therefore you need to keep this in mind during mobile website development and re-calibrate your content accordingly. Replace verbose text with bullet points. It might also be necessary to divide the page so that the user is not required to infinitely scroll vertically. Consider breaking up the content naturally into multiple pages. Another option is to try not to replicate your entire website, instead putting up content that is the most important to a mobile user.
Responsive design: This is an important thing to keep in mind when creating a mobile website. Use fluid grid responsive design and media queries to allow the mobile website to render aesthetically on all mobile devices irrespective of resolution. Doing that will make sure that the mobile version of your site will look good across all types of mobile phones and hence be more mobile friendly.
Navigation: Make sure you include a clearly visible home and back button on the top and bottom of the page. You may also want to include a “scroll to top” button at the bottom of each page. Make sure the website is designed in a manner that doesn’t require the user to scroll in both directions (horizontal and vertical), restricting it to vertical alone.
Detecting and redirecting mobile users: another important point when you create a mobile website, is to detect mobile devices requesting the website and redirect them to the correct mobile website. This can be accomplished by detecting the user-agent in the server header sent by the end user’s browser. If the user-agent resembles a mobile phone browser, then the user is redirected to the closest matching page on the mobile version of the website. It is absolutely acceptable to give the user a mobile friendly experience tailored to his device and is not considered cloaking by Google.
Cloaking and Googlebot-Mobile: You will need to make sure that Googlebot-Mobile is redirected to the mobile website, whereas it is not necessary to redirect Googlebot to the desktop version. For instance, Google doesn’t automatically redirect desktop users from their mobile site to their desktop site, instead they include a link on the mobile friendly version of the page to the desktop version. These links are especially helpful when a mobile site doesn’t provide the full functionality of the desktop version — users can easily navigate to the desktop-version if they prefer. This will help your website avoid cloaking issues. More info about this mobile website development issue can be found here: http://googlewebmastercentral.blogspot.com/2009/11/running-desktop-and-mobile-versions-of.html.
Mobile sitemaps: It is important to submit a mobile sitemap to Google Webmaster Tools. This will allow Google to index all the URLs in the mobile website properly. For a sample mobile sitemap visit http://www.google.com/support/webmasters/bin/answer.py?answer=34648.
Does the URL matter? Some of you might want to serve content to both mobile and desktop users from the same URL (www.example.com) whereas others might use a dedicated URL for mobile users (mobile.example.com). For Googlebot and Googlebot-Mobile it does not matter what the URL structure is as long as it returns exactly what a user sees. Regardless of URL structure, you must correctly detect the user-agent as given by your users and Googlebot-Mobile and serve both the same content.
Native app or dedicated mobile site? Should your company design a dedicated mobile website or design a native application? Native apps are very popular these days, however I prefer the experience of dedicated website. Previously, apps offered better technology; however HTML5 offers a good alternative these days, and you don’t need to go through the hassle of getting your changes approved in the Android/Apple marketplace each time there is an update on your website.
You will often have to build the app for each platform (iPhone, Android, Blackberry, Windows Phone) from scratch. Therefore the cost of doing this exercise can be prohibitive. You will need to find a developer who specializes in building apps for each of these platforms, and this restricts your reach unless you plan on going the whole hog.
Further you will need to go through an approval process and each time you make a change you will go through the process again. The main advantage of going with a dedicated mobile website is that it is compatible across all platforms and devices. This gives you more reach at a cheaper cost and you can use your developers’ existing skill set to develop the site. The site can be updated in real time.
Compare the above website before mobile design optimization on the left and after mobile design optimization on the right. By not having a dedicated mobile website you are leaving money on the table. So folks, it is time to jump on the mobile Internet bandwagon.
Important Mobile Website Development Resources
All this chit chat about mobile website design & development might have you jumping around asking the obvious question “how to make a mobile website”? During writing this article on creating a mobile website, I did come across some really handy mobile development resources that you should find pretty helpful in making the mobile version of your website a reality. They are listed as follows
- Making Websites Mobile Friendly on the Google Webmaster Central Blog
- Check for mobile w3c validation: http://validator.w3.org/mobile/
- To emulate a mobile search, go to: http://www.google.com/m/
- A Google initiative on building mobile ready websites: http://www.HowToGoMo/en
- Does indexing a mobile site create duplicate content issues? Matt Cutts answers this in a short video: http://www.youtube.com/watch?v=mY9h3G8Lv4k
- Considerations for developing mobile apps vs. mobile sites: http://econsultancy.com/us/blog/7832-the-fight-gets-technical-mobile-apps-vs-mobile-sites