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