Notes from Responsive Conf

When I went to Responsive Conf, I wanted to learn. I wanted to discover tips and tricks that I didn't know about and hear solutions that those I admired could tell me. I wasn't disappointed and eagerly jotted down notes throughout the day. A common message through the day was share and put the word out there, this is the only way that we will evolve this relatively new area of web design and really take full advantage of it. You can find my notes below:

Workflow

Sarah Parmenter - You Know Who

@Sazzy

Everyone is currently winging it.Problem with workflow. Photoshop and PSDs have become dirty words.
56% of people asked changed workflow to consider RWD
64% are integrating it
65% work to breakpoints
Disregard breakpoints, design to where the design breaks.
Doesn't just magically become beautiful! Wont suddenly work, but no one shares this side of things.
Think in Proportions, not pixels

Workflow at her agency

Content & Structure
Ux & wireframes
Design Elements / Atmosphere
Optimisation - where can we optimise images, icons etc
Physical Coding

Static visuals still have their place NOT COMPS.
The code is the deliverable, the PSDs are not
Traffic light system on content. Red ( You really dont need this ), amber (Lets talk), green ( Put it in )
http://www.crazyegg.com/ - Big part of their workflow, Visualise where your visitors click.
Ask client to sign off on content hierarchy. Does this order make sense, disregard layout.
Pattern Library. Library of all the elements. This isn't a style guide.
Asset Management. Slicy hugely recommended.

Responsive Navigation

David Bushell

@dbushell

Just go for it, if it works out the client will love it. If not, they are none the wiser
40% of traffic on his site is mobie devices other than iOS. 42% is iPhone
Screen size is not the same as view port
TNW - good site, however, doesn't scale down well. Confusing navigation. Nav changes and can't bring up same menus. Inifinite load stops you from getting to the footer nav.
Keep It Simple!
Clearlefts site is good example.
Don't hide the content, mobile sites that always show the menu first are poor.
Introduce minor break points. Feel free to change alignment of navigation at different points.

Examples of Nav -

Overlay - pops over top
Tier System
Go off Canvas - Navigation slides in from the side. Again, play around at different breakpoints
Jump to Big Footer - mobile style menu that sits in the footer. Doesn't limit space at the top of the page.

Table of Contents instead of navigation? Own Unique page.
Uni of Surrey website is a great example of good nav
Underload the global menu
Embrace the viewport
Design with affordance in mind
Interactive friction varies
Focus on discoverability
Know your content Hierarchy
Single point of navigation = Single point of failure

bit.ly/TIRWD

bit.ly/offcanvas

Cutting the Mustard

Tom Maslen - BBC

@tmaslen

BBC Browser Support Standard - out of date 2010
How do we support everything
We have no real control - run away, or face it!
Future friendly browser support in 3 steps
Stop thinking about Devices, Think in terms of browsers. Definitely should have a library of devices.

Progressive Enhancement.

Build a real simple web page. Works on as many browsers as possible. " Good Performance, is good web design " Bradd Frost
Conditionally Load JS App - only given to modern web browsers. Is Browser with giving JS Script to.
Add CSS

Only browsers that cut the mustard will get this.
Worry bout everyone and give them a core experience. But add an additional layer that gives them a more premium service if their browser supports it.
RWD is a final admission from our industry that we have no control over our users experience and what is going to be in it.

Q&A

S - Less showing to clients how it will look now in different browsers.

S - Clients are a lot more savvy than what give credit for

S - If you explain it and give them the benefit of it, 9/10 they go for it.

D - Experiment with clients, without telling them, if it works, WOO!

D - Doesn't ask for sign off to try it out.

T - Designers need to learn how front end mechanics work.

T - Its important again to get sites down to certain sizes

All - Broadband made Designers lazy! DOWNLOAD ALL THE ASSETS!

D - Search is a nice quick win over navigation

Does a website even need navigation? *Boom* MInd Blown,

For clients / users on HTML 4 browsers. Fix the width, Makes it easier.

Rather than charge extra for RWD. Do you charge extra for making look ok/pretty good, in older browsers.

