翻譯自 What is Responsive Web Design? By Annie Pilon
<若有翻譯不順歡迎在下方留言提出>
剛踏入網路行銷的你，是否曾經想過，什麼是響應式網站設計(Responsive Web Design)呢？
響應式網站設計就是網站自己會根據使用者所使用的裝置來去調整網站的版面大小，讓使用者可以用最舒適的方式來去瀏覽你的網站。現在的每個人所使用的裝置有可能是一個擁有大螢幕的桌上型電腦，也有可能是一台筆電，或者是只有小小螢幕的智慧型手機和平板。而且使用智慧型手機、平板或是其他行動裝置的人數日益提升，因此有更多人開始是用較小的螢幕來去瀏覽網站。在如今數位化的狂潮下，響應式網站設計的確是不可或缺的元素。
這樣的網站設計方式，也被 Google 稱為行動裝置優先(mobile-first index)的機制。隨著許多小企業開始朝向行動裝置來去拓展他們的業務時，他們的網站、電子商務、Google 商業網站、社群媒體還有其他各種網站都應該讓所有類型的裝置都能輕易地閱覽。
響應式網站設計的目的就是讓網站的主體只有一個，但是可以隨著使用者的裝置大小不同來去調整網站的版面配置和尺寸。我們來看看傳統只有一種尺寸的網站。當你在桌上型電腦點開網站來看時，頁面可以很正常地顯示三個欄位。但當你用平板電腦點開網站時會發生什麼事情？頁面可能就會把三個欄位擠在同一欄，讓使用者只能水平拉動頁面內容來去看這三個欄位。更慘的是，有的東西還會直接被切掉，導致使用者看不到你的完整內容。這是由於現在平板可以放直地看，也可以放橫地看。因此在一個小小的智慧型手機螢幕上，網站的設計又是另一個挑戰。太大的圖片可能會讓圖片被切割掉，或者是太大的圖檔也可能會讓使用者在載入你的網站時變得很慢。
如果有使用響應式網站設計，會發生什麼事情呢？那麼用平板看網站的內容時，他就會自動幫使用者調整到最適合觀看的版面配置和尺寸。如此一來，使用者就能更好地瀏覽你的網站內容，也能更輕易地找到他想看的東西。它會自動把網頁的內容調整成最適合使用者觀看的版面，也會自動調整網站裡面圖面的大小。
重點就是：有了響應式網站設計，網站就能自己根據使用者所使用的裝置來去調整自己的版面配置和尺寸，讓使用者可以很舒服地瀏覽你的網站。
響應式網頁設計所使用的是流體網格(fluid grids)。因此所有的網頁元素都會用相對大小(proportion)來去呈現，而不是絕對大小(pixel)。所以如果你的網站現在有三列內容，我們不會去設定它的實際大小，而是會去設定他相對於其他元素的大小。例如第一列必須佔頁面的一半，第二列必須佔頁面的 30%，第三列必須佔頁面的 20%，諸如此類。
圖片之類的多媒體元素也會用相對大小來去呈現。如此一來，不管使用者的裝置螢幕大小為多少，圖片還是可以在整個頁面裡佔同樣的相對比例。
滑鼠 vs 觸碰:出現行動裝置的網站設計概念後，使用者是使用滑鼠還是使用觸碰來去瀏覽網站，也成為了一個問題。在桌上型電腦，使用者會使用滑去來去點選。但如果是在智慧型手機或是在平板上，使用者則會使用手指來去進行觸碰。但是，用滑鼠可以很輕易點選的網頁元素，當使用者不是用滑鼠而是用手指來去操作時，可能就會變得很難點。所以網頁設計者也應為使用手指”觸碰”的使用者著想。
圖片和下載速度:網站上不免會有各種影像、廣告，而這就會牽扯到使用者的下載速度。在行動裝置上，最少是不要像在桌上型電腦那樣顯示那麼多圖片，否則等這些圖片下載完，使用者早就先跳離你的網站了。所以較大尺寸的廣告最好也換成用小尺寸來顯示。
Apps 和行動版本:你也許曾經想過要幫自己的網站寫一個 App，像是 iOS、Android 或 Blackberry 上的應用程式，讓行動裝置的使用者在使用上可以更方便。
但是現在的行動裝置日新月異，也讓你更難去寫出適用於所有的裝置或作業系統的 App。
越來越多人都在使用行動裝置。Pew Study 的一份調查顯示出，在 2011 年時，美國的行動裝置使用者比例大概是 35%，但在2018年已經爬升到 77% 了。如果你仔細看你的流量都是從哪種裝置來的，你可能會被行動裝置的比例給嚇到。
現在到處都有可以購買的響應式網站樣板。例如你如果有 Wordpress 的網站，你就可以在 ThemeForest 上挑選給 Wordpress 專用的網站樣板。
我們也有提供方便使用的網站樣板平台，歡迎跟我們諮詢哦！
喜歡我們的文章的話，歡迎你分享及按讚哦！
圖片來源：pixabay & 原文
Click here to download a PDF copy of this article
Save it to read later, or share with a colleague
評論
尚未有留言，搶頭香吧