手機優先設計是什麼？跟響應式有什麼不同
兩個容易混淆的概念
響應式設計（RWD）講的是結果：同一份網頁能依螢幕寬度自動調整版面。手機優先（Mobile First）講的是順序：設計與開發時先從小螢幕開始，再往大螢幕延伸。
一個網站可以是響應式但不是手機優先——先畫好電腦版，再想辦法把它塞進手機。這是十年前的常見做法，也是很多「有做 RWD 但手機上很難用」的網站的來源。
為什麼順序會影響結果
從大到小：做減法
先完成電腦版，再考慮手機。設計師面對的問題是「這些東西手機放不下，要拿掉什麼」。
結果通常是：重要的內容因為位置關係被推到很下面、側邊欄的資訊乾脆隱藏、複雜的表格用左右捲動勉強塞進去。手機使用者拿到的是一個被削減過的版本。
從小到大：做加法
先確定小螢幕上必須呈現什麼、順序如何，再考慮大螢幕多出來的空間要放什麼。
這個順序會強迫回答一個問題：如果只能顯示三件事，是哪三件？ 這個答案對電腦版同樣有價值——它逼你確認資訊的優先順序，而不是把所有東西都平鋪上去。
為什麼現在應該手機優先
一、多數訪客來自手機
台灣使用者瀏覽網站，來自手機的比例早已超過電腦，某些行業達八成以上。用少數人的使用情境當設計基準，本身就不合理。
二、搜尋引擎以手機版為判斷依據
Google 評估網站內容時，是以手機版的呈現為主要依據。這代表：如果某些內容只在電腦版顯示、手機版被隱藏，那些內容在搜尋引擎眼中等於不存在。
這一點常被忽略。有些網站為了「手機版清爽」而隱藏大量文字，結果連帶損失了搜尋能見度。正確的做法是重新安排，而不是隱藏。
三、條件最嚴苛的環境先過關
手機的螢幕小、網路慢、運算能力弱、操作精準度低。在這個環境下能用得順的設計，放到電腦上通常沒問題；反過來則不一定。
手機優先在實作上的差別
技術上，手機優先體現在樣式的撰寫順序：先寫小螢幕的基本樣式，再用條件式往上加大螢幕的變化。
這種寫法的好處是：手機載入的樣式較精簡，不需要先載入一整套電腦版樣式再覆蓋掉。對手機的載入速度有實質幫助。
但更重要的是思考順序的差別，不是程式碼的寫法。
對業主的實際影響
看設計稿時，要求同時看手機版
這是最直接的檢驗方式。如果廠商只提供電腦版設計稿，說「手機版之後再調」，那多半不是手機優先。
建議在確認設計稿時，要求電腦版與手機版一起看。 手機版不是把電腦版縮小，而是重新安排的另一套版面，值得單獨確認。
內容準備也要考慮手機
- 標題要短——電腦上一行放得下的標題，手機上可能變成三行
- 段落要短——手機上一段超過五行就很難讀
- 圖片要注意主體位置——橫幅照片在手機上會被裁切，重要的人事物不要放在邊緣
- 表格要簡化——超過三欄的表格在手機上很難呈現
素材準備的完整清單見網站規劃階段要準備哪些資料。
什麼情況可以不必手機優先
少數例外：
- 內部系統——員工在辦公室用電腦操作，不對外
- 專業工具型網站——例如需要大量表格輸入的後台，手機本來就不是主要使用場景
- 已確認客群幾乎不用手機——但這需要有實際數據支持，不是憑印象
就算屬於例外，手機上仍應該可以正常瀏覽，只是不必以手機為設計基準。
怎麼確認自己的網站是哪一種
兩個簡單的測試：
- 用手機開啟，看內容的順序。如果重要的東西要捲很久才出現，那多半是從電腦版硬塞進來的
- 比對電腦版與手機版的內容。如果手機版少了很多東西，那些內容可能正在被搜尋引擎忽略
RWD 的基本觀念與三種手機版做法的比較，見RWD 響應式網站是什麼。