Web Fonts

Richard Rutter - Clearleft

@clagnut

Stopping web fonts downloading to small screens
Show text in the fallback font until all the web fonts load
only us Webfont loader on larger screens

Asset Fonts

Josh Emerson - Clearleft

@joshje

Icon fonts
Should work at any dpi, not just @2x
Icomoon, upload SVGs get given back a font file
Symbolset

Design Systems

Laura Kalbag

@laurakalbag

How to make it look consistent across the devices?
Users expect the design to feel similar across all devices they visit site on
Get away from the idea of pixel precision
If you're good at CSS you can make it look great
Don't focus on the devices, focus on the content
We made assumptions about users and devices on nothing but the width of the viewport
Just because you are on mobile, does NOT mean you are on the go!
Design System
Break down into chunks
Components you want to keep
Components you will want to differentiate - grids, font leading, size
The content is always the same.
Deliver the SAME experience for mobile as desktop. You cannot make judgements dependent on viewports.
Typography First, core way to keep a design consistent throughout.
Base Units, leading, font size etc, all multiples of original base unit.
Grids and Layouts - Grid can't be consistent across viewports. Impossible.
Grid concept, Whats the idea behind my grid. i.e Grid based on threes. Symmetrical grids.
Shape & Form - i.e use of circles across
Colour - Consistent colour across the board
The Process
Detach design considerations from viewport widths
Designing in the browser if you can
Don't just stick to one tool. Don't stay in Photoshop. Use best tool for the job. Try a new tool a day.
Style Tiles - Some people love, some people hate.
Pattern Libraries.
Mockups and Breakpoints
Why do we mockup? Why do we have deliverables?
We want to communicate our design ideas to others. Creating a false interpretation of the deliverables. We're constraining ourselves.
Mockups are snapshots of how my designs might look at particular sizes.

What is the Future?

nobody is an expert. Some just shout a bit louder.

RWD The War has not yet been won

Elliot Jay Stocks

@ElliotJayStocks

No one has a fixed system yet.
Heart sank when read Go Cardless's post about disregarding RWD.
It should not pay attention to any particular device.
Doesn't necessarily need to take more time and cost more money - currently, it does. But only because we are still learning. But in the future we will have a better understanding.
Designers are quite set in their ways.
Get out of Photoshop - Move into the browser quicker
If you are a web designer, then you should know how to code.
Adopt RWD as an integrated process.
Electric Pulp http://electricpulp.com/ - Agency experimenting with RWD. They showed that everything went up, RWD was a positive process.
The web has always been fluid, we've just been wasting it, by enforcing fixed pixels on it.

Q&A

L- Large part of designers job is the ability to communicate and persuade

Up till now we've been faking it. A facade. We're now embracing what's there.

The A Word, Advertising.

E - right now, still about being careful with their placement. Responsive sites are starting to creep in. Ad creators starting to create mini respsonive ads. A challenge yes, but less work than crazy flash!

There is a huge opportunity in advertising space to really get on board with the Responsive Web and take advantage of it.

E - Many mobile sites, could be responsive but instead are m. .

R - Is a mobile site a mobile site, or small screen site.

R - 1st , Have you already created a mobile site? If have, optimised the content. Lets start from that and this will be the basis.

J - Real issue is that certain things have been removed from mobile site, their solution is to add a link to desktop view. This isn't good enough. The same content needs to be accessible to everyone, no matter what you are viewing on.

Reliterates that we should be charging more to support IE7 etc than to build responsive.

Communicate with clients, show them rough stuff and things that are incomplete. Showing a perfect PSD document is dangerous. The client will expect exactly that.

L - Style Tilles, these are ideas, but these could change next week. It CAN CHANGE!

All speakers only give the final thing as HTML etc, not PSDs. They don't ask for sign off on how a static jpeg / PSD looks before they start working on the dev side of things. They are working on the Dev at the same time.

Designing with consoles in mind

Anna Debenham

@anna_debenham

Designing with console users in mind, makes for better sites
Gesture & Voice, Keypads and keyboard input.
The ultimate torture test
80% of children own a console
1 in 5 children visit website on a console
Xbox 360 recently got a browser

