CSS Conf Au 2015 Day 2

- 5 min read

This is the second part of my CSS Conf Australia 2015 notes featuring speakers from the second day.

Shortcut to talks

  1. Building better interfaces with SVG - Sara Soueidan
  2. Efficient Web Type, c. 1556 - Kenneth Ormandy
  3. Invisible animation - Steven Fabre
  4. TBA - Claudina Sarahe
  5. A CSS Eulogy - Michael Riethmuller
  6. Clean and Simple - Justin Oullette
  7. Moving towards web components - Andrew Betts
  8. Open Source design: A call to arms - Una Kravets

Building better interfaces with SVG - Sara Soueidan

“Don't try to bend the box model, use SVG instead”
– Sara Soueidan
  • SVG is awesome! Browser support is pretty good, there even good fallbacks for IE8
  • Advantages and limitations of an image format, and advantages and limitations of a document format
  • Spec editors will listen if you create a good use case that you can convince them with
  • Viewbox allows you to specify which parts of the SVG you want to show
  • Example of spec editor request: Proposal for viewbox as a css property
  • There are some cases where CSS does give us more flexibility, such as CSS animations vs SMIL SVG animations
  • CSS only images? Use SVG instead.
  • CSS Shapes vs SVG Shapes: CSS Shapes are fake content, they’re just a div styled into a shape, SVG shapes are real content
  • SVG Better for arbitrarily-shaped UI components like radial menus
  • The CSS way is really complicated and involves a lot of skewing and unskewing. With SVG You just need to define some points and arcs.
  • Don’t try to bend the box model, use SVG instead.
  • Created GUI tool: Circulus svg
  • Form elements - checkbox. The CSS way doesn’t let you do much animation.
  • SVG means you don’t have to use an image sprite, so less HTTP requests.
  • SVG animating paths is one shape to another shape. It allows us to create amazing UIs
  • Graphical text effects
  • Using CSS Masks we can apply a nice masked text and allow texture. With SVG we have the ability to clip background to texts.
  • Defs aren’t rendered on the screen, using the fill property we can apply the linear gradient we’ve defined before
  • We can also add masks to apply text effects in SVG. You can even reference a gif inside the mask of a text.
  • Don’t use CSS for this. SVG text is fully accessible, searchable, selectable and semantic.
  • Creative motion effects (with filters)
  • SVG allows you to take the output of one filter, and use it as an input to another filter
  • The goo effect
  • Other effects like the Motion blur, and distressed text - Lucas Beber
  • Motion a long a path in CSS is in editor’s draft with Adobe and Google
  • Icon systems: Use SVG instead
  • SVG Icons: styleable, infinitely scalable, easier size control, interactive and animatable, more semantic, different embedding and fallback techniques
  • (In answer to a question about Opera Mini downloading Icon Fonts) “We don’t download fonts; icons are what svg is for” - Bruce Lawson
  • Accessible data visualisation and charts
  • The contents of a Canvas is not accessible, if you’re going to cater for others you’re going to have to provide fallback content.
  • Canvas: How would the screen reader know what content you’re interacting with. It’s a lot of work to try and make accessible, requires 2 sets of content
  • SVG won’t look pixellated at scale, Canvas will.
  • D3.JS is the most popular library for this
  • Animated diagrams.
  • SVG is so much easier to work with, in the case of typos, it’s much easier to fix since it’s a document
  • Jake Archibald reused his SVGs throughout his page which allowed him to duplicate without bloat

Efficient Web Type, c. 1556 - Kenneth Ormandy

