Adventures in Responsive Design

kpd

Design that is aware of its context

Responds differently based on the context in which it’s being viewed

What is Responsive Design

For public sites

To take advantage of mobile

Phone form factor

Tablet form factor

Desktop resolutions

Why is this necessary?

Do nothing (hope for the best)

Client-side adaptation

Change the angle brackets that get rendered

Three Different Responses

CSS 3 @media tag

Client-side Rendering Technique

In HTML:<div id="main">

<div id="content"><h1>@Page.Title</h1>@RenderBody()

</div><div id="sidebar">

<p><b>Summer camp for geeks. Join us.</b></p><a href="http://www.thatconference.com"><img

src="Images/thatConference.jpg" alt="That Conference"/></a></div>

</div>

In CSS:@media only screen and (max-width: 950px) {

#main #content {float: none; width: 100%;

} #main #sidebar {

display: none; }

}

Example/Demo