凌網-網頁設計新規格簡介

網頁新規格簡介
HTML5 / CSS3 / Responsive Web Design

大綱
 對網頁設計的了解?對GIP的了解?
 手持裝置對網頁設計帶來的改變
 關於HTML5
 關於CSS3
 Responsive Web Design自適應網頁/響應式網頁
 對新規格的誤解
 設計師會遇到的難題
 企劃該注意到的事

對網頁設計的了解?對GIP的了解?
 HTML是什麼?
 CSS是什麼?
 關於GIP
 了解你配合的工程師
 如何跟設計師溝通你要的切法？

手持裝置對網頁設計帶來的改變
 手持裝置這些年來已經進入了大爆發的時代，為了配合手持裝置瀏覽，
網頁的設計方式這些年來也漸漸改變，但無論如何改變，最終的目的
都是要讓瀏覽經驗更方便、更快速。
趨勢解決辦法
網頁內容精簡滾動式、單頁式
減少Flash、JavaScript的使用 HTML5搭配CSS3
網頁設計精簡扁平化設計Flat Design
跨媒體瀏覽 RWD自適應

關於 HTML5
 HTML5是HTML下一個主要的修訂版本，現在仍處於發展階段。目
標是取代1999年所製定的HTML 4.01和XHTML 1.0標準。
 廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內
的一套技術組合。
 它希望能夠減少瀏覽器對於外掛程式需求，如Adobe Flash、
Microsoft Silverlight，與Oracle JavaFX的需求，並且提供更多能有
效增強網路應用的標準。

HTML5的技術組成
離線功能
HTML5透過JavaScript提供了數種不同的離線儲存功能，相對於傳統的
Cookie而言有更好的彈性以及架構，並且可以儲存更多的內容。
 WebStorage →比Cookies更大、更有彈性的的儲存
 Web SQL Database →本地端的SQL資料庫
 Indexed DB → Key-value的本地資料庫
 Application Cache → 將部分常用的網頁內容cache起來

即時通訊
以往網站由於HTTP協定以及瀏覽器的設計，即時的互動性相當的受限，
只能使用一些技巧來「模擬」即時的通訊效果，但HTML5提供了完善的
即時通訊支援。
 WebSocket →即時的socket連線
 Web Workers →以往JavaScript都是single thread，透過Worker可
以有多個運算
 Notifications →原生的提示訊息，類似像OS X的Growl提示

檔案以及硬體支援
在Gmail等新的網頁程式當中，可以透過拖拉的方式將檔案作為附件或是上
傳的方式，就是HTML5的Drag‘n Drop和File API。
 Drag'n Drop → HTML元素的拖拉
 File API →讀取使用者本機電腦的內容
 Geolocation →地理定位
 Device orientation →手持裝置的方向
 Speech input →語音輸入

語意化
語意化的網路可以讓電腦能夠更加理解網頁的內容，對於搜尋引擎的優
化（SEO）有很大的幫助。
 New tags →新的標籤，像是<header>、<section>等
 Application tags →也是新的標籤，像是<meter>、<progress>等
 Microdata →加入語意的資料讓搜尋引擎等網站可以正確顯示
 Form type → <form>可以加入的type便多了，包含email和tel等屬
性，瀏覽器會協助進行資料格式的驗證

多媒體
Audio、Video的標籤支援以及Canvas的功能應該是大家對於HTML5最
熟悉的部份了，也是許多人認為Flash會被取代的主要原因。
 Audio video → 影片和音樂的原生播放支援
 Canvas → 2D的繪圖功能支援
 Canvas 3D → 3D的繪圖功能支援
 SVG → 向量圖支援

與HTML4的不同之處
 檔案類型聲明（<!DOCTYPE>）僅有一型：<!DOCTYPE HTML>。
 新的解析順序：不再基於SGML。
 新的元素：section, video, progress, nav, meter, time, aside, canvas, command, datalist,
details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby,
source, summary, wbr。
 input元素的新類型：date, email, url等等。
 新的屬性：ping（用於a與area）, charset（用於meta）, async（用於script）。
 全域屬性：id, tabindex, repeat。
 新的全域屬性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
 解除安裝元素：acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex,
noframes, strike, tt。

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

