RWD 彙整 - 數位行銷大時代

RWD和AWD好難選?免驚,分析後再選擇讓你無痛SEO!

RWD和AWD到底該怎麼選?先聽完分析再選擇才能夠無痛SEO!

1. 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！

1-1. 評估現有的資源人力

1-2. 對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！

2. AWD 要怎麼做才能對 SEO 無痛?

該選擇 RWD 還是 AWD ? 先看看自己的需求吧！

現今 RWD 正夯，但並不代表所有的網頁都適用於 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示：

以上分析建議仔細看過。以下再作補充說明：

評估現有的資源人力

只需要寫一套 CSS 的 RWD 所耗的時間與成本絕對比 AWD 還快又省，適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX，但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式，且如果想要做 SEO 的話，也是需要前端工程師把多套 CSS 串在同一個 URL 的。

對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！

假使有足夠的預算，而且希望使用者不管使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下，那麼就選擇 AWD 吧！往後在網頁維護上，前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改，且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有「牽一髮動全身」的隱憂。若硬要使用 RWD 也無非不可行，但是若 CSS 樣式寫得不夠嚴謹的話，則恐怕不同的裝置會寫到同一種 style，這時就需要花更多時間來修復，反而會浪費更多成本。

AWD 要怎麼做才能對 SEO 無痛?

很多人都說 AWD 對 SEO 不利。那是因為大多數的人會省去將「行動版」與「桌機板」串在同一個網址的流程，索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址，所以流量自然會分流，對 SEO 當然有負面影響！

觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ，會發現行動版的網址前面多會有個「m.」的開頭，就是這樣的情況。

但我們先回到原點，弄懂 AWD 的基本原理，其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於一定要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下，判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟，才可以集中流量在同一個網址中，對 SEO 或品牌辨識度都比較好，就不會有前面提到「分流」的問題，也不會影響到 SEO的成效囉。

所以不要再說 AWD 對 SEO 不利了！不利 SEO 的是把「網站做成兩個獨立的桌機版跟行動版兩個網站，再進行轉址」的作法。你所需要的，是要把行動版與桌機板使用同一個 URL就可以了。

推薦文章:
元宇宙也有翻譯蒟蒻了！Meta推全球語言都可翻譯的人工智慧

Google提出Android隱私沙盒，標榜保護用戶資料安全

所有的新創業者都需要SEO 的7 個理由！

SEO是什麼？跟AdWords差在哪?如何自學？

2022最佳職場出爐!臉書自改名Meta後爭議多排名還下滑!

行車安全就交給人工智慧!Brembo開發AI幫你踩煞車!(上)

澳洲醫生開發AI自殺艙,是否”該死”由人工智慧定義!(上)

網站想要經營好,首先必先了解RWD和AWD差異!

如果可以先了解RWD和AWD的差別,對於經營網站肯定有很大的幫助哦!

1. RWD 和 AWD 的差異與優缺點

2. RWD、AWD 的異同之處

2-1. 共同之處

2-2. 不同之處

2-2-1. RWD

2-2-2. AWD

3. RWD 的優點與缺點

3-1. 優點

3-2. 缺點

4. AWD 的優點與缺點

4-1. 優點

4-2. 缺點

5. 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！

AWD 跟 RWD 的目的其實都算是一致的，主要都是希望能夠針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。

在規劃網站時，相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及該如何規劃及選擇。

RWD 和 AWD 的差異與優缺點

在網頁上，RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫；而 AWD 則是「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是因為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法，讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能夠更舒服的瀏覽網頁。

RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套 CSS，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。

RWD 與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下：

RWD 會把所有裝置的樣式都寫在同一套 CSS 中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用到 CSS 中的哪一個樣式。

AWD 是針對各種裝置撰寫對應的 CSS，因此就會針對不同的裝置，而有多套的 CSS 樣式碼：例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式，來判斷使用者是使用哪種裝置開啟網頁，再自動匯入相應的 CSS 檔案：如程式判斷出某使用者是使用桌機瀏覽網頁的話，就會自動匯入桌機的 CSS 樣式檔案；如果是使用手機開網頁，就匯入手機的 CSS 樣式檔。

RWD、AWD 的異同之處

RWD 與 AWD 只是方式不同罷了，沒有所謂的哪個比較好，優缺點比較如下：

共同之處

RWD 與 AWD 都會判斷裝置，並且依照裝置顯示出對應的樣式。

不同之處

RWD

無論行動裝置或是桌機，都使用同一套 CSS。
當使用者打開了網頁，就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。

AWD

針對各種裝置撰寫對應的 CSS，因此會有多套 CSS，一般來說會有兩套 CSS：桌機專屬的一套 CSS，手機專屬的一套 CSS。
當使用者打開了網頁，程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。

