• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
248
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Alan Sun 響應式網⾴頁設計 (RWD)概述 前端⼯工程師! 穎客資訊! alan@ink.net.tw
  • 2. 以前我們上網.... http://shapewebdesigns.com/online-computer-repairs/
  • 3. 現在我們可以⽤用..... http://resolutionmedia.com/us/google-estimated-cross-device-conversions-pov/
  • 4. 甚至這些...... http://www.monkeyfishmarketing.com/news/ready-multiple-device-internet-marketing/
  • 5. 網⾴頁如何在多個裝置上呈現
  • 6. Responsive Web Design 響應式網⾴頁設計 响应式⽹网页设计 ⾃自适应⽹网页设计 回應式網⾴頁設計
  • 7. 易讀性 (Readability) ⾃自適應網⾴頁設計(英⽂文:Responsive web design,通常縮寫為RWD)是⼀一種網⾴頁設計 的技術做法,該設計可使網站在多種瀏覽裝置 (從桌⾯面電腦顯⽰示器到⾏行動電話或其他⾏行動產 品裝置)上閱讀和導航,同時減少縮放、︑平移 和捲動。︒—— 摘⾃自 維基百科 http://adsense.blogspot.tw/2013/10/get-your-multi-device-strategy-off.html
  • 8. RWD PATTERNS
  • 9. 低解析度 —————————————————————————————> ⾼高解析度 Mostly fluid • 主要呈現的區塊隨著螢幕⼤大 ⼩小縮放! • 次要內容以落下(dropping) 或回填(reflowing)作為分斷 點的呈現
  • 10. http://nanoc.ws/
  • 11. 低解析度 ————————————————————————————> ⾼高解析度 Column drop • 多欄全幅式框架! • ⾼高解析度 - 內容區塊並排呈現! • 低解析度 - 內容區塊垂直堆疊! • 內容區塊以落下(dropping) 或回 填(reflowing)作為分斷點的呈現
  • 12. http://www.pinterest.com/
  • 13. Layout shifter • 主要分斷點的內容排列差異⼤大! • 以內容區塊移動作為分斷點時 的變化! • 維護與變更上較為不易 低解析度 ————————————————————————————> ⾼高解析度
  • 14. http://foodsense.is/
  • 15. Tiny tweaks • 以簡單、︑少量的改變的佈局 ⽅方式! • 適合單⾴頁式網站(SPA)或⽂文章 類為主的網⾴頁呈現 低解析度 ————————————————————————————> ⾼高解析度
  • 16. http://mingshan.qrweb.com.tw/
  • 17. 解析度⾼高 Off canvas • 使⽤用頻率少的內容隱藏/顯⽰示! • ⾼高解析度 - 顯⽰示其內容! • 低解析度 - 隱藏其內容! • 以點擊選單的⽅方式將隱藏內容 (選單)喚出(類似App作法) 解析度低
  • 18. http://www.html5rocks.com/en/tutorials/developertools/async-call-stack/
  • 19. RWD 起步 ❖ 選擇 RWD pattern! ❖ Mobile First! ❖ 捨棄固定排版 (Fixed Layout) 改⽤用流動式排版 (Fluid Layout)! ❖ 善⽤用百分比 (%) 與 比例 (em, rem) ! ❖ 選擇RWD的分斷點 (breakpoint) 切換版⾯面! ❖ 測試...測試...測試...
  • 20. 但是...要改的東西好多
  • 21. 不 如 就 改 天 吧 ! ( 設 計 對 ⽩白 )
  • 22. 其實你有更簡單的選擇
  • 23. 【⼯工商服務】 ❖ 簡易直覺的操作界⾯面! ❖ 提供QR Code 讓宣傳更容易! ❖ 響應式設計,⾏行動裝置輕鬆瀏覽! ❖ 嵌入Google Analytics 隨時掌握網站動態 ⽇日租⾏行動網 http://www.qrweb.com.tw
  • 24. Q & A