HTML5的支援程度
無障礙（Accessibility）
 為了使HTML5的新元素或新屬性獲取最大化的相容性，開發人員需
要附加一點額外補助，或者有些特性根本沒有被任何瀏覽器實作，或
者瀏覽器根本不支援補助技術。因此有些特殊的HTML5特性根本不
能使用。
http://www.people.cd/html5-accessibility/

關於CSS3
各瀏覽器的支援
 CSS又叫層疊樣式表（Cascading Style Sheets）用來為結構化文件（如HTML或XML）
添加樣式（字型、間距和顏色等），由W3C定義和維護。目前最新版本是CSS2.1，為
W3C的推薦標準。
 CSS3新增許多CSS2.1沒有的功能，過去利用影像或是JavaScript才能呈現的網頁設計
（例如漸層色、圓角、陰影、英文網路字型、多欄位排版、動畫），現在只要利用
CSS3搭配HTML5就可以輕鬆完成，對於網頁在手持裝置上的執行速度有顯著的提升。
但因為目前只是草案，除了每家瀏覽器的CSS3寫法不同之外，也有支援度的問題。
 W3C網站 http://www.w3.org/TR/CSS/
CSS3 school http://www.w3schools.com/css/css3_intro.asp
瀏覽器引擎CSS支援比較 http://ppt.cc/7qe0

Responsive Web Design自適應網
頁
何謂自適應？
簡單來說就是讓同一
個網頁文本（即同一
個HTML）在 PC、
Mobile 上都可以有好
的瀏覽效果，稱為自
適應網頁
（Responsive Web
Design，簡稱RWD）。

頁
Responsive design device resolution
reference
http://spirelightmedia.com/resources
/responsive-design-device-
resolution-reference
Testing Tools
http://designwebkit.com/web-and-
trends/12-responsive-design-testing-
tools-check-screen-resolutions/

頁
自適應原理
 液態排版 vs 固定寬度排版
液態排版的對比設計方式就叫「固定寬度(fixed-width)排版」，傳統上
來說，比起液態方式，固定方式通常較受平面及視覺設計師歡迎，因為
他們較習慣先決定整體版面輸出的範圍，而液態方式則需要費多一點心
力去考量很多不同解析度的情況，雖然比較費工，但卻是互動介面不可
或缺的重要設計。
液態排版(通常用在文章Blog) http://alistapart.com/article/holygrail
固定寬度排版 http://www.japantimes.co.jp/

頁
自適應原理
 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

頁
自適應的優點
 開發成本與時間比APP低
APP必須開發iOS版及Android版兩個版本，一個版本皆數十萬元起跳，開發時間加上審核上架時
間相當長。
 不需下載APP就能使用
這不只是自適應網頁的優點，可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到
iTunes、Google Play下載，APP若要更新，必須重新審核過後，再通知所有下載用戶更新。反觀
自適應網頁與手機網頁，只要管理者更新網站，每次連上網頁都會是最新版本。免費Wi-Fi熱點越
來越多、 3G費率持續調降，即使無法離線瀏覽也不再是問題了。
 可以同時針對許多不同裝置分別調整
APP必須開發iOS版及Android版兩個版本。通常做都是利用 CSS3 的 Media Queries 方法來實
現，而你可以使用這項 CSS 來對許多裝置做設計，不論是螢幕小到不行的入門款 Smart Phone、
螢幕大的 Galaxy Note、解析度超高的 iPad、輕巧的 Google Nexus 7 都可以做 Responsive
Web Design 。

頁
自適應的優點
 不需要重寫 HTML
Responsive Web Design 不需要再重寫另一份 HTML ，直接使用 CSS 屬性來對不同裝置做調整
即可。
 維護成本低
APP完成之後要不定期需針對新版本測試，才能確定APP在新手機上能運作順暢。以目前新手機
上市的頻率來看，這是永遠不會結束的測試地獄。手機版網站等於是另一個用在行動裝置的公司網
站，相對地，企業必須花2筆網站維護成本。
 利於分享
