Internal presentation for team CLEVER°FRANKE on responsive web design

1. Responsive Web Design
A basic guide for designers, by front-end developers
By Jan Hoogeveen

2. Responsive Web Design
A basic guide for designers, by front-end developers
By Jan Hoogeveen

3. “The control which designers know in the
print medium, and often desire in the web
medium, is simply a function of the
limitation of the printed page. We should
embrace the fact that the web doesn’t have
the same constraints, and design for this
flexibility.”

5. Every client has a minimum width of
960px. That’s a safe resolution.

6. We have no clue which devices there are.
We don’t know how to design for all
devices. There are no perfect tools. We all
have to learn, adapt and improve our
workflow.

7. What is RWD?
• Coined by Ethan Marcotte in May 2010
• Create an interface which works in a variety of
screen resolutions, independent of dots per inch
(retina friendly)
• Based on CSS3 Media queries & fluid design.

8. Introducing RWD

9. We don’t know which devices can
access the web. 960px is an illusion.

10. Why RWD?
• We’ll never know for sure which device, browser,
context or screen resolution your visitor will use to
browse the web.
• Do you think your site doesn’t have mobile visitors?
You’re so wrong.
• Mobile users expect the same content as the
desktop version has to offer. Don’t cripple their
User Experience.

11. How to begin with RWD?
• Learn what CSS3 has to offer. You don’t need to
script it, but you need to be aware of the
possibilities while designing.
• Learn the new elements HTML5 has to offer. This
prevents unneeded styling and developing of
widgets. Remember, custom is hard. Use standards
first. Upgrade later.

12. How to begin with RWD?
• Don’t make your canvas double sized for Retina
screens. A lot -and preferably all-of your design
will be recreated in CSS code.
• Always align your shapes to pixels. Snap
everything. There are no half-pixels.

13. RWD Method

14. Mobile First
• Begin by designing your interface for mobile
• If a solution works for mobile, there’s a good
chance it works on tablet and desktop as well.
• It’s easier to expand your interface than to shrink it.
More whitespace, more columns, bigger fonts.

15. Mobile First
Mobile first allows you to focus on the essentials.
What are the core tasks a user must access. What
content do we need? Anything else is probably visual
decoration. We are designers, not decorators.

16. Expanding your interface
You made a mobile friendly website. Great! Now
resize your browser and look for content breaking.
When does text become illegible, when do things
look funny/weird/broken? You will need to introduce
a new media query around this point.

17. How does it work
in the browser?

18. Media Queries
A media query is a breakpoint of your site where a
new layout is triggered. This breakpoint is defined by
the designer/programmer and can affect some or all
CSS classes. You can increase padding, increase
font-size, create text columns with automatic
overflow.

19. Media Queries
We add classes and styling every time we create a
new breakpoint.

20. What can we do?
• Detect features. I can see if a browser supports
SVG, webvideo, geolocation, text-shadow, CSS
animations, WebGL, etc. For a complete list see
http://modernizr.com/docs/#s2
• We can change the behavior or styling depending
on these features, but it probably takes a LOT of
work.

21. So, what do you
need to know
about:

22. Images

23. Bitmap formats
• Unclear what the best option is
• We can upscale by a factor two and let the browser
resize to 50% for normal DPI screens. (More
bandwidth, sucks on mobile)
• We wait for the W3C to figure out how to
implement responsive images. More work needed
from everyone.

24. <picture width="500" height="500">
<source media="(min-width: 45em)"
src="large.jpg">
<source media="(min-width: 18em)" src="med.jpg">
<source src="small.jpg">
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>
<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg
100w, banner-phone-HD.jpeg 100w 2x">

25. SVG (Scaleable Vector
Graphics)
• Anything you make in Illustrator or Inkscape can be
saved as SVG.
• Mobile browser understand these natively, and will
render them clean and perfect on every device,
high resolution or not.
• Be warned though, scaling an image can (and will)
produce artifacts/aliasing.

26. Interface design

27. % based design
Keep in mind that when developing with fluidity in
mind, we will use percentages a lot.

