mobile web design eyal sela

Click here to load reader

Post on 07-Nov-2014

1.296 views

Category:

Technology

1 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

  • 1. - W3C 2102/4/9 , - W3C
  • 2. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources2
  • 3. , , , 3
  • 4. W3C -053 : .4
  • 5. A NEW WAVE ofTRANSFORMATIONS Just as the Web has transformed everything It will transform5 everything again
  • 6. Based on6
  • 7. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources7
  • 8. Mobile vs deskop internt user projection 2007-2015 j.mp/dsafaa Source: thenextweb.com8
  • 9. ? ( , , , ?) 1. , ( , , ) 2. (, , ) 3. ), , , ...) 4. ( , ! ,latency, ) 5. bit.ly/w3cmbp9
  • 10. ) ( Responsive design Via Mobile-friendly: The mobile web optimization guide - j.mp/w3c292110
  • 11. Test on actual devices and on emulatorsOpera Mobile Emulator11
  • 12. (debug) Adobe Shadow pair devices browse in sync with your computer remote inspection see HTML/CSS/JavaScript changes instantlyTip by Ran Ben Aharon12
  • 13. Same link same result (Thematic Consistency ) A bookmark captured on one device should be usable on another If not appropriate - provide alternativeVia xkcd.com13
  • 14. Short URIs http://www.example.org/index.html14
  • 15. Minimum keystrokes Avoid free text entry pre-selected defaults15
  • 16. (Geolocation) easy.co.il mouse.co.il/mobile 1616
  • 17. Be a professional -HTML , 71
  • 18. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources18
  • 19. Minimal external resources use Image, style sheet, JS file = network request = load time )( 19
  • 20. Minimal external resources use Read: More Bandwidth Doesnt Matter (Much) - j.mp/w3cwiaj20
  • 21. (Sprites) similar sizes and color palettes. That do not change often. use CSS positioning and clipping. Image by: Kriplozoik spriteme.org21
  • 22. Avoid large images Unless necessary23
  • 23. Images specify size in markup and resize at the server if they have an intrinsic size: Specify intrinsic size - avoids re-flow Resizing at the server24
  • 24. JavaScript- HTML ,CSS (removal of white space and comments; shorter tokens (variables, method names, selector names)See http://compressorrater.thruhere.net 2525
  • 25. Redirects: use server HTTP 3xx, not markup And avoid redirects.26
  • 26. Keep style sheets small only styles that are used are included. media quarries Wont load unnecessary things Fits to the tested feature (width, else)27
  • 27. Minimize Perceived Latency Incremental Rendering: Place JavaScript at the bottom (?) keep page useful information that might be available is viewable while main content lodes. MapQuest.com28
  • 28. Minimize Perceived Latency Avoid Page Reloads (To reflect changes in state or show different views) Preload Probable Next Views MapQuest.com29
  • 29. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources31
  • 30. Content for mobile context + focused to the users request Consider likely context of use (Urgent, Repetitive, Bored) Link to full site .vancouverconventioncentre.comA List Apart: Articles: Organizing Mobile32
  • 31. m.ox.ac.uk33
  • 32. Clearly identify the target of each link clear, concise, descriptive link text. Identify large targets34
  • 33. Concise writing example Venue: village hall; time: 6pm; Refreshments available; vs "The meeting will begin at 6pm in the village hall where refreshments will be available."35
  • 34. Pages: usable but limited size Too long: may take an too long to load Too small: may require multiple requests to find information.36
  • 35. Useful error messages and a way back user-friendly error messages (trap errors overriding the default ) temporary or permanent? Can the user solve it? Can it be escalated to the content provider or network operator? + contact details37
  • 36. Useful error messages and a way back At least: A "back" link A "retry" link A "home" link38
  • 37. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources39
  • 38. Navigation top & minimal Basic nav links at the top (single line) Secondary nav - at the bottom Show main content without scrolling Warning! Cool demo ahead40
  • 39. Demo: Navigation solutions webdesignerwall.com/demo/mobile-nav/Via web designer swall - j.mp/w3c231241
  • 40. Short nav examples42
  • 41. - > 4 retrieval at