Course notes
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Mobile Device Overview - Intro to Advanced Interactive Art

January 11th, 2011

Overview:

  1. Syllabus
  2. Introductions
  3. Questionnaire
  4. Difference between mobile, desktop, and notebook computing
  5. Audience and Statistics
  6. Types of Mobile Devices
  7. Levels of Mobile Devices
  8. Screen Display
  9. Resolution
  10. Pixels per Inch
  11. Aspect Ratio
  12. Methods of getting input
  13. Other Features
  14. Terminology
  15. Building for Mobile Devices
  16. Miniaturizing Websites
  17. Mobilizing Websites
  18. Mobile Web Navigation
  19. Direct or Proxy Web Access
  20. homework
  21. Assignment 1: Mobile Brands and OS
  22. Assignment 2: Mobile Browsers

Differences between mobile, desktop and notebook computing <...>


[TOP]

Audience and Statistics

Typically mobile web access is done via a Phone but iPodTouch and iPad are accounting for more and more of the market share.
26% of the world population has an Internet connection. 68% of the world population has a mobile device. Only 4% of web browsing is done from mobile devices (stats from early 2010).

http://www.webdevelopersnotes.com/articles/mobile-web-browser-usage-statistics.php

http://www.netmarketshare.com/


[TOP]

Types of Mobile Devices

Definition:

  • portable
  • personal
  • carry it with you
  • easy
  • fast
  • network connection

Mobile devices: <...>


[TOP]

Levels of Mobile Devices

Mobile phone (no web access) <...>

Low-end mobile device: <...>

Mid-range devices: <...>

High-end devices: <...>

Smartphones: <...>

Types of Smartphones: <...>

Non-phone devices: <...>


[TOP]

Screen Displays

Notebooks/Tablet PCs/Netbooks - mostly 9"

iPad: 9.7"

Phones: 1.5, 2.3, 3" on up.


[TOP]

Resolution

Number of pixels on the screen. There is no standard.

Low-end: 128 x 160 or 128 x 128

Mid-range: 176 x 220 or 176 x 208

High-end: 240 x 320 (most common) QVGA (Quarter Video Graphics Array)

Smart phones: 240 x 480, 320 x 480 (HVGA: Half-VGA), 360 x 480, 480 x 800, 480 x 854, 640 x 960


[TOP]

Pixels per Inch (DPI / PPI)

The Apple Retina Display is 326 pixels per inch. The human eye can only see clearly 300 dpi. The number of pixels on the screen are: 960 x 640. Windows Mobile 6 is 320 x 320 at 128 dpi. Others may be less.


[TOP]

Aspect Ratio

The ratio between the longer and shorter dimensions of the screen. Some mobile devices have vertical screens and some have horizontal screens. Some have square screens. Some have the ability to rotate between vertical and horizontal screens (yikes). We need to account for this when making mobile websites.


[TOP]

Methods of Getting Input on a Mobile Device <...>


[TOP]

Other Features

  • Location awareness - GPS, WPS (WiFi Positioning), Cell-based location tracking
  • SMS (Short Message Service) - 160 7 bit ASCII characters or 140 8 bit ASCII characters
  • MMS (Multimedia Message Service) - send photos
  • Application support - installation OTA (over the air) and run on the device

[TOP]

Terminology

  • SMS - Short Message Service
  • MMS - Multimedia Message Service
  • GSM - Global System for Mobile Communications. Most widespread standard for cell phones networks in the world. AT&T and T-Mobile are both GSM carriers. Main distinction is that it comes with a SIM (Subscriber Identity Module) card.
  • CDMA - Code Division Multiple Access more prevalent in the U.S, CDMA phones don't use SIM cards.Your phone's identity and number are programmed into the handset by your carrier, and you can't easily switch numbers on CDMA phone, Sprint, Verizon Wireless, and Alltel.
  • WAP - Wireless Application Protocol is the protocol for enabling mobile access to internet content. There arenumerous WAP sites.
  • WML - Wireless Markup Language was language for WAP 1.0.
  • XHTML-MP - XHTML Mobile Profile is used with WAP 2.0 - it has mandated backwards compatibility for WML.XHTML Mobile Profile is merely a subset of XHTML
  • cHTML - language used for Japan’s i-mode devices
  • Handheld Stylesheeting - adding a style sheet to an existing website to deal with mobile devices (only deals with the look not content)

[TOP]

Building for Mobile Devices

Address:

1) Consider how the content is accessed
2) How it looks on small screens
3) Reduce the content to the absolute necessary amount
4) Take advantage of the features available on a mobile device


[TOP]

Miniaturizing Websites

Using stylesheets to create a separate look for mobile users. You only have to maintain one set of pages of code. Does not address different needs of mobile users. The content is the same for desktop and mobile users.


[TOP]

Mobilizing websites

Changing websites to mobile-specific sites. You have to maintain two separate sites - one for mobile users and one for desktop users. You can employ the unique aspects that mobile devices support. Two different web addresses are required. Must consider mobile browsers navigation systems.


[TOP]

Mobile Browser Navigation

Focus:

  • low-mid end devices
  • background color or border shows where you are in the website
  • available on non-touch devices
  • uses keypad or scrollball or down/up keys to change focus

Cursor:

  • arrow keys moves the cursor
  • enter or fire key is the mouse click

Touch:

  • finger or stylus
  • very low precision if using a finger / higher with stylus
  • sometimes uses gesture recognition
  • may be multi-touch

Zooming:

Basic:

  • website does not change size to fit the device
  • Some user can change font size only
  • need to scroll to get around

Smart zoom:

  • fits webpages to the screen
  • user can zoom in and out
  • all elements on the page are effected when zooming

Multipage:

  • single page browsers
  • tab systems
  • stacked windows
  • flip page systems


[TOP]


Direct Access or Proxy Access to Websites

Direct:

  • gets the content from the actual website

Proxy:

  • gets content that has been filtered a proxy server that reduces content size, eliminates things not compatible on mobile devices, compresses images, converts some content (Flash maybe), caches the content
  • enter or fire key is the mouse click

Reflow Engines:

  • reformats the web page to be on a single vertical row


[TOP]


HOMEWORK


HOMEWORK: Assignment 1: Brands and OS Research

Due:
Report: Mon Jan 17th at noon, Presentation: Tues Jan 18 in class.

Description:
Research then create a 2-4 paragraph abstract and do a 5-10 minute presentation on your assigned Brand or OS topic. All reports must include a bibliography and links of resourses consulted. The report will be posted on the website. Send the report to me: bonniem@bgsu.edu by noon Monday so I can post it on the web for your presentation.

You will do a 5-10 minute presentation to the class on Tuesday.


HOMEWORK: Assignment 2: Mobile Browser Research

Due: Report: Wed Jan 19th at noon, Presentation Jan 20 in class.

Description:
Research then create a 2-4 paragraph abstract and do a 5-10 minute presentation on your assigned Mobile Browser topic. All reports must include a bibliography and links of resourses consulted. The report will be posted on the website. Send the report to me: bonniem@bgsu.edu by noon Wednesday so I can post it on the web for your presentation.

You will do a 5-10 minute presentation to the class on Thursday.


[TOP]