28. % based design
We will also use the default font-size as a unit of
measurement. The base font size is one em.
Considering the default font-size is 16px, 1em = 16px.
Yes. I will use em’s to assign paddings and margins.
Why? Because when I scale the font-size (larger
typo) the whole interface scales with it. Imagine
using fixed pixels for the paddings. YUCK.

29. Touch is everywhere
Buttons need to have a large clickable area. The
norm is 44 by 44px, but since the explosion of high
resolution displays we don’t even know for sure if
that’s a correct width. We could use something like
mm’s as measurement in code. But alas.

30. Touch is everywhere
• Don’t use hover states. You don’t know how the
browser will handle this event. You simply can’t rely
on this.
• iOS, Android, Desktop apps, everything behaves
differently.
• But think about it, how many times is the hover
event useful? Remember the doorknob joke?

31. Do’s and dont’s

32. Do’s
• Begin with your mobile version
• Think about how your interface elements will
change on different breakpoints.
• Work closely with your friendly neighborhood
front-end developer
• Take a look at examples. Learn from them.

33. Do’s
• Design in the browser. But this is hard. Really hard.
We still like to use tools like Illustrator and
Photoshop. There is another solution though.
• Decide in the browser. You don’t know how your
design will feel or respond unless you’ve
experienced it yourself. A quick coding session can
help a lot.

34. Dont’s
Don’t automatically assume a mobile friendly
website will suffice. Most of the time it will, but for
specific apps you will need a mobile app too. I’m
quite sure the Facebook app works a lot better than
the mobile website.

35. Dont’s
Never, and I mean never ever hide content for mobile
browser because you ran out of space. If you limit
the users’ choice, they will dislike your brand/website
immediately.

36. Frameworks

37. Frameworks
Use a responsive grid framework. Look at Twitter
Bootstrap, Reponsive golden grid system or ZURB
Foundation. These help to structure your design
flexible.

38. Examples

39. System genetics

40. 320px Navigation tab interface
Title is simple text

41. 768px
Navigation
always visible
Title is now
dynamic
Bigger font-size,
bigger spacing
Multiple
columns

42. 1200px
Font-size
increases even
more
Labels move to
side of icons

43. Responsive
Data visualization

45. Too small
when
zoomed out
Table is made
for desktop
resolution

46. Table is
rearranged with
CSS for smaller
fits.
Good font size,
simple key-value
system.
odd:even
coloring for
pattern
recognition

47. Table works on desktop, but maybe a
pie-chart can be shown on compact
views?

48. Hide table by default on compact
views. Show on tap.
Still panning
needed. Not
really
useable.

49. Hicks Design

54. http://www.hicksdesign.co.uk/

55. To sum it all up

57. The Heisenberg Principle
(but not really)
• There is no certainty. Sorry.
• Don’t strive for pixel perfect designs. Strive for
interfaces that provide easy solutions for problems
embracing fluidity.
• Usability, speed and legibility are key. You simply
can not create the perfect design for every
resolution.

58. • Never believe you have the answers. You don’t
know how your visitor is browsing your site. You
don’t know their resolution. You don’t know their
intention.
• You sure as hell don’t know a set of fixed
resolutions which are safe to design for.
The Heisenberg Principle
(but not really)

59. Remember
• Nobody knows the perfect workflow yet.
• You can’t make good decisions in your design
program.
• You will need to think about the best experience for
the interface width. You will never know the device
width.

60. TAKE THE RED
PILL

61. tldr; work closely
together, test on
your devices and
be flexible.

62. Sources:
• http://bradfrostweb.com/blog/web/responsive-
web-design-missing-the-point/
• http://mobile.smashingmagazine.com/2013/05/29/
the-state-of-responsive-web-design/
• http://alistapart.com/article/dao
• http://alistapart.com/article/responsive-web-
design

63. • http://www.w3.org/html/wg/drafts/srcset/w3c-
srcset/
• http://www.w3.org/TR/html-picture-element/
• http://css-tricks.com/responsive-data-tables/
Sources:

64. Disclaimer
This presentation is designed for internal use at
CLEVER°FRANKE. The presentation contains
content made by CLEVER°FRANKE as well as other
designers and developers and is used solely as a
quick way to discuss responsive web design.
The copyright still lies with the original authors.