Tablets are computers, but they work a lot differently than the standard desktops and laptops everyone is used to. This means web designers need to build in accommodations for mobile users, whether this is a separate mobile website or an app. Take a look at these six ways that tablet computing influences web design and how you can plan for it.
Design with the Touchscreen Interface in Mind
One of the biggest considerations when designing websites for tablets is that there is no mouse and cursor. People use their fingers to click and interact with the mobile website. This means that the website design needs to have larger, clickable areas than a standard website because fingers are too big to work like a cursor. So, instead of using tons of in-text links and small navigation buttons, make them fingerprint size for ease of use. Clickable buttons and images are easy to use in web design and they are also aesthetically pleasing.
Of course, fingers play a bigger role on tablet websites than simply clicking links. There are several finger gestures that people have come to expect. For instance, swiping to scroll and pinching to zoom. You need to make sure you integrate these finger gestures into your mobile website to make the experience better and more intuitive for tablet users.
Keep the Design Simple
It’s tempting to use Flash, HTML5, hover effects, transitions, JavaScript, and other impressive web design features when designing a mobile website, but they don’t work well on tablet computers. This is because tablets do not have as much RAM as desktops and laptops, which means too much code takes too long to load. Plus, some of these design elements don’t work well because of the small screen size. For instance, hover effects are hard to see because your finger gets in the way. Videos and images are OK, but anything too fancy should be avoided.
You also have to keep in mind the website resolution. You don’t want to use any images or design elements that will look weird when they are small. Additionally, you want to have a good resolution so users can zoom in on details without anything looking fuzzy. You can’t just shrink your regular website and call it good because it wouldn’t be readable or easy to use on a tablet. So, take the most important information and design elements from your regular website and rework them for your mobile website.
Remember to Design for Both Landscape and Portrait Orientation
Another thing to consider when designing mobile websites for tablet users is the orientation. Tablets can be held in either portrait or landscape, depending on the user’s preference. This means you need to have a website that can seamlessly change orientation without a problem. This is particularly important if you have fields for people to enter information because the pop-up screen takes more space in landscape than portrait orientation and users typically switch to accommodate this. If you don’t make sure your website looks good in both orientations, it might look distorted to certain users.
Optimize Screen Real Estate Since It Is Limited
One of the biggest obstacles web designers face when designing for tablets is the smaller screen size. Screen real estate was already limited on desktops and laptops, but it is even more of a problem on tablets. This means you should carefully consider the elements that you want to appear right when the website is opened on a tablet. For instance, stores should display business hours and locations while blogs should have an opt-in email subscribe form. The needs of every website are a little different.
There are also many other things to consider about tablet screen size and mobile website design. For instance, you need to find a good font size and balance it among the other elements in your design. People typically stick to a sans-serif font because they are the easiest to read, but you should experiment to find the best one for your mobile website that also matches your brand and intended message.
Utilize the GPS and Sensor Features on Tablets
Tablets come with a whole host of features that aren’t available on desktops and laptops, such as GPS capabilities and motion-detection. Good web designers incorporate these features into their mobile website. The GPS can be used to determine a user’s location, which can give them more targeted information. For example, a user that wants to find the closest chain restaurant can pull up the restaurant’s mobile website and automatically see the closest location based on their physical location. There are also lots of fun things web designers can do with the motion-detection software, such as interactive games.
Of course, every tablet and smartphone has different features, so you need to take this into consideration when designing your mobile website. A new Blackberry 10 phone on T-mobile has a GPS, motion detection, and more, but the screen size is smaller than most tablets. So, only design for the most common tablet and smartphone features.
Plan to Accommodate Different Tablet Platforms
Every tablet platform has its own app market with apps that only work on that device. However, mobile websites can be built to accommodate any platform because they are viewed through a web browser instead of an app. This doesn’t mean that your website will look the same on all devices, though. So, you should test your site out on as many devices as possible to make sure it works. Screen size is the biggest consideration when testing your mobile website because tablets all have different dimensions. Some have more of a square screen while some are longer and rectangular.
According to Gartner, there will be 665 million tablets in use by the end of 2016. So, web designers shouldn’t ignore the need for mobile websites that work well on tablets. Do you have any other advice for tablet website designers? What usability issues have you come across (either good/positive or bad/negative) on your tablet? Leave a comment below.
About Teddy HuntTeddy Hunt is a freelance content writer with a focus on technology. When not behind a computer, Teddy spends the majority of his free time outdoors and resides in Tampa, Florida.
I am using wordpress and I see lots of Retina ready and responsive themes. This clearly show that Tablets are most used Internet browsing device. even I love ready ebooks and web news on my iPad.
Jaikee Jaiswal recently posted..How To Back Up A Window Phone
Keep in mind some of the unique features of the tablet form factor. Users swipe and touch rather than scrolling and clicking. They can turn the device on its side and the browser will flip accordingly. You can use CSS media query declarations to adapt your site’s design depending on the device’s orientation. You could develop a different design entirely for tablet users or simply make your site’s user experience one that meets desktops and tablets halfway.
Right on, Ian.
Thanks for your input Ian. It’s helpful. Since Teddy, wrote this guest post for me, I’ve been reading articles about designing websites for mobile computers. A website designer who I know, recently commented that often using a responsive website WP theme is a good solution.
Sherryl Perry recently posted..Friday Finds – Blog Reader Engagement, Google Penalties, Mobile Websites
Sherryl,
I never though about the tablets for webdesign but they are important aspects as well. I don’t think flash should be used on any site as it takes longer to download. If a site loads too slowly most people leave. When I first got my Ipad I tried to go to HBO to see what was playing on Saturday and the site wouldn’t download at all and when I went to my desktop I was able to see that they use Flash. Might look good but more and more people are using the tablets. Very informative post.
Arleen Harry recently posted..Become one of the Flying Wallendas for Your Business
Hi Arleen,
Thanks for letting us know that you found Teddy’s post informative. I think he did a great job and I’ll be posting other articles from him in the future.
I remember well when Flash was in demand. Most of the time, it doesn’t enhance the user experience at all and is actually responsible for a lot of website visitors bailing from a page. Once people started realizing that the exit rate from pages with Flash were higher than from other pages, it started losing popularity.
Yes, Arleen. Thanks for reading. I’m happy to contribute.
Tablet are here to stay.My husband who isn’t a tech oriented at all now uses his iPad exclusively and rarely if ever boots up his desktop. That said it was interesting regarding the thought that goes into the overall design of the tool and what a website need to think about for an end user. I know that My site is mobile optimized for mobile which is good but how other plugin software interact with that is another matter. I’m sure as thing progress they will catch up. At least that is the hope. 🙂
Susan,
That’s a great story about your husband not booting his desktop up since he got an iPad. My husband was the same way with his Android smartphone. He resisted it initially saying that he had no use for one but he absolutely loves it now. We’re definitely becoming a mobile society when it comes to technology.
MailChimp recently changed their design to be more tablet-friendly. I’m not sure how much I like the shift to attempt to make one user experience across multiple devices. Windows 8 still vexes me to no end, but I guess the move to overall simpler layouts is inevitable, but it’s hard to change how you’re used to navigating on a laptop when so much is now geared toward tables.
Jeri recently posted..Opening Lines: Such is Life
Jeri,
Hopefully, responsive website design will someday be the solution. For now, responsive design doesn’t always mean mobile friendly though. We’ll be seeing more on this as time passes for sure.
Sherryl Perry recently posted..Friday Finds – Google Plus Commenting System
Hello Mr. Hunt,
1. I’m kind of old school. I like desktop computers, I have a mobile but I do not use it to surf the net etc. This whole thing, these new developments in technology it’s rather intimidating. With desktop computers it is easy to work, use different types of software, create all kind of documents, build a site, build a blog etc. With mobiles, tablets etc it is very difficult. It’s like a whole different world.
How easy is to build a website or blog for mobiles compared to the more traditional ways?
2. How to test your site/blog for mobiles? Do you use a kind of software?
Have a nice day
Silviu recently posted..How to Test Your Homepage in 5 Seconds
Hi Silviu,
Thanks for your concern about this new movements in technology. It can be rather intimidating. I think largely though designing for these other platforms requires some fine points that I’ve laid out here. But you as a user, should not have to worry about that. 🙂
In terms of building a website for mobile, you’re most likely going to do so from a desktop or laptop. So the difficulty is really not all that different.
For testing your mobile site. there are good applications out there that can help you. This link here will show you what I mean. http://djdesignerlab.com/2011/01/13/10-excellent-applications-for-mobile-website-testing/
Silviu,
I agree with Teddy that you would want to design your site for mobile devices on a desktop or laptop. That is if your site needs tweaking. I’m happy with the way my site appears on mobile devices as it is. If I weren’t, I would seriously consider outsourcing it to someone who is skilled in that area. Sometimes, our energies are best directed elsewhere. 🙂
Really interesting information, Teddy.
It’s clear I will eventually need the assistance of a web designer. Am used to designing, layouting newspapers and so forth. Have however always had people doing the nitty gritty for me. Hence have never needed to learn in-design and photoshop.
Like your suggestions. Just disagree when it comes to what should be the first impression when someone clicks into a blog. If it’s opt-in email subscribtion form, it would put me completely off the site. The same applies to all these popups. Unless it’s a sales blog what should be focused on are the articles and content. If the editorial is of no interest, I leave.
Catarina recently posted..Are you joining the “Made for China” trend?
Hi Catarina,
Thanks for the comment. And yes, the pop ups can be rather annoying and articles should be focused on the content for any particular site. I appreciate the feedback.
Catarina,
I find pop-ups so annoying. They do work though. So many well known bloggers attest to how effective they are for building your email list.