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
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.
September 18, 2013 at 5:40 pm
You made very good points through this excellent post mate !
If we want to use images for our mobile version of website, we should optimize it so that there’s no delay for the user running the website through a mobile device. Thanks for sharing the information.
September 18, 2013 at 7:24 pm
I always use a different theme for the mobile and tablets has using the same theme of web on mobile led to the slow loading and which irritates users a lot.
September 19, 2013 at 12:51 pm
This is really a good post. Very informative indeed. Thank you for sharing this very useful post.
September 19, 2013 at 2:04 pm
Hey i want to ask that how to make a theme responsive that already has been fully developed.I bought a theme and it is not that much responsive.
September 20, 2013 at 9:59 am
I don’t use a separate theme for mobile and desktop. I only use responsive themes. They are easy to setup just like gold old theme. But when it comes to mobile customization they tend to become limited.
September 20, 2013 at 11:39 am
Nice post and Thanks for sharing these tips with us. For mobile version of website, we have to optimize the image otherwise it increase the loading time. This post really gonna help all the newbies.
September 26, 2013 at 5:29 pm
Nowadays, every business and web design company are trying to design responsive templates and themes.