24. One Web
“One Web means making, as far as is reasonable, the same
information and services available to users irrespective of the
device they are using...”
出自 http://www.w3.org/TR/mobile-bp/#OneWeb
http://www.douban.com
Thursday, June 23, 2011
25. “We need to move
from prescribed design
to responsive design.”
http://www.slideshare.net/livefront/responsive-design-7877412
Thursday, June 23, 2011
26. 响应性设计
“ Responsive Web design is the approach that suggests that design and
development should respond to the user’s behavior and environment based
on screen size, platform and orientation. ”
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
设计和开发应针对用户行为和使用环境
做出不同响应的设计方法。
Thursday, June 23, 2011
31. 兼顾移动设计
1. Luke Wroblewski - “Mobile First” (http://www.lukew.com/ff/entry.asp?933)
a. Mobile is exploding
b. Mobile forces you to focus
c. Mobile extends your capabilities
2. 触摸 vs. 鼠标
-无CSS Hover状态
-分辨率1024x768
-手指面积
-手持习惯
-iOS不支持Flash
http://www.whatcreative.co.uk/blog/tips/designing-for-touch-screen/
Thursday, June 23, 2011
40. 应用HTML5面临的问题
1. 兼容问题
主流桌面浏览器 开发版桌面浏览器 移动版浏览器
Microsoft Internet Explorer 9 130 Microsoft Internet Explorer 10 PP 1 130 Apple iPhone and iPod iOS 3.1 132
Apple Safari 5.0.3 228 Apple Safari 5.1 273 Apple iPhone and iPod iOS 4.0 195
Mozilla Firefox 4.0 255 Webkit Nightly 79987 273 Apple iPhone and iPod iOS 4.1 195
Opera 11.10 258 Google Chromium 11.0.690 293 Apple iPhone, iPod and iPad iOS 4.2 206
Google Chrome 10.0.648 288 Android 2.3 182
Microsoft Internet Explorer 6.0 17 Blackberry 6 233
Microsoft Internet Explorer 7.0 17 Opera Mobile 11 234
Microsoft Internet Explorer 8.0 32
http://html5test.com/results.html
2. 设备性能局限
3. 功能探测 + fallback支持 + 降级处理
如:http://www.modernizr.com
Thursday, June 23, 2011
53. 资源响应性优化
1. 图片
a. <div><img src= width=100%></div>
b. background-image
c. <img src="small.jpg?full=large.jpg" > 如:https://github.com/filamentgroup/Responsive-Images
d. <img src="${image-src}" >
2. Flash vs. HTML5
a. 音/视频 (Audio/Video)
b. 动态图表 (SVG)
c. 广告 (CSS3)
d. 数据通讯 (WebSocket, XDM)
Thursday, June 23, 2011
56. User Interface Frameworks
5. Establish frameworks to provide flexibility.
“By defining a set of principles, elements, patterns and guidelines, frameworks help distributed
experiences adapt to meet users not only where they are, but where they are going to be.”
摘自 http://punchcut.com/perspectives/distributed-experiences-multi-device-design
Skeleton jQuery Mobile
http://www.getskeleton.com/ http://jquerymobile.com/demos/1.0b1/
Sencha Touch
http://www.sencha.com/products/touch/
Thursday, June 23, 2011