3. “Targets a specific experience but makes
allowances for smaller devices” - ZURB
MOBILE LAST
GRACEFUL DEGRADATION
4. Start your design with a single column layout.
One column forces you to focus only on the
most essential goals of your project.
Consider the mobile context when deciding
which features to include and exclude.
MOBILE FIRST
PROGRESSIVE ENHANCEMENT
5. Don’t design mobile for a specific device
(e.g. iPhone style)
Design for features not for screens
PROTIPS
12. Takes code written in the
preprocessed language and then
converts it into standard CSS
CSS PRE-PROCESSOR
13. It saves a lot of time because it makes your
CSS easier to maintain.
It allows you to write less redundant code
by using variables and functions.
WHY TO USE ONE
30. Don’t hardcode your sizes!
Use variables instead to make scaling easier.
PROTIP
31. var margin = {top: 10, left: 10, bottom: 10, right: 10}
, width = parseInt(d3.select('#map').style('width'))
, width = width - margin.left - margin.right
, mapRatio = .5
, height = width * mapRatio;
This gets the container width of the graph
In this case #map is the container div
33. var margin = {top: 10, left: 10, bottom: 10, right: 10}
, width = parseInt(d3.select('#map').style('width'))
, width = width - margin.left - margin.right
, mapRatio = .5
, height = width * mapRatio;
Adjust the height relative to the size of the width
34. var projection = d3.geo.albersUsa()
.scale(width)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
Use the width variable to set the scale
43. d3.chart is a small framework that allows one to
define reusable charts that are repeatable,
configurable, extensible and composable
http://misoproject.com/d3-chart/
48. Gabriel Florit creates data visualizations at the Boston
Globe, and gave a talk about the surprising difficulties of
bringing the principles of responsive design to data viz at
the OpenVis Conference.
https://www.youtube.com/watch?v=BrmwjVdaxMM