Upload
aya-ezzat
View
166
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
Responsive web design Aya EzzatIbrahim Nabil
7
Responsive web design
Presented by : Aya Ezzat Ibrahim nabil
Responsive web design (RWD)
“Write once, run every where”
What is
RWD?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?
Where did the idea come from?
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”
Who? : Ethan Marcotte
When? : 2010
Why RWD
Why RWD
“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
Responsive design Vs. web apps Vs. Mobile apps
• Easier to develop
• Cheaper
• Less space• More
accessible
How?How?
CSS media queries
Let’s try it
Adaptive web design
Server side
In AWD, the changes are made on the
Not the client side
Progressive enhancement
Example
Recap