隨著不同裝置尺寸變化而生
《RWD網頁設計》適應不同尺寸產生的網頁布局變化
你是否困惑過，要如何將大量的資訊放在頁面上才能夠使瀏覽者清楚地吸收資訊又同時符合RWD網頁設計技術的變化呢？這肯定是許多網站規劃者頭痛的部分，就讓網頁設計師為您解說不同尺寸的畫面編排，有什麼差異性以及需要注意的地方吧！
小編從天矽網頁設計師那蒐羅了幾個客戶常問的問題，例如...
- 為什麼我的畫面在手機長這個樣子？
- 為什麼桌機和手機的畫面有差異？
- 手機畫面放這些資訊有辦法呈現嗎？
行動優先V.S建置RWD網頁設計的邏輯性
- 思考方向1－行動優先(Mobile First)：
初步規劃網站時，建議從小螢幕開始思考，因為需要先考慮資訊量的取捨，之後逐一放大尺寸，慢慢地把元素加進來。
- 思考方向２－RWD網頁設計：
以網頁使用者為考慮方向，若貴司的使用者主要會是在電腦上使用，規劃時，可以考慮大螢幕多一點；若主要是在行動裝置上，就多加考慮手機螢幕上的呈現方式。
RWD網頁設計為什麼呈現畫面不一樣
依據上述可以得到，根據尺寸大小的不同，所裝載的資料量會不一樣。大螢幕可以放較多東西，小螢幕能裝載的則有限。面對這樣的限制，網頁設計師在畫面規劃上，會進行簡化或捨去的動作。
畫面變化範例如下...
【九升科技(桌機/筆電尺寸)】
編排方式：資料量多（六個區塊），兩欄式編排。
九升科技－手機尺寸
- 收合主選單
- 手頁banner換尺寸
- 所有區塊整併成一整條
- 產品改成上圖下文呈現
為了因應不同尺寸上呈現最好的排版，網頁設計師或是網頁規劃者在設計時，應該考慮不同裝置時所呈現的樣子，則製作時也須了解在不同裝置的變化上，有些過於複雜或是資訊量過大的區域，在小裝置上被簡化或捨去是必要的，這都是為了讓網頁在什麼情況下都能夠清楚的呈現。