“Whether you know it or not, you probably are a typographer”
– Kenneth Ormandy
  • Whether you know it or not, you probably are a typographer
  • Designers, developers, anyone using a word processor is setting type somehow
  • How might a text be received and read more efficiently?
  • Process, prospect, precedence
  • Haultin’s challenges: Designing the bible, how might i make these books smaller?
  • Designed the first french language pocket bible
  • The adoption of font formats like woff have been incredibly rapid
  • in 2009, the biggest challenge with woff was adoption
  • Huge increase from 1% using woff in 2010 to 50% at the beginning of this year
  • Open sans is now more common that Lucida grande (a web safe font)
  • Open sans font views is biggest than youtube views, twitter views. Chill out with the open sans
  • We’ve adopted performance problems, subsetting is often the way to answer this.
  • Normalize typography
  • Alternate glyphs on script type
  • Browser inconsistencies are less of a problem than certain features subset out by default -More and more readers are coming online and wanting to read type in their own language/voice
  • Matthew Carter, Designer of Georgia and Verdana spoke about challenges of efficient type in the 80s.
  • WOFF2 refining the implementation of WOFF. Brotli compression algorithm
  • Huge improvement for typekit and fonts.com going to woff 2
  • a familiar interface, no changes to the CSS syntax
  • WOFF2 can be supplied before WOFF in declaration and it will fall back if the browser doesn’t support WOFF2
  • If you’re using Google fonts you’re probably already using WOFF2
  • Check your licensing, say hello to the teams and try to get them to generate your WOFF2 fonts for you.
  • Fallbacks are built-in so no excuse to not use them now.
  • Don’t bother base64 encoding, dont use the ‘css only effect’, use the javascript option that will probably be using webfontloader maintained by bram stein
  • Web font loader allows us to load fonts async.
  • “A text itself is fundamentally more important than our suggestions about how it should be typecast” - Tim Brown
  • Scott Jehl has written a great article Font loading revisited with font events
  • “FOUT is a feature and a condition everyone should anticipate and design for” - Bram Stein
  • Do a larger font stack with many fonts, 2 fonts is not really a font stack, can even be used for email.

Invisible animation - Steven Fabre

“Use animation to tell the user what is happening behind the scenes”
– Steven Fabre
  • Campaign monitor Canvas email builder was originally static, Steven’s team made it more fluid with hinting
  • Building email was hard, Campaign Monitor created a drag and drop email with fluid animation to solve this.
  • Subtle, almost invisible animations can improve the experience of almost any product
  • Improve the payment experience with animations
  • Animation adds context
  • “Good animation is invisible you shouldn’t notice you’re looking at animation”
  • Animation should: improve usability, feel natural and subtle, give feedback to the user
  • Transitional interfaces
  • Animations on the web do not render the same on all devices and browsers
  • transitioning opacity and transform
  • The second piece of UI on the product was the sidebar accordion. Problem: It was abrupt. Solution: animate the accordion buttons
  • Problem: There was no feedback, needed to hint at the action. Solution: Show feedback with an animated checkmark
  • Using Max-height is problematic because you need to dynamically calculate the height.
  • Some devices made it quite jerky with max-height.
  • Problem: delete removes items abruptly. Solution: make the layout progressively disappear
  • Animation on the web comes with compromise.
  • Wish we could do more responsive animation? Media queries 4 will check if a device is slow.
  • Invisible: that’s how animation shuold be
  • Campaign monitor email builder

It’s all about systems - Claudina Sarahe

“If we’re only going to do things because we’re forced to do them, we’ll never solve our most pressing problems”
– Claudina Sarahe
  • Words cant capture the amazing explosive opening of Claudine’s talk. All I can say is: animal/pokemon onesies and Spice girls and dancing
  • Break larger problems into smaller problems
  • code from the inside out
  • components and modules, not pages
  • style guides and pattern libraries
  • agile, iterative, user centered development and design
  • old processes weren’t working with the multi device world
  • we didn’t care before phones came to market
  • scalability and maintenance became top priorities
  • tools change rapidly, humans do not
  • Ludwig von Bertalanffy (systems thinking - creator of general systems thinking)
  • if we’re only going to do things because we’re forced to do them, we’ll never solve our most pressing problems
  • elementary units that are investigated independently of each other (reductionism), the problem with this approach is its too simple
  • it’s reducing the whole to its parts
  • it’s limiting our understanding of the complexity of the entire system
  • science of wholeness: problems are parts of the whole, not specific outcomes and events
  • you can’t have a best practice in a system, because that’s ignoring the system can change and that practice can change
  • there are no best practices
  • self-regulating through feedback, we get feedback we shouldn’t send 2 meg to a phone and we correct course
  • if it’s not working, let it go. The system is trying to correct itself
  • We practice this in AGILE or iterative, Refactoring, retrospectives.
  • Principles of organisation and structure. Missing in the newtonian view of the world.
  • Human beings exhibit organisation and structure
  • why haven’t we been talking about web systems as systems?
  • learn by doing. good systems, design takes time
  • it requires an environment that prioritizes failure and requires implementation
  • it’s not wasted time, it’s incredibly important to your process
  • management wants to see visible progress, psd comps and committed code. They don’t want to see you thinking
  • they dont see value in false starts.
  • Our problems aren’t complicated, but they are complex
  • You might not solve complex, you’ll just come up with what’s best for the time.
  • Applying systems thinking - how else can we achieve
  • Define your system: Vision, requirements, goals.
  • Perspectives and stories: as a user, as a developer, as a business stakeholder
  • Frame a requirement as a story
  • As a user: I want to leave reviews
  • Sitemaps/ia/content templates what are we building? the name is a pure distraction in creating silos
  • Colleague uses the simple paper app to sketch up. Use robust tools.
  • Don’t just pick what someone gives you
  • Guidelines/docs/standards: easiest way to tell if the system was designed with something in mind
  • A project without documentation means you probably didn’t think about it too much
  • A huge importance of communication: Talking and iterating.
  • Systems thinking and design is something that we as an industry should understand. We can’t work in isolation. We have to be aware of the world around it and within it.

