mobile web design eyal sela
DESCRIPTION
TRANSCRIPT
איך להתאים אתר אינטרנט למכשירים
ניידים וסקירת טכנולוגיות מובייל חדשות
אייל סלע הישראלי-W3C איגוד האינטרנט הישראלי ומשרד ה, מנהל פרויקטים
בישראל W3C-מפגש פורום המפתחים של ה 9/4/2012
2
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
3
איגוד האינטרנט הישראלי
שלוחת האיגוד הבינלאומי
עמותה ללא מטרת רווח
קידום האינטרנט והטמעתו בישראל כתשתית
חברתית ועסקית, חינוכית, מחקרית, טכנולוגית
4
W3C
ארגון בינלאומי
ארגונים 350-כ
פורום ניטראלי ליצירת תקני הווב
:משימה
להוביל את הרשת למיצוי הפוטנציאל על ידי פיתוח
פרוטוקולים וקווים מנחים שיאפשרו את צמיחתה לטווח .ארוך
5
A NEW WAVE TRANSFORMATIONS
of
Just as the Web
has transformed
everything…
…It will
transform
everything again
6
Based on
7
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
8
Mobile vs deskop internt user projection 2007-2015
j.mp/dsafaa Source: thenextweb.com
9
?איך לחשוב על זה
(?משועמם, ממוקד, מיידי, הקשר שונה)צורכי המשתמש 1.
(מגבלות, תמיכה, גודל מסך)פלטפורמות , שונים סוגים2.
(מסנסורים, מוגבלת או ללא –מקלדת , מגע) שיטת קלט3.
...(מידע מקומי , מקירופון, מצלמה ,מיקום (סנסורים4.
(עלות, רציפות, !latency, רוחב פס) חיבוריות5.
bit.ly/w3cmbp
10
גישות
(אותו אתר בדיוק)•
גרסת מובייל•
•Responsive design
Via Mobile-friendly: The mobile web optimization guide - j.mp/w3c2921
11
Test on actual devices and on emulators
Opera Mobile Emulator
12
(debug)
Tip by Ran Ben Aharon
Adobe® Shadow
pair devices
browse in sync with your computer
remote inspection
see HTML/CSS/JavaScript changes instantly
13
Same link ∼ same result (Thematic Consistency )
Via xkcd.com
• A bookmark captured on one device should be usable on another
• If not appropriate - provide alternative
14
Short URIs
http://www.example.org/index.html
15
Minimum keystrokes
• Avoid free text entry
• pre-selected defaults
16
(Geolocation) זיהוי מיקום
16
mouse.co.il/mobile easy.co.il
17
Be a professional
וילידציה•
אי שימוש בטבלות לעיצוב•
טקסט חליפי לתמונות•
HTML-תוכן מובנה ב•
כותרות וכדומה, רשימות•
18
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
19
Minimal external resources use
Image, style sheet, JS file = network request = load time
יותר מועטותלשרת אך גדולותעדיף לבצע בקשות
(מאשר הרבה בקשות קטנות)
20
Minimal external resources use
Read: More Bandwidth Doesn’t Matter (Much) - j.mp/w3cwiaj
בקשות קיבוץ•
בקשות תעדוף•
צמצום שימוש בתמונות•
רמת הקישוריותפעילות בהתאם ל•
21
(Sprites)אחד תמונות
• similar sizes and color palettes.
• That do not change often.
• use CSS positioning and clipping.
Image by: Kriplozoik
spriteme.org
23
Avoid large images
• Unless necessary
24
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
25
מזערו את גודל האפליקציה והנתונים
JavaScript-ו CSS ,HTMLהקטינו
(removal of white space and comments; shorter tokens (variables, method names, selector names)
25
See http://compressorrater.thruhere.net
26
Redirects: use server HTTP 3xx, not markup
• And… avoid redirects.
27
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)
28
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
29
Minimize Perceived Latency
• Avoid Page Reloads (To reflect changes in state or show different views)
• Preload Probable Next Views
MapQuest.com
31
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
32
Content for mobile context + focused to the user’s request
A List Apart: Articles: Organizing Mobile
• Consider likely context of use (“Urgent, Repetitive, Bored”)
• Link to “full site”
.vancouverconventioncentre.com
34
Clearly identify the target of each link
• clear, concise, descriptive link text.
• Identify large targets
35
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."
36
Pages: usable but limited size
• Too long: may take an too long to load
• Too small: may require multiple requests to find information.
37
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
38
Useful error messages and a way back
At least:
• A "back" link
• A "retry" link
• A "home" link
39
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
40
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
41
Demo: Navigation solutions
Via web designer swall - j.mp/w3c2312
webdesignerwall.com/demo/mobile-nav/
42
Short nav examples
43
קרוב -שימו מידע תדיר
• > 4 retrieval attempts = frustration
44
One direction scrolling
• Do it.
45
Fluid and responsive
– containersהשתמשו ביחידות יחסיות ל•
•Media quarries
•...
m.ft.com
48
Source: “Beyond the mobile web by yiibu” - j.mp/w3ccklr
49
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
50
Standards for Web Applications on Mobile
j.mp/w3ckurt
51
•Offline Technology (works now...)
(geolocation API) מיקום •
•Accelerometer / Orientation API לרשימת אנשי קשר
• API ליומן
•API למדיה
•API להודעותSMS, MMS, email) )
•API למידע מערכת
•API לגלרייה
•…
52
HTML5FEST
w3c.org.il/HTML5fest/mobile 52
54
3D Explorer
j.mp/w3ca2
3http://j.mp/uAjvj
55
1. Intro
2. Overall
3. Optimization & Code
4. Content
5. Design
6. Newer & future Technologies
7. Resources
Resources
56
HTML5 compatibility (mobile)
caniuse.com mobilehtml5.org j.mp/w3ckurt
When Can I use Mobile HTML5 Standards for Web
Applications on Mobile
57
Mobile Boilerplate
Tip by Yuval Raz
boilerplate.com/mobile5html
58
Use a framework
Tip by Ran Ben Ahron
google.com/search?q=mobile+web+pramwokrs
59
• 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
60 /e309239bit.ly :המצגת
אייל סלע
@isociltech @eyalsela