new visual experience presentation

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 1/25

Creating New Visual

Experience with Digital Media

Carrie Nusbaum, Junlan Liu, Nicolays Jambang

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 2/25

Key Points

1. Differences between Wired & Mobile Design

2. Technique Specifications3. Mobile Design Best Practices

4. Mobile Design Case Study: Facebook 

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 3/25

Wired vs. Mobile Design:

Big Differences

Environment Screen Size

Internet Connection

Input Devices (I.e.,Fingers)

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 4/25

Principles of Good MobileW

ebsites

Y ou need to have one.

Make sure it actually works.

Solve a real problem.

Maintain focus.

Provide ³snack size´content.

Simplify, don¶tover simplify .

R emember your users.

Mobithinking.com

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 5/25

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

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 6/25

Small Screens with Various Sizes

Content need to be prioritized:

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 7/25

Small Screens with Various Sizes

Content need to be prioritized:

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 8/25

Small Screens with Various Sizes

Linear Flow: Left-Right Navigation

Icons

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 9/25

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´

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 10/25

Is WAP Dead?  WAP 1.0

Supports WML

A plain page with little style

 WAP 2.0 R eleased in 2002

Supports XHTML mobile profile, WAP CSS

Current State:

Almost all the current phones supports WAP 2.0. 

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 11/25

Touch Screen Phones

 What percent of  web hits is fromtouch screen

phones?

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 12/25

What Constitutes Good Design for Mobile Web

 V isual elements in W3C 10 best practices in mobile web :

 Avoid known hazards

Device limitations

Graphics & Colors

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 13/25

Stay Away From Known Hazards

Thoughtful design can help reduce usability problems due to small screens and keyboards, andother features of mobile devices.

POP UPS:Do not cause pop ups or other

 windows to appear and do notchange the current window 

 without informing the user

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 14/25

T ABLES NESTED:Do not use nested tables

T ABLES LA  Y OUT:

Do not use tables for layout.

On the designer side: grid is important to ensure readability 

On the developer side: table layout should be avoidedon mobile web

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 15/25

IMAGE MAPS:Do not use image maps unless you know the devicesupport them effectively .

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 16/25

FLASH:

Consumes high CPU utilizationMost mobile devices don¶t support Flash

 Avoid

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 17/25

Be Cautious of Device Limitations

 When choosing to use a particular Webtechnology, consider that mobile devices vary greatly in capability .

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

ST Y LE SHEETS SUPPOR T:Organize documents so that if necessary they may be read

 without style sheets.

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 18/25

FONTS:Do not rely on support of font related styling.

USE OF COLOR S:Ensure that information conveyed with color is alsoavailable without color.

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 19/25

Check Graphics and Colors

Images, colors, and style brighten content, butrequire care: devices may have low-contrastscreens or may not support some formats.

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

LA R GE GR  APHICS:Do not use images that cannot be rendered by the device. 

 Avoid large or high resolution images except where criticalinformation would otherwise be lost.

NON-TEXT ALTER NA TI V ES:Provide a text equivalent for every non-text element.

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 20/25

ME ASURES:

Do not use pixel measures and do not use absolute unitsin markup language attribute values and style sheetproperty values

COLOR CONTR  AST:Ensure that foreground and

 background color combinations

provide sufficient contrast.

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 21/25

New language for users

More usable than words?

Why Icons?

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 22/25

Case Study: Facebook

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 23/25

Windows Mobile

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 24/25

 Android iPhone

8/8/2019 New Visual Experience Presentation

http://slidepdf.com/reader/full/new-visual-experience-presentation 25/25

ReferencesLloyd, 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:E

ngaging andInteracting with an audience on themove. http://www .slideshare.net/carriegottschalk/mobile-web-vs-wired-web

Dawson, A . (2010). Mobile web design: Best practices. Six R evisions. 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