Responsive Web Design - Speaker Deck

Slide 1

Slide 1 text

Responsive Design and TYPO3 Part1 Sophy ([email protected]) @psophy http://www.typo3cambodia.org

Slide 2

Slide 2 text

Slide 3

Slide 3 text

3 Introduction

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 Who is using it?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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)

Slide 14

Slide 14 text

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, video object{ max-width: 100%; }

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 Framework for Responsive Web Design

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

23 Example

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

25 Next KTUG Meeting(Integrate TYPO3)

Slide 26

Slide 26 text

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)

Slide 27

Slide 27 text

27 Q&A