Adventures in responsive design

186 views
128 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
186
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Adventures in responsive design

  1. 1. Adventures in Responsive Design kpd
  2. 2. What is Responsive DesignDesign that is aware of its contextResponds differently based on the context in whichit’s being viewed
  3. 3. Why is this necessary?For public sitesTo take advantage of mobile Phone form factor Tablet form factor Desktop resolutions
  4. 4. Three Different ResponsesDo nothing (hope for the best)Client-side adaptationChange the angle brackets that get rendered
  5. 5. Client-side Rendering Technique CSS 3 @media tag
  6. 6. Example/DemoIn 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"><imgsrc="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; } }

×