RWD 的優點與缺點

優點

1. 節省網站製作成本
因為無論是桌機、手機的樣式，全都只塞在同一套 CSS 檔案，所以開發成本較低，適合內容比較單純的網站、新創公司或是個人工作室使用。

2. SEO 更方便
因為同一個網頁、URL 也只有一個，所以更方便 SEO。

缺點

1. 開發容易、維護耗時
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面，所以在網頁維護上較不容易，常常需要大海撈針般找到對應的程式碼。如果遇到需要修改的狀況，很可能修改某個樣式碼，卻也影響到了其他不需修改的樣式碼，而導致網站「跑山」的窘境。

2. 行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼，所以較無法針對行動裝置做圖片顯示的最佳化，加上 RWD 網頁的機制是將資訊先下載後，再根據裝置大小重新排列，所以會較慢。

AWD 的優點與缺點

優點

1. 網頁維護更分明，不怕樣式被吃到
雖然成本較 RWD 高，但是由於桌機與手機的 CSS 分別在不同的檔案，因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼，不需要大海撈針。而且也不會因為更改一個 CSS，而影響到不該改變的區塊，或style也改變的後顧之憂。

2. 有利於 UI/UX
假設對畫面顯示的要求較高，希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時，就適用 AWD，可針對不同的瀏覽介面而做出對應的 UI/UX，讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。

3. 行動裝置網頁載入更快
可針對行動裝置而做優化，將原本的大圖縮減成最合適的尺寸，減少不必要的大圖，就能加快行動裝置的網頁 loading。

缺點

1. 維護較容易，但開發成本高
一開始需要針對不同的裝置而寫出好幾套 CSS，耗時耗力，且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求，還需另請工程師將同一網頁的多套 CSS 串在同一個網址內，否則流量會自動被手機與桌機瓜分。

該選擇 RWD 還是 AWD ? 先看看自己的需求吧！

當下 RWD 正夯，只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省，適合小型網頁、新創產業或是各方面資源有限的狀況下。

即便如此，也並非所有的網頁都適用 RWD。若是對網頁設計畫面要求較嚴謹的狀況下，AWD 網頁在後續的維護上讓前端工程師、UI 設計師較能找到對應的 CSS 檔來修改，沒有如 RWD 般所有的樣式都塞在同一套 CSS 「牽一髮動全身」的隱憂。

決策者必須先檢視網站的規模、內容、專案的需求以及現有的人力，再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，本篇文章「網頁一定得選擇 RWD 嗎？AWD 要怎麼做才能無痛SEO？」有進一步的分析與講解。

推薦文章:
元宇宙也有翻譯蒟蒻了！Meta推全球語言都可翻譯的人工智慧

Google提出Android隱私沙盒，標榜保護用戶資料安全

所有的新創業者都需要SEO 的7 個理由！

SEO是什麼？跟AdWords差在哪?如何自學？

LINE服務在地化,推出2項人工智慧服務,網友直呼好方便!

UI的圓角設計現正夯!卡通常用連賈伯斯愛不釋手!(上)

本年度最佳職場排行出爐!臉書改名Meta爭議多排名慘遭滑鐵盧!

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(下)

本文為下篇，上篇請看此連結

5. 按鈕在版面上的順序位置

循序漸進的按鈕順序就像是使用者和系統之間的對話，在 UI /UX設計的過程中，不斷反問自己或換位思考，使用者點選按鈕的步驟，會希望達成什麼目的，並進行相對應的設計。譬如說：上一頁/下一頁的按鈕，左右方向的箭頭按鈕是常見呈現方式。

6. 避免過多的按鈕分散注意力

為了能夠增進 UX 使用者體驗，會在同個頁面上增加各式各樣的按鈕，一不小心數量會比預期來得多，便會產生分流降低點擊率。譬如說：如果主要目的是想讓使用者點選頁面下載按鈕，使用者可能會因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開，以確保使用者點選到目標按鈕。

7. 加入音效或動畫產生互動

藉由人的五官體驗，在按鈕的設計上傳達聲音與動態效果就能更加深使用者的體驗，試著營造出如同按鈕圖示呈現的舒適情境，當使用者點選時，產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時，通常會認為系統沒有接收到指令，而不斷的重複點選，便會導致多次不必要的操作。

方便點選的按鈕還有許多值得探討的 UI 設計技巧，以上所述的7個基本要點常用也可以說是最容易忽略的一部分。優化按鈕設計的各種細節，探索各個細節對目標的點選，更能夠達成自己所理想的轉換成效哦。

推薦文章:
隱私是基本人權！蘋果新功能「App 追蹤透明度」

Google 加強隱私，讓你快速刪除15 分鐘內搜尋紀錄

