Mobile web design Eyal Sela

1,418 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,418
On SlideShare
0
From Embeds
0
Number of Embeds
275
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile web design Eyal Sela

  1. 1. ‫איך להתאים אתר אינטרנט למכשירים‬‫ניידים וסקירת טכנולוגיות מובייל חדשות‬ ‫מפגש פורום המפתחים של ה- ‪ W3C‬בישראל‬ ‫2102/4/9‬ ‫אייל סלע‬‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬
  2. 2. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources2
  3. 3. ‫איגוד האינטרנט הישראלי‬ ‫שלוחת האיגוד הבינלאומי‬ ‫עמותה ללא מטרת רווח‬ ‫קידום האינטרנט והטמעתו בישראל כתשתית‬ ‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬‫3‬
  4. 4. ‫‪W3C‬‬ ‫ארגון בינלאומי‬ ‫כ-053 ארגונים‬ ‫פורום ניטראלי ליצירת תקני הווב‬ ‫משימה:‬ ‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬ ‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬ ‫ארוך.‬‫4‬
  5. 5. A NEW WAVE ofTRANSFORMATIONS Just as the Web has transformed everything… …It will transform5 everything again
  6. 6. Based on6
  7. 7. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources7
  8. 8. Mobile vs deskop internt user projection 2007-2015 j.mp/dsafaa Source: thenextweb.com8
  9. 9. ‫איך לחשוב על זה?‬‫צורכי המשתמש (הקשר שונה, מיידי, ממוקד, משועמם?)‬ ‫1.‬ ‫סוגים שונים, פלטפורמות (גודל מסך, תמיכה, מגבלות)‬ ‫2.‬ ‫שיטת קלט (מגע, מקלדת – מוגבלת או ללא, מסנסורים)‬ ‫3.‬ ‫סנסורים )מיקום, מצלמה, מקירופון, מידע מקומי ...)‬ ‫4.‬ ‫חיבוריות (רוחב פס, !‪ ,latency‬רציפות, עלות)‬ ‫5.‬ ‫‪bit.ly/w3cmbp‬‬‫9‬
  10. 10. ‫גישות‬ )‫• (אותו אתר בדיוק‬ ‫• גרסת מובייל‬ Responsive design •Via Mobile-friendly: The mobile web optimization guide - j.mp/w3c292110
  11. 11. Test on actual devices and on emulatorsOpera Mobile Emulator11
  12. 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. 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. 14. Short URIs http://www.example.org/index.html14
  15. 15. Minimum keystrokes • Avoid free text entry • pre-selected defaults15
  16. 16. (Geolocation)‫זיהוי מיקום‬ easy.co.il mouse.co.il/mobile 1616
  17. 17. ‫‪Be a professional‬‬ ‫וילידציה‬ ‫•‬ ‫אי שימוש בטבלות לעיצוב‬ ‫•‬ ‫טקסט חליפי לתמונות‬ ‫•‬ ‫תוכן מובנה ב-‪HTML‬‬ ‫•‬ ‫רשימות, כותרות וכדומה‬ ‫•‬‫71‬
  18. 18. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources18
  19. 19. Minimal external resources use Image, style sheet, JS file = network request = load time ‫עדיף לבצע בקשות גדולות לשרת אך מועטות יותר‬ )‫(מאשר הרבה בקשות קטנות‬19
  20. 20. Minimal external resources use ‫קיבוץ בקשות‬ • ‫תעדוף בקשות‬ • ‫צמצום שימוש בתמונות‬ • ‫פעילות בהתאם לרמת הקישוריות‬ •Read: More Bandwidth Doesn’t Matter (Much) - j.mp/w3cwiaj20
  21. 21. (Sprites) ‫אחד תמונות‬ • similar sizes and color palettes. • That do not change often. • use CSS positioning and clipping. Image by: Kriplozoik spriteme.org21
  22. 22. Avoid large images • Unless necessary23
  23. 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. 24. ‫מזערו את גודל האפליקציה והנתונים‬ JavaScript-‫ ו‬HTML ,CSS ‫הקטינו‬ (removal of white space and comments; shorter tokens (variables, method names, selector names)See http://compressorrater.thruhere.net 2525
  25. 25. Redirects: use server HTTP 3xx, not markup • And… avoid redirects.26
  26. 26. Keep style sheets small • only styles that are used are included. • media quarries… – Won’t load unnecessary things – Fits to the tested feature (width…, else)27
  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. 28. Minimize Perceived Latency • Avoid Page Reloads (To reflect changes in state or show different views) • Preload Probable Next Views MapQuest.com29
  29. 29. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources31
  30. 30. Content for mobile context + focused to the user’s request • Consider likely context of use (“Urgent, Repetitive, Bored”) • Link to “full site” .vancouverconventioncentre.comA List Apart: Articles: Organizing Mobile32
  31. 31. m.ox.ac.uk33
  32. 32. Clearly identify the target of each link • clear, concise, descriptive link text. • Identify large targets34
  33. 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. 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. 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. 36. Useful error messages and a way back At least: • A "back" link • A "retry" link • A "home" link38
  37. 37. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources39
  38. 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. 39. Demo: Navigation solutions webdesignerwall.com/demo/mobile-nav/Via web designer swall - j.mp/w3c231241
  40. 40. Short nav examples42
  41. 41. ‫שימו מידע תדיר - קרוב‬ • > 4 retrieval attempts = frustration43
  42. 42. One direction scrolling • Do it.44
  43. 43. Fluid and responsive containers –‫• השתמשו ביחידות יחסיות ל‬ Media quarries • ... •m.ft.com45
  44. 44. bryanconnor.com/mediaqueri.es46
  45. 45. responsive.is47
  46. 46. Source: “Beyond the mobile web by yiibu” - j.mp/w3ccklr48
  47. 47. 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources49
  48. 48. Standards for Web Applications on Mobile j.mp/w3ckurt50
  49. 49. Offline Technology (works now...) • (geolocation API) ‫• מיקום‬ Accelerometer / Orientation • ‫ לרשימת אנשי קשר‬API ‫ ליומן‬API • ‫ למדיה‬API • )SMS, MMS, email) ‫ להודעות‬API • ‫ למידע מערכת‬API • ‫ לגלרייה‬API • … •51
  50. 50. HTML5FEST w3c.org.il/HTML5fest/mobile 5252
  51. 51. Web based GPS m.maps.nokia.com53
  52. 52. 3D Explorer http://j.mp/uAjvj3 j.mp/w3ca254
  53. 53. Resources 1. Intro 2. Overall 3. Optimization & Code 4. Content 5. Design 6. Newer & future Technologies 7. Resources55
  54. 54. HTML5 compatibility (mobile) Standards for Web When Can I use Mobile HTML5 Applications on Mobile caniuse.com mobilehtml5.org j.mp/w3ckurt56
  55. 55. Mobile Boilerplate html5boilerplate.com/mobile Tip by Yuval Raz57
  56. 56. Use a framework google.com/search?q=mobile+web+pramwokrsTip by Ran Ben Ahron58
  57. 57. • Mobile Web Application Best Practices (j.mp/thecards) • Mobile web best practices • Smashin magazine – mobile • The Methodology Behind Ringmark - Facebook Developers • Love your devices: adaptive web design with media queries, viewport and more - Dev.Opera • Mobile-friendly: The mobile web optimization guide - Dev.Opera • Best Practices for Speeding Up Your Web Site • On designing a mobile webpage (Mobile web part 4) | David Calhouns Developer Blog59
  58. 58. ‫אייל סלע‬ eyal@isoc.org.il @isociltech @eyalsela60 bit.ly/309239e :‫המצגת‬

×