You may have seen how smart phones flip and expand the web pages for better viewing. On mobile devices with limited screen size, pages may be displayed in full at a glance, which can be further zoomed in to make the text readable. For those phones, which are using the web browsers like Safari, designers need to worry about the creation of web pages, which can also work well on the mobile screens. It may differ from case to case however. Therefore, it is essential for the designers to make sure that all the pages work just fine for different screen sizes.
When you design a site with several pages, you have to take into account who the users are and how they are going to view the site. The best-designed sites take into account the types of devices the page is being viewed on, their screen resolutions, color and brightness options, viewing angles, and other functionality. Elaborated below are some tips needed to design web pages, which are multi-device compatible.
Test on many devices
Once the layout is completed, apart from viewing it on your PC screen, try to see how it looks like from as many devices as possible. Try it out on different screen resolutions of mobile phones and tablet PCs etc. If you don’t own all such devices, you can also make use of the virtual simulators. However, it is always advisable to do the testing on actual devices, as simulators, most of the times cannot give you the same look and feel of original devices when you browse through a website.
Be sure that your pages can smoothly degrade
You can make Flash-enabled designs for wide screen browsers, but you need to be sure that all the critical information is made visible on small screen devices, which do not support special features. It is a fact that many small-screen devices don’t support cookies, Flash, JavaScript etc. While high-end smart phones may be able to handle all the special features, a lot of general purpose phones cannot handle anything beyond XHTML.
Build a wireless specific page
If you are supposed to build a page to be viewed on a cell phone or other wireless devices, then you must put a link to the wireless page. This should be done on top of your document and it can be kept hidden while you open it in the non-handheld devices using the handheld media type.
Web page layout
The thumb rule in this case is that you don’t need to make any changes while designing your pages if you don’t want to. Majority of smart phones available use browsers like Safari, iOS, and Chrome etc. So, if you have satisfactorily tested your page on these browsers, it is assumed that the page can be fairly displayed on smart phones using these browsers. One special thing to note is that when phone browsers downsize into a tiny window, it may become hard to read if there are a lot of columns. Zooming and reading each parts of the page may be tiresome. So, if you can, do make it one long column layout, with scroll down text, so it can be viewed much easily when opened on a tiny screen.
The use of Images
The smaller they are, both in the dimensions as well as downloading size, the faster and effective they will be on tiny screens. Image optimization is of course a good idea while doing web design, but it can be critical for cell phone pages. While images are very effective in making your page look better on a full-screen browser, most times it can create a hindrance when tried on mobile screens. Also, cellular network users will hate the idea of paying more just to get a bunch of big images downloaded on their device.