WEB DESIGN
Responsive Web Design簡介和做法

Responsive

雖然Responsive Web Design已經出現好幾年,但自稱Web系女子的我還是今年才第一次做Responsive的網頁!XD 雖然還是初學者,但也記下自己的Responsive做法。

Responsive Web Design簡介

一種網頁設計做法,令用戶在多種平台(由桌上電腦至手機)時都可得到最佳的瀏覽體驗,例如用戶不用放大縮小版面、Scroll等等。不論是甚麼平台,HTML都是一樣,只是套用的CSS不同。

1366px

以敝站為例,在解析度是1366px時,Sidebar會放在右方。

700px

但在解析度少於700px時,Sidebar就會放在內容下方,這樣就可避免讀者要放大版面/Scrolling才能閱讀。

Responsive以外的做法

要令用戶得到最佳閱讀效果,除了Responsive Web Design外,還可為網頁分別做手機版和桌上版去應付不同裝置,兩個做法都各有好處。

Responsive Web Deisgn的好處

不用重寫HTML

多版本的好處

因為多數手機上網速度都不及電腦快,做手機版時可減少版面內容資訊,要下載的項目少了,自然速度較快。

因為本人實在太懶,所以較喜歡Responsive XD

Bootstrap

Bootstrap是來自Twitter的Front-end Framework,而小妹第一次做Responsive網頁時,就是用Bootstrap的。只要用了Bootstrap,Navigation Menu各種各樣都會自動在各個版面都得到優良顯示效果。

而其中要注意的就是Grid System,Grid System將頁寬分成十二格去對應四種解析度不同的裝置,只要會用Grid System就能掌握Bootstrap的基本功能啦。

Bootstap Grid System
http://getbootstrap.com/css/#grid

CSS Media Queries

不想用其他framework的話,也可自己用Media Query寫。

CSS media queries
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

檢查網頁是否Mobile-friendly

寫完後不妨放上Google的Mobile-friendly Test中檢查。

根據Google對Mobile-Friendly的定義,不是有手機版或Responsive就Mobile-Friendly的,詳細可看行動裝置可用性

除此以外也可用PageSpeed Insights查看Google對網頁的建議,會Check Mobile和Desktop Version的。

總結

現在多數網頁都有手機版或用Responsive Web Design,寫網頁時雖然麻煩了,但還是必須的呢。

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">