什麼是RWD響應式網頁設計?

為什麼您需要RWD?

80%的客戶都使用手機看網站,如果你的客戶都在使用手機、平板等行動裝置尋找服務時,你的網站是否為響應式的網頁設計就至關重要。

網站漂亮好看,是 客戶上門 的重要原因!

RWD

甚麼是RWD響應式網頁設計?

響應式網頁設計(英文為:Responsive web design,通常縮寫為RWD),或稱自適應網頁設計、回應式網頁設計、對應式網頁設計。 是一種針對目前行動裝置網頁設計的技術做法,該設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。此概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出。
採用 RWD 設計的網站使用CSS3 Media queries,即一種對 @media 規則的擴充功能,以及基於比例的網格和自適應大小的圖像以適應不同大小的裝置。
網格概念會要求頁面元素使用相對單位,如百分比或字型排版自動調整大小,而不是像以前絕對的寬度及大小,如寬度為1024或768。
靈活的圖像也以相對單位調整大小(最大到 100%),以防止它們超過網格,而顯示在包含它們的元素外面。
Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則,最常用的是瀏覽器的寬度。
回應式網頁設計變得更加重要,因為行動裝置流量現在占網際網路流量的一半以上。因此,Google宣布行動裝置時代的到來(Mobilegeddon)(2015年4月21日),並開始提高行動裝置友好的網站的評價,並給予更好的推薦,譬如在手機上搜尋,有響應式設計的網站可以優先出現,而未有響應式設計的網站,則可能不會出現在行動裝置的搜尋結果,這迫使企業在這些年積極的升級網站為響應式設計。

行動上網流量

行動上網流量已遠超過電腦

根據Yahoo 電商統計,商務來自行動裝置的流量高達60%,營收達40%,遠遠超過電腦。開電腦是麻煩的,但隨時用手機或平板卻很方便,目前幾乎所有人都會用手機搜尋所需要的服務,如果你的網站在手機上還要縮放,造成消費者的痛苦,消費者會毫不留情的跳過。

行動裝置普及率

行動裝置普及率高達七成

資策會FIND公佈最新調查結果顯示,國內12歲以上使用智慧型手機或平板電腦者已達到1604萬人,約每4人便有3人為行動裝置使用者,比例還在增加中,由於行動通訊的流行,現在連阿公阿嬤都已人手一機,若在都會區,比率則更高。

行動裝置使用率

大多數人3/4以上時間都是使用行動裝置

你不會帶著電腦到處跑,但卻是手機不離身,無論是用餐、喝咖啡、車上、餐廳、郊外、逛街、看電視、睡前時都離不開手機。只要有手機,都能隨時隨地上網、工作、拍照、分享,尤其是上廁所時,更是不能沒有手機。

高階RWD響應式網頁設計技術

高達 八成的客戶會使用手機看網站,但多數的網頁設計,並非真正響應式設計,而是把所有文字、圖片、背景等元素合成一張美工圖片來展示,但這樣卻不是完整的 RWD響應式網頁!我們以程式的方式在網頁上合成文字、圖片、背景等所有的元素,這樣每個元素才能在手機、電腦等裝置自動調整到最佳位置,只有這樣才是正確的做法。

01  在不同裝置上、保持相同形象與質感

在不同裝置上,保持一致的形象,雖是響應式網頁很重要的條件,而同業卻很少人能達到!

我們可以分別針對各種裝置設計最適合的版面,讓您的客戶無論使用任何裝置,都能保有相同感受。

02  Logo、選單、主視覺不分行,不雜亂

最優的設計,是將Logo、選單等整合在主視覺內,這樣在手機上才能看到整個主視覺!這樣的技術較為複雜,但視覺效果比較好。
←←←

錯誤的設計是將選單、Logo、主視覺等都各佔一行,主視覺圖較小,這在電腦上差異不大,但在手機上,卻會只看到一個大Logo,主視覺卻會變成一張小圖,最重要的內容反而看不見,讓形象大為扣分! →

03  使用真正的文字,不把文字做進美工圖

許多沒有程式能力的設計師為了省事,常將文字做在圖片內,美工文字雖然簡單,卻不符合響應式設計,且搜尋引擎是無法閱讀的,使用美工文字有幾個嚴重缺點:

  1. 沒有響應式能力:無法在手機上自動放大,在手機看不清楚!
  2. 文字模糊:使用圖片的文字,只要解析度不對就會模糊,而現在各種設備的解析度都不同,且在手機上的圖片文字會變得很小,難以閱讀。
  3. 使用美工文字無法讓您的網站被收錄到搜尋引擎資料庫,導致客戶找不到您的網站,生意一落千丈,後果嚴重。
  4. 修改困難:不是有後台就能改,必需要有原始檔,且使用PS軟體才能改,修改後還要上傳,還得注意解析度!

