responsive web design

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