易犯的RWD 網站製作失誤– 要改的地方太多了,那就改天吧 | rwd尺寸設定
自從Google在2016年宣布將調整手機Google中行動版網站的搜尋結果排名Mobile-firstIndexing[1],各大網頁設計公司的業務人員就開始以此當噱頭、勸業主改版,因為這又是一個收費的大好機會。腳步比較遲緩的企業,也在老闆發現自己家的網站用手機打不開,而競爭對手的網站在手機上很好用,而開始提出需求將自家的網站做行動版的優化。讓資料可以優美舒服的顯示在行動裝置顯示解決方案有很多,響應式網頁設計(RWD,Responsivewebdesign)是其中之一,RWD的特點是用一些JS與CSS的技術,讓同一個頁面可以好好的顯示在行動裝置跟電腦,不會有兩...
自從 Google 在 2016 年宣布將調整手機 Google 中行動版網站的搜尋結果排名Mobile-first Indexing[1],各大網頁設計公司的業務人員就開始以此當噱頭、勸業主改版,因為這又是一個收費的大好機會。腳步比較遲緩的企業,也在老闆發現自己家的網站用手機打不開,而競爭對手的網站在手機上很好用,而開始提出需求將自家的網站做行動版的優化。
讓資料可以優美舒服的顯示在行動裝置顯示解決方案有很多,響應式網頁設計(RWD, Responsive web design)是其中之一,RWD 的特點是用一些 JS 與 CSS 的技術,讓同一個頁面可以好好的顯示在行動裝置跟電腦,不會有兩個網址,後端程式只要寫一次,其他都是~~美工~~視覺與前端的事情。本文介紹一些網頁設計人員在製作 RWD 網站時常犯的失誤。
本文章的內容目錄
Toggle[2]1.把自己的裝置解析度當成大家的裝置解析度想看網頁實際上在小螢幕上看起來如何,於是網頁設計人員就用自己的手機來預覽與修改,把網頁上的 UI 輸入框、圖文編排、文字段落,在自己的手機上調整顯示得剛剛好,覺得很完美,但只是一場夢,用其他手機看卻跑版、跳行、內容突出螢幕外、字句斷得可怕,為什麼呢?
事實上手機螢幕的解析度一直在改變,iOS 陣營的螢幕解析度是越來越大,Android 陣營的則是廠商客製自由度高,造成解析度破碎化,從 4 吋的手機到 7 吋的通話平板、11吋的雙系統平板,12.9 吋的 iPad Pro 還有 4:3、16:10、16:9 等各種螢幕比例。
假設你在解析度 480*853 (Samsung) 的手機上製作頁面,把大部分的東西都設定最小寬度或是固定寬度 400px 以上,那在解析度 320*568 的 iPhone 5s 上看起來可是很慘烈的。
所以調整 RWD 網頁要記住第一個原則,買一支跟老闆和客戶一樣的手機,或是把老闆和客戶的手機螢幕解析度背起來….啊不是啦!
1.多用百分比之類的寬度,寬度不要設定太多固定數值。畫設計稿時也不要把網頁元件排得太寬,如下圖超簡易的範例。
2.有時候可用圖示、placeholder、blur 自動驗證之...
取得本站獨家住宿推薦 15%OFF 訂房優惠
WINDOW RESIZER 模擬各種螢幕尺寸,RWD必備的擴充套件
WINDOW RESIZER─模擬各種螢幕尺寸,RWD必備的擴充套件 ... 針對某個機型做數值設定的話,WINDOW RESIZER也可以自己設定尺寸幫助設計師調整畫面。