Google 為保護隱私，棄Cookie 卻改用人工智慧？

Facebook 開源Python 語言的安全與隱私工具Pysa

線上會議不卡卡,人工智慧讓你給你超優質體驗!(上)

影片也要SEO?!15種方法讓你在GOOGLE前幾名!(上)

經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(上)

按鈕在網站上出現的頻率是相當高的，如同實體店面的動線，協助顧客快速找到目標。隨著線上的商業發展蓬勃，網站設計上開始重視使用者觀看版面的體驗（UX），如何藉由按鈕的佈局轉換為交易，並進一步提升營收將是本次的主題。

雖然現今的網站美輪美奐，還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design，簡稱 RWD）的普遍，改善同時在手機、iPad與電腦不同裝置顯示問題，在版面中搭建使用者與系統之間的互動操作流程，仍不能缺少按鈕作為基礎視覺元素。

按鈕的設計不只是簡單的一個圖示，任何讓我們感到舒適方便的操作，都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理，加入外觀美學、色彩學等知識創建而成，分成以下7個基本要點說明：

1. 互動式的按鈕設計

建立按鈕需要使用正確的樣式，依照按鈕產生的狀態設計不同外觀，包含：大小、形狀、顏色、陰影等因素組成，再搭配上合適的字體與間距，藉由簡單的觸控、按下去即可達到目的，讓人享受到即時的強烈滿足感。

線上虛擬按鈕的視覺性，來自接觸實體按鈕的體驗和認知根深蒂固，UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。

以下是大多數用戶熟悉的幾個按鈕示例：

1. 帶有方形邊框的按鈕

2. 帶圓角的按鈕

3. 帶陰影的按鈕

4. 幽靈按鈕

除了容易點選的按鈕樣式，保持與周遭文字適當的留白避免視覺干擾。

2. 方便搜尋版面上的按鈕位置

使用者閱讀內容的同時，會搜尋版面可點選的功能按鈕，比如：下一頁、產品介紹等，如果使用者在視覺上尋找的時間愈久，若找不到按鈕，便不會知道它的的存在，愈容易感到網站不好使用。

為了和使用者不要玩追逐按鈕的遊戲，因此使用一致性的排版設計，便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局，足夠的留白與簡潔使版面不會太擁擠，即使不是強烈鮮明的按鈕，依然隨著閱讀動線吸引使用者輕鬆的點選。

3. 指令清楚的按鈕標示與說明

帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。

比如下列案例

不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事？”

與其按鈕標示“OK”，不如使用“Remove”，清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作，可以使用強烈的顏色來提醒。

4. 符合使用者習慣的尺寸大小

按鈕圖示讓 UI 觸控尺寸大於可視尺寸，確保互動可靠性，按下按鈕應該是一個簡單的任務，如果使用者無法成功地輕點按鈕，或在操作過程中感到無所適從，這會帶來負面的體驗，並且浪費時間。

按鈕的大小反應著在屏幕上優先順序，愈是優先的重點便會是愈大的按鈕表示，或是使用更鮮明的對比色來凸顯，藉此增加使用者的注意力。而在操作 UI 使用者介面過程中，按鈕需考慮對使用者觸控的友好度，按鈕太小，往往導致會有輸入錯誤的情況發生。

麻省理工學院觸控實驗室的研究發現，指尖的平均值在 10-14 mm之間，指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。

下篇請看此連結

推薦文章:
隱私是基本人權！蘋果新功能「App 追蹤透明度」

Google 加強隱私，讓你快速刪除15 分鐘內搜尋紀錄

Google 為保護隱私，棄Cookie 卻改用人工智慧？

Facebook 開源Python 語言的安全與隱私工具Pysa

會say no的人工智慧?!美打造辯論談判高手AI!

憂鬱症掰掰,人工智慧快速判別及早治療!

經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!

工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!

想轉行當前端工程師其實沒那麼難?遵照以下步驟以下步驟照著做,讓你夢想不再是空想!

今天要跟大家分享的文章是2019年教你正確的網頁前端學習路線! 很多人想要轉職成為網頁前端工程師，但是尚未找到適合自己的學習方法。為此達內教育前端工程師課程的老師就和大家分享了這篇正確的網頁前端學習路線，一起來一看究竟!

第一步：把握HTML/CSS

這是前端工程師要會的基本的網站的構建元素，是所有網頁設計/開發者都必須要學會的語言。並且HTML/CSS也很簡單易學，沒得挑！

第二步：學會使用基本工具

文本編輯器：例如 Sublime Text、Dreamweaver、Visual Studio Code 等
圖像編輯器：Photoshop、Illustrator 等
FTP/SSH 工具：Filezilla、PuTTY 等
網頁瀏覽器：Chrome、Firefox 等
雲端硬碟：Dropbox、Google Drive 等

