mobile web(preview version)

1

尚玉瑋ywshang@itri.org.tw

Mobile Web

2

START

3

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

4

目前有兩種實作方式

5

(1)

6

Responsive Web Site

7

Responsive Web Site看起來像這樣…

8

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

9

Responsive Web SiteCSS3 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; }

}

10

Responsive Web Site畫面寬度分水嶺

11

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

Responsive Web Site

12

(2)

13

OptimizedWeb Site

14

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

15

Optimized Web Sitestw.m.yahoo.com m.facebook.com

16

Optimized Web Sites適合功能型網站：銷售資料蒐尋Web Apps…

Desktop & Tablet Web Site

Mobile Web Site

17

Optimized Web Sites

當然也能用於資訊型網站

18

Mobile APP

19

App的平台

20

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

21

目前也是兩種實作方式

22

(1)

23

Native Apps

24

Native Apps使用不同平台原生語言的應用程式。Objective CC#、 Visual BasicJava…

25

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

26

Native Apps

提供最佳的使用者體驗

27

Native Apps

前提是有好的UX設計

28

(2)

29

Hybrid Apps

30

Hybrid Apps

使用WebView元件瀏覽網頁並可包成App

31

Hybrid Apps

Write Once Run Everywhere

iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian

32

Hybrid Apps

也有可能

Hybrid AppsWrite Once, Debug

Everywhere

手機瀏覽器版本可能不同支援度也不同

34

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

35

Hybrid AppsAndroid使用者可能會用的不習慣

36

Native vs Hybrid哪個比較好

37

38

Facebook的 App轉變

HTML5 Native

39

Part IEnd