As most of you know, iPads, PC tablets and various mobile devices are becoming very popular and even the standard nowadays. You cannot walk down the street, get a cup of coffee at your favorite coffee shop or get on the bus or subway without most everyone connected to a mobile device. Therefore, it is imperative for website developers to optimize and maximize their design for these gadgets.
Today we are going to on tablet devices. The iPad is one of the most popular tablets in the world along with Android-based computer tablets. But, the masses have spoken and Apple always seems to treat us with something new and cutting edge and is the innovation-leader in the tablet world.
When designing websites for tablets, there are a few things you should know about the design, layout and JavaScript.
• When designing the layout, we recommend you do this without a scroll bar. With tablets, more times than not, the user will see what he wants immediately and then and then goes to that information. Typically most sites try to fill their home pages with a lot of information, so in this case you can make a comfortable vertical scrolling feature. If you decide to fit all the information on one page without scrolling, the page size should be – 960 x 644 px.
• The primary method of user interaction with the iPad is the fingers on the screen. So all those hover effects that were favorable for pointer-based devices, will be a hurdle in the user experience for the iPad and other tablets. A prominent option would be to use multiple CSS styles for different configurations and devices.
• Do not use Flash on your website, iPad does not support this technology. If you want to output audio or video on your page, use HTML5.
• Scripts with execution time more than 10 seconds automatically turn off, so try to optimize and minimize your scripts.
• iPad has a built-in function for searching for mobile phones. If it finds it, it adds to it its style, wrapping in its wrapper. If you do not like it, then just add to the section head:
• If your website has a lot of animation, it is better to use hardware acceleration. This can be done through CSS. For example if we animate element in the script like this: $ (Element). Animate ({'left': -10}); for iPad we can use such a code and it will work much faster:
The iPad users who like your website can add it as a shortcut on their desktop and the tablet will create a screenshot of the home page and automatically make it an icon. You can also determine the form of the icons by yourself, writing in the head section the following line:
Now your website users will have a better tablet experience.