第三步：進修 JavaScript

JavaScript (現階段先忽略Node.js 和任何框架)
理解數據類型：String、Number、Arrays、Objects等
JSON(JavaScript Object Notation)
jQuery框架

第四步：搭建基本網站

使用如 Hostgator、Hostmonster 等虛擬主機建置網站
學會操作虛擬主機的 cPanel (Email ,FTP Setup) 用 Ftp 上傳網頁資料、建置 url 域名等等。

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師或前端工程師

現階段的你可以：
1. 建立簡單的網站
2. 搭建網頁應用的界面
3. 可以把一張 PSD 檔轉化為基於 HTML/CSS 的靜態網頁
4. 有受雇成為網頁設計師的能力、或者選擇成為接網頁設計案子的 soho 族 (尚需與前端工程師配合，無法獨立架站)

接下來你還需要進修的有：
1. HTML/CSS框架：如 Bootstrap
2. 熟悉網頁後端的程式語言：PHP (建議初學者用)、Ruby 等
3. JavaScript 框架：如 React、Angular 等
4. 數據庫：如 MySQL

第六步：HTML/CSS框架

Bootstrap (強烈推薦)、Zurb、MUI 等

第七步：網頁後端程式語言 (專注再一個就好)

PHP (不是最好的語言,可是目前用於後段較普及且適合初學者學習)
Node.js (一款新型、強大的後台語言)
Ruby on Rails (最好的框架語言，但是對程式語言初學者較難入手)
Python (簡單易學，但是尚未如 PHP 般普及，不過隨著 AI 的爆紅 Python 也越來越普及。

第八步：數據庫(專注於一個!)

關係型數據庫：如 MySQL
非機構化數據庫：如 MongoDB 和 CouchDB
建議選擇以下其中一個組合:
1. PHP 搭配 MySQL
2. Node.js 搭配 Mongolian

第九步：有必要時，精進一些進階的前端技能：

SSH & Basic Command Line
CSS 預編譯器：如 Sass、Less、Stylus
APIS / REST 服務
HTTPS / SSL

第十步：應用

VPS 虛擬專用伺服器
應用雲端平台：如 AWS、Digital Ocean、
Linux 呼籲行
維護和進級

第十一步：恭喜你，成為一名全端工程師/後端工程師/網頁開發者了!

可以架設網站/網頁開發
能建置後端 API
能連接 Server
可以處理數據庫
你可以選擇受雇為全端工程師/後端工程師，或是成為可以獨當一面的 soho 族、創業等。

第十二步 (選修技能)：精進程式語言

JavaScript 框架: React、Angular 2、Vue.js、Express (後端)
PHP 框架: Laravel、Codeigniter、Symfony
Ruby on rails
MVC框架：路由、數據庫映射、幫助程序、數據綁定、模板和 UI

第十三步 (選修技能)：基於 PHP 的 CMS 網站

WordPress (最多人用的 CMS 網站)、Joomla、Drupal
以上 CMS 網站架站快速、有豐富的 plug-in 模組，不過功能有限，適合需要快速架站的場合。

第十四步 (選修技能)：行動 App 開發

其實你不需要進修 Java 和 C 語言，只要把握 JavaScript!我們可以使用 React Native、 Ionic、 Cordova 等框架來構建 App。

以上就是前端工程師課程老師為大家分享的前端學習路線的文章，希望本篇文章能夠對想要學習網頁前端技術的初學者們有所幫助。想要了解更多Web學習方法記得關注達內教育評價。最後祝大家都能夠順利學成，成為一名優秀的網頁前端工程師。

前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

SEO無痛該怎麼做?資深前端工程師教你對的方法!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

厭世代正風行?來上Java課程可以幫你扭轉困境!

Python課程搭配產業知識,科技不再冰冷無趣

沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

前端工程師暑假先修班(三)-行動優先設計考量

連前端工程師也要順應手機世代!設計網頁必須考量”行動裝置優先”!

行動載具特性

圖上方為傳統以桌機為主設計模式；下方為「行動裝置優先 (Mobile First)」模式

在這個人手一機的時代，對前端工程師而言，手機、平板等行動設備在操作上與電腦差異很大，因為電腦以滑鼠操作為主、行動設備則是以觸控螢幕為主。因此，兩者的網頁設計開發在互動設計上也有所不同。

行動載具的基本特徵有：可單指或多指操控的多點觸控、多種手勢（如搖一搖、滑動等）以及文字虛擬鍵盤。

除了上述與電腦差異很大的特徵外，在視覺呈現上也與電腦差異也很大，前端工程師與設計師需注意的事項如下：

按鈕大小：
電腦因為是用滑鼠操控，所以無論按鈕多小，滑鼠一樣點的到。但是行動裝置是以觸控為主，按鈕太小會增加點擊難度。因此蘋果電腦公司建議 iOS 開發者，任何需要被觸控的 UI (使用者介面) 元件，都不能小於 44*44px。

超連結大小：
除了上述的按鈕之外，也會有文字的超連結內容。同理，也不能讓帶有超連結的文字太小，以利於手指點擊。

UI 設計：
UI 設計必須考量到行動載具的畫面尺寸，因此像按鈕等需要被觸控的 UI (使用者介面) 元件，都需要在畫面中容易被點擊的地方。

點擊效果：
在按鈕效果的開發上，有時滑鼠除了點擊與放開的指令外，還會有滑來滑去的特效。但是行動版裝置是使用手指直接觸控的，所以就不需要此種特效強調。

互動效果：
電腦與行動裝置的運算效能畢竟不一樣。所以有一些在電腦版網頁運行的很順暢的特效 (如 Slide 幻燈片、Carousel 等) 在行動裝置上未必能流暢顯示。所以在設計　RWD 網頁時，要考量到不同設備的效能。

行動裝置優先 (Mobile First) 概念

行動裝置優先 (Mobile First) 是由知名的設計師與 UI規劃師 Luke Wroblewski 提出的，他曾當過美國 yahoo 架構設計負責人，他在2010年的時候進行了一次簡報，標題就是 Mobile First（原始簡報與影片)，是指設計網站時，應該以行動裝置的介面、互動、顯示等為主要考量，其他的裝置次之，有別於過去設計網站時「以桌上型電腦為主，再將電腦網站上的內容移植到行動裝置上」的模式。

