adventures in responsive design
Post on 11-Jul-2015
69 Views
Preview:
TRANSCRIPT
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
top related