響應式網頁設計(Responsive Web Design,RWD)
https://zh.wikipedia.org/zh-tw/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1# 。mozilla:https://developer.mozilla.org/zh-TW/docs/Glossary/Responsive_web_design
在手機應用越來越多之後,RWD已經成為現代網頁設計的基本款了。雖然蠻多廠商還是喜歡有APP,但APP總是需要額外的開發成本,上架也需要審核時間,如果是為了試探市場,或是初期資料建置的過渡期,或是人力考量,通常還是會有手機網頁的版本。
一般來說會強調RWD功能的,大多屬於前台功能,不過因為行動裝置越來越便利的關系,也不少後台需要支援了。RWD製作原則上是依美編設計排版(美編才有美感阿~不然要叫美編玩沙吃土,搶人工作是會餓死的),工程師再依內容實作套版。
不過現在也有很多template(不管是繪圖設計軟體,或是網頁也是有一堆範本,有免費,也有內容販售),也可以直接挑看順眼的template來運用,而template也成為一個紅海產業好一陣子了,不過就是看業主挑不挑,通常都是找個類似的,抓回來自己加工調一調成業主想要的樣子。
隨著螢幕解析度的提升,RWD要對應的寬度,其實過一陣子就會不一樣。以Bootstrap 的演變過程,就可以看得出來。
Bootstrap 3 (2013 release):
Size | Width |
---|---|
Extra small devices Phones | <768px |
Small devices Tablets | ≥768px |
Medium devices Desktops | ≥992px |
Large devices Desktops | ≥1200px |
Bootstrap 4(2018 release,前面有好幾個alpha,beta版本):
Size | Width |
---|---|
Extra small | <576px |
Small | ≥576px |
Medium | ≥768px |
Large | ≥992px |
Extra large | ≥1200px |
Bootstrap 5(2021 release,這個也是alpha,beta很久):
Size | Width |
---|---|
Extra small | <576px |
Small | ≥576px |
Medium | ≥768px |
Large | ≥992px |
X-Large | ≥1200px |
XX-Large | ≥1400px |
一開始還會說是手機,平板,桌上電腦,到後面只剩下寬度。是說有時後手機橫看,也是一種情況,真的想要做到一個處處考慮周到的RWD設計,其實還蠻花工夫的。一般都是做到業主期望的幾個設備,看起來順眼就好,至於一般使用者都還是很寬容的,能看就好(沒付錢的通常不要太傷眼就沒意見,有付錢的就是專攻承辦長官的電腦,手機解析度)…
現代做網站設計,應該很少人依設計方法,每步都從頭刻,大多是現成套版修改調整。所以要在滿滿的template海中,要如何快速的相中合適的範本,還得是內容程式品質ok的好懂好修改調整,反而是比較重要的技能。加上AI內容生成其實有打到的這個領域,不知道以後會不會人們都忘了設計或是欣賞藝術的本質是什麼?