A presentation that was held by Aleksandra Hristov as a guest lecturer during the class of "Advanced Web Design" at the Faculty of computer science and engineering. The presentation was held as part of the regular studies during the faculty program of computer science. The point was to give an overview on responsive design: what it is, how it can be used and how it applies in the industry.

1. ALEKSANDRA HRISTOV | @alexhris
Advanced Web Design @ FINKI | 11 Movember 2014
RWD

2. http://etc.ch/q8zS

4. SOFTWARE > WEB
1024x768

5. RESPONSIVE
VS.
ADAPTIVE
… progressive enhancement…

6. TECHNIQUES

7. 1 HTML
1+ CSS

8. PLAN
Order (no horizontal scrollbar)
DESIGN
Elements (not layouts)

12. • desktop 3 columns
• tablets 2 columns
• phones 1 column
GRID
(example)

13. FLUID
LAYOUT

14. • define in relative size (%)
• adapt to viewport/container
• content fits screen (narrowed)

15. max-width & min-height
body {max-width: 978px;}
.boxout {min-height: 200px;}

16. .column {
float: left;
margin-right: 2%;
width: 32%;
}
.column.last {
margin-right: 0;
}

17. OLD news
+
CSS3 media queries
=

18. FRAMEWORK
as BASIS
Bootstrap

19. <div class="container-fluid">
<div class="row">
<div class=“col-xs-4”></div>
<div class=“col-xs-8”></div>
</div>
</div>

20. MEDIA QUERIES

21. • min/max-width/height;
• orientation: landscape/portrait;
• device-aspect-ratio:16/9;

22. @media screen and (min-width:400px)
and (max-width:800px) { ... }

23. <meta
name=“ viewport "
content=“ width=device-width ,
initial-scale=1.0 ,
minimum-scale=1.0 ">

24. Worth targeting:
• 978px – desktop and large tablets
maximum page width
• 600px – tablets
Kindle Fire and other 7” tablets
• 480px – smartphones
one-column layout and mobile specific navigation
• @media only screen and (device-width: 768px) – iPad
useful for iPad specific fixes
body {
min-width: 320px;
}

25. COMPROMISE
UX

26. img, iframe {
max-width: 100%;
box-sizing: border-box;
}
.container {overflow: hidden;}

33. CUSTOMIZATION
UI

37. THINK!
MOBILE

38. @media screen and (max-width: 480px) {
div, li {
display: block;
width: 100%;
float: none;
}
}

42. @media screen and (max-width: 480px) {
.optional {
display: none;
}
}
x

43. RES
PON
SIVE
IMAGES

45. •Using max-width:100%;
•or for IE - scripts (imgsizer.js)
•Flex slider for galleries
•(including touch & swipe gestures)
•Scripts

48. •
•
img {width: 200px;}
•

50. <img srcset=“small.jpg 1x, medium.jpg 2x"
src="small.jpg"
alt="A rad wolf" />
medium.jpg(640 x 480) small.jpg(320 x 240)
device-pixel-ratio

51. large.jpg (1024x768) medium.jpg(640 x 480) small.jpg(320 x 240)
<img srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 36em) 33.3vw,
100vw"
src="small.jpg"
alt="A rad wolf" />
Fluid+variable sized

52. large.jpg (1024x768) medium.jpg(640 x 480) small.jpg(320 x 240)
cropped-small.jpg (96 × 96 pixels) cropped-large.jpg (192 × 192 pixels)
<picture>
<source media="(min-width: 36em)"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="33.3vw" />
<source srcset="cropped-large.jpg 2x,
cropped-small.jpg 1x" />
<img src="small.jpg"
alt="A rad wolf" />
</picture>
Art direction

54. logo.svg logo.png
<picture>
<source type="image/svg" src="logo.svg" />
<source type="image/png" src="logo.png" />
<img src="logo.gif"
alt="RadWolf, Inc." />
</picture>
Type-support

55. FONT ICONS
&
SVG

60. That’s not all folks!
There’s also…

61. Content
Typography
Navigation
Tables, forms…
Design patterns
Advertising
Newsletters
…..
RESPONSIVE:

62. RECYCLE

63. • Skeleton (boilerplate)
• Twitter bootstrap
• Zurb Foundation
• Basic CMS themes
• Skeleton (boilerplate)
• Twitter bootstrap
• Zurb Foundation
• Basic CMS themes

65. PERFORMANCE

66. • Optimize pictures
• Font icons / SVG (image sprites)
• Minimize CSS/Js
• Compress in gzip (server-side)
• Check 1st byte time
•

69. CODING AND BROWSER SUPPORT

70. • Pretty web design is nothing without good HTML(5)/CSS(3)
• Web designers shouldn’t stop at “Photoshop”
• “MOBILE FIRST” methodology
We should provide high tech quality, well thought of, user
friendly and useful websites

71. • screen sizes
• resolutions
• way of interaction (mouse, touch, movement, voice..)
• HTML5 semantics (input type="email" / tel / url / number)
• Remove address bar

72. BROWSER SUPPORT
• HTML5/CSS3 - standard by 2022 (2014)
• Not all users will have the same experience
• Media queries won’t work for the currently 30% of browsers
(IE8 and below)
• Mobile browsers are up to date
• iOS Safari, Android browser, IE Mobile, Opera Mobile/Mini
• Desktop browsers are ok since IE9 on
• Chrome, Firefox, IE9, Opera, Safari

73. THANK YOU!
any other questions?
aleksandra.hristov@netcetera.com
@alexhris