How to Design a Mobile-Adapted Web Page
One of the major headaches for web designers is how to design a site that's suitable for mobile devices. Since all devices have different screen sizes and different levels of technology, it's virtually impossible to get a website to look right on every possible screen. However, here are various methods you can use to hedge your bets and create as good a mobile version of your website as you can.
Other People Are Reading
Instructions
-
Steps
-
1
Decide what type of information you want the mobile version of your site to contain. In general, you want your mobile web pages to have less content per page, fewer sections, a more basic navigation system and images, only if you really, really need them. Not only does this make your site easier to read it also makes it faster to load; mobile networks typically have much slower internet connections than the internet service provider you use at home.
-
2
Find examples of major mobile sites to get a feel for how you want your own site to look. Yahoo's normal homepage has hundreds of links and lots of news stories, while its mobile site features one top story and links to only popular services such as weather reports and stocks. Best Buy's mobile-website homepage features only a product search, a store locator and a basic product navigation list.
-
-
3
Add a domain name for your mobile site. The most common naming conventions are "m.yoursite.com," "mobile.yoursite.com" or "yoursite.mobi." For the first two, you can simply create a subdomain on your existing site through your host's control panel. For the third option, you'll need to reregister your domain name with the "mobi" extension. Ideally, since visitors likely won't know your mobile URL offhand, you can create two or three likely addresses and direct the extra ones to the real mobile site.
-
4
Create your mobile site around the design you've decided upon. You have a few different options on how to go about this. The quick way is to simply remove from your pages all presentation and style elements that mobile devices might get hung up on or display improperly. You can do this by removing the style sheets (or the links to the CSS files) from the <head> section of each of your pages. This will make all the sections on your pages stack on top of each other and remove all design elements, which results in easy navigation and easy readability.
You can also get help by using the specialized code from MikeIndustries, software such as Zinadoo, which has a free basic version, or even a mobile-specialized design company like Origami Studios; see Resources below. -
5
Advertise the mobile version of your site. On your regular site, make sure to include a link to the mobile version near the top of the page.
-
1
