Your SlideShare is downloading. ×
0
7

Responsive web design

Aya Ezzat
Ibrahim Nabil
Responsive web design

Presented by : Aya Ezzat
Ibrahim nabil
Responsive web design (RWD)
“Write once, run every where”
What
is

RWD?
Responsive web design or RWD is a web design
method that automatically adapts the rendering of
a web page according to the...
Example
“Target” website
Example
“The Boston globe” website
Where
did
the idea
come
from?
Who? : Ethan Marcotte

When? : 2010

Article in A List Apart
“Responsive web design” book
in 2011
#2 in 2012 web design to...
Why
“DAY BY DAY, THE NUMBER OF DEVICES, PLATFORMS,
AND BROWSERS THAT NEED TO WORK WITH YOUR SITE
GROWS. RESPONSIVE WEB DESIGN ...
Advantages of RWD

Easier to manage & maintain

Faster to develop
Better SEO

User friendly
Disadvantages of RWD

Needs extra creativity
Slower loading
Responsive design Vs. web
apps Vs. Mobile apps
• Easier to develop
• Cheaper
• Less space
• More accessible
How?
CSS media queries
Let’s try it
Adaptive web design
In AWD, the changes are made on
the

Server side
Not the client side
Progressive enhancement
Example
Recap
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Responsive web design
Upcoming SlideShare
Loading in...5
×

Responsive web design

188

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

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×