The Anatomy of a responsive page load

Andy Hume - The Guardian

@AndyHume

content-encoding: gzip

cache-control: max-age=369609

Page Load Time

Content
Progressive enhancement
The Leftovers - Analytic tools, 3rd party tracking etc

If you don't cut the mustard you don't get web fonts
If you don't support Woff you don't get web fonts
Stores the font in local storage, so that user will never see that flash when they change again.
Performance is a key part of Responsive Design

Responsive Day Out: Whats next in StandardsLab

Bruce Lawson - Opera

@brucel

Web has always been responsive, some of us have just chosen to ignore that.
CSS Device adaptation
Can have a minimum and a maximum width.
Flex box - css-tricks.com/old-flexbot-and-new-flexbot/
Easy Vertical centering - Just works.
Re-order blocks on your page at will
Media Query 4
Pointer Events. Hardware agnostic representation of input device.
Adaptive Images
SVGs, can turn elements on and off. So things not visible at a small size, i.e small spiral will disappear.
Photos - WebP. 26% smaller in size compared to PNGs. ( Google Chrome and Opera currently support )
Background images fallback. CSS Image values and Replaced content Module Level 4.

Antiphonal Geometry

Owen Gregory - 24 Ways

@fullcreammilk

Content out - Not Canvas in
Not an unproblematic idea
Creating layout on the web has to be different, as there are no edges, there are no pages, we've made them up. - Mark Boulton
Never mind the quality, feel the width.
Book - Graphic Design The New Basics
Although varying sizes, screens are similar in that they are all rectangle. They also use same ratios.
A List Apart - The Web Aesthetic

The Edge of the Web

Paul Robert Llloyd - Clearleft

@PaulRobertLloyd

Titles of the Avengers, designed in 1963. Typical of Graphic Design in Television in that period
Designers had to adapt their designs to as best they could to work with the screens at the time.
As tech improved, started getting colour broadcasts. New opportunities for designers. Garish colours chosen as they still reproduced well on black and white television sets.
These are similar questions and answers to what we are currently trying to answer.
"The Responsive Web will be 99.9% Typography"

When is an image not an image ?

Interface, Vector SVGs, Icon Fonts
Content Imagery - Optimised bitmap - 80% Quality
Decorative - Optimised Bitmap - 60% Quality

Is it really necessary to download more data just to see a slightly higher definition image?

prlloyd.com/responsiveconf

Direction that we're heading in is less and less images in the web.

In Between

Mark Boulton

@MarkBoulton

There are no edges from what you define your layout
' We broke the web ' - Doesn't think we did. Before we 'apparently' broke it. It was all text. It was a read / write medium. The web was designed to facilitate communication. We made it comfortable.
"Everyone has a plan until they get punched in the face" - Mike Tyson
Jeremy Keith, was doing this all along. Fighting the case for fluid design.
320, 480, 768. 960, blah blah blah - Not bad, its comfortable.
Content Out
New idea of Fluid First. Its hard to shift this idea of pages. The only way is to force this discomfort, only way is to design a fluid website. Its bloody hard!
Progressive enhancement. This has been a huge feature of today.
Don't base breakpoints on common sizes
Target canvases that are most used for that project. i.e they had a client who discovered that a huge number of their customers viewed their documents on tablets.So they targeted this viewport more, common sense - Macro Breakpoints
80% of time is tweaking
20% is the big changes
There is a big push for creating pattern libraries, doing this first. Nonsense, doesn't agree with this. Getting too abstract far too soon.
It feels like a big change at the moment.
We made everything comfortable, we need to start feeling comfortable with feeling uncomfortable.

Q&A

Is responsive web design killing web design and making web design bad

MB - Bollocks *big applause*

Bad Designers make bad designs.

J - No its not! You're making boring design!

We're focusing too much on media queries. Its a very small part of RWD.

Update

Since creating this post, Jeremy Keith, has done a fantastic job of putting together all the decks from the talks as well as uploading audio. Click here to see all these, plus more as it gets uploaded.