18
NETC 2010 – Auburn

Web Development for Mobile Devices

Embed Size (px)

DESCRIPTION

Web application development for mobile devices.

Citation preview

Page 1: Web Development for Mobile Devices

NETC 2010 – Auburn

Page 2: Web Development for Mobile Devices

Motorola DynaTAC 8000x

  LED display   30 min. talk time

Only $3995.00

May 29, 2010 NC State University

Page 3: Web Development for Mobile Devices

Motorola DynaTAC 8000x

  LED display   30 min. talk time

Only $3995.00 $8723.67

May 29, 2010 NC State University

Page 4: Web Development for Mobile Devices

  4.2B mobile devices vs. 1.3B PCs   ~840M MD internet enabled   2009 the NA web share rose 110%,

148% globally   Forecast is 1.7B mobile web users

by 2013

The main or only access for many

Statistics from Vint Cerf, WWW 2010 and Quantcast.

May 29, 2010 NC State University

Page 5: Web Development for Mobile Devices

Many reasons contribute to the increase in use of mobile devices on the Internet.   Faster, better connectivity   Better data plans   Devices with larger, color displays   Touch screens   Better browsers (Webkit, Mozilla, Opera)   Software designed specifically for MDs

May 29, 2010 NC State University

Page 6: Web Development for Mobile Devices

  Small, variable screen size and resolution   Input is awkward   Selection of items is often difficult   Networks, even 3G, are slow and may cost   Flash is white space   Looking for a small amount of information

May 29, 2010 NC State University

Page 7: Web Development for Mobile Devices

  Use CSS for layout, not tables.   Put important information near the top.   Use images sparingly and make sure they are

optimized.   Less is more.   Use links like breadcrumbs to navigate your

site.

May 29, 2010 NC State University

Page 8: Web Development for Mobile Devices

  Meet the user need quickly   Input is awkward, make it easy   Show only essential information

  Breadcrumb trails vs. navigation   Mobile friendly page layout

  Single column (Google, Yahoo, FB, Twitter)   Clearly distinguish selected items   Large icons for buttons   Consistent layout

Acknowledgements: Abid Warsi, webcredible.co.uk (Oct. 2007), et al

May 29, 2010 NC State University

Page 9: Web Development for Mobile Devices

With smarter, better, mobile browsers is there a reason to develop mobile sites?

Increase usability for the mobile user.

Mobile users were successful 64% of the time on mobile sites compared to a 53% success rate for standard websites (Jakob Nielsen, 2009). 

May 29, 2010 NC State University

Page 10: Web Development for Mobile Devices

With smarter, better, mobile browsers is there a reason to develop mobile sites?

Take advantage of specific capabilities of MDs, for example: - telephone - navigation / location based services - camera

May 29, 2010 NC State University

Page 11: Web Development for Mobile Devices

With smarter, better, mobile browsers is there a reason to develop mobile sites?

A lot of the world only has access to the web via a mobile device. Is your target audience or is a new audience within this group?

May 29, 2010 NC State University

Page 12: Web Development for Mobile Devices

With smarter, better, mobile browsers is there a reason to develop mobile sites?

Is location-sensitivity important to you? Are you able to provide content or services that users need “in the field?”

May 29, 2010 NC State University

Page 13: Web Development for Mobile Devices

  Make your current site mobile friendly   Provide different functionality for MDs vs. PCs   Create a site specific to MDs

May 29, 2010 NC State University

Page 14: Web Development for Mobile Devices

  Don’t reinvent the wheel   Libraries to detect if and what type MD

  View source

  Initial testing in Safari, final testing on device or http://www.opera.com/mobile/demo/

May 29, 2010 NC State University

Page 15: Web Development for Mobile Devices

  Principles of design for a mobile site are quite a bit different than for a traditional web site.

  Simplify - Some sites can be made mobile friendly with logical, semantic markup, a different style sheet, and fluid design.

  You might decide you need to design a mobile site to utilize a specific functionality of the device.

May 29, 2010 NC State University

Page 16: Web Development for Mobile Devices

  With the explosion in usage of touch screen phones and the iPad it becomes increasingly harder to decide how to display content.

  The mobile market is growing rapidly, so if possible, offer a choice.

May 29, 2010 NC State University

Page 17: Web Development for Mobile Devices

  MobiForge.com (ready.mobi – validator)   Tips on Designing and Developing Mobile

Web http://journal.code4lib.org/articles/2055   MIT Code:

http://sourceforge.net/projects/mitmobileweb/

  Opera mini emulator: http://www.opera.com/mobile/demo/

May 29, 2010 NC State University

Page 18: Web Development for Mobile Devices

http://m.ces.ncsu.edu

May 29, 2010 NC State University