現在越來越多的人使用行動裝置上網，根據美國最大電信業者 AT&T 的數據，手機流量在 3 年內成長了 50 倍，目前行動裝置上網的使用率仍在激增，而且還有更多的功能持續被開發出來。

相較於傳統的電腦，行動裝置的使用時較不受到時間空間限制，無論是在捷運、廁所等都可使用，人們也花了不少零碎時間使用手機上網，因此瀏覽網頁的頻率跟電腦比起來有過之無不及，所以 Google、Facebook、Adobe 等大公司都開始以「行動優先」的概念來設計自己的產品。

那「行動優先」要如何套用在網頁設計上？一開始會先針對行動裝置的小畫面來設計版面、填入最重要的內容，然後再以這些基本內容都存在的狀況下，針對較大的螢幕裝置 (如平板、進而電腦、電視螢幕等) 漸進式的擴展其佈局。這樣一來，網頁在行動裝置呈現的介面會非常好瀏覽且美觀，該有的功能、內容都有，並且由小畫面擴大至大畫面，內容更大、可擺放的元素就越多、限制也越少 (參見「漸進增強（Progressive Enhancement）」)。但是如果是從大畫面開始設計，當要轉換成小畫面時，其內容的擺放就會越來越困難，常常需要透過刪減內容，才能「塞」入較小的版面當中。這樣一來，有可能行動裝置上出現的是精簡過「簡陋卻可用 (poor but passable)」的內容，而無法給使用者完整的內容 (參見「優雅降級（Graceful Degradation）」)。

若要建立良好的行動裝置使用者體驗 (UX)，應考慮以下幾點：

使用者使用行動載具的習慣、方式及思考模式
提供明確精要的內容，比完整的導覽功能更重要
提供清楚且好觸控的導覽選單
簡潔明確的頁面內容
符合行動載具操作特性

現在大多數的 RWD 響應式網站，都是採用行動裝置優先 (Mobile First) 概念來設計，範例如下：

Youtube網站

就算是在手機上，也可以很方便的點閱影片、撥放、暫停，甚至對影片作評論、按讚！

Airbnb網站

選單的按鈕設計的大小適中，使用者用手機就可以輕易地透過選單找到目標住處，並且藉由滑動的行為瀏覽屋況，並按下預訂按鍵！

本篇為「前端工程師必懂RWD概念」三部曲第三篇，全系列目錄如下:

(目錄)

前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

頂尖前端工程師必備技能之一-掌握RWD基礎概念

中國IT教育領導品牌　達內教育集團第一家海外授權中心

Python課程相關應用—-AI門診你聽過嗎? 以後看病確診只花2秒鐘!!

AI人工智慧產業日新月異,兩年前最新的機器人,如今變成老古董?

人工智慧真的一直為貓奴帶來娛樂!快看這些被合成的貓長什麼樣子!

前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

前端工程師在設計RWD網頁有兩種思維模式可以套用,以下針對這兩部分進行介紹!

標準的RWD網站範例

