Responsive Web

Tech talk about responsive web layouts.

Transcript

1. Responsive Web Giorgi Jibladze
 2014
2. whoami Lecturer @ Caucasus School of Technology
 Twitter: http://twitter.com/jibla
 Github: http://github.com/jibla Giorgi Jibladze www.omedia.ge
3. Responsive website 
 A website that responds to the device that accesses it and delivers the appropriate output for it.
4. 2007 iPhone
5. 2010 iPad
7. • CSS media queries • Flexible fonts • Flexible grids
8. media queries <link rel="stylesheet" type="text/css" href="main.css" media="screen" />! <link rel="stylesheet" type="text/css" href="print.css" media="print" />
9. media queries <link rel="stylesheet" type="text/css"! media="screen and (max-device-width: 480px)"! href="iphone.css" />
10. media queries @media screen and (max-device-width: 480px) {! .sidebar {! float: left;! }! }
11. “magic” formula target  ÷  context  =  result
12. Fonts
13. Fonts h1 {! font-size: 24px;! font-style: italic;! font-weight: normal;! }! ! ! 24  ÷  16  =  1.5   ! h1 {! font-size: 1.5em;! font-style: italic;! font-weight: normal;! }
14. Fonts 11  ÷  24  =  0.458333333333333   ! ! h1 a {! font-size: 0.458333333333333em;! color: #747474;! text-transform: uppercase;! }
15. Grid 900px 566px 331px
16. Grid #page {! margin: 20px auto;! width: 90%;! /* max-width: 900px: */! }! ! #main-content {! float: left;! width: 62.8888889%; /* 566px / 900px */! }! ! #sidebar {! float: right;! width: 36.7777778%; /* 331px / 900px */! }
17. paddings & margins #main-content {! padding: 0 8.480565371025%; /* 48px / 566px */! margin: 0 5.33333333%; /* 48px / 900px */! }
18. Conclusion • More natural • One codebase for EVERYTHING • One URL - One output
 
 
 
 but, not always good..
19. Thank you!