Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Design
David Douglas @deadlyfingers
Responsive Design
– Designer
– Developer
– Production
good design
good problem
Design Process
1 – Research / investigation
2 – Design brief
3 – Generation of ideas
4 – Synthesis
5 – Final design and pr...
Make your own design process
j.mp/SteveJobsOnPaulRand
Don’t be a pixel pusher…
Be a problem solver
Designers
“Think developers”
Play with the production stuff!
https://getbootstrap.com/examples/grid/
Choose your weapon
Affinity Designer Sketch Experience DesignIllustratorPhotoshop
PIXEL VECTOR
Design tool downfalls
– Design for print
– Static canvas size
– Bitmaps don’t scale
Developers
“Think designers”
Responsive design is a live art
Responsive web kit
GRID BUILDDESIGN PREVIEW
Bootstrap GulpSass BrowserSyncPolymer
UI KIT
Package management
npm install && bower install
Bootstrap 3 ‘xs’ Grid (phone)
SASS
@mixin media-xs() {
@media (max-width: 767px) {
@content;
}
}
Bootstrap 3 ‘sm’ Grid (tablet)
SASS
@mixin media-sm() {
@media (min-width: 768px) {
@content;
}
}
Bootstrap 3 ‘md’ Grid (laptop)
SASS
@mixin media-md() {
@media (min-width: 992px) {
@content;
}
}
Bootstrap 3 ‘lg’ Grid (desktop)
SASS
@mixin media-lg() {
@media (min-width: 1200px) {
@content;
}
}
@2x Retina and @3x HD Retina
SASS
@mixin media-2x() {
@media (min-resolution: 144dpi), (min-device-pixel-ratio: 1.25), (-w...
Image tiles
SASS
@mixin bg-position($row, $col, $width, $height) {
background-position: (-$col * $width) (-$row * $height)...
Crush them!
ImageOptim
Web preview / deployment
Azure App Services
+
Local Git
Setup ‘dist’ build for Azure Websites
Commands
gulp build
cd dist
git init
git add -A *
git commit -m "dist"
git remote ad...
Upload ‘dist’ build to Azure Websites
Commands
git push azure master
open http://APPNAME.azurewebsites.net
Web app distribution for
Tip: Cordova Asset Generator – j.mp/CordovaAssets
Turbo WebKit web view for iOS
config.xml
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebView...
Web view behaviours
bounce effect
click delay
global user selection
long tap magnifying glass
double tap to zoom
App-ify your config.xml
j.mp/CordovaConfig
Apps don’t bounce!
config.xml
<preference name="DisallowOverscroll" value="true" />
Apps don’t zoom!
config.xml
<preference name="EnableViewportScale" value="true" />
index.html
<meta name='viewport' conten...
Apps shouldn’t be possessed
by Sherlock Holmes!
config.xml
<preference name="Suppresses3DTouchGesture" value="true" />
Apps don’t select text in buttons!
CSS
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: no...
E2E App Testing
Appium
Responsive Design for Designers
– Understand the dynamic grid to design responsively
– 2 designs that work as a single res...
Responsive Design for Developers
– Understanding the design grid to merge separated
designs
– Responsive design with multi...
Production
– App-ify web view behaviours
– WKWebView for iOS web app
Attributions
• Android is a trademark of Google Inc.
• The Android robot is reproduced or modified from work created
and s...
j.mp/ResponsiveDesigners
Questions? @deadlyfingers
Responsive Design from problem to production
Responsive Design from problem to production
Responsive Design from problem to production
Responsive Design from problem to production
Responsive Design from problem to production
Responsive Design from problem to production
Upcoming SlideShare
Loading in …5
×

Responsive Design from problem to production

458 views

Published on

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

Published in: Design
  • “Responsive Design from problem to production” There are so many devices running different platforms, screens sizes and resolutions (eg. ldpi mdpi tvdpi hdpi xhdpi xxhdpi) Responsive web design was originally defined by Ethan Marcotte in A List Apart (May 25, 2010) as the way forward to address the needs of the users and the devices they're using.  http://alistapart.com/article/responsive-web-design/ There has been a great number of resources available dealing with the technical aspects of Responsive Web Design (RWD), but few encompass the entire process from design to development and production… Also despite ‘Responsive Design’ being almost 6 years on (this talk was held 6th May 2016 at DECODED conference) there are still a number of limitations with Responsive Design as a process that causes issues with designer and developer workflow – especially if you are unaware of where the problems lie.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Responsive Design from problem to production

  1. 1. Responsive Design David Douglas @deadlyfingers
  2. 2. Responsive Design – Designer – Developer – Production
  3. 3. good design
  4. 4. good problem
  5. 5. Design Process 1 – Research / investigation 2 – Design brief 3 – Generation of ideas 4 – Synthesis 5 – Final design and production
  6. 6. Make your own design process j.mp/SteveJobsOnPaulRand
  7. 7. Don’t be a pixel pusher…
  8. 8. Be a problem solver
  9. 9. Designers “Think developers”
  10. 10. Play with the production stuff! https://getbootstrap.com/examples/grid/
  11. 11. Choose your weapon Affinity Designer Sketch Experience DesignIllustratorPhotoshop PIXEL VECTOR
  12. 12. Design tool downfalls – Design for print – Static canvas size – Bitmaps don’t scale
  13. 13. Developers “Think designers”
  14. 14. Responsive design is a live art
  15. 15. Responsive web kit GRID BUILDDESIGN PREVIEW Bootstrap GulpSass BrowserSyncPolymer UI KIT
  16. 16. Package management npm install && bower install
  17. 17. Bootstrap 3 ‘xs’ Grid (phone) SASS @mixin media-xs() { @media (max-width: 767px) { @content; } }
  18. 18. Bootstrap 3 ‘sm’ Grid (tablet) SASS @mixin media-sm() { @media (min-width: 768px) { @content; } }
  19. 19. Bootstrap 3 ‘md’ Grid (laptop) SASS @mixin media-md() { @media (min-width: 992px) { @content; } }
  20. 20. Bootstrap 3 ‘lg’ Grid (desktop) SASS @mixin media-lg() { @media (min-width: 1200px) { @content; } }
  21. 21. @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; } }
  22. 22. 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
  23. 23. Crush them! ImageOptim
  24. 24. Web preview / deployment Azure App Services + Local Git
  25. 25. 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
  26. 26. Upload ‘dist’ build to Azure Websites Commands git push azure master open http://APPNAME.azurewebsites.net
  27. 27. Web app distribution for Tip: Cordova Asset Generator – j.mp/CordovaAssets
  28. 28. 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
  29. 29. Web view behaviours bounce effect click delay global user selection long tap magnifying glass double tap to zoom
  30. 30. App-ify your config.xml j.mp/CordovaConfig
  31. 31. Apps don’t bounce! config.xml <preference name="DisallowOverscroll" value="true" />
  32. 32. 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' />
  33. 33. Apps shouldn’t be possessed by Sherlock Holmes! config.xml <preference name="Suppresses3DTouchGesture" value="true" />
  34. 34. 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; }
  35. 35. E2E App Testing Appium
  36. 36. 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
  37. 37. 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
  38. 38. Production – App-ify web view behaviours – WKWebView for iOS web app
  39. 39. 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/
  40. 40. j.mp/ResponsiveDesigners Questions? @deadlyfingers

×