購物網站: 若在手機上、在電腦上，同樣在 Google 輸入「思考 書」，Google 搜尋結果給的都是一樣的建議，但我點進去看的頁面，卻有很大的不同
產品品牌網站: Google 搜尋「耳機」，在搜尋結果中，找到 BOSE 耳機的推薦，點進頁面後，在手機上與電腦上，是一致的視覺介面
- Responsive Website Design
- RWD (響應式網頁設計)可以自動適當顯示於各種不同裝置
- 根據不一樣的螢幕大小設計友善的閱讀介面
- 常用閱讀解析度: 電腦版寬度：
1024px以上 ，平板裝置寬度720px ~ 1024px之間 ，手機裝置寬度：320px ~ 720px之間 - 不同寬度時，RWD (響應式網頁設計)就會顯示不一樣的排列方式
- RWD 會根據裝置的畫面寬度去判斷要跑多寬的網站
- Adaptive Web Design
- AWD (自適應式網頁設計)跟 RWD (響應式網頁設計)存在目的一致，希望在桌機、平板、手機都能顯示友善畫面
- AWD (自適應式網頁設計)則不會隨著視窗「即時」放大放小，AWD 會有屬於自己的判斷裝置大小的程式，然後會以不同的 CSS 達成一樣的效果
- AWD 是判斷裝置是哪一種，是桌機就跑桌機的 CSS，是手機就跑手機的 CSS
- 只針對電腦、平板、手機三種尺寸來分別，最強調 Mobile-First 行動優先
- RWD (響應式網頁設計)在桌機、手機內容是完全一樣
- RWD 如果內容很多，手機跑起來會慢一點，因為都是同一套 CSS，桌機用的圖、文、效果會完整呈現在手機上，手機效能、頻寬沒有桌機好的時候，當然會比較吃力
- AWD 會針對手機內容做優化，減少不必要的大圖，提高手機版的速度
- AWD 的桌機、手機畫面是不同套 CSS 是分開維護，後端也有部分是分開維護
- 從網址來看兩者都是一樣的網址，RWD 跟 AWD 都沒有像以前分成不同網址，不同網址流量會分散難免會影響 SEO，AWD 跟 RWD 都是一樣的網址，不影響 SEO
- 購物網站比較適合 AWD，AWD 可以針對手機版做更有效的配置與使用者體驗(UX)
- AWD 相對更適合內容繁雜的購物網站
- RWD 非常適合簡單內容的企業網站
- 如果更重視手機版的使用者體驗 (UX)，那就建議用 AWD 製作
- RWD (響應式網頁設計)為了同時滿足各種設備的適應性，一定會犧牲很多畫面與功能
- AWD 因為跟桌機是分開的介面，AWD 可以針對手機使用者開發更為友善的模式，如果希望手機可以得到更棒的體驗，AWD 是優於 RWD 的
選擇AWD自適應式網站佳，因能客製化手機上的使用體驗。像是網路書店、購物商城
選擇RWD響應式方式佳，因維護起來最方便，也能讓視覺上有一致的體驗。像是品牌官網、小型的購物商城
- RWD (響應式網頁設計)在上線後的維護是比較容易的
- AWD (自適應式網頁設計)維護上較繁瑣
- 上線前的製作成本 AWD 略高於 RWD
- AWD 的開發時間是略多於 RWD 的
- AWD 維護要花 2 倍工，無法完全符合到各種瑩幕大小，所以在一定範圍內還是要有一點響應式的設計
- 2019 年 Google 就提出「行動版內容優先索引」的演算法，也就是說所有的版本都要以「行動版網站」的內容做優先索引
- 設計、內容、格式，例如：字太小、圖文間距過小、圖太大、網站太慢… 都會影響搜尋排序
- 就是「各網站版本的內容是否一致」
- RWD 就是三種版本的網站整合，有 RWD 就符合網站版本一致性
- SEO 排名因素就是 「網站結構」、「網站內容」、「外部連結」
- RWD 與 AWD 在設計上的差異是兩者使用的檔案模式差異，AWD 針對行動版網站給予更多的彈性與調教，所以在新的 Google的新規則(網站速度、使用者體驗)之下，AWD 應該會略勝於 RWD，但要注意桌機、手機內容要一致，不然會影響 SEO，最終 SEO 還是要重視網站內容，這是最大的排名因素
- 有數據說明當 2 秒內還無法打開網頁，會有 47% 的人心生不滿