一般而言，現在的前端工程師與網頁設計師在開發網站時都選擇 RWD 網站，在規劃其 Media Query 的尺寸斷點時，有兩種布局斷點的依據：「根據設備」以及「以內容為主」，介紹如下：

1.根據時下的主流設備來佈局斷點 (設備優先)

透過時下主流的設備 (如當代最熱門的手機、平板或電腦螢幕等) 來確定布局的斷點，而在網頁設計中有多套樣式，再應用UI分別對應到各種設備上，如此就可準確定位斷點。這種套用現成的設備尺寸隨然方便，又能精準對應到時下最普及的設備，但是隨著設備不斷汰舊換新，未來總會有無法合適對應到的設備。

「設備優先」示意圖（圖片來源：http://static.codeceo.com）

2.根據網頁內容作為佈局斷點的標準 (內容優先)

這種方式不是以設備為主；而是依據網頁內容的布局、段落等來下斷點，是真正符合 RWD 響應式網站設計的初衷的方式。此種方式可讓網頁涵蓋所有設備、且閱讀容易，但是斷點會依據設備的不同而落在不同的地方，這樣就沒有標準、精準的設計模式。

「內容優先」示意圖（圖片來源：http://static.codeceo.com）

儘管如此，現今大多前端工程師與網頁設計師會更偏向「內容優先」的方式。因為電腦、行動裝置等設備不斷推陳出新，若採用此種方式，雖然無法精準的對應到特定的設備，但是卻可廣泛涵蓋現在、未來全部的設備。且無論瀏覽媒介如何改變，重點依然是網頁內容的本身。

在內容優先的策略中，前端工程師與設計師要讓網站盡可能兼容所有設備：因為我們不知道用戶會用什麼樣的設備來訪問網站，因此，我們必須盡可能地把所有狀況都考慮進來；所有的佈局、元件、區塊等都能兼容不同類型的設備和平台。有「優雅降級（Graceful Degradation）」以及「漸進增強（Progressive Enhancement）」兩種思維模式，可以套在「內容優先」為主的 RWD 響應式網站設計的過程：

「優雅降級」還是「漸進增強」?

圖上方為「優雅降級（Graceful Degradation）」的網頁設計模式；下方為「漸進增強（Progressive Enhancement）」模式

1. 優雅降級（Graceful Degradation）

一開始就針對「功能最完整」的平台來設計、開發網站，完成所有的功能和體驗後，再針對無法支援所有功能的平台或環境本來修改、刪減功能或是其他的解決方案，以確保網站能在最新、最完整的平台上完美呈現，擁有「最好的使用者體驗」；而在較舊的或是功能限制較多的的平台上，仍然可使用最重要的功能，整體介面「簡陋卻可用 (poor but passable)」，而不是無法使用。

2. 漸進增強（Progressive Enhancement）

這個方式與「優雅降級（Graceful Degradation）」的方式相反，是先針對最不完整或是限制最多的平台上創建最重要的基本內容，用最精簡的方式呈現；然後以這些基本內容都存在的狀況下，開始慢慢擴展其佈局，隨著平台的限制越來越少，內容的完整度也越來越高。這也是「行動裝置優先 (Mobile First) 」的設計方式。我們在下一篇會提到什麼是「行動裝置優先 (Mobile First) 」。

本篇為「前端工程師必懂RWD概念」三部曲第二篇，全系列目錄如下:

(目錄)

CSS中空格逗號區別為何?跟著前端工程師做一次就知道!

SEO無痛該怎麼做?資深前端工程師教你對的方法!

中國IT教育領導品牌　達內教育集團第一家海外授權中心

達內教育評價-故事背後事實的真相甚麼是這樣?!

AI”改編”我最愛的哈利波特!Python課程根本就是萬能的!

“之前提到的SEO優化的結構化資料,這次直接教你如何快速上手! “

前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

想趁暑假結束前成為一名前端工程師嗎?一起來認真來了解RWD網頁跟傳統網頁的差別吧!

在智慧型手機等行動上網的裝置普及以前，早期的前端工程師與網頁設計師在做網站時都比較輕鬆。因為網站只需適應一種規格，在製作程序上對比今日的 RWD 網站顯得比較單純。製作程序差異如下：

從上圖可以得知，前端工程師在開發 RWD 網站時，假設要符合不同裝置 (就是電腦、手機與平板等) 的網頁需求，就需要開發出 4-5 種版面，無論是在設計、或是撰寫程式上都比較費時且難以銜接。因此在流程的前半段，必須要規劃 Media Query 的尺寸斷點再去進行網頁設計、應用UI程式撰寫，再根據不同的尺寸斷點進行反覆測試、調整與修正。

