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:
Sarah Parmenter - You Know Who
- 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.
- 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
Cutting the Mustard
Tom Maslen - BBC
- 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.
- 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.
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.
Richard Rutter - Clearleft
- 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
Josh Emerson - Clearleft
- Icon fonts
- Should work at any dpi, not just @2x
- Icomoon, upload SVGs get given back a font file
- 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
- 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.
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
- 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
Page Load Time
- 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
- 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.
Owen Gregory - 24 Ways
- 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
- 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?
- Direction that we're heading in is less and less images in the web.
- 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.
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.
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.