A presentation for our group at work on using media queries to enable responsive web design.

1. Adventures in Responsive
Design
kpd

2. What is Responsive Design
Design that is aware of its context
Responds differently based on the context in which
it’s being viewed

3. Why is this necessary?
For public sites
To take advantage of mobile
Phone form factor
Tablet form factor
Desktop resolutions

4. Three Different Responses
Do nothing (hope for the best)
Client-side adaptation
Change the angle brackets that get rendered

5. Client-side Rendering Technique
CSS 3 @media tag

6. Example/Demo
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;
}
}