mobile web design eyal sela
Post on 07-Nov-2014
1.296 views
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