A Responsive Web Design talk for designers and developers given at the DECODED Conference held in Dublin on 6th May 2016. This talk covers: - the tooling issues facing responsive designers - the pain points facing responsive web developers - and the pitfalls in production. Read more on 'Responsive Design from problem to production' on my dev blog: http://j.mp/ResponsiveDesigners

1. Responsive Design
David Douglas @deadlyfingers

2. Responsive Design
– Designer
– Developer
– Production

3. good design

4. good problem

5. Design Process
1 – Research / investigation
2 – Design brief
3 – Generation of ideas
4 – Synthesis
5 – Final design and production

6. Make your own design process
j.mp/SteveJobsOnPaulRand

7. Don’t be a pixel pusher…

8. Be a problem solver

9. Designers
“Think developers”

10. Play with the production stuff!
https://getbootstrap.com/examples/grid/

11. Choose your weapon
Affinity Designer Sketch Experience DesignIllustratorPhotoshop
PIXEL VECTOR

12. Design tool downfalls
– Design for print
– Static canvas size
– Bitmaps don’t scale

18. Developers
“Think designers”

19. Responsive design is a live art

20. Responsive web kit
GRID BUILDDESIGN PREVIEW
Bootstrap GulpSass BrowserSyncPolymer
UI KIT

21. Package management
npm install && bower install

22. Bootstrap 3 ‘xs’ Grid (phone)
SASS
@mixin media-xs() {
@media (max-width: 767px) {
@content;
}
}

23. Bootstrap 3 ‘sm’ Grid (tablet)
SASS
@mixin media-sm() {
@media (min-width: 768px) {
@content;
}
}

24. Bootstrap 3 ‘md’ Grid (laptop)
SASS
@mixin media-md() {
@media (min-width: 992px) {
@content;
}
}

25. Bootstrap 3 ‘lg’ Grid (desktop)
SASS
@mixin media-lg() {
@media (min-width: 1200px) {
@content;
}
}

26. @2x Retina and @3x HD Retina
SASS
@mixin media-2x() {
@media (min-resolution: 144dpi), (min-device-pixel-ratio: 1.25), (-webkit-min-device-pixel-ratio: 2) {
@content;
}
}
@mixin media-3x() {
@media (min-resolution: 288dpi), (min-device-pixel-ratio: 2.25), (-webkit-min-device-pixel-ratio: 3) {
@content;
}
}

27. Image tiles
SASS
@mixin bg-position($row, $col, $width, $height) {
background-position: (-$col * $width) (-$row * $height);
}
@mixin bg-size($rows, $cols, $width, $height) {
background-size: ($cols * $width) ($rows * $height);
}
Tip: For monochrome icons consider using font glyphs – icomoon.io

28. Crush them!
ImageOptim

29. Web preview / deployment
Azure App Services
+
Local Git

31. Setup ‘dist’ build for Azure Websites
Commands
gulp build
cd dist
git init
git add -A *
git commit -m "dist"
git remote add azure
https://USER@APPNAME.scm.azurewebsites.net:443/APPNAME.git

32. Upload ‘dist’ build to Azure Websites
Commands
git push azure master
open http://APPNAME.azurewebsites.net

33. Web app distribution for
Tip: Cordova Asset Generator – j.mp/CordovaAssets

34. Turbo WebKit web view for iOS
config.xml
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine"/>
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
cordova plugin add cordova-plugin-wkwebview-engine --save

35. Web view behaviours
bounce effect
click delay
global user selection
long tap magnifying glass
double tap to zoom

36. App-ify your config.xml
j.mp/CordovaConfig

37. Apps don’t bounce!
config.xml
<preference name="DisallowOverscroll" value="true" />

38. Apps don’t zoom!
config.xml
<preference name="EnableViewportScale" value="true" />
index.html
<meta name='viewport' content='width=device-width, initial-
scale=1, user-scalable=no' />

39. Apps shouldn’t be possessed
by Sherlock Holmes!
config.xml
<preference name="Suppresses3DTouchGesture" value="true" />

40. Apps don’t select text in buttons!
CSS
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}

41. E2E App Testing
Appium

42. Responsive Design for Designers
– Understand the dynamic grid to design responsively
– 2 designs that work as a single responsive design
– Use vector-based design tools

43. Responsive Design for Developers
– Understanding the design grid to merge separated
designs
– Responsive design with multiple device testing and live
reloading
– Web kit for responsive design

44. Production
– App-ify web view behaviours
– WKWebView for iOS web app

45. Attributions
• Android is a trademark of Google Inc.
• The Android robot is reproduced or modified from work created
and shared by Google and used according to terms described
in the Creative Commons 3.0 Attribution License
http://creativecommons.org/licenses/by/3.0/

46. j.mp/ResponsiveDesigners
Questions? @deadlyfingers