Rwd intro
- 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)作為分斷 點的呈現
- 11. 低解析度 ————————————————————————————> ⾼高解析度 Column drop • 多欄全幅式框架! • ⾼高解析度 - 內容區塊並排呈現! • 低解析度 - 內容區塊垂直堆疊! • 內容區塊以落下(dropping) 或回 填(reflowing)作為分斷點的呈現
- 13. Layout shifter • 主要分斷點的內容排列差異⼤大! • 以內容區塊移動作為分斷點時 的變化! • 維護與變更上較為不易 低解析度 ————————————————————————————> ⾼高解析度
- 15. Tiny tweaks • 以簡單、︑少量的改變的佈局 ⽅方式! • 適合單⾴頁式網站(SPA)或⽂文章 類為主的網⾴頁呈現 低解析度 ————————————————————————————> ⾼高解析度
- 17. 解析度⾼高 Off canvas • 使⽤用頻率少的內容隱藏/顯⽰示! • ⾼高解析度 - 顯⽰示其內容! • 低解析度 - 隱藏其內容! • 以點擊選單的⽅方式將隱藏內容 (選單)喚出（類似App作法） 解析度低
- 19. RWD 起步 ❖ 選擇 RWD pattern! ❖ Mobile First! ❖ 捨棄固定排版 (Fixed Layout) 改⽤用流動式排版 (Fluid Layout)! ❖ 善⽤用百分比 (%) 與 比例 (em, rem) ! ❖ 選擇RWD的分斷點 (breakpoint) 切換版⾯面! ❖ 測試...測試...測試...
- 20. 但是...要改的東西好多
- 22. 其實你有更簡單的選擇
- 23. 【⼯工商服務】 ❖ 簡易直覺的操作界⾯面! ❖ 提供QR Code 讓宣傳更容易! ❖ 響應式設計，⾏行動裝置輕鬆瀏覽! ❖ 嵌入Google Analytics 隨時掌握網站動態 ⽇日租⾏行動網 http://www.qrweb.com.tw
- 24. Q & A