SlideShare a Scribd company logo
1 of 32
Download to read offline
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

More Related Content

Similar to Something about responsive web design

Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptx
AADITYADEVA
 
Responsive web introduction
Responsive web introductionResponsive web introduction
Responsive web introduction
Allan Tan
 

Similar to Something about responsive web design (20)

Web-Development-ppt (1).pptx
Web-Development-ppt (1).pptxWeb-Development-ppt (1).pptx
Web-Development-ppt (1).pptx
 
amanWeb.ppt.pptx
amanWeb.ppt.pptxamanWeb.ppt.pptx
amanWeb.ppt.pptx
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
 
Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptx
 
Web Development Agency in Noida in 2024 1
Web Development Agency in Noida in 2024 1Web Development Agency in Noida in 2024 1
Web Development Agency in Noida in 2024 1
 
Responsive Web Design presentation at the Fort Wayne AdFed
Responsive Web Design presentation at the Fort Wayne AdFedResponsive Web Design presentation at the Fort Wayne AdFed
Responsive Web Design presentation at the Fort Wayne AdFed
 
Concept Map
Concept MapConcept Map
Concept Map
 
Developing a framework of design principles for single page websites and thei...
Developing a framework of design principles for single page websites and thei...Developing a framework of design principles for single page websites and thei...
Developing a framework of design principles for single page websites and thei...
 
Website Designing Courses in chandigarh.pptx
Website Designing Courses in chandigarh.pptxWebsite Designing Courses in chandigarh.pptx
Website Designing Courses in chandigarh.pptx
 
IxDA Toronto Show and Tell - RWD by Nathalie Crosbie
IxDA Toronto Show and Tell - RWD by Nathalie CrosbieIxDA Toronto Show and Tell - RWD by Nathalie Crosbie
IxDA Toronto Show and Tell - RWD by Nathalie Crosbie
 
Nitishreys
NitishreysNitishreys
Nitishreys
 
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptxA COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
A COMPREHENSIVE GUIDE TO WEB DEVELOPMENT 2.pptx
 
proposal4.ppt
proposal4.pptproposal4.ppt
proposal4.ppt
 
Web-Development-ppt.pptx
Web-Development-ppt.pptxWeb-Development-ppt.pptx
Web-Development-ppt.pptx
 
Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Eureko frameworks
Eureko frameworksEureko frameworks
Eureko frameworks
 
User-Centered Design
User-Centered DesignUser-Centered Design
User-Centered Design
 
Responsive web introduction
Responsive web introductionResponsive web introduction
Responsive web introduction
 
Web design vs web development
Web design vs web developmentWeb design vs web development
Web design vs web development
 
Beyond responsive design - UI for the modern web application - Pete Smith - C...
Beyond responsive design - UI for the modern web application - Pete Smith - C...Beyond responsive design - UI for the modern web application - Pete Smith - C...
Beyond responsive design - UI for the modern web application - Pete Smith - C...
 

Recently uploaded

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
gajnagarg
 
Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...
Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...
Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...
gajnagarg
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
sriharipichandi
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 

Recently uploaded (20)

RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdfJordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experiencedWhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
Just Call Vip call girls Nagpur Escorts ☎️8617370543 Starting From 5K to 25K ...
 
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men  🔝dharamshala🔝  ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
 
Lecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptxLecture 01 Introduction To Multimedia.pptx
Lecture 01 Introduction To Multimedia.pptx
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
Just Call Vip call girls diu Escorts ☎️9352988975 Two shot with one girl (diu )
 
Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...
Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...
Just Call Vip call girls Etawah Escorts ☎️9352988975 Two shot with one girl (...
 
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service AvailableCall Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
Call Girls Jalgaon Just Call 8617370543Top Class Call Girl Service Available
 
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
Anupama Kundoo Cost Effective detailed ppt with plans and elevations with det...
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 

Something about responsive web design