New Visual Experience Presentation
-
Upload
carrie-nusbaum -
Category
Documents
-
view
215 -
download
0
Transcript of New Visual Experience Presentation
![Page 1: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/1.jpg)
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
![Page 2: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/2.jpg)
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
![Page 3: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/3.jpg)
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)
![Page 4: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/4.jpg)
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
![Page 5: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/5.jpg)
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
![Page 6: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/6.jpg)
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:
![Page 7: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/7.jpg)
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:
![Page 8: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/8.jpg)
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
![Page 9: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/9.jpg)
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´
![Page 10: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/10.jpg)
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.
![Page 11: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/11.jpg)
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?
![Page 12: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/12.jpg)
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
![Page 13: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/13.jpg)
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
![Page 14: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/14.jpg)
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
![Page 15: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/15.jpg)
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 .
![Page 16: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/16.jpg)
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
![Page 17: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/17.jpg)
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.
![Page 18: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/18.jpg)
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.
![Page 19: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/19.jpg)
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.
![Page 20: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/20.jpg)
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.
![Page 21: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/21.jpg)
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?
![Page 22: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/22.jpg)
8/8/2019 New Visual Experience Presentation
http://slidepdf.com/reader/full/new-visual-experience-presentation 22/25
Case Study: Facebook
![Page 23: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/23.jpg)
8/8/2019 New Visual Experience Presentation
http://slidepdf.com/reader/full/new-visual-experience-presentation 23/25
Windows Mobile
![Page 24: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/24.jpg)
8/8/2019 New Visual Experience Presentation
http://slidepdf.com/reader/full/new-visual-experience-presentation 24/25
Android iPhone
![Page 25: New Visual Experience Presentation](https://reader036.fdocuments.in/reader036/viewer/2022070606/577d34671a28ab3a6b8de23a/html5/thumbnails/25.jpg)
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