APP沒有網址可以分享，做了手機版網頁，分享出的網址通常都是手機版網頁的網址，當朋友用
電腦開啟連結時，卻不見得會轉回電腦版網站。蘋果日報的手機網站就是如此。同樣的網頁內容
拆成電腦版、手機版兩個網址，按讚數、流量分析等也會跟著拆成兩筆數據，對SEO相對比較弱。

頁
自適應的缺點
 E7以下不支援，IE8雖然有hack但是很容易有bug
 不適合複雜的功能、選單或介面
如果電腦版必須維持很複雜的介面，手機版則必須大量縮減內容，兩個版本架構不同
且差異相當大的話，另外做手機版網站是比較適合的。
 載入速度問題
因為是使用同一份的 HTML & CSS ，所以不管 User 在手機上或者在 PC 上，要瀏覽
的網頁都是同一份網頁，當然速度也是會一樣。
 必須花心思規劃及花較長的時間切版，前端開發時間較長
不單單只是程式碼的配合而己，整體網頁在架構及設計上一開始就要導入RWD的觀念，
所以網頁的使用上必須簡單直覺，訊息清楚明瞭，少用動畫及特效（輪播、跑馬燈、
動畫）。

頁
什麼類型的網站適合做自適應網站設計
http://www.ibest.com.tw/news/ins.php?index_id=66&index_m_id=0

對新規格的誤解
 用新規格開發會變快？
工程師或許會少套一個手機板，但是對於設計師來說會增加切版時間及修正BUG的時間。
 是手機板還是自適應？
基本上自適應就是為了手持裝置瀏覽而誕生的，有了自適應自然不需要做手機板，除非是兩者採用
資料不同，或電腦版的內容過於龐雜，用手機瀏覽負擔會太重，這時候才需要另外製作手機板。
 一欄?兩欄?三欄?
自適應其實無關乎幾欄，在於版面的編排是否符合自適應的邏輯。
當然欄位變動越大，製作時間就越長。幾本上解析度越小，欄位要越少，才不會讓使用者看到眼睛
脫窗，所以在手機上瀏覽網頁大部分都是一欄。
 區塊可以任意變換?
在GIP的架構下必須遵守table的邏輯，但如果不用GIP開發則要考量到工程師的時程。
但是原有的HTML邏輯也是必須遵守的。

設計師會遇到的難題
 不適合的規劃
小小的區塊擠太多內容 / 沒有按照HTML的邏輯 / 不先訂好稿切板後再修改
 GIP的侷限
GIP2.0架構因為中間有table的關係，對於自適應的排版有相當程度的阻礙。
 自適應CSS所需耗費的工時
一種規格尺寸，一份工時 ex:1024X768、960x640、480X320
規劃越複雜越不統一，切版越耗時
 各家瀏覽器版本的整合
-moz / -webkit / -ms / ie9 、8、7、6
 Javascript和JQ的修改
大部分的網頁設計都是學視覺傳達出身，為了工作逼不得已要學CSS和HTML，有時候還要會寫AS和JQ，
但畢竟我們不是寫程式的科班，只能找網路上的opensource來替代， opensource的好處是免費，壞處
就是有BUG不能修改，也無法客製。
其實這些工作都是前端設計師的專長，但我們公司並沒有前端工程師，通常都是請開發的工程師幫忙救火
或是設計師網路上找免費的硬上。所以當企劃在規劃某些功能時，必須考慮是否有可輔助這些效果的工程
師。

企劃該注意到的事
 估執行該專案的條件
總金額 / 時間 / 人力資源 / 規格
 客戶想要的？我們能做的？如何分析出效益最好的做法？
金額低→時間少人力少→簡化需求→push客戶開新案
寧可凹客戶開個維護案，也不要被凹但做的凌凌落落焦頭爛額還要被扣錢
 如果真的要做，該如何設計出適合自適應的規劃?
先了解客戶的認知及需求
根據專案利潤來評估要做的尺寸規格
把需要的區塊表列出來，並儘量統一各區塊的規格
排列出適合的電腦版頁面
依據客戶需求、考量使用者行為，將電腦版頁面縮減內容至其他自適應版本（化繁為簡）
針對獨特的區塊或是需要動態的部分和設計師及工程師討論可行度

凌網-網頁設計新規格簡介

More Related Content

Similar to 凌網-網頁設計新規格簡介

凌網-網頁設計新規格簡介