1. Mobile Web
尚玉瑋
ywshang@itri.org.tw 1

2. START
2

3. Mobile Web
給行動裝置瀏覽的網頁
3

4. 目前
有兩種實作方式
4

5. (1)
5

6. Responsive
Web Site
6

7. Responsive Web Site
看起來像這樣…
7

8. Responsive Web Site
使用Media Query讓網頁隨著瀏覽器
畫面寬度提供相對應CSS版型(內容)
8

9. Responsive Web Site
CSS3 Media Query
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
}
}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 20px;
}
} 9

10. Responsive Web Site
畫面寬度分水嶺
10

11. Responsive Web Site
適用於資訊型網站
ex:新聞、部落格、照片分享‧‧‧
11

12. (2)
12

13. Optimized
Web Site
13

14. Optimized Web Sites
針對行動裝置客製出來的網站
14

15. Optimized Web Sites
tw.m.yahoo.com m.facebook.com
15

16. Optimized Web Sites
適合功能型網站：
銷售
資料蒐尋
Web Apps Desktop & Tablet Web Site
…
Mobile Web Site 16

17. Optimized Web Sites
當然也能用於資訊型網站
17

18. Mobile APP
18

19. App的平台
19

20. 簡報內容不包含
App平台選擇
20

21. 目前
也是兩種實作方式
21

22. (1)
22

23. Native Apps
23

24. Native Apps
使用不同平台原生語言的應用程式。
Objective C
C#、Visual Basic
Java
…
24

25. Native Apps
適用類型：
銷售、財金
應用軟體(工具)
遊戲
企業Apps
….
25

26. Native Apps
提供最佳的使用者體驗
26

27. Native Apps
前提是有好的UX設計
27

28. (2)
28

29. Hybrid Apps
29

30. Hybrid Apps
使用WebView元件
瀏覽網頁並可包成App
30

31. Hybrid Apps
Write Once
Run Everywhere
iOS, Android, Blackberry, Windows Phone,
Palm WebOS, Bada and Symbian 31

32. Hybrid Apps
也有可能
32

33. Hybrid Apps
Write Once, Debug Everywhere
手機瀏覽器版本可能不同
支援度也不同

34. Hybrid Apps
如果UI設計最先是針對iOS
34

35. Hybrid Apps
Android使用者可能會用的不習慣
35

36. Native vs Hybrid
哪個比較好
36

37. 37

38. Facebook的App轉變
HTML5 Native
38

39. Part I
End
39