您可以用滑鼠選取我

我是真正的文字,不是美工圖片,您可以用滑鼠選取我!

04  不用只適合電腦的美工圖設計網站

我們使用最高級的技術,將所有文字、圖片、背景等獨立元素合成網頁,而非偷懶的使用美工軟體合成圖片再放到網頁!
美工圖片很簡單、省事,卻毫無響應式功能,在手機上視覺效果很差,重要的圖片變得極小,文字也模糊了,無法傳達您重要的理念!可以說使用美工圖,就不是真正的響應式設計。

且美工圖片難以修改,必須要有原始檔,還要會使用 Photoshop 才能修改,修改後還要上傳到網站,非常麻煩,使用我們的設計,可以直接在網頁上修改所有的內容,快速又輕鬆!

響應式網頁設計

有無RWD響應式設計比較

行動世代網頁設計必備功能
no-rwd-demo2

想留住客戶,您必需要有RWD響應式的設計。

沒有RWD ,只有在電腦上能看,其他裝置上必需不斷拖曳、縮放,才能看到,現在有超過8成的人都使用手機看網站,手機上不方便看,客戶就會無情地離開,想留住客戶,您必需要有RWD響應式的設計。

響應式網頁設計

RWD響應式網頁設計

最新的響應式網頁設計,文字及圖片能自動於各種裝置調整成最適合的排版及大小, 不會有傳統網站變形或無法訪問的情況,在各種行動裝置中,如手機、平板、電腦、 手錶等都能調整成最適合的大小,讓所有裝置都能完美顯示,在最新的電腦或電視上, 如4K螢幕,也能已最佳的方式顯示網站,讓您的網站成為藝術,給您最有面子的門面。 符合最新規範,所以不會有看不到網站的情況發生,也不會被過濾掉手機搜尋的結果, 更能讓客戶體驗非常良好。

傳統網頁設計

傳統的網頁設計寬度都是固定的,大多是 800~1024 大小,現在行動智慧裝置種類繁多解析度大小不一,且新電腦的解析度越來越高,傳統的設計只能在老舊電腦上觀看,所以顯得極不合適,況且傳統網站多有 Flash,在目前的主流裝置都無法支援而呈現一片空白。即便有另外做行動網頁,但由於網址不同,不利於SEO,同時因為要管理兩個網站,不但麻煩,成本也比較高。舊網站在手機上的文字圖片都太小,需要不斷手動縮放才能看得清楚,非常麻煩,且行動裝置上搜尋無法顯示網站,客戶看不到網站,或是無法顯示網站,導致大量流失客戶,建議盡快升級。

響應式網頁設計-社群帶動了行動流量

社群帶動了行動流量

因為Line 跟 FB 的流行,手機已經成為跟家人、同事連絡的必需品,社群成為主要的網路流量來源,而根據統計,大多數人使用社群都是在手機上,這些分享的內容流量自然也在手機上。

響應式網頁設計-提高搜尋引擎排名

提高搜尋引擎排名

Google 在2015年4月正式宣布,未支援響應式網頁設計的網站,在行動裝置上的搜尋將不會出現,這代表您的客戶找不到您。

響應式網頁設計-節省成本易於管理

節省成本&易於管理

以前為了手機,您要做兩個版本的網站,還得有 APP,現在,您只需要做一個響應式網站,就能解決一切問題,而且還只需要管理一個網站,輕鬆方便又節費。

響應式網頁設計-最佳的客戶體驗

最佳的客戶體驗

客戶無需在不同裝置上縮放網站,或是戴上老花眼鏡,就能輕鬆舒服的瀏覽網站,這是一個負商業網站的責任。有了更好的用戶體驗,可以大量減少跳出率,提高網站的轉化率,提高品牌認知度。

RWD響應式網頁設計
就像是流動的水

響應式網頁設計就像是流動的水,當他在電腦上,就呈現電腦版面,在手機上就呈現手機版面,無論是任何裝置,任何解析度,都能完美呈現。
響應式網頁設計就像是流動的水

電腦 + 平板 + 手機 網站一次搞定

RWD

響應式網頁設計可完美展現在各種設備

響應式網頁設計可完美展現在各種設備

手機、平板、電腦等設備都100%支援

手機、平板、筆電、桌上型電腦、電視、汽車、冰箱等越來越多樣的上網裝置,各種裝置螢幕解析度都各不相同,傳統的網頁設計只適合舊型的桌上型電腦或筆電,對新電腦來說做的太小,對手機平板來說做的太大,對使用者來說都是一種折磨,只有響應式網頁設計才能適應所有設備。