Respond had a distinct theme about the structural and organisational challenges we face with the evolving definition of responsive web design. How our site performance affects the people visiting our website, our workflows, and finally how with all our changes to methodology we've lost the soul of design.
Shortcut to talks
- Responsible responsive design – Scott Jehl
- Simple responsive typography – Nabeelah Ali
- Responsive Ads – Kris Howard
- Paving the cowpaths – Simon Elvery
- Responsive input – Damien Fitzpatrick
- How to encourage your boss to respond – Peter Wilson
- Design decisions through the lens of performance – Yesenia Perez
- Should rolling your own be the only way you roll? – Ben Buchanan
- Stretching the rules – Felicity Evans
- Counting stars: creativity over predictability – Andy Clarke
Responsible Responsive design - Scott Jehl
“Access is not just a matter of empathy, access is our job”
- Our approach to inputs needs to be agnostic, we can’t really assume what the input is we need to layer interaction. An example: Voiceover fires mouse events, it’s not a question of either/or inputs, we need to have our defaults and layer on top as features are detected.
- There are four major points to responding responsively: Progressive enhancement, Defensive Design, Fault Tolerance, and Qualified Application
- With progressive enhancement: supporting newer browsers and features is harder than what came before.
- A media query is a specific way to qualify an application. Cutting the mustard is a more broad approach to qualifying.
- Access is not a matter of empathy, access is our job.If empathy isn’t your driving force there’s a business case for reach.
- Most of the world views things on a 2G edge connection even in the most developed parts of the world. Speed is another thing that broadens access. Access can be expensive and there’s a real cost in money – you can see this on What does my site cost
- Reduce framework bloat – reduce and remove dependencies where you can. Custom builds, write your own micro frameworks.
- Filament made Shoestring as 1–2kb framework with functionality based on jQuery
- Bandwidth isn’t the only performance problem, latency and distance is – that’s why CDNs matter. We need some strategies to get of the way of render blocking
- Inline our CSS, Inline JS, Inline feature detection, Inline conditional logic (like cut the mustard). Then set a cookie.
- Scott used a perceived performance case study with Wired Magazine. Wired magazine on webpage test first load was 12.5s, with these optimizations was cut to 3.9s for first load. Page size didn’t change
- HTTP/2 will change how we approach performance, with server push we won’t need to inline or concatenate files like we currently do
Simple responsive typography - Nabeelah Ali
“Readability is a science, it can be measured in a lab”
- We can improve readability on sites by applying a number of techniques
- We need to consider if the content is long or short form, its cultural context, its brand and image
- Consider sizing and proportions and fancying up your text
- Readability is a science, it can be measured in a lab
- The typical distance to phone is 30cm, distance to desktop 75cm, tablets can vary in distance
- Rob Bringhurst’s Elements of a typographic style talks about optimal line length
- Example sites: Jason Santa Maria, Medium
- Performance is important for font loading, web fonts include a huge amount of glyphs – we can font subset to cut the size, google fonts have subsetting options
- Give people a good experience regardless of how far they are
- Tricks to get better looking type: use a similar size font to the loaded font, use smart quotes, use ligatures
Responsive Ads: This is why we can’t have nice things - Kris Howard
“Making ads responsive requires a cultural shift for the advertisers”
- It would be much more cost effective to have one campaign that worked everywhere
- Ad units are fixed standard sizes, they’re comissioned and sold as those
- Fixed standard sizes solved a particular problem, because that’s how they are and were sold
- Making ads responsive requires a cultural shift for the advertisers
- The more traffic a site gets the less likely it is to get responsive
- Some solutions: native, paywall, keep it simple (small size), adaptive (swaps content out)
- Roll your own – it cost 400% more than a normal campaign when mI9 tried to do it, lack of scale killed it
- Successful examples: The Guardian, VoxMedia
Paving the cowpaths - Simon Elvery
“You can use responsive images today, the fallbacks last forever”
- Images are heavy: 1266kb on most standard webpages
- 63% of the bytes most sites use
- From 419kb in 2010 to 1266kb in 2015
- The vast majority are wasted 72% of the image bytes
- 2 major cases: resolution switching and art direction
- Order of sizes attributes matter
- You can use sizes and picture today, fallbacks last forever
- Inside picture tag must be an image anyway
- We should probably polyfill, under most circumstances
Responsive input - Damien Fitzpatrick
“When you consider all of the input methods, your user experience will be better but not just because it's responsive”
- Wordprocessors have a lot of baggage, we’re still using the same concepts from 1989 to generate content today
- Ephox contributes to TinyMCE (EditLive, TinyMCE, and Textbox.io)
- TinyMCE or CKEditor are the major contenders in the WYSIWYG space
- The more complex your UI is the more important it is to be responsive
- “Less, but better” — Dieter Rams
- Some desktop features just aren’t available on tappable devices, there isn’t parity of features like hovering etc
- Can’t detect when a IOS or android keyboard are showing and if our cursor ends up below it
- The smaller you make it the vastly less usable you make it on a text editor.
- Medium is the best example of inline text editing
- When you consider all the input methods, your UX will be better but not just because it’s responsive
How to encourage your boss to respond - Peter Wilson
“By respecting the internal sales process you're sending a clear message”
- Businesses don’t only use the mandated browser technology, we know this because we work with people who bring tablets to meetings
- To encourage your boss to go responsive, pitch your case in 5 simple steps
- Planning, proposal, pitching, demo, build it
- Convincing an external client and an internal client are a relatively similar process
- Considering the use cases: need to know this in the right language, the language of business case
- Cost/benefit, return on investment, use cases.
- Preempt the arguments against – If you think going responsive is going to increase sales work out how many sales it will need to make to make it worthwhile.
- The proposal — A narrative helps, don’t need user stories at this point – just use a hook.
- Recruit allies within the company – people who are going to help you make your argument even stronger
- Pre–recording demos helps because you can make typos and mistakes at the best of time. Sometimes you have to fake it when your prototype has bugs Don’t completely fabricate. Create a pitch deck
- Demo – you control the meeting / the room. Pre empt the questions. Answer questions you don’t think are questions
- There’s a myth that developers can’t sell. Use the internal sale like an actual sale. By respecting the internal sales process you’re sending a clear message
- I think this is important for the company and that makes it important to me.
Design decisions through the lens of performance - Yesenia Perez
“Consider the overall user experience – not just the visuals”
- So much needs to happen prior to implementation to make the site fast and lightweight, there’s also a lot that designers can do
- Designers tend to have a bad reputation when it comes to performance
- Slow heavy sites are often a result of poor planning, poor communication, and poor awareness, design is a balancing act.
- We need to find a balance with performance: Fast vs beautiful, functional vs memorable, light–weight vs on–brand
- “We need a coursel to make the design pop.” — the client
- We need to ask better questions as to how this is going to affect the overall user experience, how many requests will a carousel add?
- “Consider the overall user experience – not just the visuals”
- Sometimes we need to compromise for a better user experience
- “Good performance is good design” - Brad Frost
- Performance: how quickly you can deliver your sites and services to your audience
- What impacts performance? Images, custom web fonts, interactions, stylesheets; Ads, tracking scripts
- Why is designing for performance important? online shoppers expected pages to load in two seconds or fewer - and at three seconds a large proportion will leave, people will visit a site less often if it’s more than 250ms
- If we don’t respect our users time and bandwidth we’ll lose them
- If we’re designing sites that need to reach users across the world we need to think about global network speeds
- Make performance a project goal, show performance case studies
- Create a UX assessment: identifies strengths and weaknesses of the current user experience (usability, content, nav, IA, performance, workflow, brand)
- “The important point is to look at every decision, right through the design/build process, as something that has consequence&emdash;Mark Perkins
- How do you define a performance budget? Look to your pages,webpagetest, page speed insights. Look to your competitors, performance can provide a competitve advantage.
- Visual comparison on load tests, where the users are located Open signal
- User experience budget – “Our pages should take no more than ten seconds to load over a sub 3G connection”
- Browser experience budget – our pages should weigh no more than 400kb and make no more than 15 requests
- Establish performance as a priority, customer focused
- Stakeholder interviews: “we need to give our customers a quality experience”, how do we define a quality experience?
- “Quality is stability, performance, and reliability”
- Performance mission - “the goal if this project is to create a beautiful, flexible lightning-fast experience”
- Pizza hut were marketing performance “fast as a cheetah”
- Performance comparisons with competitors (page weight, initial load, requests)
- Performance is a marketable feature – can provide a competitive advantage
- Challenges: Branding changes during project, give options for how to spend on web fonts, which is a better translation of your brand? (describing web version of the brand)
- Unplanned client requests - “We need a carousel at the top”
- Use steps: remind, educate, find a balance
- “Remember how the goal of this project..”, “this carousel will cost 700kb”
- Load video on click instead of on page load etc.
- Teach the client how to optimize the images (image optim)
- Solution: limit web font usage
- Create the pattern library as you’re designing
- Get designs into code earlier, we won’t know how fast it’ll be until we are using it
- Grunt perfbudget, automate performance testing (Cat Farman), Test on real devices
Should rolling your own be the only way you roll? - Ben Buchanan
“Create an ecosystem, not a library”
- Responsive design is more a people problem most of the time
- The Jenga effect – when you fix something somewhere and elsewhere it breaks
- Don’t have to just make the pitch about responsive, the library gives you a chance to address a whole bunch of things
- You have to make your UI portable thats where libraries are powerful
- Performance - remove duplication, replace old libraries, allow modular loading
- Media queries are limited, significant context is often the parent
- Flexbox, whole page patterns, judicious js tweaks, polyfill, client side MVC (heaviest)
- Just dropping a library in is terrible, when Jira took on bootstrap it destroyed Jira
- All options require work, beware the ‘which library’ bikeshed
- Which library are we using vs what is our design language?
- This is all maintenance, define rules, definition sets a target - what is right and wrong?
- This makes your UI testable, a broken state and a correct state
- Create a common language for your UI
- What is the solution that will outlast fads, never let anyone put ‘old and new’ in a codebase
- Namespace, no libraries let you configure this
- One size does not fit all, you’ll probably end up forking the library
- Solve your own problems: you have a library: social impact - empower designers, engage frontenders, free backenders, reassure ops and PMs
- Create an ecosystem, not a library
Stretching the rules - Felicity Evans
“Responsive web design is just web design done right”
- Ethan defined 3 tenets - flexible grid, flexible images, media queries
- Simplicity elegance - heres why and here’s how made it easy to sell
- We elevate the screen above a lot of features, and distill it down to a pixel width
- The floorplan in architecture shows you the functional characteristics of a building, we like to flatten the structures to analyse them better
- They never give you the full picture, you can’t build something from a floorplan alone
- We can look at it based on devices, browsers, input types, screen width (physical, thumb reach), connection speed
- Widening the parameters of RWD changes our approach
- Media queries: content led breakpoints, consider vertical space/vh
- Modular: OOCSS, preprocessors, AMD js libraries, web components, mq
- Element queries (Mark J Schmidt element queries polyfill)
- We know user agents are unreliable, we need to put RESS back into the mix when considering RWD
- We need to let everyone on the team in, product managers etc, on how we respond
- Responsive web design is just web design done right
Counting stars: creativity over predictability - Andy Clarke
“The web is full of really safe designs, driven by the need for predictability or repeatability, creating the web that rarely strays beyond the conventions”
- We’ve made a web thats much more accessible, flexible and responsive to users needs
- Todays web design has dissatisfaction, for everything that we’ve gained there is something we’ve lost
- Instead of concentrating on ideas we’re losing the creative soul of our work, a soul that involves opinion, ideas, originality, and creativity.
- Our designs lack energy and spontaneity because we’re thinking too early about the consequences of failure
- The web is full of really safe designs, driven by the need for predictability or repeatability, creating the web that rarely strays beyond the conventions
- Multi-screen design is an incredible opportunity for creativity, advertising is one place we can look for the soul we’ve been missing
- The job for solving our biggest problem is as much for artists as it is for engineers
- A common perception that advertising interrupts you when you don’t want to be interrupted
- How can advertising teach us anything about a different industry?
- Advertising has given us some of the most memorable creativity we’ve seen in decades
- Could the design processes have hindered our creativity? reminded of a dystopian future where there’s so little time for an idea it’s crushed (Orwellian 1984)
- There can be a future where energy and enthusiasm can make a difference, instead of having fewer ideas, we gotta make more
- Brilliant ideas extinguished because people care about practicalities, ideas are not at odds with user experience, they’re part of it
- A point of view is an important part of design - what does my work, or what does my company stand for
- What matters is the idea, make people think and change their perceptions: there’s no magic in simply making something easy to use
- Combination of typography, colour, texture makes atmosphere or ‘feel’
- “Conformity and efficiency have a price. and that price is design” - Mark Boulton
- Creativity shouldn’t be as predictable as manufacturing
- A process is a tried and trusted method to do something we’ve done before. Whats the point of following a formula, who wants to make something ordinary?
- Bernbach (DDB) had a theory - if copywriters and art directors worked together - they’d create better work
- Today: copywriting matters more than in Ogilvy’s era. Designers either need to write copy, or work with a copywriter through all stages of the project
- Thinking about words can be a catalyst for new ideas and better strategies
- Communicating through copy is as creative a task as designing layout/colour etc we look at writing copy at the centre of the design.
- Art direction is more about strategy, design is about execution. On the web we’ve been focused more on execution.
- “Without art direction, we’re left with dry sterile experiences”
- Many agencies still structure their organisation on departmental lines
- For everything we’ve gained, we’ve lost soul
- We can make work that’s memorable, if we focus on creativity
- If we can make spaces for people with diverse skills in creative teams