什麼是響應式網頁設計? Responsive web design

最後更新於 2020 年 05 月 10 日

什麼是Responsive web design (RWD)

 

2011年,美國設計師Ethan Marcotte提出了一種網站改進解決方案,以應對「多屏時代」的到來,通過流暢的移動來調整螢幕尺寸,以調整Web內容,縮放,重新排列或隱藏部分內容。網站的不可逆轉的發展趨勢和技術概念。這樣的生產概念可以稱為回應式網頁設計(RWD)。它也被稱為回應式,回應式,對應的和多螢幕的網頁設計。相同。

在2010年之前,網頁設計師建立的網站大多是根據特定的精確尺寸(例如1024×768)設計的,類似於海報,報紙,書籍設計等。尺寸是固定的,但現在有數十種不同的螢幕尺寸規格,例如隨著智慧手機,iPad和筆記型電腦以及許多其他螢幕尺寸的出現,當今的網頁設計師經常會因螢幕尺寸和比例過多而感到困擾。

RWD成為一種新趨勢是很自然的,但是這種新方法並不是因為它更時尚或一種新的美學方法。它用於嘗試解決當前在多種螢幕尺寸上流覽網頁所引起的問題。螢幕尺寸和解析度為Web設計人員提供了更多方法來考慮如何將RWD Web設計(回應式)應用於網頁。

基於CSS3技術的RWD網頁設計(回應式),基於百分比和液體彈性佈局設計的概念,網頁本身將隨著螢幕尺寸滑動隱藏和更改,並且相應的更改將真實生成時間,以便觀看者可以在舒適的狀態下流覽。

在RWD網站設計(回應式)成熟和普及之前,手機板網站在很短的時間內就很流行。作為傳統網站和RWD網站的臨時解決方案,由於使用移動網站,仍然存在許多無法解決的缺點。如今,RWD Web設計(響應式)可以使用一個網站來替換該網站的多個版本。由於生產和管理相對簡單,因此網站的移動版本已逐漸被替換。

 


您為什麼需要一個RWD網站?

 

RWD(Responsive Web Design 響應式網頁設計)是因為移動裝置的使用率逐漸增加,所產生出來的網頁設計編排方式。

1.目前用手機方式搜尋已經成為主流

根據國家發展委員會104(National Development Committee 104)的調查和分析,臺灣的移動互聯網人口已達到80%以上,而且工業資訊研究院(MIC)宣佈60%的互聯網用戶具有手機消費經驗。以上在Internet上消費的可能性不包括看到網站後直接去實體商店購買商品的人數,這表明移動業務機會非常巨大。如果您不使用RWD網頁設計方法來構建您的網站,從而導致手機很難流覽,就很可能放棄消費,因此建議商家使用RWD網頁設計來構建。

 

2.移動裝置皆可使用RWD

目前,市場上有各種品牌的手機,平板電腦和筆記型電腦的使用率也在逐步提高。商家已經發佈了自己的螢幕尺寸,導致當前的螢幕尺寸無法標準化,因此傳統的網頁設計方法無法再回應當前的多螢幕尺寸,因此,使用液體排版方法的自我調整RWD網頁設計方法可以允許網頁內容可根據螢幕尺寸進行擴展,收縮,更改,隱藏和移動。當使用具有小螢幕的智慧手機時,其顯示幕幕也會變小。 ,並將主功能表更改為下拉隱藏模式以使用,並適度隱藏不太重要的內容,使流覽更輕鬆,更方便,同時還突出顯示了電話撥號圖示,允許使用者直接按一下該圖示來撥打電話商人。

 

3.開發成本與時間比APP便宜許多

許多商人會選擇將APP用作手機曝光方法。就生產而言,RWD回應式網頁設計比APP更快,更便宜,並且APP的使用受到限制。與網頁流覽相比,它受到的限制更大。

 

4.提升關鍵字搜尋排名

Google在其官方文章中發佈了「如果您尚未創建適合在移動設備上流覽的網站,我們強烈建議您這樣做。」

該規範指出,GOOGLE努力促進自我調整設計的網頁設計,這也為關鍵字的自然搜索排名增加了一些要點。

 

5.給用戶最好顯示效果

