Responsive Design

What is responsive design?

• Adapting your site to match different screen sizes
• Having one site to match many devices
• Making use of progressive enhancement and media queries
• Allowing for a variety of pixel densities

Expect every element to scale

• From the beginning don't assume things to remain the same
• Think of each element as being responsive indivually
• Define max-widths, max-heights, and line-heights as contingencies.
• Think about your padding and margins for each element.
• Try to build a collection of elements that fit together.

The Design process

• I work desktop first
• Desktop site design is more comfortable and creative
• Mobile implementations are limited
• Establish a design language for the site
• Apply the same design language at various scales.
• Develop in the browser and keep talking.

CSS Columns

• Allows control of the measure of text
• Falls back nicely
• Provides an alternative flow to a document
• Try to avoid columns becoming too long!

use display inline-block

• Avoids floats
• Can be centered/aligned easily
• Strightforward markup
• Set them to block on the smallest size
• Assign vertical-align for consistency
• Easily nest elements without height worries
• The whitespace issue...

use background images

• More flexible than img tags
• allows you to scale with css + media queries
• background size:cover;
• background-position:center;
• Well supported and easily falls back.
• Sits well with modernizr

use semantic grouping

• Don't just group by layout
• Containers can be ignored at some sizes
• Grouping semantically helps to order things by importance not location

display tablerow/cell

• Sometimes non tabular data needs to be in a grid
• display:table/table-cell; scale nicely
• Allows elements to be tables in some views but not in others
• More semantically accurate than tables, sometimes.

Whitespace

• Maintaining a consistent scale or measure of whitespace throughout
• Allow padding/margins to scale as your UI does.
• Whitespace is a luxury on mobile, show more content.
• Does that image provide information or decoration?

Javascript

• Javascript runs everywhere
• It doesn't always need to.
• Fiddly show/hide UI breaks on mobile
• use window.resize events to activate/deactivate js.
• use window.innerWidth to work out what size your screen is.
• CSS transitions/transforms are far more performant.
• Most mobile devices have modern browsers.

var whizzy;
var measure = function(){
  if(window.innerWidth > 800 && whizzy === false){
    console.log('whizzy js');
    whizzy = true;
  }
  if(window.innerWidth < 800 && whizzy){
    console.log('no whizzy js');
    whizzy = false;
  }
};

window.addEventListener('resize',measure, false);
window.addEventListener('load',measure, false);

Retina Displays

• Not all pixels are equal!
• Use CSS for as much as possible.
• Use vectors for everything else.
• If you need that jpg, use css scaling or @2x notation
• There are media queries but i havent used them.
• Retina JS seems good.

Text Layouts

• Responsive typography is a challenge
• you might have to let widows/ orphans happen.
• CMS sites have ruined designer's type for years
• Avoid <br> tags, they break lines.
• Some people use ems, I can't think in them, they seem clever though!
• Smaller screen does not mean smaller font, don't make people squint.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS Before/After

• Create pseudo elements
• Ideal for creative flourishes
• Not real markup, are easily negated.
• easily controlled via CSS

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Media Queries

• Conditional CSS rules.
• Not just for specific sizes
• Can be nested or inherited.
• I use lots of them
• I decide the largest and smallest sizes, respond to everything inbetween.

@media all and (max-width:320px){

}

@media all and (min-width:800px){

}

@media all and (min-width:800px) and (max-width:810px){

}

Obvious Questions

Why not mobile first?

People still think in terms of the desktop, its just easier. There are less variants in mobile layouts than desktop ones. I’ve just found it easier overall!

Why not a framework?

I find frameworks hard to fix, I find them hard to work out just whats going on. They are fine as a starting point or for projects that have no exceptions. I have found most projects I come accross have exceptions pretty early on.

Why no float:left;?

I find floats are a horrible hack, they cause extra thinking to happen within a page when it’s not needed. HTML has a natural vertical flow in place, using a technique like inline-block allows you describe other elements like an image, it fits in the flow of the document. Floats require resetting and rethinking when used for layout.