responsive web design
DESCRIPTION
Responsive Web Design and TYPO3TRANSCRIPT
2
3
Introduction
4
Adaptive(Multiple Fixed Width Layouts)
or
Responsive(Multiple Fluid Grid Layouts)
5
Mixed ApproachFixed width for large and medium.
Fluid width for small.
6
Mixed ApproachFixed width for large and medium.
Fluid width for small.
7
Who is using it?
11
Other sites
● http://css-tricks.com/HER
● http://webdesignerwall.com/
● For more http://mediaqueri.es/
12
Responsive Web Design
● Key Elements of Responsive Web Design
● Flexible Layout
● Flexible Images
● Media Queries
13
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.
● http://cssgrid.net
● Twitter bootstrap (Fluid Layout http://goo.gl/5l18o)
14
Flexible Images
● Adjusting images according to the different screen widths or devices is another important aspect of responsive web design
● Fluid image
1. http://unstoppablerobotninja.com/entry/fluid-images/
2. http://www.alistapart.com/articles/fluid-images/
img,embed,videoobject{ max-width: 100%;}
15
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
16
How we use it?
/* 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) { ... }
17
Frameworks(save time)
or
Roll Your Own(more control)
18
Framework for Responsive Web Design
19
Bootstrap, from Twitter
● Simple, fluid HTML/CSS/JS framework from Twitter
● http://twitter.github.com/bootstrap/
20
Foundation
● The most advanced responsive front-end framework in the world.
● http://foundation.zurb.com/
21
1140 CSS GRID
● The 1140 grid fits perfectly into a 1280 monitor...
● http://cssgrid.net/
22
Other frameworks
● http://stuffandnonsense.co.uk/projects/320andup/
● http://framelessgrid.com/
● http://lessframework.com/
● http://www.amazium.co.uk/
23
Example
24
Example Hint
● Meta viewport
● Use Less
● http://lesscss.org
● For Unix (http://htmlrockstars.com/blog/installing-less-css-on-ubuntu/)
● For Windows(http://crunchapp.net/)
● 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" />
25
Next KTUG Meeting(Integrate TYPO3)
26
Resource:
● 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)
27
Q&A