December 19, 2014

Insights for a Tablet Ready Website

how to design a responsive website

When you read statistics about the growth of the mobile Web, you may be thinking about an iPhone or other small smartphone.  But what mobile web figures often include are statistics about tablets — those hybrid mobile devices that are larger than smartphones, but smaller and more portable than laptop computers.

And when it comes to your website, you want to make sure you have a tablet ready website. An increasing number of your site visitors will be viewing your site through a tablet — versus a regular computer.

Designing a tablet ready website is something that involves special considerations given the size and format of tablet screens, and how humans use tablets.

Has this happened you? You’re out and about, and need to access a website. You pull out your tablet, load up the URL and it’s just not right. Maybe the page is formatted terribly. Maybe it’s just a mobile view that doesn’t cut it compared to the computer experience. Regardless, in a rapidly evolving technological age, these types of mistakes just don’t cut it anymore.

Kevin McNally, the CEO and Founder of Interactive Palette, knows that tablets are quickly becoming a bigger market, and what millions of Americans use to access the Internet every day. When asked about the subject, McNally had much to say about it. He comments that often, much of what appears on the Web is simply just too much for a tablet display to handle. Therefore, designers should focus on a quick-loading and clean-looking mobile design that is specific to tablets.

Further, when browsing a tablet, consumers don’t have the ease of control that a mouse or trackpad allows for. Designers should keep this in mind as well, and design to accommodate for the human finger.

When designing for tablets, often many designers want to incorporate Flash browser plugins and surplus software, as they would for their computer counterparts. McNally stresses to simply leave that all behind. HTML5 is the simplest route, and it will work well across many different platforms. Also, while the grid system of most websites works at roughly 960 pixels, resolutions should be designed at around 1024 pixels for tablets to allow for better, smoother displays.

Tablets, over the past couple years, have rapidly become a vast market to expand into. iPads, Kindle Fires, Galaxy Tabs have all come to create a new kind of ‘fold,’ says McNally. He notes that designers must remember to keep orientation in mind when designing for tablets. Often, what looks spot on in portrait mode will look stretched or distorted in landscape, and likewise it is important that the vital information of your Web page not be covered when switching orientation, or that consumers not need to swipe and scroll to find that information.

Finally, McNally points out the easiest way to ensure that your Web page fits the bill for tablets: testing. Test your design on as many tablets as possible to be sure of its viability, that the resolution and orientation are consistent, and that it won’t fail the “touch test.” If it doesn’t respond to your fingers, it’s not much use being loaded onto a tablet.

The future of business and technology is changing, and it’s tantamount that companies change with them. Kevin McNally knows all too well the importance these emerging technologies have on how consumers access the Web and makes a clear-cut case for how designers should begin to view the tablet space. Either they should bear in mind how they appear on the widening tablet market, or they had better get used to being a thing of the past.

A version of the above article was originally published on SmallBizTechnology and is included here with permission.

Tablet Photo via Shutterstock

2 Comments ▼

2 Reactions

  1. Great insights. I wonder if the mobile friendly plugin I’ve installed on my blog shows up the same way on a tablet. I’d be interested to see. Thanks again, for the awesome info.

    Ti

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>