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)
More info:
dev.w3.org/csswg/css-color-4
Slides:
leaverou.github.io/chroma-zone
Psychology
& the Perfect Design
(Joe Leech)
We build a mental model of how the world works
and apply that model to new situations.
The Perfect Design
Match the mental model
Evoke emotion
Faces and genitals
Book:
gumroad.com/l/p4d
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)
MailChimp Guide:
templates.mailchimp.com
Slides:
slideshare.net/flcarneiro/emaildesign-current
Real-Life Responsive Design
(Dave Rupert)
Size != Touch:
codepen.io/davatron5000/full/ylGho
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
)
Slides:
globalmoxie.com/prez/mind-the-gap.pdf
Art Directing
Posts Sustainably
(Scott Kellum)
Make modular layout systems.
Chorus.
Layout snippets first, then content snippets.
Slides:
talks.pgdn.us/art-directing-posts.pdf
Levelling Up With Flexbox
(Zoe Mickley Gillenwater)
Browser support is good - IE9+
Slides:
zomigi.com/blog/leveling-up-with-flexbox/
Examples:
CSS issues solved by flexbox
http://philipwalton.github.io/solved-by-flexbox/
Flexybox playground & generator
http://the-echoplex.net/flexyboxes/
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
Produc
es multip
le 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:
dropbox.com/s/6a1vxu8f603kpvx/20140318_095229.mp4
Thanks!
Made with Slides.com