Responsive web design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive web design

  • 235 views
Uploaded on

 

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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.
    Are you sure you want to
    Your message goes here
  • Great work (Y)
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
235
On Slideshare
235
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
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