Mobile Technology and Web Design

Jose Daniel SantiagoJanuary 27, 2012

Full Sail University

73% of the World’s population now has a mobile phone

85% of kids own a phone or some kind of electronic reading device while 73% of them have books

Mobile Usage Growth

• Annual sales of tablets will rise to 82 million by 2015• Will account for 23% of all PC sales

Today, many tablet owners are using other media less. • 20% are using print magazines less• 25% are using print books less• 27% are using print newspapers less.

On average, website visitors are 51% more likely to do business with an online retailer if it has a mobile site

Impact on Web Design

Fluidity

CNN’s website works great in both landscape and portrait iPad orientations

Fold

Users pass judgment on what they can see and how fast they percept it.

Declining Web Technologies

CNET redesigned their streaming site to handle iPad-compatible HTML5 video

Tips for Mobile Web Design

Designing for tablets is like designing grid paper for little kids who use jumbo sized pencils to draw pictures –you want to keep thing simple and BIG.

Pleasing Typography

• On a tablet, although, you can zoom in when the text is too small, if the line-length is too long the text is still hard to read unless you scroll each line of text.

• Likewise, big text can be a turn-off on tablets too. Text that is too big forces users to scroll more often than they otherwise might need to.

• It is important to find the perfect combination of font-face, size, line-height, and line length.

Usable Buttons

• Icons that are too small can present a problem.

• The average finger can easily click on a space of about 20px.

• Good buttons should be easy to press with a finger.

Better Layouts

• Complicated layouts require a user to constantly zoom in.

• Less complicated layouts means getting rid of the unnecessary meta data. Instead of listing the date, tags, categories, social media icons, author, etc, just make more space for what’s actually important: your core content.

Good Websites for Mobile Devices

Southwest Airlines’ desktop site: lots of pixels available means lots of pixels used. The mobile experience: very few pixels available means they’re used for what matters.

Good Websites for Mobile Devices

Facebook’s mobile application also provides easy access to content.

Bad Websites for Mobile Devices

Craigslist’s layout is the same for mobile and desktop access. This is how it looks on a pc. When you access it using your phone, you get a lot of hyperlinks and blocks full of text.

Bad Websites for Mobile Devices

http://www.mauiwedding.net/index.phpThis is the website of the company we used for our wedding video and pictures. Since most of the design was made in Flash, it can’t be accessed using Apple products.

Referenceshttp://mduench.wordpress.com/2011/06/07/interesting-data-on-tablet-usage-demographics-and-mobile-marketing/

http://gigaom.com/mobile/3-reasons-tablets-will-take-1-in-4-pc-sales-by-2015

http://webdesign.tutsplus.com/articles/how-the-ipad-and-tablets-are -driving-new-web-design-trends/

http://blogs.sitepoint.com/7-tips-to-mak-your-web-site-mobile-friendly/

http://jenders.com/wp-content/uploads/2011/01/Forrester-Tablet-Growth-2010-2015.png

http://www.msnbc.com/id/41895518/ns/technology_and _science-tech_and_gadgets/

http://www.internetretailer.com/2011/01/11/20-us-consumers-will-own-tablets-2014-research-finds