在著手各種載具版面的網頁設計前，應先根據與客戶討論後的結果，粗略進行各種載具的網頁框架規劃 (Wireframe)。Wireframe 是低保真度的設計原型，是在除去所有視覺設計細節 (如色彩、字型等) 之下，進行頁面架構、功能與內容的規劃，藉此更能集中地檢視整個介面流程和架構，方便與客戶溝通想法。

(相關文章：與前端溝通更順利！從了解整體網站的規劃流程開始)。

網頁框架規劃 (Wireframe) 是運用文字線條、方塊，把每個區塊所要呈現的內容表現出來。盡可能減少設計元素，藉以突顯網頁所呈現的介面、動線流程與階層，確認使用者體驗如何。有時為了在視覺上清除區隔不同區域，可以使用灰階色塊作補助。下圖為個人網站的 Wireframe 網頁框架範例。

本篇為「前端工程師必懂RWD概念」三部曲第一篇，全系列目錄如下:

(目錄)

SEO無痛該怎麼做?資深前端工程師教你對的方法!

還在猶豫怎麼用Class選擇器?前端工程師分析給你聽!

達內教育海外合作企業

達內教育評價-故事背後事實的真相甚麼是這樣?!

網路行銷課程幫你解析3D虛擬人偶APP—-Zepeto爆紅原因!!

想跟上主流進修Python課程,現在是絕佳時刻!

頂尖前端工程師必備技能之八-媒體類型區別

身為前端工程師你,夠了解Media Media Query嗎?最終章要教你最後一個部分-媒體類型~

【前文提要】RWD 網頁設計必備語法：Media Query
前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。

參考文章：如何在RWD網頁中套用Media Query語法

而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。and/not/only 判斷條件於本篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。本篇就針對媒體類型 (Media Type) 說明如下：

一般而言，前端工程師在網頁設計時，經常會運用 Media Query ，其中要先指定媒體類型 (media type) 。目前常用的有多種分別介紹如下：

媒體類型(media type)	簡介
all	所有裝置
screen	螢幕裝置 ( 除了 print 和 speech 之外的設備 ) 大小
print	印表機裝置 (包含使用列印預覽所產生的畫面，如列印為 pdf)
projection	投影機裝置
speech	朗讀裝置 (針對可「讀出」網頁的設備)

前端工程師的基礎RWD教學系列文章目錄

本篇為「前端工程師的基礎RWD教學」系列文章第四篇，全系列文章如下:

想當頂尖前端工程師?以下必備技能可不能少!

成為專業前端工程師前,先搞定CSS背景位置設定!

達內課程先就業再付款- 中時電子報

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

URL網址怎麼設定攸關SEO優化表現

OpenAI創辦人馬克思要離開自己的人工智慧團隊!發生什麼事?

頂尖前端工程師必備技能之七-判斷條件使用技巧教學

前端工程師在設計RWD網頁時,常會用到Media Query,沒想到這個語法還包含三部分呢~一起來認識一下吧!

【前文提要】RWD 網頁設計必備語法：Media Query

前端工程師在製作 RWD 響應式網頁時，一定會用到的 CSS 語法就是 Media Query。簡單來說，我們可以把 Media 視為 CSS 的擴充元件（這樣會比較好理解）。而 Media 後面多加一個「Query」代表網頁會先 Query (詢問) 其「擴充元件 (Media)」的類型 (就是所謂的 Media Type)，再針對這些類型 (Media Type) 定義其樣式 (Media Features，中文譯作「媒體樣式」或是「媒體特徵」)。

參考文章：如何在RWD網頁中套用Media Query語法

而 Media Query 的語法包含了三個部分：媒體類型 (Media Type)、and/not/only 判斷條件與媒體特徵 (Media Features)。「媒體類型 (Media Type)」已在本系列的前篇文章做說明，而媒體特徵 (Media Feature) 的各式屬性也於此篇（頁面尺寸與顯示品質的屬性）與此篇（「顏色類」和「互動類」的屬性）列出。本篇就針對「and/not/only 等 Media Query 的判斷條件做說明如下：

Media Query 語法可加入：and、or、not 和 only，做相關條件的判斷。分別介紹如下：

Media Query 之 and 使用方法

1. 當單一條件成立時

範例：前端工程師建議如果螢幕寬度超過 600px 以上時，就套用此份 css 設定

@media screen and (min-width:600px) { 
  CSS設定
}

2. 同時符合兩種條件

範例：如果螢幕寬度介於 600 px ~ 800 px 時，就套用此份 css 設定

@media screen and (min-width:600px) and (max-width:800px) { 
  CSS設定
}

3. 兩者條件擇一即可 (與「or」連用)

對網頁設計而言，假設兩種條件當中，符合其中一種，即可套用此份 css 設定。這種兩者條件擇一即可的「or」條件式，需配合「,」使用：

範例：如果螢幕裝置寬度小於 700px「或」是直立的話，即可套用此份 css 設定：

