［前言］
由於網頁已經進入多平台多裝置而不再只是以傳統滑鼠鍵盤所操作的電腦瀏覽器為唯一存取介面，所以微軟的上官林傑大師在一個IT home舉辦的現代網頁設計探討活動中提出一些現代網頁設計的原則，茲在此彙整說明以供參考。
［主要考量］
現代網頁設計的主要考量是使用者已不再受限於單一平台裝置來瀏覽網頁，有很多是在手持裝置上操作，因此網頁的電量消耗考量就成了最重要的因子，而既然電量是主要因素，則因為考慮電量而需要注意的網頁效能，也就成了現代網頁的設計顯學。
［現代網站設計原則］
- 使用 <!DOCTYPE html> 開頭，告訴Browser我是用符合HTML 5 標準開發的網頁。
- 不再使用X-UA-Compatible表頭：該宣告因為可以強制瀏覽器用特定版本模式(如：IE 7)來執行HTML文件，因而封印了新瀏覽器的能力(如：你用IE 11 打開網頁)，則網頁因為使用舊文件模式，新瀏覽器功能將無法使用。
- 減少依賴外掛程式，改用相對應的Javascript/CSS3/HTML 5 作法替代：儘量不要使用傳統的Flash . Java applet . Silverlight 外掛。
- 避免在網頁中判斷瀏覽器版本，改以偵測瀏覽器是否有支援某物件(功能)來替代：印為User-Agent所取得的Browser Version String其實並不可靠，加上Browser版本愈來愈多也愈來愈快的汰換週期，使得靠版本號決定功能的程式碼向後不相容度極高。
- 盡量使用Browser 原生的HTML 5 / EMCAScript 2015( ES 6) APIs 來開發網頁：原生程式庫的效能總是比外部Javascript Library 來得好，這點將呼應主要考量中對新世代網頁電量使用的要點，而如果不得已得使用JavaScript Library，則盡量以新版本為主，至少Minor Version 要是同Major版號系列中最新的，因為它將是最少bug的版本。
- 盡量不要在CSS中使用 Vendor-Prefix 語法。
- RWD( Responsive Web Design)：
(1). 可直接套用熱門的RWD Framework( 如：Bootstrap)，讓網頁能自適應於不同尺寸螢幕，同時向量圖不會因為營幕放大縮小間因為解析度的變動而模糊。
(2). 在智慧裝置網頁設計必需是” Touch Friendly”。
(3). 運用自動化多平台網頁效果呈現測試工具測試網站是否符合RWD
=> TypeScript /Vorlon.JS
［後記］
現代網頁設計必需考慮的是多元平台裝置的可視性以及網站效率以節省使用者手持裝置用電量，同時我們需要Building一套QA團隊的統一的Web Browser Application測試程序，使我們的Application有一致性的存取品質並且確保能適應於必要Browser與裝置(需團隊自訂)，這套程序需要對Web Application使用一定的自動化工具進行網頁掃描測試以找出必要的改進點，同時QA測試需確定網頁符合一些基本運作原則，如此全團隊的各種Web application將可趨於在各必要裝智上行為品質的一致化，而這也代表必需仰賴不斷的研究與引進新自動化測試工具技術來強化現代網頁開發測試過程，以使網頁符合上述現代網站的開發原則。
PS.
- QA需有一套一致性Web Application 工具掃描與基礎測試程序確保各Web Application在必要裝置與Render上有一致性。
- 能不斷研究並找到新的工具來幫助團隊或個人工作的人，永遠不會被淘汰。
2017年7月1日星期六 11:47 PM
留言列表
