Making Websites Better For the Smaller Screen

The best method of getting a firm’s web page into the mobile market is to have a responsive web design. Creating a truly responsive website requires a different approach than mobile-centric, content-centric or snowballs like designs where everything is simply blazed over.

You may not have the financial resources to get a web site made through web design companies using a responsive approach although that is the ideal way of getting a web site made. The goal may be to morph the web site to make it fit in a mobile view by any which way possible. However, if you do find yourself in such a positions, there a few basic axioms that can be applied to the web site mobile or smaller screen aspect in order to make the web site more responsive and to make the transition between desktop versions and mobile versions of the website more seamless.

The Key is To Simplify:

Lesser visible feature can help dramatically simplify and clear out the design elements of the page. This makes it very easy to scan the page on a mobile device or to access certain elements by tapping. The goal should be to maximize the touch area so that users and visitors do not have to waste time trying to be accurate with their tapping. Over-crowding of the page can lead to too many actionable links and the difficulty in selecting those links will cause high bounce rates.

Another important consideration to make is that the internet experience is significantly slower on mobile devices than on traditional computers. Hence, having a strong base of information on every page is vital to keep the user interested and to provide them with what they want to know. Users will not want to keep jumping between web pages and will want to get their information the first time around. Try not to hide information and force the user to use excessive links. Present information in a brief manner so that the user gets a certain amount of information that he can choose to further explore. An easy way to achieve this is to use full-length headlines or to include better micro-copies on navigation items and buttons.

Reducing the web site’s navigation to fit into a mobile screen and anchoring links to navigation areas such as the footer require clearly labeling the link and actions as navigation links or actions. Icons should be used which clarify the links to the user and not further confuse him. These pointers are broad guidelines to keep in mind while designing a website for mobile devices on a budget. Not everyone has loads of cash to shell out but it is wrong to think that good web sites are only made with money. With proper planning and intelligent design by the web design company, they can be achieved on a tight budget and still look and work very well.

If you’re looking for a few examples of great responsive websites, here are few such sites that you should check out:

  • Pittsburgh Glass Center Art Museum – The Pittsburgh Glass Center Art Museum has a very responsive web page. The navigations actions collapse and show easily locatable icons and links and the links are anchored to a set of different links near the footer on smaller screens. It’s a breeze to navigate through and information is easily available without too many links between them.
  • Microsoft – Microsoft’s web site is the paragon for all responsive web sites.
  • Clearleft – A good example of simplification working wonders, Clearleft, a British agency, has a responsive web site whose user experience is similar to its desktop version but features a more cleaner design in order to make tapping on the screen easier.
  • Disney – Disney created a web site which is completely different from the desktop versions of its website. It too uses a more simplified style by decreasing the amount of visual data on the screen.
  • Buffalo – Buffalo, a web design company, uses a very simple trick to get a better website for smaller screens. It changes the complex shapes of its featured content to simple squares.
This article is written by David Walker. He is a web design consultant who has worked on many web designing projects for the past two decades. David now specializes in designing websites for smaller screens and mobile devices and his expertise in this field have been sought after by many major web design companies. Ask David for any advice relating to transforming desktop websites for mobile use and other related queries.

Disclosure: Some of our articles may contain affiliate links; this means each time you make a purchase, we get a small commission. However, the input we produce is reliable; we always handpick and review all information before publishing it on our website. We can ensure you will always get genuine as well as valuable knowledge and resources.
Share the Love

Related Articles

Published By: Souvik Banerjee

Souvik BanerjeeWeb Developer & SEO Specialist with 15+ years of experience in Open Source Web Development specialized in Joomla & WordPress development. He is also the moderator of this blog "RS Web Solutions".