Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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)的 HT...
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?
• ...
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
Prochain SlideShare
Chargement dans…5
×

0

Partager

Télécharger pour lire hors ligne

Something about responsive web design

Télécharger pour lire hors ligne

公司內部分享 Responsive Web Design 的相關資訊,圖片若有侵權,麻煩請告知,會立即刪除。

  • Soyez le premier à aimer ceci

Something about responsive web design

  1. 1. Something about Responsive Web Design aco
  2. 2. about RWD
  3. 3. RWD 3 Key Point ● Flexible Layout ● Flexible Media ● Media Queries
  4. 4. Flexible Layout
  5. 5. Flexible Media
  6. 6. Media Queries
  7. 7. https://www.pinterest.com/pin/574490496187451796/
  8. 8. about Planning
  9. 9. Think about RWD or not http://photopin.com/free-photos/bubbles
  10. 10. RWD Workflow https://www.pinterest.com/mbellcre8/web-process/
  11. 11. Responsbility ● UR:Mobile 使用者研究與易用性評估 ● PM:與相關人士溝通網站(RWD)的需求 ● Planner, ID:整理網站(RWD)的內容,規劃資訊架構、UI Flow ● F2E:執行網站(RWD)的 HTML/CSS/JS 撰寫 ● VD:進行網站(RWD)的視覺設計
  12. 12. http://smartview.dk/produkter/trafiktaelling-af-kunder-besogende/
  13. 13. 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?
  14. 14. Content Audit • Page ID • Page Name • Link • Document type • Topics, keywords • Owner/Maintainer • ROT • Notes
  15. 15. Page Table
  16. 16. Core and Path
  17. 17. Content First http://justamemo.com/2013/03/11/responsive-web-design-process/
  18. 18. about Design
  19. 19. Cross-device Experience
  20. 20. Choose Breakpoints https://www.flickr.com/people/triller/
  21. 21. Optimize for Reading
  22. 22. Touch Friendly 44px
  23. 23. Display Video?
  24. 24. about Implement
  25. 25. Flexible Layout
  26. 26. Flexible Media
  27. 27. Set the Viewport <meta name="viewport" content="width=device-width, initial- scale=1.0, user-scalable=yes">
  28. 28. Media Queries (Ems)
  29. 29. Think about Escalator http://elevator.sellfile.ir/
  30. 30. Take Away ● 最好的瀏覽器就是使用者手上那個 ● 內容是首要將使用者帶到我們網站的東西 ● 先決定內容的結構,不要急於在一開始就涉及介面設計 ● 在跨瀏覽器中完美的實現設計的想法其實是一個謬論 ● 找出團隊中最佳的設計和開發步驟,關注的是整個網站
  31. 31. Reference Google Web Fundamentals The New Multi-Screen World Study Learn to Code Advanced HTML & CSS 響應式網頁設計超強來襲
  32. 32. Content First, User First, Mobile First Thank you

公司內部分享 Responsive Web Design 的相關資訊,圖片若有侵權,麻煩請告知,會立即刪除。

Vues

Nombre de vues

550

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

2

Actions

Téléchargements

15

Partages

0

Commentaires

0

Mentions J'aime

0

×