Your SlideShare is downloading. ×
Responsive web design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive web design

171
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
171
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
2
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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