CSSConf Australia ’15 – Day two summary

The second day of CSSConf Australia ’15 took place last Friday.

The day started with Sara encouraging developers to switch to SVG rather than unsemantic CSS hacks, and finished with a call for the open-source community to welcome designers by Una.

Here are my notes from day two.

Speakers

• Sara Soueidan
• Kenneth Ormandy
• Steven Fabre
• Claudina Sarahe
• Mike Riethmuller
• Justin Ouellette
• Andrew Betts
• Una Kravets

See my earlier post for my day one notes.

Sara Soueidan, Building better interfaces with SVG:

• I love SVG. I love CSS too, but SVG is sometimes a better way.
• SVG is awesome!
• If you support IE8, you have a lot of fallback options for SVG.
• Many devs use icons fonts over SVG because they’re easier. I hate icon fonts.
• SVG2 has a lot of features that are missing. z-index is coming.
• Specification writers listen. If you can provide feedback, you can influence the spec.
• Send a proposal, send a use case to the spec editors.
• Pester the spec editors (but not too much)
• There are some cases where CSS provides more flexibility than SVG: animations, for one.
• If you are going to animate SVG, use JavaScript.
• CSS animations for SVG aren’t greatly supported.
• If you want to challenge yourself, try to create an SVG path manually.
• CSS shapes are fake content, SVG shapes are real content.
• If you’re going to use non-rectangular shapes, don’t bend the box-model, use SVG instead.
• Sara created a tool for generating circular menus using SVG: Circulus
• SVG allows you to animate checkbox animations instead of using sprites.
• Line drawing technique: Jake Archibald has a great write up.
• You can animate an SVG path
• The old ways of replacing text with images (using css) are not semantic.
• Applying SVG textures to text using masking is 100% semantic, the text remains selectable.
• SVG text is searchable, selectable and 100% semantic.
• We have a number of CSS filters that can be applied to any element.
• SVG provides more filters than CSS.
• SVG filters allow the result of one filter to be used as the input for another
• Goo effect: http://codepen.io/lbebber/details/OPjxZL/ – keep an eye on Luke’s codepen account.
• There are two options for animating a path
• CSS is adopting SVG’s ability to animate along an arbitrary path.
• SVG icons are more flexible than font icons.
• SVG icons are infinitely scalable, style-able via css, easier size control, amongst others.
• SVG icons have an a number of embedding techniques, each with a fallbacks available.
• In Lebanon the internet can suck. Font icons can give you nothing more than a bunch of squares.
• Upcoming Smashing Book #5 includes a 23,000 word omnibus on SVG by Sara
• There are a number of libraries for creating datavis using SVG. D3 the most popular.
• SVG allows you to define an element once & reuse it multiple times on a page.
• When you’re an introvert http://codepen.io/sdras/pen/dPqRmP

Kenneth Ormandy, Efficient Web Type, c 1556:

• Typefaces in the 1500s started their life in steal.
• Whether you take on the title of dev, designers, etc, you still have a role in typography.
• Historically religion has driven a lot of type design. Printing the bible, for example.
• Spacial efficiency lead to how small a bible could be printed, while working in steal.
• The physical efficiency required for type in the 1500s is reflected in the file size requirements today.
• WOFF helped lead to the more common use of web fonts.
• Open-sans is more common than some of the traditional web-safe fonts.
• Adopting web fonts has increased the file size of the web.
• Most font services sub-set font files by default.
• Glyphs are essential for using some languages correctly.
• Aggressive sub-setting prevents people reading in their own language.
• Serif fonts with curved serifs require more space than than sans-serif fonts.
• Efficiency gains come from wider implementation than coding individual fonts.
• WOFF2 provides a greater compression while maintaing ease of decompression.
• WOFF2 uses the same css syntax as WOFF
• You might be using WOFF2 without realising it, web font services are starting to support it.
• Build WOFF2 for self hosting using Google’s library https://github.com/google/woff2
• Browser support for WOFF2 is supported in most browsers. (Not in Firefox or IE)
• WOFF2 is an opportunity to improve our techniques.
• The webfont loader supports multiple services in one code snippet.
• The text itself is fundamentally more important than the typeface in which it’s displayed.
• FOUT is an opportunity. Anticipate and design for it.
• Font stacks still matter. Two fonts (webfont, sans-serif) is not a stack.
• Think through the fallback fonts you want to provide.

Steven Fabre, Invisible animation:

• Case Study: Campaign Monitor’s Canvas
• Without animation, it’s hard for the user to understand what has been added to the screen
• Subtle, almost invisible, animations can improve the experience almost of any product.
• We wanted to make it feel natural, that’s why animation & interaction design is important
• People see animation as delightful, this is not the main purpose.
• The purpose of animations should be to improve user experience.
• Animation can be both, it can be delightful and improve the user experience
• Animation should be invisible https://medium.com/@pasql/transitional-interfaces-926eb80d64e3
• Using the right easing is key to making an animation feel natural.
• Animation that looked jumpy on low end devices didn’t make the final product.
• We experimented with calculating actual height, the JS run perfectly on a high-end mac but not on devices people are more likely to use
• Animating layout deletions when an email contains many similar layouts becomes really useful.
• Animation comes with compromise, it needs to work on the devices your users are using
• Using @media (update-frequency: slow) in CSS4 may help with progressive enhancement of animations
• Invisible animation post: http://stevenfabre.com/blog/invisible-animation

Claudina Sarahe, It’s about systems:

This was the only talk to begin with the speaker dancing to the Spice Girls in a penguin onesie.

