“responsive is the way the web should be” there, i said it quotable
• one interface fits all• all web capable devices• optimized user experience at all times wait, what?
• one interface fits all (website, app...)• all web capable devices• optimized user experience at all times wait, what?
• let’s take a look at a live example http://playground.thesedays.com/responsive in action
• depending on the screen width an appropriate version gets served awesome
• discrimination sucks• no standard in display sizes• smartphone sales will surpass worldwide pc sales by the end of 2011• easier & faster maintenance• much lower cost• user agent detection is unreliable and evolves too fast why
• will we need a 5 times bigger budget?• will we need 5 times more time?• do all websites need to be responsive from now on? in general wrap up
• let’s make a couple of things clear• make a distinction between design and layout• 960 px is so nineties. get this
• how are we going to achieve this?• through a combination of ‘breakpoints’ and scaling what do we do?
• the ‘breakpoints’ are actually called mediaqueries• we’ll need at least 4 layouts• think of max as: everything below• think of min as: everything above• think of max and min as: everything between practical
max 479 px (smartphones portrait) numbers don’t lie
max 767 px (smartphones landscape) numbers don’t lie
max 1023 px (tablets portrait) numbers don’t lie
DESIGN• sorry to say 4 isn’t enough• max 479 px (smartphones portrait)• min 480 px and max 767 px (smartphones landscape)• min 768 px and max 1023 px (tablets portrait)• min 1024 px and max 1280 px(tablets landscape en other devices)• min 1281 px and max 1439 px• min 1440 px and max 1919 px• min 1920 px
DESIGN• max 479 px (smartphones portrait)• min 480 px and max 767 px (smartphones landscape)• min 768 px and max 1023 px (tablets portrait)• min 1024 px and max 1280 px (tablets landscape en other devices)• min 1281 px and max 1439 px (laptops, dekstops)• min 1440 px and max 1919 px (pc’s, tv’s)• min 1920 px (HD screens) that’s more like it
• it’s not as bad as it seems• there might not be a need to make 7 different designs• remember the breakpoints, and the scaling• same layout, scale up or down without redesigning not so bad
1. sketches2. information architecture3. visual mockups4. start design5. prototype layout 1. see how it behaves on screens and devices 2. if it’s not what’s expected, revise mockups, repeat layout6. implement design cycle
• semantics• appcache• use field types (url, phone, email...)• don’t stop there html5
• use mediaqueries• split stylesheets• take advantage of less or sass• remember all vendor prefixes• try out flexbox system• if layout changes use multicolumn• use gradients, borders & shadows instead of images• make your images responsive and adaptive css3
• smartphone screen resolutions exceed those of computers• amount of resources and file size• internet connection type & speed• screen height isn’t taken into account responsive problems
• better compatibility• support for DPI• lots of happy web users future