Responsive web design

319 views

Published on

Published in: Design
2 Comments
0 Likes
Statistics
Notes
  • People prefer to explore the world on the move itself.So they are more comfort with compatible devices with crystal clear resolutions. So this scenario leads to the emergence of responsive design layout.So this presentation delivers the importance of the responsive design strategy efficiently.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great work (Y)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
319
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. 7 Responsive web design Aya Ezzat Ibrahim Nabil
  2. 2. Responsive web design Presented by : Aya Ezzat Ibrahim nabil
  3. 3. Responsive web design (RWD) “Write once, run every where”
  4. 4. What is RWD?
  5. 5. 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.).
  6. 6. Example “Target” website
  7. 7. Example “The Boston globe” website
  8. 8. Where did the idea come from?
  9. 9. 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”
  10. 10. Why
  11. 11. “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
  12. 12. Advantages of RWD Easier to manage & maintain Faster to develop Better SEO User friendly
  13. 13. Disadvantages of RWD Needs extra creativity Slower loading
  14. 14. Responsive design Vs. web apps Vs. Mobile apps
  15. 15. • Easier to develop • Cheaper • Less space • More accessible
  16. 16. How?
  17. 17. CSS media queries
  18. 18. Let’s try it
  19. 19. Adaptive web design
  20. 20. In AWD, the changes are made on the Server side Not the client side
  21. 21. Progressive enhancement
  22. 22. Example
  23. 23. Recap

×