• As engineers we break down a problem into a series of smaller & smaller problems
• As an industry, we’re prioritising systems and thinking
• We were cornered into developing new systems, we didn’t care until we had to
• Now we have native gradients, we avoid them like the plague
• If we only do things because we are forced to, we are never going to solve our biggest problems
• We are passive problem solvers, not active.
• Reductionism is too simple, it can help but limits our understanding of the whole system
• Breaking down a problem too far leads to difficulty understanding the system, it becomes messy
• Embracing systems thinking will help avoid unintended consequences.
• You can’t have best practice in a system. This ignores that systems can change.
• If feedback says best practice is not working, let it go. Dump it.
• The diversity of our field is a great thing, it means we have a lot of perspectives to learn from.
• System design takes really hard thinking, it requires discussions & accepting failure
• A complicated problem is solvable, a complex problem may not have a solution.
• You must define your vision
• The best stories put the developer in the position of the user: As a user I want to leave reviews.
• SlickMap CSS is great for creating clickable site maps
• Define content templates: eg one paragraph followed by three bullet points. Then fill it in with actual content
• Use the most robust tools you have. We have better tools than flat HTML and flat CSS.
  • Use a templating language rather than HTML.
  • Don’t just pick tools, try them and chose what works best.

Mike Riethmuller, A CSS Eulogy:

• I make .gov sites for a living.
• Matt showed an image of a .gov site y/day & said someone designed it. No, 80 people designed it.
• Our industry moves quickly, sometimes we stick with outdated techniques longer than we should.
• We use clearfix so often, we’ve forgotten it’s a hack.
• The modern clearfix has changed from adding an empty div to clear both, to an empty pseudo element to clear both
• I bet my left hand the clearfix utility class will disappear this year.
• If we don’t need a utility class, do we need a clearfix at all?
• display: table when used in moderation can be very useful.
• Flexbox gives greater control of layout than the techniques we currently use. Visit Solved by flexbox
• Using negative margins to centre (-50%) requires width, height & margins to be magic numbers.
• margin-left: -50% is related to parent element.
• translate -50% relates to the element itself.
• The dialog element gives us full control of presentation while using semantic element.
• The Holy Grail is a traditional use of negative margins.
• Viewport units are well supported, IE was an early mover going back to IE9
• When browsers offered zoom, some developers switched back to pixel based font sizes figuring the accessibility problems had been solved
• Viewports units allow text to scale smoothly without the needs for numerous media queries
• Any new method has new limitations.
• Using viewport units for precise control
• We have a hard time letting go, we complain flex box is hard. Could be more hypocritical,we complained for years we didn’t have this?

Justin Ouellette, Clean and Simple:

• Clean and simple are deceptively loaded words
• Clean is appropriate for describing how something looks, simple how it works.
• Clean does not mean flat, it means finding a balance and harmony
• 2007 was a time of bushed gradient
• Overall MySpace was crazy, it looked like Geo-cities.
• Something can be clean but not simple.
• Some things have a lower limit to simplicity, it needs to be clean to compensate
• Nothing about being a clean design guarantees your design will be a success.
• Something can be simple without being clean
• Clean and simple is not suited to everything. Advertising a rave doesn’t work as clean/simple.
• Luxury watches, Bloomberg terminals, etc aren’t design failures because they’re complex. Therein lies the success.
• Somethings can’t be simple, they audience do not require it.

Andrew Betts, Moving towards web components:

• Modern web development is slow
• At FT they have a surge of mobile traffic during the morning commute, mainly desktops during the weekday.
• Mainly mobile traffic on the weekend
• Some solutions solve the developer’s problem over the user’s problem.
• Now days we tend to focus on answering the users’ problems more.
• Between 2006 & 2009, Akamai found people willingness to wait halved.
• If we reinvent the same solution time and again, we never going to solve the bigger problems.
• We’ve never really had a good solution for design components on the web.
• There is a huge variety in the way people are building style guides.
• At FT we have node, java, python, ruby servers. No single tech
• FT needed a component solution agnostic of server-side technology.
• FT component library is called Origami
• FT use bower, gulp, sass, and a number of fairly typical node tools for their build process.
• FT’s build tool available as a single npm module origami-build-tools
• FT aims for a maximum specificity of one class selector in origami.
• FT style aria properties to encourage proper, accessible mark up by developers
• Until sass supports @import-once, FT won’t use extends.
• On the component team, it’s our job to provide tools that are easy to use.
• Always strive to make tools easier.
• FT created a build on demand service, you pass a URL providing the modules you want.
• It’s become intuitive for product devs to use to components we’ve given them
• The conventional noscript tag has become useful for detecting 1% vs 99% of people
• The BBC’s cutting the mustard test is a more useful test than the noscript tag
• Smart TVs can score really low on https://html5test.com/
• FT’s polyfill service solved the problem of repeating polyfills for each component.
• The polyfill service is on an open CDN.

Una Kravets, Open Source Design: A Call to Arms

• Traditionally dev has happened in three ways: gov supported, private enterprise & open source.
• It takes a number of minds to come together to create the best solution
• Why aren’t designers contributing to open-source?
• Designers have a “fuck you, pay me” attitude, as seen Mike Monteiro’s talk of the same name
• Designers worry they’ll break something
• Designers are unfamiliar with open-source – unfamiliarity paralysis.
• Open-source is not a part of the design workflow. Let’s do something about this.
• I wanted designers to think of git as their friend.
• I created a Github rep to encourage designers to try gulp: https://github.com/una/gulp-starter-env
• If you don’t use terminal, seeing node errors can be really confronting.
• Don’t make assumptions: don’t assume a designers don’t care & don’t want to code
• Make people curious.
• Let designers search for open source contributions, label issues design needed.
• Use a lot of images
• Write helpful docs, “run npm install” is not useful.
• Define commonly confusing terms
• Treat people working on your open-source project like your family.
• Provide good feedback: Ask why, be specific, explain yourself, offer solutions, avoid hyperbole, use emoji (it makes everything better).