Smashing
Conference
Report from Oxford, 2014
Polymers
(Addy Osmani)
Polymer allows you to create custom HTML elements.
Polymer is like a polyfill for Custom Web Components.
(like Mozilla Brick)
More info: polymer-project.org
Slides: addyosmani.github.io/ctw/
CSS Colors
(Lea Verou)
Went through the history of color in CSS and
introduced CSS Color Level 4, which includes:
- #rgba and #rrggbbaa
- rgb and hsl will accept alpha values.
- gray() - % value of grey
- color()
- hwb() (Hue-Whiteness-Blackness)
Psychology
& the Perfect Design
(Joe Leech)
We build a mental model of how the world works
and apply that model to new situations.
Hard-Won Lessons in Responsive Emails
(Fabio Carneiro)
67% of mobile users send & receive email on their phone.
- Design within constraints (mail clients)
- Design for distraction (people are busy)
- Design with purpose (buy me, join me, read me or transactional)
- Design for email (it's not a website)
Real-Life Responsive Design
(Dave Rupert)
Size != Touch:
Mind the Gap
(Josh Clark)
The average person changes device
21 times per hour at home.
90% of users use multiple devices to accomplish a task.
2 types of task:
- Sequenced
- Simultaneous
How we cope with the gap:
-
We email or text between devices.
-
Dropbox - or file sharing.
-
Take a photo? (youtube.com/watch?v=iGTM6xs2sck)
Art Directing
Posts Sustainably
(Scott Kellum)
Make modular layout systems.
Chorus.
Layout snippets first, then content snippets.
Levelling Up With Flexbox
(Zoe Mickley Gillenwater)
Browser support is good - IE9+
Examples:
CSS issues solved by flexbox
Flexybox playground & generator
Connecting Content, Layout & Device Through Fluid Grids
(Nathan Ford)
"Design from content out. Just make it up if the client
hasn't provided it... that motivates them."
Responsive Web
Typography
(Marko Dugonjic)
Create type hierarchy with modularscale.com
Icon Design Process
(Jon Hicks)
Iconfonts
Style with CSS
No use of sprites
One small file
Multi coloured/layered Iconfont
(new bbc weather app)
SVG
Multiple colours
Animations
Scalable
High browser support (IE9+)
Tools
 Grumpicon - Drag & Drop - Command line |
 Produces multiple fullbacks - SVG (data urls) - PNG (data urls) - PNG (data path to images) |
Creating the
Modern Design Canvas
(Andrew Clark)
Don't set the wrong expectation.
Client signs off a frozen image for a
fixed width web site. Wrong!
Search for the right process,
but don't get drunk on process.
Sharing = Improvement
Question Everything!
Laser Cat!
(Seb Lee-Delisle)
Video:
Thanks!
Smashing Conf. Oxford 2014
By Andi Smith
