1. Responsive Web Design
by Sophy Prak

2. Sophy Prak
Web Developer - Web Essentials
Member of KTUG(typo3cambodia.org)
Photo: http://goo.gl/Et5Py

3. Introduction
● May 25th, 2010 Ethan Marcotte has wrote article “Responsive Web
Design” (http://goo.gl/BLQMe)
● Jun 18, 2010 SIMON COLLISON updated his blog with media
queries(colly.com)
3

4. 4

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

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

7. Why do we use Responsive
Web Design?
7

8. Should we create sub-domain
and design layout for each
devices?
8

9. 9

10. 10

11. 11

12. 12

13. Answer
NO!
13

14. “Day by day, the number of devices, platforms,
and browsers that need to work with your site
grows. Responsive web design represents a
fundamental shift in how we’ll build websites
for the decade to come.”
- Jeffrey Veen
14

15. “Responsive design will become even better as
we get tools, like Flexible Box and the Grid
Layout spec”
- Eric Meyer
15

16. One site for every screen
- John Polacek
16

17. Who is using it?
17

18. london.msn.co.uk
http://www.barackobama.com/
18

19. www.barackobama.com
http://www.barackobama.com/
19

20. www.smashingmagazine.com
http://www.smashingmagazine.com/
20

21. www.bostonglobe.com
http://www.bostonglobe.com
21

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

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

24. 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.
24

25. Flexible Images and Media
● 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%;
}
● Tutorial fluid image
1. http://unstoppablerobotninja.com/entry/fluid-images/
2. http://www.alistapart.com/articles/fluid-images/
25

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

27. How we use media
queries?
27

28. Media Queries Conditions
/* 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) { ... }
Source of Twitter Bootstrap
28

29. /* Landscape phones and down */
@media (max-width: 480px) { ... }
29

30. /* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
30

31. /* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
31

32. /* Large desktop */
@media (min-width: 1200px) { ... }
32

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

34. Framework for
Responsive Web Design
34

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

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

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

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

39. Tips
● 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 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]-->
39

40. References
● 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)
● What the hack is Responsive Web Design(http://goo.gl/kUod7)
40

41. Q&A
Contact me:
sophy@web-essentials.asia
@sophy
http://kooms.info
41