Today, we are in the revolution of touch-based technology—smartphones, tablets, gaming consoles, all-in-ones, notebooks, and PCs, all of them are touch-based. Our major operating systems like Windows, Android, and Apple Mac OS X have transformed to incorporate touch input. People are showing unprecedented love toward touch-based devices. In such a scenario, it should be known how exactly a website should be designed to be compatible with tablets out there. In this article, let’s check out some of such design concerns.
One of the recent surveys done in the realm of web analytics tells us that people are browsing websites more on tablets rather than on smartphones. Apple iPad, Google Nexus 7, Nexus 10, Samsung Galaxy Note, Galaxy Tab, etc., are taking over PCs in the world of web browsing. People are increasingly preferring these devices to get online. Still, a typical desktop website may not display quite so well on a touch based device. Fonts, images, and some features that we find in desktop version of a website may not fit quite well on a tablet.
You, however, don’t have to completely change a website in order for it to work with a tablet out there. Changing certain elements on the website is enough to make it work on any tablet.
Make it Touch-Friendly
In order to get your desktop website to work well with the tablet interface, incorporate popular touch-based gestures into the design. Touching, swiping, tapping, pinching, etc., are the first things that you need to incorporate into the website to make it work on a tablet. Certain website modification services, like Mobify provide you with the needed elements to make the website work on a tablet, such as digital carousels, panels, accordions, sliders, etc.
Change the Size of Elements
A normal desktop website may work perfectly with a font size of 12px. Your website may use that size by default. It is what people know for years. However, when it comes to tablets, you have to change the font size. May be increasing it to 16px or so would be one of the first things to do.
Most of the popular websites have incorporated such design changes and they have amped up the websites to look better on tablets as well as desktop computers.
Another important thing to do is increasing the size of the buttons. Normally, your cursor don’t have an issue with a small button on your desktop screen. However, when it comes to tablets, your finger acts as the cursor, and it is a lot clumsier. It is hence recommended that you increase the button size upwards of 44x44px.
Contextual Touch Keyboard
A touch keyboard is a dynamic element. It can be modified according to the need. For instance, if your website has a little form, in which people can fill in data, touching a field marked as ‘telephone’ can bring up a number keypad, while in another location, a text field can bring up a regular QWERTY keyboard. This flexibility should be utilized at best.
Performance Centric Design
How good is the website performing on a touch-based device? You should take that into consideration. A garish website that incorporates a number of unnecessary widgets and buttons will not come up well on a tablet. Tablets and smartphones do not yet have the system configuration comparable to full fledged desktop computers. Hence they are sure to respond sluggishly to badly designed websites. It is hence important that your design be as simple and straightforward as possible. It should come up properly on a tablet.
While on a desktop, more than half of the users are likely to leave a site if it takes 4 seconds to load, in a tablet, it is 3 seconds only.
Things that a webmaster could consider include changing the image formats to make them smaller in size, and changing the JavaScript, AJAX, CSS elements to reduce the number of HTTP requests. There are a number of web applications that help users in these things.
Redesign the Icons
Tablets have better resolution and pixel density than desktop computers. Today’s tablets are all in HD resolution or higher than that. iPad 4 for instance has better resolution than HD and its pixel density is 264ppi. In such a tablet, a normal graphic can look pixelated. Always a vector design should be in mind when designing for tablets. These designs are known as font-based. They do not form pixelation on scaling up, and they take up much less time to download on to the tablet.
In Conclusion
These are only some of the design consideration to take care of when designing websites for tablets and smartphones. A really good web design should incorporate various features the tablets provide and be able to take advantage of them. Also, you should make sure your design is tested well on all kinds of tablets. Although there are thousands of different brands, you only have to test the website against five or six of the most popular Android tablets and iPad.
Editor’s Note: Laurel Shah-Williams works as the associate editor of Blue Bugle. She also runs a new website, CreatingSites.org, where website creation and design help are provided. Laurel has experience working with a number of IT companies, including Accenture and AT&T before moving into technology as a full time career.
