x RWD

Agenda

1. 什麼是RWD？

2. Hyweb規格現況分析

3. 如何導⼊入RWD？

4. RWD GUI spec5. 常⾒見Q/A？

6. 檢測tool

RWD沒什麼了不起

只是因為以前是”技術導向”現在是 “使⽤用者導向”

響應式網⾴頁設計 （英語：Responsive web design，通常縮寫為RWD）

⼜又稱為⾃自適應網⾴頁設計、回應式網⾴頁設計。 是⼀一種網⾴頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌⾯面電腦顯⽰示器到⾏行動電話或其他⾏行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。

RWD 原理CSS3 media query

⾃自適應網⾴頁設計的主要核⼼心技術是CSS3 media query ，說穿了就是讓不同解析度去套⽤用不同的CSS設定，所以多少種尺⼨寸，就要寫多少組CSS。

max-width（@media screen and (max-width: 600px)）min-width（@media screen and (min-width: 900px)）device-width（@media screen and (max-device-width: 480px)）針對iPhone4提供專⽤用的css設定檔<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

針對iPad的Portrait Mode(直⽴立)與Landscape Mode(橫躺)兩種瀏覽模式給予不同的css設定檔<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

參考設計 http://mediaqueri.es/

https://dribbble.com/shots/1004476-Wireframes/attachments/118672

不是所有的網站都適合RWD

Yahoo 博客來

法務部 中市府

⼈人家不管啦！給我做！

什麼樣的類型網站適合RWD?

http://www.ibest.com.tw/news/ins.php?index_id=66&index_m_id=0

RWD 響應式網站設計

適合 不適合

框線構成的官網 http://edition.cnn.com/ 互動及特效過重的網站

MiniSite Microsite http://www.hansshih.com/aboutme 影⽚片互動的網站

部落格 http://csscoke.com/

步驟過多的網站（intra、ap應⽤用系統）

簡單的活動網站 http://www.eason.idv.tw/wedding/ ⼤大型Portal

RWD的優缺點

優點 缺點

開發成本⽐比APP低

相容於APP畫⾯面

利於⾏行銷與分享

提升網站轉換率

IE8(含)以下不⽀支援

不適合複雜介⾯面與資料

載⼊入速度會稍微增加

前端開發時間⻑⾧長

凌網RWD設計範例：

http://solution.hyweb.com.tw/hyread/

凌網電⼦子書產品網站http://thcdc.hakka.gov.tw/tourhakka/

客家旅遊網http://www.police.ntpc.gov.tw/mp-1.html

新北警⼊入⼝口網

RWD的精神在於⾏行動化

不懂的客⼾戶會盲從

⾏行動版網⾴頁也是不錯的option別忘了還有⼀一個技術叫

user agent

Hyweb 現況分析

簡單來說.如果現在GIP要改成RWD ..

但不是不可能，因為我們的技師很厲害。

新北警就是做到了！

可是如果再叫設計師⽤用GIP做成⾃自適應

RWD? 可以吃嗎？

我是⼩小⽲禾

為什麼GIP升級RWD 這麼困難？

最理想的 RWD html spec：

單欄式 雙欄式 複合式 mobile

RWD每⼀一個區塊都必須是獨⽴立的，

因為⽅方便擠壓成mobile的排版樣式。

HEADER

LEFT RIGHTCONTENT

FOOTER

現在的html spec：

最⼤大的問題在於

table layout

雖然每個部⾨門的GIP都不⼀一樣，但前台

卷出來都還是有此table

HEADER

LEFT RIGHTCONTENT

FOOTER

HEADER

LEFT

RIGHT

CONTENT

FOOTER

HEADER

FOOTER

LEFT

CONTENT

RIGHT

PC 版 mobile 版

以上是GIP最困難也是最簡單的解法

簡單在於只要改section

困難在於沒有部⾨門願意改

但～以上也只是治標

有些症狀必須從根本治療

如何導⼊入RWD？

設計師給的直接建議

1. ⼤大家要了解RWD精神不是UI，⽽而是UX2. 網站企劃要更了解⾏行動裝置的操作⾏行為3. 企劃之前要與設計師溝通可⾏行性4. 極度⾮非常需要前端⼯工程師

5. PM要知道 RWD 是傳統切版⼯工時x2~36. 業務要知道 RWD 並不是優規

網站企劃 設計師 ⼯工程師

依照重要性排序：

網站企劃決定了RWD的最終樣貌

網站企劃需要了解的事該如何設計出適合⾃自適應的規劃?

1. 先了解客⼾戶的認知與需求2. 根據專案利潤評估要做的尺⼨寸規則3. 把需要的區塊統⼀一規格

4. 先排列mobile版

5. 再排列pc版

6. 根據需求與使⽤用者⾏行為化繁為簡，例如消息筆數7. 針對沒有把握或是獨⽴立的區塊先與⼯工程師、設計師討

論可⾏行度

480px

768px

1024px

常⾒見解析度分界：

網站企劃需要了解的事

尺⼨寸越來越⼤大， 分界會越來越模糊

舉例來說：

網站企劃需要了解的事

這是pc版的分⾴頁區塊

這是mobile版的分⾴頁區塊 或是你可以選擇lazyloadinghttp://blog.finalevil.com/2009/10/jquery01lazy-load.html

舉例來說：

設計師 不等於 魔術師