A CSS Eulogy - Michael Riethmuller

“Our hacks are just clever workarounds for the limitations of CSS”
– Michael Riethmuller
  • Experimenting with code is a big part
  • Is this really the best way? or have things moved on?
  • Habits in CSS can become engrained and hard to change
  • Clearfix: We used clearfix for a long time to allow an element to clear its floated children
  • Clear:both was our earliest technique with an empty element.
  • trigger an internal block formatting context. All early clearfixes were about this
  • Modern clearfix, allows us to bring an empty element
  • We expect .clearfix utility classes won’t be used anymore
  • The clearfix shotgun approach: don’t know how to solve a layout problem, just use clearfixes till you do
  • Placeholders mean you no longer need anything like a clearfix class
  • If all your doing is laying out content in columns, just use css columns
  • Media object: How can we rethink media object to get rid of clearfix
  • The flag object by Harry Roberts allows us to vertically centre the image. Its container can extend to the whole component. It relies on display:table and table: cell
  • And more advanced: solved by flexbox, in addition we get source order control. Flexbox gives us greater control over layout than any other of these techniques. Phiipwalton.github.io/solved-by-flexbox
  • Negative margins: Modals. Positioning any element in the center of the screen
  • initially we’d position in center using absolute. The problem is that the margins are all magic numbers, and we don’t always know the width and height. First inclination was to try and margin-left:-50% to realize it was relative to the parent. Transform: translate was allowed this.
  • The dialog element is something we can use now. Available in Blink. Doesn’t require any positioning at all.
  • Show and hide methods for free. Alot better than our custom solutions
  • Viewport units are going to give a shake up to our typography best practices.
  • Fairly well supported back to IE9. vmin height or width, whichever is smaller, vmax height or width, whichever is larger. Vw - view width, view height
  • All our options are abstractions of pixel based font size: 16px.
  • Viewport units are seperate to this, dont rely on base font size
  • Limited with @media. Or limited with calc. font-size: calc(16px + 3vw). Some browsers still have problems with calc/vw used together
  • New limitations require new hacks. We can limit scaling, but we don’t have complete control of the rate at which units scale
  • Actually we can: font-size: calc(12px + (24-12)*((100vw-400px)/(800-400));
  • Our hacks are just clever workarounds for the limitations of CSS
  • CSS was not designed for solving layout problems
  • Now we have the ability to do these things we’ve answered with apathy.
  • We’re about to start a new era of CSs, it’s not going to be easy.
  • Push the boundaries.

Clean and Simple - Justin Oullette

“Clean and simple are not design goals by themselves, instead strive for honesty and satisfaction”
– Justin Oullette
  • Clean and simple are deceptively loaded words,
  • There’s real value in deconstructing that and analyzing why we cite them as desirable qualities
  • Clean the way something looks, simple the way it works
  • Clean: consistent, predictable, rhythmic.
  • It doesn’t necessarily mean being flat
  • Simple: singular, understandable, adaptable.
  • 2015 – we had a lot of flat design
  • Mixtape culture in the 90s, best way to discover music was if you heard it from friends
  • 2007 there wasn’t anything like that. The way he achieved it was muxtape.
  • What is the absolute minimum I can do to make this into an interactive experience?
  • Started with a list of songs. This works as is, no reason to clutter any further.
  • Various elements in the record industry weren’t so happy with the system
  • It was about a better experience for listening to music.
  • Replaced with a space for bands
  • Part of the myspace experience was, customize the html however you wanted. Some people did cool stuff, but overall it was like geocities
  • The constraints of muxtape let some creativity flourish
  • Clear was an amazing interface, almost no UI, Keezy as well.
  • Supply Ipad App. Really clean, really simple design.
  • Let the content rule the design.
  • Sometimes some things have a lower limit to their simplicity. It’s extra important to achieve that clean ness.
  • Another example of clean but not simple: New york parking sign mess. It’s a failure it doesn’t do anything to aid the understanding.
  • Not simple and not clean is not always a failure. Sometimes it meets its audience.
  • Pet Peeve: Car stereos.
  • After effects: classic example of specialist software that’s very difficult to make clean. To simplify it much more would alienate the user base.
  • Occasionally the goal is to be neither Clean nor simple. Flashy boomboxes. Luxury watches – the audience seeks them out. Bloomberg terminals – the users love them being complicated.
  • Clean opposite intricate/ornate. Simple opposite sophisticated
  • It’s not about confusing or messy but using better descriptors
  • Clean and simple are not design goals by themselves, instead strive for honesty and satisfaction
  • Honesty is important in design
  • A banana has an easy user interface, simple and clean
  • Simple comes at the cost of power, think of the audience and what they’re trying to achieve.
  • Spaceship: needs to be powerful, some sacrifice to simplicity
  • Clean is a spectrum. Reduction/abstraction. Picasso bull.
  • “Simplicity isn’t just a visual style. it’s not just minimalism or the absence of clutter.. to be truly simple you have to go really deep” – Jony Ive
  • It’s more important to focus holistically on reducing your design to its core elements, and thinking about what is honest or what will satisfy the user.

Origami: a journey to web components - Andrew Betts

  • 15 years after started when it took 2 days to build, manages web developers - why does everything take so long today?
  • more devices/ux/accessibility/users are more demanding/ more stuff to build
  • it’s time to think of development at a much higher level
  • it’s so stark how desktop and mobile usage changes for FT during any given day.
  • Insights: on the weekend almost no desktop traffic, people device switch during the day
  • People used to use form selects to solve large navigations on small screens. Solving a developer problem far more than user. Example: Swiss hotel website (Giant dropdown list shown)
  • Alice Bartlett - Burn your select tags
  • Everyone hates waiting, they now hate it more than ever.
  • Expected waiting time 2006: 4 seconds. 2009 - 2 seconds
  • We have to keep inventing the same solutions over and over again.
  • Close button example on the FT website: Visually mostly the same, technically, a bit of a mess. Many different implementations of the same thing. This is happening everywhere the world over
  • Principle of using prefabricated units. We’ve never really had a good solution for this on the web
  • The best we’ve had are pattern libraries and style guides
  • Example shown: Style guides curated by Anna Debenham
  • Lonely planet uses a gem and generates specific HTML for their style guide
  • Need: can be used across websites, is agnostic of server side tech. Has good encapsulation (the presence of components shouldn’t change behaviour of others). Needs to be transparent, so teams and people can contribute to the components.
  • To try and get people to work on the same tools is really hard, requires complete transparency and empowerment
  • needs to be standards based
  • avoid duplication of dependencies / code repetition ( don’t want 2 copies of of the same styles etc)
  • works today, helps us move towards web components
  • Made Origami to solve this problem
  • Need a build process to bring all these css dependencies together. Uglify/browserify/commonjs/sass/gulp/bower.
  • Server side developers would have difficulty dealing with this tool chain. Thats why it became a tool as a single command line tool with six tasks.
  • CSS is really hard to contain. Encapsulation is difficult.
  • Rules: Namespace prefixes, o- for origami. Use BEM or descendent selectors. We don’t use IDs. Consider states (Aria), minimize specificity as much as possible.
  • We have a maximum specificity, and where possible we use a single class token.
  • It doesn’t make sense to write breakpoints into components. Instead we offer mixins and modifier classes that developers can mix into their own breakpoints.
  • All public variables must be defined with !default. Never use @extends. Optimiser like CSSO/clean-css to post-process. Instead we use mixins
  • To make defined colour, look for specific colour for thing, if not the standard link colour (planning for the future)
  • do we do body { margin:0 } in the component or the product? can’t do it in the component because it breaks encapsulation
  • is it easy enough yet? The team made a registry to make it easier
  • How do we run the build process in JSBin to get a CSS component? Built a build on demand service.
  • jQuery 1.4.2 was a historical problematic versioned thing, because of one thing breaking code - people were stuck with that version of jQuery
  • Standard build process based on bower/sass/browserify
  • Supporting legacy browsers: serve same css to all browsers, use @supports for newest, use @media tl hide all styles where mqs are not supported. Use browser hacks where absolutely necessary. (IE8)
  • With JS we’ve always had the ability to segment users into those who support JS and those who don’t with script tag
  • New bar with features. So we use a cuts the mustard test. No script, Old JS, and New JS. (queryselector, localStorage, addEventListener) tested. (‘querySelector’ in document && ‘localStorage’ in window && ‘addEventListener’ in window)
  • Don’t need to test code in browser that fail the test.
  • No script, Core experience, Primary experience
  • Browser engines on TVs are terrible, tried to view FT.com on tv and the tv turned off.
  • Polyfill as a service – add this script to your site and it will send certain polyfills to the site
  • Tested in 26 browsers on Travis CI using sauce labs. Cacheable in browser. Permissive CORS. Published uptime and performance metrics. Open source.
  • We can make it better if everyone contributes their polyfills cdn.polyfill.io

Open Source design: A call to arms - Una Kravets

“Telling a designer they must learn to code will make them defensive, sharing your excitement about code with them will make them curious”
– Una Kravets
  • Bill Gates had access to a computer terminal in 1968 when other universities didn’t. Would sneak into university and get computer time. Obsessed with learning computer languages. First beta testers of the system. Play with and break as much as they can. 10,000 hours of practice before they graduated high school
  • Community around bill gates allowed for it.
  • What if there were 20 kids like Gates that had that kind of access, with different opinions and mindsets? What if 200, 2000?
  • Imagine the technology if we had that kind of scale? The world we could have is much richer than the world we’ve settled for
  • Open source initiative.
  • Why aren’t designers doing open source?
  • The museum effect: walk into unknown place. When things are unknown you don’t want to touch anything
  • unfamiliarity paralysis: when you don’t know what’s out there how do you choose?
  • Design by committee: when you try to please everyone you please no one.
  • IO open sourced logo- people made good submissions, but people trolled
  • Not in peripheral - not a part of the design workflow, part of the development workflow
  • let’s do things about it! Encourage a more open design/dev workflow
  • solution for fostering: git. want them to think of it as git. Browsersync is magical
  • Made gulp-starter-env
  • If you dont know what’s happening and you see NPM errors, you’ll think your computer is broken. Don’t worry we’ll fix it.
  • littlewins - every time designer learnt a little bit of development
  • Telling a designer they must learn to code will make them defensive, sharing your excitement about code with them will make them curious
  • Entire team is now on github, been an awesome system for managing the projects
  • Encourage a more design/dev workflow, foster design participation in open source community
  • Communication, accessibility, respect, empathy
  • Use labels to communicate, checkboxes in github. Explains what’s going on.
  • Use a lot of images. Screenshotting colour palettes.
  • What to do with PSD? link to a dropbox account
  • Accessibility: Can i use your project? can i get started?
  • Github readmes often make a lot of assumptions. We can do better
  • Detailed getting started documentation.
  • Contribution documentation: rails guides makes it easy
  • Understand commonly confusing terms
  • Respect: “Design is not just what it looks and feels like, design is how it works” - Steve Jobs
  • Coordination doesn’t equal collaboration
  • Empathy is an evolutionary tactic
  • Don’t be the ‘well, actually’ guy, no one likes that guy
  • Ask, don’t tell on Feedback. (why did you..)
  • Be specific. (when you are calling the)
  • Explain yourself (check out this blog post)
  • Offer solutions (maybe try).
  • avoid hyperbole (you should never..)
  • use emjois (can diffuse)