How to Create a Mobile Web Page
Designing web pages has become a fascinating pastime, enjoyable hobby, or even profitable career for many Internet enthusiasts. With the advent of mobile Internet access, however, some basic rules of web design have been redefined to ensure the most effective mobile web browsing experience. Creating web pages for mobile devices is much like creating standard web pages, but with a few fundamental differences. This article will outline how to work around those differences.
Other People Are Reading
Instructions
-
Design the Web Page
-
1
Become familiar with, at a minimum, HTML programming. HTML, short for Hypertext Markup Language, is the driving force behind both standard and mobile pages on the world wide web, though the mobile experience also relies on variants like Extensible HTML (XHTML) and Wireless Markup Language (WML). If you are unfamiliar with HTML, or if your HTML skills are a little rusty, you may be able to get some web design assistance from an HTML design package like Macromedia's Dreamweaver. If you are completely unfamiliar with XHTML and have no access to web design tools, you may wish to take a break and brush up on these skills before proceeding to the following steps. In addition, you should have an idea for your page in mind before moving on to Step Two.
-
2
Design your page with minimal graphics. Because mobile Internet devices frequently use wireless data networks to browse the World Wide Web, and because these networks are notoriously slow, mobile web pages must be optimized to be delivered as quickly as possible. Large graphics, videos, and high-resolution pictures are often stored in large files that take a considerable amount of time to download over a wireless connection, so design your page to omit these files. The W3C, a World Wide Web Consortium, recommends that mobile web pages, including all embedded files and graphics, be no larger than 20 kilobytes in size.
-
-
3
Design your page to be narrow, not wide. While standard web pages designed for display on computer monitors are often 640 pixels wide, or even 1024 pixels wide, mobile devices feature much smaller screens and require substantially different dimensions. The W3C web consortium recommends that mobile pages be no wider than 120 pixels for best display on mobile devices.
-
4
Use easy-to-read fonts and standard character sets. Since mobile devices feature small screens which can be difficult to read under even ideal circumstances, it is important not to make the user's experience more difficult by including hard to read or scripted fonts. Standard fonts such as Times New Roman, Ariel, and Courier work well for mobile devices, and the W3C recommends UTF-8 character encoding.
Check, Prepare, and Publish the Web Page
-
5
Check your page for mobile compatibility. Once the page is designed, you may quickly and easily subject it to a free online mobile web compatibility test. This testing tool is provided by the W3C consortium to help web designers create effective pages for use on mobile devices, and it checks several aspects of the web site to ensure the best performance on tiny screens.
-
6
Purchase a domain name with a .mobi extension. While mobile web users can access sites with almost any domain, a .mobi extension indicates to the users that your page has been specifically designed to be compatible with their mobile device. Domain names with this extension should be readily available from your favorite domain registrar, or popular registration companies like Godaddy or Dotster, though the official domain registrar for .mobi domains may require some compatibility checks before registration is complete. Once you obtain your .mobi domain name, point it to your web host using the registrar's name server settings (if you are unsure how to complete this process, consult the documentation available from your web host).
-
7
Publish your page to your web host. With a domain name in place and a page designed for the mobile web, you are ready to publish your page to your web host. Using your favorite file transfer protocol (FTP) program, or the FTP capabilities built in to popular HTML editing packages, connect to your web host and upload your files (if you are unsure how to connect, consult the documentation from your web host and/or from your FTP software). Once your files have been uploaded to your host, and your domain name is working correctly, your mobile web page should be ready for use.
-
1
Tips & Warnings
The W3C has published a comprehensive document explaining design standards for mobile web pages; this document can be found by clicking the "W3C Best Practices Document" link from the resources section of this article. Having your page checked for compatibility with mobile devices is quick, easy, and free; be sure to take advantage of this check after publishing your page but before advertising your site.
