Mobile / TabletImpact On Web Design & The Need For Your Business To Be Sure Your Site Is Accessible.

Mobile device usage on a rise.

The rise in mobile device usage is having a major impact on the way websites are designed and how people access those websites.

Gartner Study

Mobile / Tablet Users and PC User by 2013

Mobile / Tablet Users

PC Users1.76

1.78

1.8

1.82

Billions

Transactions Made Using Mobile Devices by 2014

Transac-tions

01234

Billions

Estimated Mobile / Tablet Usage

It is estimated that by 2013 the number of mobile and tablet users will be greater than the number of pc users and there will be a rise in number transactions made using mobile devices by the year 2014.

(“Gartner: Mobile to Outpace Desktop Website by 2013,” 2010)

Changes in Web Design

With this kind of growth in mobile and tablet usage, it is important to understand the changes in web design to ensure that your site is accessible on these mobile devices.

Content should be presented in a user-friendly way.

Designing websites for mobile devices requires the site’s content to be minimalized to the most essential functions and features.

Mobile devices require content to be reformatted for their smaller screens.

Mobile Screen Size

• 320 x 480 pixels

Desktop Screen Size

• 1024 x 768 pixels

Give your visitors the user-friendly experience they are looking for.

• Use vertical navigation instead of horizontal navigation• Use bars, tabs, and buttons for hypertext• Optimize text and graphics• Use global navigation instead of contextual navigation• Use only the most important information in footer• Include a link to full size website

To ensure your site is accessible on mobile devices, include the following principles in your mobile web design:

HTML5 is the current technology enabling website accessibility on all mobile devices.

HTML5 is enabling open, cross-platform rich-media standards that will help brands’ and agencies’ display advertising achieving the compelling and creative and reach across mobile devices they have been seeking.

(“How HTML5 is Changing the Face of Mobile,” 2011)

Websites that work well on mobile devices.

Northeastern University College of Business Administration Mobile Merger

Websites that do work well on mobile/tablet devices are sites that understand limitations of mobile user experience. They also understand that they must present their visitors with the most relevant information in a user-friendly way.

Websites that work well on mobile devices.

Retail Systems Research Mobile Merger

Websites that don’t work well mobile devices.

Expresso Carwash Cafe BayView Radiology

Websites that do not work well on mobile/tablet devices are sites that are not optimized for mobile devices. Sites that are not optimized for mobile devices can give the user a bad user experience.

References“Gartner: Mobile to outpace desktop website by 2013”. Retrieved November 21, 2011 from http://www.mediapost.com/publications/article/120590/

“How html5 is changing the face of mobile”. Retrieved November 21, 2011 from http://www.mobilemarketer.com/cms/news/software-technology/9314.html

http://www.practicalecommerce.com/uploads/images/0001/3778/Amazon_Screenshot.png

http://media.smashingmagazine.com/wp-content/uploads/2010/04/amazon.jpg

http://www.w3.org/html/logo/downloads/HTML5_sticker.png

http://www.bluetrainmobile.com/blog/wp-content/uploads/2011/07/NEUCBA2.png

http://www.bluetrainmobile.com/includes/images/image-showcase-mobilemerger.jpg

http://www.helpalocalbusiness.com/images/local-mobile-website-design-services.jpg

http://www.pulse.me/media/images/products/iphone-ipad-android-dee4247003255374a29e323bc2c7e6ff6d49322e.png

http://www.wbur.org/files/2010/04/0403_jpad2.jpg

http://multivu.prnewswire.com/mnr/cnn/47767/images/47767-hi-first.jpg

http://www.silverscape.com/documents/image/blog_artwork/winterwyman.png

http://www.bluetrainmobile.com/blog/wp-content/uploads/2011/07/showcase-rsr.jpg

http://www.bluetrainmobile.com/includes/images/image-showcase-dpbrook.jpg

http://www.buzzy.mobi/wp-content/uploads/2011/07/espressocarwashcafe-ip-compare.png

References