Responsive Web Design and TYPO3

1. Responsive Design and TYPO3
Part1
Sophy (sophy@web-essentials.asia)
@psophy
http://www.typo3cambodia.org

2. 2

3. Introduction
3

4. Adaptive
(Multiple Fixed Width Layouts)
or
Responsive
(Multiple Fluid Grid Layouts)
4

5. Mixed Approach
Fixed width for large and medium.
Fluid width for small.
5

6. Mixed Approach
Fixed width for large and medium.
Fluid width for small.
6

7. Who is using it?
7

8. www.barackobama.com
http://www.barackobama.com/
8

9. www.smashingmagazine.com
http://www.smashingmagazine.com/
9

10. www.bostonglobe.com
http://www.bostonglobe.com
10

11. Other sites
● http://css-tricks.com/HER
● http://webdesignerwall.com/
● For more http://mediaqueri.es/
11

12. Responsive Web Design
● Key Elements of Responsive Web Design
● Flexible Layout
● Flexible Images
● Media Queries
12

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)
13

14. Flexible Images
● Adjusting images according to the different screen widths or devices is
another important aspect of responsive web design
img,
embed,
video
object{
max-width: 100%;
}
● Fluid image
1. http://unstoppablerobotninja.com/entry/fluid-images/
2. http://www.alistapart.com/articles/fluid-images/
14

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
15

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) { ... }
16

17. Frameworks
(save time)
or
Roll Your Own
(more control)
17

18. Framework for
Responsive Web Design
18

19. Bootstrap, from Twitter
● Simple, fluid HTML/CSS/JS framework from Twitter
● http://twitter.github.com/bootstrap/
19

20. Foundation
● The most advanced responsive front-end framework in the world.
● http://foundation.zurb.com/
20

21. 1140 CSS GRID
● The 1140 grid fits perfectly into a 1280 monitor...
● http://cssgrid.net/
21

22. Other frameworks
● http://stuffandnonsense.co.uk/projects/320andup/
● http://framelessgrid.com/
● http://lessframework.com/
● http://www.amazium.co.uk/
22

23. Example
23

24. Example Hint
● Meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
● 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]-->
24

25. Next KTUG Meeting(Integrate TYPO3)
25

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)
26

27. Q&A
27