responsive web design on student's day
DESCRIPTION
TRANSCRIPT
Responsive Web Designby Sophy Prak
Sophy PrakWeb Developer - Web Essentials
Member of KTUG(typo3cambodia.org)
Photo: http://goo.gl/Et5Py
3
Introduction
● May 25th, 2010 Ethan Marcotte has wrote article “Responsive Web Design” (http://goo.gl/BLQMe)
● Jun 18, 2010 SIMON COLLISON updated his blog with media queries(colly.com)
4
5
Adaptive(Multiple Fixed Width Layouts)
or
Responsive(Multiple Fluid Grid Layouts)
6
Mixed ApproachFixed width for large and medium
Fluid width for small
7
Why do we use Responsive Web Design?
8
Should we create sub-domain and design layout for each
devices?
9
10
11
12
13
Answer
NO!
14
“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
15
“Responsive design will become even better as we get tools, like Flexible Box and the Grid Layout spec”
- Eric Meyer
16
One site for every screen
- John Polacek
17
Who is using it?
22
Other sites
● http://css-tricks.com/
● http://webdesignerwall.com/
● For more http://mediaqueri.es/
23
Responsive Web Design
● Key Elements of Responsive Web Design
● Flexible Layout
● Flexible Images and Media
● Media Queries
24
Flexible Layout
First step considered for responsive design is flexible layout. As the browser width changes, fluid grids will resize and reposition the content as necessary.
25
Flexible Images and Media
● Adjusting images according to the different screen widths or devices is another important aspect of responsive web design
● Tutorial fluid image
1. http://unstoppablerobotninja.com/entry/fluid-images/
2. http://www.alistapart.com/articles/fluid-images/
img,embed,video,object{ max-width: 100%;}
26
Media Queries
● In CSS2 you was able to apply specific stylesheet for specify media type like screen or print.
● In CSS3, W3C made it more efficient by adding media queries made it as part of the CSS3 specification
27
How we use media queries?
28
Media Queries Conditions
/* Landscape phones and down */ @media (max-width: 480px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Large desktop */ @media (min-width: 1200px) { ... }
Source of Twitter Bootstrap
29
/* Landscape phones and down */@media (max-width: 480px) { ... }
30
/* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... }
31
/* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... }
32
/* Large desktop */ @media (min-width: 1200px) { ... }
33
Frameworks(save time)
or
Roll Your Own(more control)
34
Framework for Responsive Web Design
35
Bootstrap, from Twitter
● Simple, fluid HTML/CSS/JS framework from Twitter
● http://twitter.github.com/bootstrap/
36
Foundation
● The most advanced responsive front-end framework in the world.
● http://foundation.zurb.com/
37
1140 CSS GRID
● The 1140 grid fits perfectly into a 1280 monitor...
● http://cssgrid.net/
38
Other frameworks
● http://stuffandnonsense.co.uk/projects/320andup/
● http://framelessgrid.com/
● http://lessframework.com/
● http://www.amazium.co.uk/
39
Tips
● Meta viewport
● Use css3-mediaqueries.js for IE8 or older
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
40
References
● Responsive Web Design (http://goo.gl/BLQMe)
● Designing for a Responsive Web (http://goo.gl/iK6dO)
● Fluid Image (http://goo.gl/RvQlO)
● More responsive tutorials (http://goo.gl/G75ov)
● What the hack is Responsive Web Design(http://goo.gl/kUod7)
