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



Key Points

1. Differences between Wired & Mobile Design

2. Technique Specifications3. Mobile Design Best Practices

4. Mobile Design Case Study: Facebook



Wired vs. Mobile Design:

Big Differences

Environment Screen Size

Internet Connection

Input Devices (I.e.,Fingers)



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



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:




Content need to be prioritized:




Linear Flow: Left-Right Navigation

Icons




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 R eleased 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 fromtouch screen

phones?



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



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



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



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



FLASH:

Consumes high CPU utilizationMost mobile devices don¶t support Flash

Avoid



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.



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

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



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.



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.



New language for users

More usable than words?

Why Icons?



Case Study: Facebook



Windows Mobile



Android iPhone



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

new visual experience presentation

Documents