This article will guide you by telling you the DOs and DONTs while optimizing your website for tablets. Here are some important points you should keep in mind.
Since the advent of internet, the modes for accessing it have been evolving very rapidly. In today’s scenario there are various platforms which one may use to access internet viz. PCs, smartphones, tablets, etc. So for a web developer, it has become a vitality to optimize and make his website friendly to all these platforms for a wider reach and better response.
This article will guide you by telling you the DOs and DONTs while developing the tablet-ready version of your website. Below are some points that make a difference when the website is accessed from a Tablet instead of a conventional PC or Laptop:
- The Fold: ‘Fold’ is a point after which the website needs to be scrolled down in order to view content. When viewed from a tablet the user may read only till the fold and if not interested he may navigate away from the site. So it is advised that you put the most important and attractive information prior to the fold. You may also provide navigation options just after the fold so that it is easier for the user to navigate.
- Fingers instead of mouse: In case of tablets the users are not using a hefty mouse but instead they are using their own fingers. Due to the fact that fingers are not as precise a pointing tool as a mouse cursor, sometimes it becomes difficult for a user to access important areas such as navigation panes and widgets with their fingers and as a consequence they need to zoom in the site which is really annoying. So keep your components’ sizes big enough to be easily tapped by fingers.
- Form Feeds: When using a tablet it sometimes becomes difficult to fill in the forms without zooming. So keep in mind the positioning of the forms and please avoid unnecessary form feeds to make it more user-friendly.
- Lesser Flash: Do not use much flash elements in your website as some tablets and android phones may not even have a browser which supports flash. Also, if you have to add Flash content, do not make it a compulsion for the users to install additional plugins to view other content on your site.
- Landscape/ portrait: Tablets are used in a mobile environment and have in built accelerometers which change the orientation of the device either landscape or portrait mode as per the positioning. So make sure to build your website accordingly and test it using both these modes.
- Thorough testing: The most important step is to test your website by accessing it from a tablet before you finalize the design. Make sure the content is readable, easy to navigate and user friendly even when viewed from a tab.
The Don’ts
- Do not use rollover effects ever when you are tablet oriented as there is no mouse to put the pointer over the content. So no one is actually able to view the interactive pop-up content. The user would simply tap the content with his fingers at the most.
- Do not include much flash content. If you want it to be tab-friendly avoid flash as some tabs and phones do not even support it.
- Do not have many clickable areas very close to each other as it will be difficult for the user to select one with his finger without using zoom.
- Do not have too much of media cluttering the site as it would make it look congested and the page will take a lot of time to load.
- Do not have multiple panes/frames as swiping some area may result into scrolling of the respective pane only while other swipes may result into different scrolls. It would be advisable if you keep your layout as simple as possible.
The Do’s
- Tablet optimized WordPress themes: There are certain wordpress themes which are tablet ready and may be of much advantage to you. Some of the examples are:
- Onswipe: Optimized for tablet web browsers and easy to apply.
- MobilePRO: Looks utterly beautiful on mobile and tabs. Also works great on laptops and desktops.
- Mobility: iPad ready theme with features such as ‘finger slide’ and ‘custom drag and drop’ functions.
- Pressly: It is an internet resource which makes your website apt for the tablets. You must totally visit this site if you’re into developing websites suited for tablets. Click here to visit Pressly.
- Use HTML5: You may learn and use HTML5 which offers effects and applets which are comparable to flash. Moreover, HTML5 is considered better than Flash, which is why all the newer OSes have HTML5 support instead of Flash.
- Resize your components: Small components may be easily viewed on a desktop but on tablet it is very difficult to tap them accurately. So choose the size wisely such that it is easy to access on a tablet but also make sure that the components do not look very bulky on a desktop.
- Keep your font size right: It should not be too small so that there are long lines which need to be swiped to be completed. Also it should not be too large which may result into excessive scrolling. Experiment with different sizes until you get it right.
- Left aligned everything: When you keep anything right aligned, it becomes difficult for the user to go to the extreme right for editing so preferably keep it left aligned.
- Use adaptive CSS: Having a fixed template limits you to optimize it for a particular group only. Instead use flexible CSS which uses scripts and elements such that they are shown only on the browsers which support them. So the compatible users get a ‘rich’ experience while the other ones do not have to worry about missing plugins and add-ons.
- The most important point as mentioned earlier is to test your design by accessing it from a tab or mobile device. You should check the following attributes of your site:
1. It is easy to navigate.
2. No irrelevant zooms are required.
3. There are no browser integration issues.
4. It is not much hefty to load and process.
5. The content looks clear and bright on a tablet.
6. It is compatible with all mobile OS platforms.
The above mentioned tips will definitely guide you in making your website tablet friendly without much burden. So go on and make your websites tablet friendly, making it possible for the mobile and tablet users to connect with you easily.