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

Responsive web design

on

  • 190 views

 

Statistics

Views

Total Views
190
Views on SlideShare
190
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
2

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
  • Great work (Y)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive web design Responsive web design Presentation Transcript

  • 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 screen size or orientation of the device (tablet, desktop, netbook, smartphone, etc.).
  • 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 top trends “ I really think we have some existing opportunities to design beyond desktop, and create compelling, beautifully crafted experience for mobile devices”
  • Why
  • “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
  • 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