在瀏覽網頁需求的行動、穿戴裝置及大尺寸電視愈來愈多之下，各種顯示大小與操作模式的不同，我們在設計網頁時必須加入更多的心思，讓使用者獲得更佳的體驗。
在行動裝置瀏覽網頁還未普及時，設計網頁大多都會以桌上型、筆記型電腦搭配滑鼠的操作為主來進行設計，但以現代愈來愈普及行動裝置搭配觸控操作的趨勢下，以往大量且密集的網頁元素，卻會使其難以操作與瀏覽，如何兼顧個人電腦與行動裝置的使用者體驗就是我們必須努力的課題。
現在不只資訊科技類的網站還包含了生活休閒、教育單位等很多的網站都有提供自適應網頁設計（Responsive Web Design，RWD），隨著顯示畫面的橫向大小來自動調整網頁元素的布局與大小，讓小尺寸裝置也能有方便的網頁瀏覽體驗。
而在程式碼的撰寫上，微軟技術傳教士上官林傑（Eric ShangKuan）老師在影片中，也提供給我們幾個針對現代化網站設計的因應之道。
首先，在 HTML 的部分中不鼓勵為了向下相容而加入強制以舊版 IE6 執行的 meta 標籤，如下所示。這樣會有使用新版 IE 瀏覽器模擬舊版瀏覽器而導致降低效能影響呈現效果；在新版的 IE 瀏覽器與 Microsoft Edge 預設都會以符合 W3C 標準且速度較快的引擎來做呈現，所以希望開發人員能夠避免使用下面這樣的標籤。
HTML：
<!--自動判斷使用 IE6 相容性檢視。-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE6"/>
另外在CSS上，在較早的行動裝置網頁中可能會針對ㄧ些新的 CSS3 語法前加入供應商前綴（Vendor Prefix），如下所示。但在近年來各家的瀏覽器也都將 CSS3 做到高度相容，也漸漸地不需要供應商前綴的撰寫了。例如：假設在某段 CSS 語法中的 transform 只加入了某個供應商前綴，而沒有無供應商前綴的 transform，那麼可能就會造成其他瀏覽器即使有實作符合 W3C 標準的 transform 功能，也因無法辨識其他供應商前綴的關係而無法正確顯示了。
CSS：
.customCSS {
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
最後在 JavaScript 的部分，可能會使用判斷使用者目前的瀏覽器來決定要提供什麼樣的功能實作；在過去瀏覽器版本更新速度沒有這麼快的情況下這樣的判斷還算有用，但現代的環境下不論桌上型或行動裝置的瀏覽器更新的速度都非常快，這樣有可能會導致誤判。所以在 JavaScript 的寫法也會建議以有沒有這個物件的存在來進行判斷，也就是所謂的 Feature detection 方式，而不是去判斷瀏覽器的方式來做，如下所示。同時也建議開發人員可以使用新版的 JavaScript 及 CSS 函式庫來避免函式庫裡的 CSS 供應商前綴與判斷瀏覽器的情況。
JavaScript：
// 判斷瀏覽器的方式。
if (navigator.userAgent.search("MSIE") >= 0) {
// Do something with IE...
}
// Feature detection 方式。
if (navigator.geolocation) {
// Do something with feature…
}
完整的影片可以在：「何謂現代化網站 | 現代化網站設計 | Channel 9」進行觀看，或是直接觀看下列的影片進行更深入的瞭解，非常感謝！
延伸閱讀：
本著作由Zhi-Wei製作，以創用CC 姓名標示-非商業性-相同方式分享 4.0 國際 授權條款釋出。
