1. 7
Responsive web design
Aya Ezzat
Ibrahim Nabil

5. Responsive web design
Presented by : Aya Ezzat
Ibrahim nabil

6. Responsive web design (RWD)
“Write once, run every where”

8. What
is
RWD?

9. 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.).

10. Example
“Target” website

11. Example
“The Boston globe” website

12. Where
did
the idea
come
from?

13. Who? : Ethan Marcotte
When? : 2010
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”

14. Why

15. “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

16. Advantages of RWD
Easier to manage & maintain
Faster to develop
Better SEO
User friendly

17. Disadvantages of RWD
Needs extra creativity
Slower loading

18. Responsive design Vs. web
apps Vs. Mobile apps

19. • Easier to develop
• Cheaper
• Less space
• More accessible

20. How?

21. CSS media queries

22. Let’s try it

23. Adaptive web design

24. In AWD, the changes are made on
the
Server side
Not the client side

25. Progressive enhancement

26. Example

27. Recap