Website optimization for tablets

As Internet is evolving, more and more devices appear with screen sizes different from a desktop. Tablet sales steadily grow, which means that today we should not neglect users of these devices. Instead we need to optimize such users’ experience.

 

Tablets image from Shutterstock
 

Increasing typing speed by adding special symbols

Additional symbols of virtual keyboard can be changed for necessary ones in each specific case. For example, when typing standard text, we see punctuation marks:

When entering email address we change symbols for the necessary ones:


Standard keyboard:
<input type=”text”>

URL-parameters:
<input type=”url”>

Email-symbols:
<input type=”email”>

Digital keyboard:
<input type=”text” pattern=”[0­9]*”>

GET ACCESS TO EXCLUSIVE TOOLS

As Google premier partners, we have an opportunity to try out new Alpha and Beta versions of various tools, that will be available to all advertisers at a later date, but we use these first.

Disabling auto-correct and initial capital letters 

Filling the forms on a tablet virtual keyboard has some special features. In particular, when you are logging in and entering your email, system is trying to correct it in accordance with its own vocabulary base. It also tries to start the line with the capital letter. In order to avoid this, use the simple HTML-code:

<input type=”text” autocapitalize=”off” autocorrect=”off”>

Correct placement of blocks

The way user interacts with the website on the tablet differs from the one on the desktop. It should be taken into account when designing the interface, emphasizing the most important elements. Here is one example, where the search form on the online shop website was changed.

Letters are too small:

Well done:

Changing typography

A quite obvious thing is that the website should be well-readable on a specific device. For the tablet version the text should be enlarged. Also the user should have an option to change the text size himself. Below is an example: to the left – before optimization, to the right – after improvements have been done.

Changing the button size

We use touch-control on tablets and smartphones, so navigation should be optimized. Usually it means enlarging the button size and the active click area.

Minimum of typing required

Typing the text on virtual keyboard is not very comfortable, so you should minimize the necessity of such work for a user. For example, in the forms you can use autofilling (by the first letters of the name or by geo-location):

Image cycle

If there is a cycle of pictures displayed one after one on the site, it should be navigated by the touch:

Disabling a:hover

In touch-devices you cannot just point the cursor at the object, so you shouldn’t use it as a way of user’s interaction with the  website.

Designing for portrait and landscape screen orientation

Users can use tablets of both types — with landscape and portrait orientation. So you should take it into consideration this fact when designing the interface.

Using camera

Tablets give us lots of new possibilities, for example, when user fills in the profile form,  you can offer him to take an instant photo to create an avatar with the help of  tablet camera:

<input type=”file” accept=”image/*” capture=”camera”>

Hiding the address bar

When using the tablet, every pixel counts, so you can hide the address bar (Safari allows this) to increase the useful screen area:

 <meta name=”apple-mobile-web-app-capable” content=”yes” />

via

Leave a Reply

avatar
  Subscribe  
Notify of

Recent posts

How to optimise ecommerce video for Google

February 26, 2019

Video search engine optimisation is a practical solution for online stores which can attract additional interest to their product range, increase sales and improve average time spent on site. According to the recent Lemonlight statistics, 62% of consumers watch product review videos before making a purchase. Moreover, over 97% of brands admitted that videos helped Continue reading >

What Marketing Channels Were Effective For Different eCommerce Niches In 2018

February 15, 2019

Marketing channels may work differently for different ecommerce niches. There is no one-size-fits-all success recipe. However, tracking the current situation on the market can help you better analyse your state, improve your multi channel marketing strategy, and make some prediction for the next years. In the CEE Ecommerce Report, we studied 10 niches: electronics, car Continue reading >

How Can A Subscription Model Help Your Ecommerce Business?

February 5, 2019

The subscription based business model is becoming extremely popular in ecommerce due to several reasons. People striving to save time. The first and main factor is that consumers are looking for ready-made solutions to their daily problems. They value time more than money and therefore are ready to pay more to save this time. According Continue reading >

4 Ways You Can Up Your Sales with Email Marketing

January 31, 2019

Email marketing helps you keep in touch with your customers and prospects. In particular, this allows you to inform consumers about your promo campaigns and new products in stock, notify them about the state of their order, and bring them back to your website. One of the best things about email marketing is that you Continue reading >

Let's get the ball rolling

Please fill in this short form and we will be in touch with you soon

For any questions [email protected]

UK | USA

+44 (0) 20 313 766 81
+44 7852 537715

Lincoln
The Terrace AT5,
Grantham Street,
LN2 1BD

+1 347 809 34 86

Las Vegas
7848 W. Sahara Ave.
NV 89117

State Of Ecommerce 2018 (Poland)

TOP 50 Market Players & Their Traffic Analysis

enter correct name, please
enter correct e-mail, please

Website optimization for tablets

0
start now

Start now