The document discusses responsive web design and some best practices. It notes that responsive design is more than just fluid grids, flexible images, and media queries - it also requires considering architecture, performance, font sizing, breakpoints, image optimization, and more. The document provides tips on using relative units like ems and rems for font sizing, organizing media queries, selecting classes, and testing responsive sites.

1. BUILDING BETTER
RESPONSIVE
SITES
Holger Bartel | @foobartel | Harbour Front Monthly #1 on 27/08/2014

2. “RESPONSIVE WEB
DESIGN IS ALL ABOUT
FLUID GRIDS, FLEXIBLE
IMAGES & MEDIA
QUERIES”

3. EASY!
http://en.wikipedia.org/wiki/Tightrope_walking

4. http://www.manonwire.com

5. TURNS OUT…
NOT QUITE THAT EASY!

6. “It’s Damn Hard!”
– Charis Rooda

7. “And it’s all a big hack!”
– Charis Rooda

8. YOU’LL NEED MORE THAN JUST 3
INGREDIENTS TO COOK A GREAT
MEAL
http://en.wikipedia.org/wiki/pasta

9. ★ Fluid Grids, Images & Media
Queries
★ Architecture & Structure
★ Performance

10. ★ Fluid Grids, Images & Media
Queries
★ Architecture & Structure
★ Performance
★ (Maybe a few more things )

11. COMMUNICATE!
Talk to your designers, co-workers, project managers (if
any) & clients.
!
A lot.

12. GETTING MORE FLEXIBLE
WITH FONT SIZE
MEASUREMENTS

13. PIXELS VS. EMS
px is an absolute unit of measurement -
px units don't scale
!
em is not an absolute unit -
it is a unit that is relative to the currently
chosen font size.

14. FONT SIZE COMPOUNDS
body
{
font-­‐size:62.5%;
}
h1
{
font-­‐size:
2.4em;
}
/*
=24px
*/
p
{
font-­‐size:
1.4em;
}
/*
=14px
*/
li
{
font-­‐size:
1.4em;
}
/*
=14px?
*/
!
li
li
{
}
!
1.4em
=
14px
BUT
14
*
1.4
=
20

15. REM == ROOT EM
The em unit is relative to the font-size of the parent,
which causes the compounding issue.
!
The rem unit is relative to the root—or the html—
element.

16. BUILDING MOBILE FIRST

17. BUILDING MOBILE FIRST
Building from Small Screen Towards Large Screen
!
Which in turn saves you from having to overwrite lots
of CSS in the long run

18. STARTING LIGHT
@media
only
screen
and
(min-­‐width
:
30em)
{
…
}

19. WHAT ABOUT MAX-WITDH?
@media
only
screen
and
(max-­‐width
:
30em)
{
…
}

20. @media
only
screen
and
(min-­‐width
:
30em)
and
(max-­‐width
:
34.375em)
{
!
/*
fine
tuning
for
certain
elements
*/
!
}
MY EXCEPTIONS

21. ORGANIZING YOUR
MEDIA QUERIES
Breakpoints don’t necessarily have to be device sizes
!
Rather set them where stuff looks good
!
Consider most commonly used devices
(Which can be quite a guessing game)

22. FLUID OR FIXED
You could se"le for fixed breakpoints…
but that’s cheating! ✌️
!
Why should definitely opt for a fluid grid

23. The Mobile Landscape

24. The Many Many
Different Flavors

26. 6 Weeks
!
=
!
!
!
!
428 Different ! Devices

28. http://opensignal.com/reports/2014/android-fragmentation/

29. LOVE MORE %
…and other relative units.
!
This way you will be able to provide be!er and more
future-proof cross device experiences, even for less
popular devices.

30. USING EM’S IN MQ’S
Let Your Breakpoints Scale with Font-Size

31. @media
only
screen
and
(min-­‐device-­‐width
:
37.5em)
{
…
}

32. 100% ZOOM IN 1024PX WIDE VIEWPORT

33. 175% ZOOM IN 1024PX WIDE VIEWPORT W/ EM BASED MQ (SAME VIEW AS IN A 320PX VIEWPORT)

34. 100% ZOOM IN A 320PX WIDE VIEWPORT

35. THE EARLIER DAYS OF
RWD
<link
rel="stylesheet"
href="css/app.css"
/>
<link
rel="stylesheet"
href="css/480.css"
/>
<link
rel="stylesheet"
href="css/768.css"
/>
<link
rel="stylesheet"
href="css/1024.css"
/>
!
OR
@import
“480.css”;
@import
“768.css”;
@import
“1024.css";

36. I PREFER ONE FILE WITH
.panel-­‐wrap
{
margin-­‐bottom:
0.5rem;
@include
media(30em)
{
padding-­‐left:
0.3125rem;
padding-­‐right:
0.3125rem;
}
@include
media(38em)
{
padding-­‐left:
0.6375rem;
padding-­‐right:
0.6375rem;
}
@include
media(50em)
{
padding-­‐left:
0.9375rem;
padding-­‐right:
0.9375rem;
}
}
INLINE MQ’S

37. IMPORTING PARTIALS
_panel.scss
_profile.scss
_cart.scss
_shame.scss
app.scss