如果Web設計是由RWD製作的,則無論螢幕大小如何,使用者都將以最合適的方式顯示它,包括桌面電腦,筆記本電腦,平板電腦和不同大小的手機螢幕。網站將以液體佈局重新排列並顯示在螢幕上,整個網站內容將不會顯示在小螢幕上,從而使使用者感到茫然。

 

6.不用再花一筆錢做手機版

在RWD回應式網頁設計中,在成熟之前將移動板用作替代方案。您必須使用該程式來確定螢幕尺寸以切換到常規網站或移動版本。但是,主網站和移動面板屬於不同的域。有必要花費兩倍多的時間和金錢來管理和維護。如果使用RWD自我調整網站,則可以避免這種麻煩。

 


RWD網頁設計的缺點

1.太複雜的內容不適合以RWD製作,如入口平台、大型購物平台、遊戲平台等..

RWD網站將隨著螢幕大小的液體大小而適當更改,從而使用戶可以使用更合適的圖形佈局進行流覽。如果必須將所有複雜內容都顯示在手機的小螢幕上,那麼不可避免地會有一個很長的網頁,這將導致用戶觀看「煩惱」。

 

2.無法完全支援舊版瀏覽器

RWD網頁設計方法是使用最新的HTML5 + CSS3技術來編譯網頁。過舊的流覽器無法完全支持這些技術,因此在某些情況下頁面可能會損壞或無法按一下。隨著時間的推移,市場上的舊流覽器將不可避免地緩慢消失,所有流覽器都將被新的流覽器取代。

 

3.開發時間與成本比傳統方式多

RWD網頁設計方法是使用最新的HTML5 + CSS3技術來編譯網頁。過舊的流覽器無法完全支持這些技術,因此在某些情況下頁面可能會損壞或無法按一下。隨著時間的推移,市場上的舊流覽器將不可避免地緩慢消失,所有流覽器都將被新的流覽器取代。

總體而言,RWD,可以解決目前絕大部分的瀏覽尺寸問題,所以勢必成為網頁設計的新趨勢,事實上製作新網站時,目前業者有八成願意以RWD方式來架構,目前RWD已經是主流的製作方式。

通常,RWD可以解決當前大多數流覽大小問題,因此它必將成為Web設計的新趨勢。實際上,當前行業的80%願意使用RWD來構建新網站。 RWD已經是主流的生產方法。

 

你可以查看本站推介的免費主題付費主題

 

相關的文章

Fluent Icons 免費下載 965 個漂亮專業的流暢設計風格圖示

在一些大公司推動的產品開發都會有「設計語言」(Design Language),簡單來說就是將設計的表達方式、偏好或風格系統化,寫成明確規範,讓設計師和開發人員間能夠溝通運用,另一方面也可重複使用設計元件,避免重複開發,將時間投入在真正重要的事物本質上。更重要的是讓產品在不同平台的設計風格維持一致性,以提升產品的識別度、強化品牌形象。

Artify 提供新冠肺炎免費設計素材,線上編輯器修改立即使用

隨著新冠肺炎(COVID-19)疫情趨緩,一些社交活動或限制也逐漸解禁,終於可以回到大家比較熟悉的生活。不過該做的健康管理與防護還是要養成習慣,例如外出後要記得洗手,不以手碰觸眼睛或口鼻,如果搭乘大眾運輸工具或是前往公共場所還是盡量戴上口罩和保持社交距離,一方面也能確保不被感冒或各種疾病傳染,想想平日的衛教宣導還蠻重要的。

Bg-Patterns 日本免費網頁背景素材,提供常見格式及向量圖下載

如果要找尋一些很細膩、有質感的網頁素材,日本網站是個很好的去處,像是之前介紹過的 FLAT ICON DESIGN 收錄許多扁平化設計圖示,還有 FREE LINE DESIGN 提供各種分隔線素材,相片的話可以找找東京デート、Model.foto、photoAC、BIZUTART 和 PAKUTASO 等等,應該都會有不少收穫。有些網站其實很適合使用這一類素材,放上後的裝飾效果更能提升頁面整體質感。

Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)

如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(Responsive Web Design,簡稱 RWD)技術來調整版型,那麼要怎麼知道一個網站有沒有支援 RWD 呢?最簡單的方法就是拖曳調整視窗大小,看看網頁是不是在寬度較窄時仍可正常顯示,例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型,但每個裝置大小都有差異,若沒辦法同時擁有這麼多裝置進行測試,其實透過一些電腦上的工具也能達到相同效果。

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。

回應