Looking For A Tutorial For Designing Mobile Websites? Here’s How!

By Mercy Grace Nadayag on September 21, 2012 in How To's, Mobile, Tutorials, Website

The mobile websites are expected to provide quick information to a mobile user while he is on the go or away from his computer. The design of the mobile website has a different set of guidelines than a non-mobile website. Failure to follow those guidelines can result in your site displaying improperly on the mobile user’s device. Designing a website planned to be viewed on mobile devices requires forethought, not only about the content (text, photos and other content types) that will appear on the site and the site’s architecture (links and pages), but also about the technologies and file types to be used.

Instructions:
How to Design Websites for Mobile Devices

1. Register a domain name and purchase hosting for your mobile website (see Resources for a registrar). This step requires a valid credit card or PayPal account. Secure a “.mobi” domain name for your mobile website. Not all domain name registrars offer .mobi domain names. A few of the ones that do are GoDaddy, Dotster, Network Solutions and dotMobi. After choosing a domain name, keep the name short. By keeping the name short, it will prevent mobile users from having to use the small buttons on a mobile device to type in a long domain name. Not only is a shorter name easier to type on the mobile device, but it is also easier for the mobile user to remember.

2. Design the mobile website with Web development software. There are a variety of free and paid options (one of each is listed in Resources below). Keep in mind, if previewing the website on a computer monitor, that the site is designed to be seen on the small screen of a mobile device. Sign up for web hosting for your mobile website. Choose a .mobi web hosting provider such as Szabo, GoMobi Web, MobiSite Galore, Wire Node and GoLive! Mobile.

3. Add the content you prepared to the design. Log into your mobile web hosting account to begin designing the web pages for your mobile site. You will generally see a “New” link or “Create” link to begin creating pages for your site. The exact wording for this link will vary by mobile web hosting provider.

4. To insert text onto your mobile web page. With a mobile website, you want to keep the text to a minimum. Keep in mind that the mobile user will have to read your text through a small window. The less text he has to view in that window, the improved.

5. Keep the images to a minimum. If you don’t have to use an image on your website, avoid doing so. This is because it takes a long time to load the images on the mobile device. Most mobile users are in a hurry when looking for information on a mobile device and don’t want to wait for images to load. If you absolutely must use an image on your site, be sure that the image does not exceed 128 pixels.

6. Place accurate contact information on your mobile website. This will ensure that an individual can easily contact you or visit your place of business if he is interested in your products/services. If the user spends time trying to contact you on an outdated telephone number or wastes gas driving to a wrong address, it can frustrate the mobile user.

7. Test your mobile website to ensure that it is efficiently designed for mobile users. A few websites that you can use to test your mobile website are dotMobi, MobiReady, and Samsung Mobile Innovator.

8. Many of these sites actually allow you to test your mobile website using an emulator that emulates the face of various mobile devices. This will allow you to see the site exactly the way the mobile user would see the site through his device.