Responsive web design - or just web design?
Upcoming SlideShare
Loading in...5
×
 

Responsive web design - or just web design?

on

  • 937 views

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. ...

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.

Statistics

Views

Total Views
937
Views on SlideShare
791
Embed Views
146

Actions

Likes
4
Downloads
47
Comments
0

4 Embeds 146

http://blog.templatemonster.com 85
http://www.wannabfound.com 25
http://bchodge.com 21
https://twitter.com 15

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive web design - or just web design? Responsive web design - or just web design? Presentation Transcript

  • Responsive web design
  • Mobile matters
  • Global traffic share from mobile devices 18 % 12 % 6 % 0 % 2008 Q4 gs.statcounter.com 2010 Q1 2011 Q2 2012 Q3 2013 Q3
  • pureawesomeness.com
  • m.pureawesomeness.com
  • 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
  • Responsive web design
  • Adaptive web design
  • Best practice web design
  • 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
  • Visual designer UX designer Developer
  • HTML + CSS
  • Click
  • Tap
  • 44px
  • delay: 300ms
  • fastclick.js
  • Images
  • PNG
  • JPEG
  • Retina
  • Quality 80 29 kB 325x225 px Low Hi 650x450 px 27 kB Quality 30
  • PNG
  • SVG
  • Scalable Vector Graphics
  • PNG SVG K ittyshop
  • 3 kB PNG SVG 1 kB Kittysh op
  • 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
  • 768px 1280px 320px 568px
  • 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
  • Email
  • claus.stadel@gmail.com
  • Email
  • Email
  • Mobile first Performance by design Bye bye Photoshop. Hello HTML + CSS. 44x44 px links with fastclick.js Replace PNGs with JPEGs and SVGs Content based breakpoints Test on real devices
  • Have fun and make something cool
  • claus.stadel@gmail.com @clausstadel clausstadel.com