Tweet

Viva la Fingertip! The Touch Screen Revolution (Part 1)

Guest post by: Andy Crestodina

Article Overview: Smart phone purchases in the 3rd quarter of 2010 were up 96% compared to the year before, according to Gartner. Apple is about to launch the second version of its "magical" iPad, and a host of imitators are releasing their swarms now. The desktop computer isn't dead, but a lot of people looking at websites with something else-and the touch screen revolution is just getting started. Is your site ready?

Viva la Fingertip! The Touch Screen Revolution (Part 1)

Smart phone purchases in the 3rd quarter of 2010 were up 96% compared to the year before, according to Gartner. Apple is about to launch the second version of its "magical" iPad, and a host of imitators are releasing their swarms now. The desktop computer isn't dead, but a lot of people looking at websites with something else-and the touch screen revolution is just getting started. Is your site ready? First, let's first be realistic about traffic levels from touch screens. For the Orbit site, only about 1% of visitors are using iPads and 2% are using smart phones. Not a ton, but these numbers are growing steadily.

So if, after reading this, you find that your site isn't touch-friendly, take a look at your analytics - (for Google Analytics users, it's in Visitors > Browser Capabilities > Browsers and OS). How many people are you disappointing? Several? Dozens? Hundreds? Decide what to do based on this information.

Although touch screen technology is changing fast, making it hard to predict future user behavior, here are our initial best practices for touch-friendly web design.

1. Size Matters

Smart phones have screens that are simply too small to comfortably display a full-size site. If you follow the rest of the guidelines below, smart phone users will still be able to get around your site, but it won't be easy. So if you want to serve the smart phone demographic, we absolutely recommend some mobile web design. Design a smaller version of your site, specifically for smart phones.

Tablet screen sizes are typically between 10 and 7 inches-with a resolution width of 1024 pixels. This means they should be big enough to work with your full-size site, so long as your site is no more than 1000 pixels wide.

John Cooney: We rarely recommend making a site wider than 1000 pixels, even if most desktop monitors have a resolution width of at least 1600 pixels. Most users will never even notice the width of your site, especially if it is well designed, unless it's too wide. If your site's too wide, users will definitely notice and will likely leave. Everyone hates to scroll horizontally.

2. Skip the Flash

By leaving Flash off iPhones and iPads, Apple and Steve Jobs have successfully given Adobe a black eye. I'm not predicting the death of Flash. (In fact, Flash was my first love online.) There will always be a place for it in my heart, and a place for it on the web. But at least for now, Apple rules the touch screen world and Flash is a problem.

You probably don't need Flash anyway. If you just want an area of the home page to rotate different pictures and text, this can (and should) be done without Flash.

John Cooney: In addition to Flash, there are additional functions that won't work on a smart phone or iPad (and likely won't work on the forthcoming competitor tablets). Uploading through the browser isn't supported, nor are plugins or Java applets. If you have advanced functionality that you want touch screen visitors to use, you may need to consider creating an app.

3. Use Touch-Friendly Navigation

Links are usually smaller than buttons. When navigating a website on a touch screen, you need better aim to touch links, especially if they're close together. Especially for the main navigation, make links and buttons fingertip sized or bigger-and remember that desktop users will always appreciate links that are easy to click too. No one wants a dexterity challenge when they're just trying to find your phone number.

4. Limit Rollovers

Fancy rollover effects (i.e., things changing when the mouse cursor moves on top of them) aren't going to work well on a touch screen. Since your visitors are using fingers, not mice, there is no mouse cursor. Javascript image swaps won't work. Neither will "Previous/Next" buttons that appear when the mouse cursor is nearby.

So limit rollover effects to style enhancements instead of necessary controls-again, this will help make your site easier to use for desktop visitors too.

John Cooney: Users look where to go with their eyes before they move the mouse; elements hidden until rollover may never be seen.

Bottom Line

Next time you're near an iPad, try out your site. Or better yet, ask someone else to do it and watch them. If you follow the above guidelines, everything should work well-but it's likely there's a few things that need some attention. So take a look at your analytics and think about ways of making your site accessible to all users.

Related Articles
  Most Laptop Users are Probably Able to Replace a Broken Screen
  Two Simple Ways To Free Up Your Time
  Are you out of "touch"?
  Record and Remote Your iPhone Screen
  Is Capitalism, as Seen by Enterpreneuers now, Good or Bad?
  Age of Convergence? Not for Designers.
  Motorola MB502 charm cell phone details by cellhub
  How to Decide if your Laptop Screen is Faulty or is Failing
  Don’t bet on an Apple netbook—but an ‘iPod HD,’ well, that’s more likely
  Read On Book Review ~ twitter Revolution
  PC Screen Recorder for Windows 7 Overview
  The Need for Touch
  New Years Resolution, Do Not Make One This Year?
  Free Your Print Screen Button with screen recorder
  About time we heard what the aging population can DO together
  Can Music Make Your Sales Force More Effective?
  Filing So You Can Find it Again
  User interface, brand, content top considerations when choosing a new mobile phone
  A Bird View of PC Screen Recorders
  Kindle app for the iPhone won’t affect Kindle 2 hardware sales

Article Tags: apps, iPads, mobile web, smart phones, touch screen



Related Forum Posts
Patent information - I'm also interested in Part 2. Thanks.
Patent Process - Interesting to hear your experiences with the patent process - what's Part 2?
Re: What would you do with your last $1000? - I would put into my business certainly. If money sleeps then you will lose it. Nearly the eaxct situation happened with me. I had my last 750$ in my pocket to make money online. If I spent it in a wrong way, I would have to lose my chance to own business on the Internet. But I used it wisely and bought D. Gerl's Insider Secrets to Internet Marketing. Then put the rest of the money into Google Adwords and could save my business. But now..... I would continue my monthly membership on SubmitYourArticles Article Submission Service (37$), buy Revolution Wordpress Theme, maintain monthly membership on J. Humpereys ASC membership program and the rest of money put into Google Adwords and Yahoo Ads. Orxan
Re: What are your January Goals? - Here's a quick update on mine: Goal #1: Hire New Writer = done - Post job description on oDesk - Set up trial job - Pick top candidate Goal #2: Follow up with Clients = done - Create and send quarterly report - Touch base with last year's clients - Follow up with 4 connectors Goal #3: PERSONAL = about 70% done on the month - Do something nice for my wife each week - Exercise 4 times per week - Daily stretch - want to touch my toes
Re: Attention Age Doctrine - Hi Andy, So how did you find of "The Attention Age Doctrine" Part 1? And has following its guidelines yielded any positive results yet?


Share this article with your friends. Fund someone's dream.

Leave a comment below or share on the left and you'll help support entrepreneurs in Africa through our partnership with Kiva. Over $50,000 raised and counting - Please keep sharing! Learn more.

Newsletter

Get advice & tips from famous business
owners, new articles by entrepreneur
experts, my latest website updates, &
special sneak peaks at what's to come!

Name:
Email:

Popular Articles

Purchasing Real Estate using the SBA 504 Loan

How Promotional Caps became a Fashion Trend

Leading from Authenticity is a Beautiful Thing

Suggestions

Email us your ideas on how to make our
website more valuable! Thank you Sharon
from Toronto Salsa Lessons / Classes for
your suggestions to make the newsletter
look like the website and profile younger
entrepreneurs like Jennifer Lopez.