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.
- 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.
- 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).
@pwcc sshhh! Cricket’s on! :)
@davidwineclarke I am a marketing genius.
@pwcc Haha “If you want to challenge yourself, try to create an SVG path manualy.” #typo Only a masochist would create one manually!
@pwcc Thanks for your notes on the conf too. Looks like I missed out on awesome conference! :(
@bronsonquick You did, it was a really interesting couple of days.