responsive web design

Responsive Design and TYPO3 Part1

Sophy (sophy@web-essentials.asia)

@psophy

http://www.typo3cambodia.org

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?

8

www.barackobama.com

http://www.barackobama.com/

9

www.smashingmagazine.com

http://www.smashingmagazine.com/

10

www.bostonglobe.com

http://www.bostonglobe.com

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