Download - Responsive web design
![Page 2: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/2.jpg)
2
![Page 3: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/3.jpg)
3
Introduction
![Page 4: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/4.jpg)
4
Adaptive(Multiple Fixed Width Layouts)
or
Responsive(Multiple Fluid Grid Layouts)
![Page 5: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/5.jpg)
5
Mixed ApproachFixed width for large and medium.
Fluid width for small.
![Page 6: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/6.jpg)
6
Mixed ApproachFixed width for large and medium.
Fluid width for small.
![Page 7: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/7.jpg)
7
Who is using it?
![Page 11: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/11.jpg)
11
Other sites
● http://css-tricks.com/HER
● http://webdesignerwall.com/
● For more http://mediaqueri.es/
![Page 12: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/12.jpg)
12
Responsive Web Design
● Key Elements of Responsive Web Design
● Flexible Layout
● Flexible Images
● Media Queries
![Page 13: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/13.jpg)
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)
![Page 14: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/14.jpg)
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%;}
![Page 15: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/15.jpg)
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
![Page 16: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/16.jpg)
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) { ... }
![Page 17: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/17.jpg)
17
Frameworks(save time)
or
Roll Your Own(more control)
![Page 18: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/18.jpg)
18
Framework for Responsive Web Design
![Page 19: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/19.jpg)
19
Bootstrap, from Twitter
● Simple, fluid HTML/CSS/JS framework from Twitter
● http://twitter.github.com/bootstrap/
![Page 20: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/20.jpg)
20
Foundation
● The most advanced responsive front-end framework in the world.
● http://foundation.zurb.com/
![Page 21: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/21.jpg)
21
1140 CSS GRID
● The 1140 grid fits perfectly into a 1280 monitor...
● http://cssgrid.net/
![Page 22: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/22.jpg)
22
Other frameworks
● http://stuffandnonsense.co.uk/projects/320andup/
● http://framelessgrid.com/
● http://lessframework.com/
● http://www.amazium.co.uk/
![Page 23: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/23.jpg)
23
Example
![Page 24: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/24.jpg)
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" />
![Page 25: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/25.jpg)
25
Next KTUG Meeting(Integrate TYPO3)
![Page 26: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/26.jpg)
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)
![Page 27: Responsive web design](https://reader033.vdocuments.site/reader033/viewer/2022051818/54b52e214a7959027f8b4572/html5/thumbnails/27.jpg)
27
Q&A