iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
自我挑戰組

保健食品建議量查詢網頁功能系列 第 19

RWD已經成為常識了

  • 分享至 

  • xImage
  •  

響應式網頁設計(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內容生成其實有打到的這個領域,不知道以後會不會人們都忘了設計或是欣賞藝術的本質是什麼?


上一篇
SEO規則會換的,別抱著古董不放
下一篇
挑框架也要選版本
系列文
保健食品建議量查詢網頁功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言