This document discusses responsive design and how it can be implemented in TYPO3. It defines responsive design as using fluid grids that resize based on browser width rather than fixed width layouts. It recommends using flexible layouts, images, and media queries to build responsive sites. Popular frameworks like Bootstrap and Foundation are introduced to help with responsive design. The document provides examples and resources for creating responsive sites that adapt to different screen sizes.

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