38. SELECTORS & CHOICES

39. CLASSES VS. ID’S

40. MY SELECTOR EVOLUTION
1. ID’s & Classes all over the place
2. ID’s for main elements, classes
mostly everything else
3. ID’s only for JavaScript, classes for
everything CSS

41. SEMANTIC CLASSES
!
VS.
!
PRESENTATIONAL CLASSES

42. USE CLASS ATTRIBUTES
WITH SEMANTICS IN MIND
Choose your class names to what the
element is instead of how it looks

43. .blue-­‐box
{
background:
#51A7F9;
}

44. .blue-­‐box
{
background:
#DC0100;
}

45. .box
{
background:
#F28717;
}

46. ANOTHER ADVANTAGE OF USING
SEMANTIC CLASSES OVER
PRESENTATIONAL CLASSES
CHANGE ELEMENT
APPEARANCE WITHOUT
TOUCHING YOUR HTML

47. <div
class=“small-­‐12
medium-­‐8
large-­‐6”>
…
</div>

48. <div
class=“small-­‐12
medium-­‐8
large-­‐6”>
…
</div>
.small-­‐12
{
declaration
here
}
!
.large-­‐6
{
declaration
here
}

49. <div
class=“news-­‐item-­‐block”>
…
</div>
.news-­‐item-­‐block
{
@extend
.small-­‐12;
@extend
.large-­‐6;
}

50. <div
class=“news-­‐item-­‐block”>
…
</div>
.news-­‐item-­‐block
{
@extend
.to-­‐whatever-­‐you-­‐want;
and-­‐another-­‐property:
value;
}

51. CLASS NAMES

52. CLASS NAMING IS HARD
http://en.wikipedia.org/wiki/Macaque#mediaviewer/File:Macaca_nigra_self-portrait.jpg

53. TOOLS & METHODOLOGIES
TO SUPPORT BETTER
NAMING & STRUCTURE

54. SMACSS
SCALABLE AND MODULAR
ARCHITECTURE FOR CSS
https://www.smacss.com

55. OOCSS
OBJECT ORIENTED CSS
http://www.oocss.org

56. BEM
BLOCK, ELEMENT, MODIFIER
http://www.bem.info

57. DON’T MAKE YOUR LIFE
HARDER THAN IT NEEDS TO
BE

58. MY FAVORITE WORD:
SPECIFICITY

59. ★ Try to avoid long selector chains
★ They are painful to overwrite
★ Nest 2 or max 3 levels deep
★ Check your output file when
nesting rules

60. IF YOU NEED TO USE
!IMPORTANT TO OVERWRITE A
STYLE, YOU PROBABLY MESSED
UP SOMEWHERE ELSE !

62. DON’T WORRY ABOUT
THE SIZE OF YOUR CSS
!
RATHER CARE ABOUT
IMAGE SIZE

63. IMAGES

64. AVERAGE RESPONSIVE
SITE SIZE
~ 1.8MB
http://httparchive.org/interesting.php

65. INCREASE SINCE 2011
http://httparchive.org/interesting.php

66. IMAGES OFTEN ACCOUNT FOR
MOST OF THE DOWNLOADED
BYTES ON A PAGE.
!
OPTIMIZING IMAGES CAN
OFTEN YIELD LARGE BYTE
SAVINGS AND PERFORMANCE
IMPROVEMENTS.

67. MAKE A CALL
You have to make decisions and sacrifices sometimes.
As long as you know why you made them, it should be
alright to do so

68. LARGE OR SMALL
http://en.wikipedia.org/wiki/Tiger

69. RETINA - YES OR NO?
1x 1.5x 2x

70. TOOLS FOR IMAGE
OPTIMIZATION
h"p://addyosmani.com/blog/image-optimization-tools/

71. TOOLS & STUFF

72. CODE GUIDE
Standards for developing flexible, durable, and sustainable
HTML and CSS.
http://mdo.github.io/code-guide/

73. CHECK HTML5/CSS3
BROWSER FEATURES
http://www.caniuse.com

74. CODEKIT
STEROIDS
FOR WEB DEVELOPERS
https://incident57.com/codekit/

75. CROSS-BROWSER
TESTING
VirtualBox
!
Modern.ie
!
Browserstack.com
!
Sauce Labs
!

76. DEVICE TESTING
Adobe Edge Inspect
!
Ghostlab
!
BrowserSync!
!
!
!

77. PERFORMANCE TESTING
http://www.webpagetest.org
!
http://tools.pingdom.com/fpt/
!
https://developers.google.com/speed/pagespeed/
!
https://developer.yahoo.com/yslow/
!

78. GRUNT
JAVASCRIPT TASK
RUNNER
http://www.gruntjs.com

79. GULP
ANOTHER TASK
RUNNER
http://www.gulpjs.com

80. “RESPONSIVE WEB
DESIGN ISN’T QUITE
ONLY ABOUT FLUID
GRIDS, FLEXIBLE IMAGES
& MEDIA QUERIES”

81. THANKS!
Holger Bartel | @foobartel | Harbour Front Monthly #1 on 27/08/2014