responsive web design - or just web design?
Post on 17-Oct-2014
910 views
DESCRIPTION
My talk from Digital Marketing 2013 (http://dm13.dk). Making a fluid layout with Responsive web design is just a small part of creating a design, that works and looks stunningly across all devices. Good, modern web design is about so much more. It's about getting rid of clutter and unnecessary content, about optimized images for better performance, about changing the way you work and the tools you use, and a lot more.TRANSCRIPT
Responsive web design
Mobile matters
Global traffic share from mobile devices
0 %
6 %
12 %
18 %
2008 Q4 2010 Q1 2011 Q2 2012 Q3 2013 Q3
gs.statcounter.com
pureawesomeness.com
pureawesomeness.comm.
77% of mobile Google searches take place at home or work
Google/Nielsen Life360 Mobile Search Moments Q4 2012
Whether you like it or not, if you're a web designer, you're also a mobile web designer.
Brad Frost
web designResponsive
web designAdaptive
web designBest practice
Web design
UX of the modern web
Learning by doing
Introducing multiple content types further down the page requires users to go on a scavenger hunt to find them.
Brad Frost
Retrofitting
Mobile first
Your website is this wide
Less is never less enough
Where am I and where can I go?
What can I do on this page?
What will I get if I scroll?
Where am I and where can I go?
What can I do on this page?
What will I get if I scroll?
Where am I and where can I go?
What can I do on this page?
What will I get if I scroll?
Lists Back in time Immersion
Performance by design
If your website is 15MB it’s not HTML5, it’s stupid.
Christian Heilmann
WiFi
3G
Building the damn thing
UX designer Visual designer Developer
UX designer
Visual designer
Developer
HTML + CSS
Click
Tap
44px
delay: 300ms
fastclick.js
Images
PNG
JPEG
Retina
Low
Hi
325x225 px
650x450 px
29 kBQuality 80
Quality 3027 kB
PNG
SVG
Scalable Vector Graphics
Kittyshop
PNG
SVG
Kittyshop
PNG
SVG
3 kB
1 kB
Tables
Tables are a hack
body {font-size: 16px;
}
I think there is a profound and enduring beauty in simplicity. In clarity. In efficiency. True simplicity is derived from so much more than just the absence of clutter and ornamentation. It’s about bringing order to complexity.
Flat is better
.nifty-box {border-radius: 1em;box-shadow: 0 0 1em black;background: url(‘pattern.png’);
}
Click me
Click me
Edge Relflow
320px
568px
768px
1280px
Deviceagnostic
Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!
Stephen Hay
Your content defines your breakpoints
Test on real devices
Test on really old devices
Edge Inspect
Respect the browser Don’t do stupid shit
Mobile firstPerformance by designBye bye Photoshop. Hello HTML + CSS.44x44 px links with fastclick.jsReplace PNGs with JPEGs and SVGsContent based breakpointsTest on real devices
Have fun and make something cool
