你是否在決定網站應以響應式設計或自適應設計之間做出選擇時遇到困難？沒關係，我們了解你的問題，並將在此篇文章中引導你了解自適應網站和響應式網站的基礎知識。
文章綱要：
1. 什麼是自適應網站？
2. 自適應網站的好處與壞處
3. 自適應網站範例
4. 什麼是響應式網站？
5. 響應式網站的好處與壞處
6. 響應式網站範例
7. 比較自適應網站與響應式網站
1. 什麼是自適應網站？
讓我們從自適應網站設計開始。自適應網站設計一詞是在網頁設計師 Aaron Gustafson 所著的 《Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement》 一書中引入的詞彙。
自適應網站具有多種固定佈局大小，當網站確定任何設備上的可用空間時，它會為設備螢幕選擇最合適的佈局。因此，調整瀏覽器大小對網站的自適應佈局沒有影響。例如，當你在行動設備上打開瀏覽器時，網站將為該行動設備螢幕選擇最佳佈局。
一些老牌企業（如 Amazon 和 Apple ）都已將自適應佈局納入其網站設計中，並針對不同的行動設備進行網站優化效果。記住，自適應網站需要網頁設計師為不同的設備螢幕設計不同的佈局，而不是讓同一個設計佈局在不同的設備上自己重新排列。
自適應網站有六種最常見的螢幕排版設計：
- 320 像素
- 480 像素
- 760 像素
- 960 像素
- 1200 像素
- 1600 像素。
2. 自適應網站的好處與壞處
- 好處
加載速度更快，網頁設計師可以控制每個佈局，因為他們能夠為每個螢幕尺寸建立新的最佳設計，網頁設計人員也可以針對不同的螢幕尺寸添加或減少內容。
- 缺點
自適應網站上的多個佈局可能導致內容重複，從而影響網站在搜索引擎的排名，更改網站排版還需要設計師投入大量的時間和精力。
3. 自適應網站範例
- IKEA
圖片取自 IKEA
IKEA的行動網站採用針對行動設備螢幕優化的自適應設計。它簡化了選單和產品瀏覽，還突出了購物清單選項（在網站的桌面版本上不可見）。此設計面向在實體店購物時使用手機的客戶。
- Adidas
圖片取自 Adidas
Adidas 的自適應網站利用自適應佈局來模仿桌面網站，為行動設備用戶提供更流暢的體驗。它為客戶提供更輕的圖像和更簡單的線上購物流程。
- Turkish Airlines
圖片取自 Turkish Airlines
Turkish Airlines 允許他們的網站用戶在三種版本的自適應佈局之間進行選擇：桌面網站、行動網站和應用程式。該品牌的行動網站具有時尚的外觀且更簡單的網站功能，以適應較小的螢幕寬度。其網頁設計師著重顯示網站的搜索功能（例如線上辦理登機手續和航班狀態），以及為希望預訂航班的移動用戶提供的航班預訂功能。
4. 什麼是響應式網站？
那什麼是響應式網佔設計呢？這個術語是在 2011 年由網頁設計師和開發人員 Ethan Marcotte 編寫的《 Responsive Web Design 》一書中引入的。響應式網站的設計方式是透過調整設計元素的位置來響應瀏覽器寬度的變化。
具有響應式佈局的網站上的內容將自動根據可用的瀏覽器空間展示給用戶。與自適應網站相反，如果你在桌面上打開響應式網站，然後更改瀏覽器視窗大小，內容大小也將有所改變以針對瀏覽器視窗自行安排最佳呈現效果。
5. 響應式網站的好處與壞處
好處：
響應式網站僅使用單個 URL 來適應每個頁面的任何螢幕尺寸，其設計過程也只需要更少的時間。響應式設計允許網站在所有設備上呈現一致性，這是獲得良好用戶體驗的重要因素，這也使其更適合搜索引擎優化 (SEO)。
缺點：
響應式網站的加載速度較慢。在網站上線之前，大量的調整和審核對於開發過程至關重要，因為響應式網站需要能夠自我更改以適應任何螢幕。 由於設計元素四處移動，響應式網站上的圖像可能會變形。
6. 響應式網站範例
- Real Meal Grill
電腦版：
圖片取自Strikingly用戶網站
行動設備版：
圖片取自Strikingly用戶網站
- Dr Chai Tea
電腦版：
圖片取自Strikingly用戶網站
行動設備版：
圖片取自Strikingly用戶網站
- Grow Food Where People Live
電腦版：
圖片取自Strikingly用戶網站
行動設備版：
圖片取自Strikingly用戶網站
7. 比較自適應網站與響應式網站
- 開發困難度
自適應網站更易於開發，但需要設計師花費更多時間來打造不同的幾版網站設計。記住！為一個網站建立多個佈局比建立適合任何螢幕尺寸的單一佈局要容易得多。
- 靈活性
自適應網站的一個缺點是，它只能在適配其佈局的螢幕上運行。因此，如果用戶使用新發布的新螢幕寬度設備，你建立的自適應網站佈局可能就無法正確呈現，這意味著你將不得不編輯它們或建立一個新的。
- 加載速度
自適應網站需要在用戶打開網站時加載開發的每個佈局，而響應式網站只需要加載適合所有螢幕寬度的單個佈局。由於所有額外的佈局和資源，自適應網站將比響應式網站花費更多的時間來加載。然而，情況並非總是如此，你也需要考慮網站內容與大小。
透過 Strikingly 架設一個響應式網站
圖片取自Strikingly產品
你是否恰好在尋找一個網站架設平台來幫助你建立一個全新的響應式網站？如果是，那我建議你考慮 Strikingly ，該專業平台具有行動視圖功能，可讓你預覽網站在行動螢幕上的外觀，這允許你在繼續構建響應式頁面時根據需要更改內容。Strikingly 向所有用戶提供大量免費的高品質網站模板，即使你對寫程式和網站架設毫無經驗也可以獨立完成一個網站。你也可以點擊這裡查看更多能讓你的網站對行動設備用戶更友善的行動戰略。
圖片取自Strikingly產品
文章總結
這篇文章與你分享了響應式網站與自適應網站的定義以及它們之間的區別，按照上述內容，不難發現為你的網站採用響應式設計將更節省時間，精力與花費（尤其是當你有了 Strikingly 這種專業架站平台的幫助下）。其還具有幫助你最大化適應所有電子設備螢幕的功能，以確保你的網站完好地展示在所有訪客眼前。別再猶豫了！現在就加入 Strikingly 獲取一個專業的響應式網站吧！如果對內容有疑問，可以透過 support@strikingly.com 與我們聯絡。
