Scribd
Upload
62 views25 pages

Creating New Visual Experience With Digital Media: Carrie Nusbaum, Junlan Liu, Nicolays Jambang

This document discusses differences between designing for mobile versus desktop experiences and best practices for mobile design. It covers key differences like screen size and input methods. Best practices outlined include prioritizing content, linear scrolling, scalable layouts, and avoiding hazards like popups, nested tables, flash. Case studies of Facebook's mobile design show how it adapted features for small screens. Technical specifications discussed include content prioritization, touchscreens, and graphics optimization for low-resource devices.

Uploaded by

Carrie Nusbaum
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
62 views25 pages

Creating New Visual Experience With Digital Media: Carrie Nusbaum, Junlan Liu, Nicolays Jambang

This document discusses differences between designing for mobile versus desktop experiences and best practices for mobile design. It covers key differences like screen size and input methods. Best practices outlined include prioritizing content, linear scrolling, scalable layouts, and avoiding hazards like popups, nested tables, flash. Case studies of Facebook's mobile design show how it adapted features for small screens. Technical specifications discussed include content prioritization, touchscreens, and graphics optimization for low-resource devices.

Uploaded by

Carrie Nusbaum
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 25

Creating New Visual

Experience with Digital Media

Carrie Nusbaum, Junlan Liu, Nicolays Jambang


Key Points
1. Differences between Wired & Mobile Design
2. Technique Specifications
3. Mobile Design Best Practices
4. Mobile Design Case Study: Facebook
Wired vs. Mobile Design:
Big Differences
• Environment • Internet Connection
• Screen Size • Input Devices (I.e.,
Fingers)
Principles of Good Mobile Websites

• You need to have one.


• Make sure it actually works.
• Solve a real problem.
• Maintain focus.
• Provide “snack size”
content.
• Simplify, don’t
oversimplify.
• Remember your users.

Mobithinking.com
Technical Specifications
• Small screen with various sizes
▫ Content need to be prioritized
▫ Content flows linearly
▫ Layout needs to be scalable
• Is WAP dead?
• Touch screen phones
Small Screens with Various Sizes
• Content need to be prioritized:
Small Screens with Various Sizes
• Content need to be prioritized:
Small Screens with Various Sizes
Linear Flow: Left-Right Navigation
Icons
Small Screens with Various Sizes
• Layout needs to be scalable:
• Use proportions for website
layout. For example, use
“width:100%;” instead of
“width:128px” in CSS.
• Use “em” as the unit of
measurement for font-size ,
margin and padding. For example,
use “font-size: 0.8em;” instead of
“font-size: 10px”
Is WAP Dead?
• WAP 1.0
▫ Supports WML
▫ A plain page with little style
• WAP 2.0
▫ Released in 2002
▫ Supports XHTML mobile profile, WAP CSS
• Current State:
▫ Almost all the current phones supports WAP 2.0.
Touch Screen Phones
What percent of
web hits is from
touch screen
phones?
What Constitutes Good Design for Mobile Web

Visual elements in W3C 10 best practices in mobile web :

Avoid known hazards

Device limitations

Graphics & Colors


Stay Away From Known Hazards
Thoughtful design can help reduce usability
problems due to small screens and keyboards, and
other features of mobile devices.

POP UPS:
Do not cause pop ups or other
windows to appear and do not
change the current window
without informing the user
TABLES NESTED:
Do not use nested tables
TABLES LAYOUT:
Do not use tables for layout.

On the designer side: grid is important to ensure readability

On the developer side: table layout should be avoided


on mobile web
IMAGE MAPS:
Do not use image maps unless you know the device support
them effectively.
FLASH:
Consumes high CPU utilization
Most mobile devices don’t support Flash
Avoid
Be Cautious of Device Limitations
When choosing to use a particular Web
technology, consider that mobile devices vary
greatly in capability.

OBJECT OR SCRIPT:
Do not rely on embedded objects or script

STYLE SHEETS SUPPORT:


Organize documents so that if necessary they may be read
without style sheets.
FONTS:
Do not rely on support of font related styling.

USE OF COLORS:
Ensure that information conveyed with color is also
available without color.
Check Graphics and Colors
Images, colors, and style brighten content, but
require care: devices may have low-contrast
screens or may not support some formats.

IMAGES RESIZING:
Resize images at the server, if they have an intrinsic size.

LARGE GRAPHICS:
Do not use images that cannot be rendered by the device.
Avoid large or high resolution images except where critical
information would otherwise be lost.

NON-TEXT ALTERNATIVES:
Provide a text equivalent for every non-text element.
COLOR CONTRAST:
Ensure that foreground and
background color combinations
provide sufficient contrast.

MEASURES:
Do not use pixel measures and do not use absolute units
in markup language attribute values and style sheet
property values
Why Icons?

New language for users


More usable than words?
Case Study: Facebook
Windows Mobile
Android iPhone
References
Lloyd, J. (2010). Designing for a mobile experience--Patterns and context.
http://www.slideshare.net/JohnLloyd1/designing-for-a-mobile-experience-patterns-and-context

Gottschalk, C. (2009). Social and Mobile Media: Engaging and Interacting with an audience on the
move. http://www.slideshare.net/carriegottschalk/mobile-web-vs-wired-web

Dawson, A. (2010). Mobile web design: Best practices. Six Revisions. http://sixrevisions.com/web-
development/mobile-web-design-best-practices/

Winners & Sinners: The principles of great mobile websites. MobiThinking


http://mobithinking.com/white-papers/best-and-worst-of-the-mobile-web

You might also like