לקראת העירייה הדיגיטלית - השירותים המקוונים של עירית תל-אביב-יפו זוהר שרון
Mobile web design Eyal Sela
1. איך להתאים אתר אינטרנט למכשירים
ניידים וסקירת טכנולוגיות מובייל חדשות
מפגש פורום המפתחים של ה- W3Cבישראל
2102/4/9
אייל סלע
מנהל פרויקטים, איגוד האינטרנט הישראלי ומשרד ה- W3Cהישראלי
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
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
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
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
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
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
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
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
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