Mobile Device Overview - Intro to Advanced Interactive Art
January 11th, 2011
- Difference between mobile, desktop, and notebook computing
- Audience and Statistics
- Types of Mobile Devices
- Levels of Mobile Devices
- Screen Display
- Pixels per Inch
- Aspect Ratio
- Methods of getting input
- Other Features
- Building for Mobile Devices
- Miniaturizing Websites
- Mobilizing Websites
- Mobile Web Navigation
- Direct or Proxy Web Access
- Assignment 1: Mobile Brands and OS
- Assignment 2: Mobile Browsers
Differences between mobile, desktop and notebook computing <...>
Types of Mobile Devices
- carry it with you
- network connection
Mobile devices: <...>
Levels of Mobile Devices
Mobile phone (no web access) <...>
Low-end mobile device: <...>
Mid-range devices: <...>
High-end devices: <...>
Types of Smartphones: <...>
Non-phone devices: <...>
Notebooks/Tablet PCs/Netbooks - mostly 9"
Phones: 1.5, 2.3, 3" on up.
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
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.
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.
Methods of Getting Input on a Mobile Device
- 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
- 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)
Building for Mobile Devices
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
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.
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.
Mobile Browser Navigation
- 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
- arrow keys moves the cursor
- enter or fire key is the mouse click
- finger or stylus
- very low precision if using a finger / higher with stylus
- sometimes uses gesture recognition
- may be multi-touch
- website does not change size to fit the device
- Some user can change font size only
- need to scroll to get around
- fits webpages to the screen
- user can zoom in and out
- all elements on the page are effected when zooming
- single page browsers
- tab systems
- stacked windows
- flip page systems
Direct Access or Proxy Access to Websites
- gets the content from the actual website
- 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
- reformats the web page to be on a single vertical row
HOMEWORK: Assignment 1: Brands and OS Research
Report: Mon Jan 17th at noon, Presentation: Tues Jan 18 in class.
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: firstname.lastname@example.org 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.
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: email@example.com 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.