Something about

Responsive Web Design

aco

about

RWD

RWD 3 Key Point

● Flexible Layout

● Flexible Media

● Media Queries

Flexible Layout

Flexible Media

Media Queries

https://www.pinterest.com/pin/574490496187451796/

about

Planning

Think about RWD or not

http://photopin.com/free-photos/bubbles

RWD Workflow

https://www.pinterest.com/mbellcre8/web-process/

Responsbility

● UR：Mobile 使用者研究與易用性評估

● PM：與相關人士溝通網站(RWD)的需求

● Planner, ID：整理網站(RWD)的內容，規劃資訊架構、UI Flow

● F2E：執行網站(RWD)的 HTML/CSS/JS 撰寫

● VD：進行網站(RWD)的視覺設計

http://smartview.dk/produkter/trafiktaelling-af-kunder-besogende/

Focus Content

Content is King, Navigation is Queen

• Who is the intended audience?• What content is already available?• How can existing content be simplified and condensed?• What is the key message?• Is there any content that does not support the key message?• What is the hierarchy of the content?

Content Audit

• Page ID• Page Name• Link• Document type• Topics, keywords• Owner/Maintainer• ROT• Notes

Page Table

Core and Path

Content First

http://justamemo.com/2013/03/11/responsive-web-design-process/

about

Design

Cross-device Experience

Choose Breakpoints

https://www.flickr.com/people/triller/

Optimize for Reading

Touch Friendly

44px

Display Video?

about

Implement

Flexible Layout

Flexible Media

Set the Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Media Queries (Ems)

Think about Escalator

http://elevator.sellfile.ir/

Take Away

● 最好的瀏覽器就是使用者手上那個

● 內容是首要將使用者帶到我們網站的東西

● 先決定內容的結構，不要急於在一開始就涉及介面設計

● 在跨瀏覽器中完美的實現設計的想法其實是一個謬論

● 找出團隊中最佳的設計和開發步驟，關注的是整個網站

Reference

Google Web Fundamentals

The New Multi-Screen World Study

Learn to Code Advanced HTML & CSS

響應式網頁設計超強來襲

Content First, User First, Mobile First

Thank you