1. ‫איך להתאים אתר אינטרנט למכשירים‬
‫ניידים וסקירת טכנולוגיות מובייל חדשות‬
‫מפגש פורום המפתחים של ה- ‪ W3C‬בישראל‬
‫2102/4/9‬
‫אייל סלע‬
‫מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה-‪ W3C‬הישראלי‬

2. 1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
2

3. ‫איגוד האינטרנט הישראלי‬
‫שלוחת האיגוד הבינלאומי‬
‫עמותה ללא מטרת רווח‬
‫קידום האינטרנט והטמעתו בישראל כתשתית‬
‫טכנולוגית, מחקרית, חינוכית, חברתית ועסקית‬
‫3‬

4. ‫‪W3C‬‬
‫ארגון בינלאומי‬
‫כ-053 ארגונים‬
‫פורום ניטראלי ליצירת תקני הווב‬
‫משימה:‬
‫להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח‬
‫פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח‬
‫ארוך.‬
‫4‬

5. A NEW WAVE of
TRANSFORMATIONS
Just as the Web
has transformed
everything…
…It will
transform
5 everything again

6. Based on
6

7. 1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
7

8. Mobile vs deskop internt user projection
2007-2015
j.mp/dsafaa Source: thenextweb.com
8

9. ‫איך לחשוב על זה?‬
‫צורכי המשתמש (הקשר שונה, מיידי, ממוקד, משועמם?)‬ ‫1.‬
‫סוגים שונים, פלטפורמות (גודל מסך, תמיכה, מגבלות)‬ ‫2.‬
‫שיטת קלט (מגע, מקלדת – מוגבלת או ללא, מסנסורים)‬ ‫3.‬
‫סנסורים )מיקום, מצלמה, מקירופון, מידע מקומי ...)‬ ‫4.‬
‫חיבוריות (רוחב פס, !‪ ,latency‬רציפות, עלות)‬ ‫5.‬
‫‪bit.ly/w3cmbp‬‬
‫9‬

10. ‫גישות‬
)‫• (אותו אתר בדיוק‬
‫• גרסת מובייל‬
Responsive design •
Via Mobile-friendly: The mobile web optimization guide - j.mp/w3c2921
10

11. Test on actual devices and on emulators
Opera Mobile Emulator
11

12. (debug)
Adobe® Shadow
pair devices
browse in sync with your computer
remote inspection
see HTML/CSS/JavaScript changes instantly
Tip by Ran Ben Aharon
12

13. Same link ∼ same result
(Thematic Consistency )
• A bookmark captured on one device should be
usable on another
• If not appropriate - provide alternative
Via xkcd.com
13

14. Short URIs
http://www.example.org/index.html
14

15. Minimum keystrokes
• Avoid free text entry
• pre-selected defaults
15

16. (Geolocation)‫זיהוי מיקום‬
easy.co.il mouse.co.il/mobile
16
16

17. ‫‪Be a professional‬‬
‫וילידציה‬ ‫•‬
‫אי שימוש בטבלות לעיצוב‬ ‫•‬
‫טקסט חליפי לתמונות‬ ‫•‬
‫תוכן מובנה ב-‪HTML‬‬ ‫•‬
‫רשימות, כותרות וכדומה‬ ‫•‬
‫71‬

18. 1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
18

19. Minimal external resources use
Image, style sheet, JS file = network request = load
time
‫עדיף לבצע בקשות גדולות לשרת אך מועטות יותר‬
)‫(מאשר הרבה בקשות קטנות‬
19

20. Minimal external resources use
‫קיבוץ בקשות‬ •
‫תעדוף בקשות‬ •
‫צמצום שימוש בתמונות‬ •
‫פעילות בהתאם לרמת הקישוריות‬ •
Read: More Bandwidth Doesn’t Matter (Much) - j.mp/w3cwiaj
20

21. (Sprites) ‫אחד תמונות‬
• similar sizes and color
palettes.
• That do not change often.
• use CSS positioning and
clipping.
Image by: Kriplozoik
spriteme.org
21

22. Avoid large images
• Unless necessary
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 server
24

24. ‫מזערו את גודל האפליקציה והנתונים‬
JavaScript-‫ ו‬HTML ,CSS ‫הקטינו‬
(removal of white space and comments; shorter tokens (variables, method names, selector names)
See http://compressorrater.thruhere.net
25
25

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…
– Won’t 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.com
28

28. Minimize Perceived Latency
• Avoid Page Reloads (To
reflect changes in state
or show different views)
• Preload Probable Next
Views
MapQuest.com
29

29. 1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
31

30. Content for mobile context + focused to the
user’s request
• Consider likely context of use
(“Urgent, Repetitive, Bored”)
• Link to “full site”
.vancouverconventioncentre.com
A List Apart: Articles: Organizing Mobile
32

31. m.ox.ac.uk
33

32. Clearly identify the target of each link
• clear, concise, descriptive link text.
• Identify large targets
34

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 details
37

36. Useful error messages and a way back
At least:
• A "back" link
• A "retry" link
• A "home" link
38

37. 1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
39

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 ahead
40

39. Demo: Navigation solutions
webdesignerwall.com/demo/mobile-nav/
Via web designer swall - j.mp/w3c2312
41

40. Short nav examples
42

41. ‫שימו מידע תדיר - קרוב‬
• > 4 retrieval attempts = frustration
43

42. One direction scrolling
• Do it.
44

43. Fluid and responsive
containers –‫• השתמשו ביחידות יחסיות ל‬
Media quarries •
... •
m.ft.com
45

44. bryanconnor.com/
mediaqueri.es
46

45. responsive.is
47

46. Source: “Beyond the mobile web by yiibu” - j.mp/w3ccklr
48

47. 1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
49

48. Standards for Web Applications on Mobile
j.mp/w3ckurt
50

49. Offline Technology (works now...) •
(geolocation API) ‫• מיקום‬
Accelerometer / Orientation •
‫ לרשימת אנשי קשר‬API
‫ ליומן‬API •
‫ למדיה‬API •
)SMS, MMS, email) ‫ להודעות‬API •
‫ למידע מערכת‬API •
‫ לגלרייה‬API •
… •
51

50. HTML5FEST
w3c.org.il/HTML5fest/mobile
52
52

51. Web based GPS
m.maps.nokia.com
53

52. 3D Explorer
http://j.mp/uAjvj3
j.mp/w3ca2
54

53. Resources
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
55

54. HTML5 compatibility (mobile)
Standards for Web
When Can I use Mobile HTML5 Applications on Mobile
caniuse.com mobilehtml5.org j.mp/w3ckurt
56

55. Mobile Boilerplate
html5boilerplate.com/mobile
Tip by Yuval Raz
57

56. Use a framework
google.com/search?q=mobile+web+pramwokrs
Tip by Ran Ben Ahron
58

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 Calhoun's
Developer Blog
59

58. ‫אייל סלע‬
eyal@isoc.org.il
@isociltech @eyalsela
60
bit.ly/309239e :‫המצגת‬