設計師會遇到的難題以後美⼯工⼯工作多⼀一項：RWD

1. 要⾮非常熟悉html結構以及CSS32. 多⼀一種尺⼨寸分界，就越耗時

3. 設計師被迫必須學Javascript，因為⾏行動版⼤大量使⽤用

JQ的⽐比例⾮非常⾼高

4. 必須⽐比企劃更了解規劃內容，因為負責實現的是你

5. 必須先預知⼯工程師切你的版會有什麼問題

6. ⺫⽬目前無障礙的問題 - 無解，必須靠⼯工程師⼤大⼒力協助

7. 設計部⾨門 ⼈人⼒力資源問題

設計師會遇到的難題舉例來說：

PC版的選單

mobile版的選單

問題：

<menu> <ul> <li></li> ….. <li></li> </ul></menu>

請問要切2個menu 互換？還是只做⼀一個menu?

如果遇到mega menu，客⼾戶⼜又問你為什麼mobile版沒有我的那些資料？

前端⼯工程師 我們需要你的出現

前端⼯工程師的必要性套版將會是⼀一份神聖的⼯工作

1. ⺫⽬目前企業最熱職業 UX 與 前端⼯工程師

2. 公司前端⺫⽬目前由設計師兼任3. 前端⼯工程師任務：

• 實現美妙的使⽤用體驗• 提升設計質感• 建⽴立設計元件庫• 獲得使⽤用者好感度• 建⽴立企業品牌• 增加企業收⼊入

可是...要如何整合團隊的開發共識？

客⼾戶 PM SA PG 顧問

在這前端爆發的市場 我們更需要⼀一個⼯工具來提升效率

12 Days vs 4 Days的概念

⺫⽬目前凌網專案開發執⾏行現況：

接收需求

客⼾戶

完成需求

PM

單軌式開發流程

我們發現的問題：

• 溝通成本

• ⼈人為失誤率⾼高

• 設計師切版規格不⼀一

• ⼯工程師開發時間被壓縮

• GIP的限制

• 沒有guideline

企劃SA 設計師 PG

這⼀一段的開發⼯工時很⾼高

⼀一個⾞車體可打造多種⾞車款的概念

porsche cayenne

AUDI Q7

零件模組化

RWD⾞車體

資料發布模組

多媒體元件

AP功能開發

+ ………….

模組化減少重複開發流程

HEADER

LEFT RIGHTCONTENT

FOOTER

news

megamenu

bannerslide

login

calendar

search

photoalbum

video

bannerslide

news

search

我們已有幾百款設計，瞬間換版更是容易

簡單來說，就是打造我們的..

凌網協作平台概念

客⼾戶 PM

可改善⺫⽬目前的現況：

• 減少溝通成本

• 減低⼈人為失誤率

• 設計師切版規格統⼀一

• 增加⼯工程師開發時間

• 制定凌網前台guideline

企劃SA

設計師

PG

⼤大幅減少開發⼯工時

迅速產出RWD portal

這個概念與96年開發的GIP2.0 是兩回事

我們即將使⽤用

https://kkbruce.tw/bs3 中⽂文版教學

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap已有完美佈局的模組、 網⾴頁元素以及前端效果

http://www.layoutit.com/build?r=40581205

Bootstrap generator for 企劃

http://www.bootstrap.vvvvv.tw/components.html

Bootstrap component for ⼯工程師

http://johnnode.blogspot.tw/2014/01/responsive-web-design-bootsrap.html

Bootstrap RWD model

⽐比起前台，其實我們更care CMShttp://themepixels.com/demo/webpage/bracket/

RWD 只是增加⼯工時的苦⼯工

但如果⾃自此改變了網站製作⼯工法

減少開發⼯工時

我們就能從中獲取利潤

常⾒見QA

常⾒見QA1. 我的客⼾戶說IE7 IE8 看不到RWD 怎麼辦?2. 為什麼我的⼩小⽶米機會跑版？

3. RWD是否會增加loading?4. 上稿資料在⼿手機裡跑版了！

5. RWD 怎麼估⼯工時？

6. RWD可以過無障礙嗎？

7. ⼀一欄？⼆二欄？還是三欄？

8. ⼀一定要⽤用HTML5來開發嗎？

9. 關於RWD⼯工程師要做什麼？

檢測⼯工具

檢測⼯工具

http://lab.maltewassermann.com/viewport-resizer/

http://www.browserstack.com/responsive

RWD輸⼊入網址檢測⼯工具

檢測⼯工具HTML5的⽀支援程度

HTML 5 Test網站，是⽤用以測試對瀏覽器對熱⾨門新功能的⽀支援。測試的滿分是550分

http://html5test.com/results/desktop.html

HTML5 & CSS3 Support http://fmbip.com/litmus/ CSS3 Properties：CSS3屬性⽀支援列表CSS3 Selectors：CSS選擇器⽀支援列表Web Applications：HTML5的Web應⽤用功能⽀支援列表GFX & Embedded Content：HTML5的圖形及內嵌內容⽀支援列表Web Forms 2.0：HTML5的新表單元件⽀支援列表

讓IE8勉強⽀支援HTML5 http://diyland.biz/?opt=detail&topic=75&id=16977

檢測⼯工具無障礙瀏覽器⽀支援程度

http://www.people.cd/html5-accessibility/