@media screen and (max-width: 700px), (orientation: portrait) { 
  CSS設定
}

Media Query 之 not 使用方法

not 是用來排除某些設備的樣式，假設你希望這個樣式只在裝置 A 有作用，裝置 B 完全沒用，就可以使用 not。

範例：「除了」螢幕裝置寬度小於 300px 「之外」，橫向印刷時都套用此份 css 設定：

@media not screen and (max-width:300px), print and (orientation: landscape){
  CSS設定
}

Media Query 之 only 使用方法

only 可以指定「只有」某種裝置才能套用某些樣式，本身會寫在 media query 的字首。但目前因為使用舊版裝置的人越來越少，所以使用 only 的寫法越來越少見，反而直接採用 and 或 or 的寫法就能夠符合大多數的狀況。

下面的範例代表只有在「彩色螢幕」時才會套用 sample.css：

<link rel="stylesheet" media="only screen and (color)" href="sample.css" />

其實以上的範例也可以換成用「and」的寫法如下：

<link rel="stylesheet" media="screen and (color)" href="sample.css" />

Media Query 之 or 使用方法

or（或）就是在「多種條件當中只要符合一項就成立」的場合使用，在語法中，or 的寫法不直接寫「or」而是以逗號「,」呈現。

範例：螢幕裝置若為直立「或」是寬度小於 380px 時，字體會變成藍色的 60px。

 p{
      font-size:30px;
  }
  @media (orientation: portrait), (max-width:380px){
      p{
          font-size:60px;
          color:blue;
      }
  }

本篇為「前端工程師的基礎RWD教學」系列文章第五篇，全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

RWD和AWD到底該怎麼選?先聽完分析再選擇才能夠無痛SEO!

如果可以先了解RWD和AWD的差別,對於經營網站肯定有很大的幫助哦!

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(下)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(上)

想轉行當前端工程師其實沒那麼難?遵照以下步驟以下步驟照著做,讓你夢想不再是空想!

第一步：把握HTML/CSS

第二步：學會使用基本工具

第三步：進修 JavaScript

第四步：搭建基本網站

第五步:恭喜你! 你有網頁設計師的技能了!——但還不足以被稱為網頁開發工程師或前端工程師

第六步：HTML/CSS框架

第七步：網頁後端程式語言 (專注再一個就好)

第八步：數據庫(專注於一個!)

第九步：有必要時，精進一些進階的前端技能：

第十步：應用

第十一步：恭喜你，成為一名全端工程師/後端工程師/網頁開發者了!

第十二步 (選修技能)：精進程式語言

第十三步 (選修技能)：基於 PHP 的 CMS 網站

第十四步 (選修技能)：行動 App 開發

推薦文章: 如何成為前端工程師?首先你要先具備…

連前端工程師也要順應手機世代!設計網頁必須考量”行動裝置優先”!

行動載具特性

行動裝置優先 (Mobile First) 概念

Youtube網站

Airbnb網站

推薦文章: 前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

前端工程師在設計RWD網頁有兩種思維模式可以套用,以下針對這兩部分進行介紹!

1.根據時下的主流設備來佈局斷點 (設備優先)

2.根據網頁內容作為佈局斷點的標準 (內容優先)

「優雅降級」還是「漸進增強」?

1. 優雅降級（Graceful Degradation）

2. 漸進增強（Progressive Enhancement）

推薦文章: 前端工程師暑假先修班(三)-行動優先設計考量

想趁暑假結束前成為一名前端工程師嗎?一起來認真來了解RWD網頁跟傳統網頁的差別吧!

推薦文章: 前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

身為前端工程師你,夠了解Media Media Query嗎?最終章要教你最後一個部分-媒體類型~

推薦文章: 頂尖前端工程師必備技能之一-掌握RWD基礎概念

前端工程師在設計RWD網頁時,常會用到Media Query,沒想到這個語法還包含三部分呢~一起來認識一下吧!

Media Query 之 and 使用方法

1. 當單一條件成立時

2. 同時符合兩種條件

3. 兩者條件擇一即可 (與「or」連用)

Media Query 之 not 使用方法

Media Query 之 only 使用方法

Media Query 之 or 使用方法

推薦文章: 頂尖前端工程師必備技能之八-媒體類型區別

推薦文章:
如何成為前端工程師?首先你要先具備…

推薦文章:
前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性

推薦文章:
前端工程師暑假先修班(三)-行動優先設計考量

推薦文章:
前端工程師暑假先修班(二)-“優雅降級”與”漸進增強”使用時機

推薦文章:
頂尖前端工程師必備技能之一-掌握RWD基礎概念

推薦文章:
頂尖前端工程師必備技能之八-媒體類型區別