Responsive web design
description
Transcript of Responsive web design
![Page 1: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/1.jpg)
Responsive web design Aya EzzatIbrahim Nabil
7
![Page 2: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/2.jpg)
![Page 3: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/3.jpg)
![Page 4: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/4.jpg)
![Page 5: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/5.jpg)
Responsive web design
Presented by : Aya Ezzat Ibrahim nabil
![Page 6: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/6.jpg)
Responsive web design (RWD)
“Write once, run every where”
![Page 7: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/7.jpg)
![Page 8: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/8.jpg)
What is
RWD?What
is
RWD?
![Page 9: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/9.jpg)
Responsive web design or RWD is a web design method that automatically adapts the rendering of a web page according to
the screen size or orientation of the device (tablet, desktop, netbook, smartphone,
etc.).
![Page 10: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/10.jpg)
Example“Target” website
![Page 11: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/11.jpg)
Example“The Boston globe”
website
![Page 12: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/12.jpg)
Where did the idea come from?
Where did the idea come from?
![Page 13: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/13.jpg)
Article in A List Apart “Responsive web design” book in 2011
#2 in 2012 web design top trends
“ I really think we have some existing opportunities to design beyond desktop, and create compelling,
beautifully crafted experience for mobile devices”
Who? : Ethan Marcotte
When? : 2010
![Page 14: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/14.jpg)
Why RWD
Why RWD
![Page 15: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/15.jpg)
“DAY BY DAY, THE NUMBER OF DEVICES, PLATFORMS, AND BROWSERS THAT NEED TO WORK WITH YOUR
SITE GROWS. RESPONSIVE WEB DESIGN REPRESENTS A FUNDAMENTAL SHIFT IN HOW WE’LL BUILD WEBSITES
FOR THE DECADE TO COME.” - Jeffrey Veen
![Page 16: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/16.jpg)
Advantages of RWD
Easier to manage & maintain
Faster to develop
Better SEO
User friendly
![Page 17: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/17.jpg)
Disadvantages of RWD
Needs extra creativity
Slower loading
![Page 18: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/18.jpg)
Responsive design Vs. web apps Vs. Mobile apps
Responsive design Vs. web apps Vs. Mobile apps
![Page 19: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/19.jpg)
• Easier to develop
• Cheaper
• Less space• More
accessible
![Page 20: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/20.jpg)
How?How?
![Page 21: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/21.jpg)
CSS media queries
![Page 22: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/22.jpg)
Let’s try it
![Page 23: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/23.jpg)
Adaptive web design
![Page 24: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/24.jpg)
Server side
In AWD, the changes are made on the
Not the client side
![Page 25: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/25.jpg)
Progressive enhancement
![Page 26: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/26.jpg)
Example
![Page 27: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/27.jpg)
Recap
![Page 28: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/28.jpg)
![Page 29: Responsive web design](https://reader035.fdocuments.in/reader035/viewer/2022081414/54b7a1314a79592d048b45a7/html5/thumbnails/29.jpg)