Web Design Weekly #147


Responsive Images – Use Cases and Documented Code Snippets

The new element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, Andreas Bovens has prepared an article full of great examples and code snippets to make things easier. (dev.opera.com)

Putting Thought Into Things

A beautiful article by Oliver Reichenstein that leaves you inspired to put a little more effort and thought into what we build. (ia.net)


The Principles of Adaptive Design

Brad Frost explores five guiding principles of adaptive design that he feels are core principles to crafting multi-device web experiences. They are ubiquity, flexibility, performance, enhancement and future-friendly. Great read. (bradfrostweb.com)

A look at the current responsive design landscape

Brian Krall takes a quick look into some well-known responsive sites from the performance angle. The results aren’t ground breaking, just a reinforcement on why we need to take performance seriously. He also shares some handy tools to help towards the end of the post. (sideproject.io)

UITableView in JavaScript, with re-usable cells using flexbox

Every now and then Ryan Seddon dives deep into some unknowns and pulls out a cracking article. This is no exception. Here Ryan uses the flexbox ‘order’ property to help the performance of a UITableView in JavaScript. Flexbox for the win! I also highly recommend the short screencast, which explores the Chrome tracing tool. (thecssninja.com)

Fixed and inflexible

When fixed positioning is used without care, restraint or precision, it can have disastrous consequences on the user experience. Tyler Sticka explains why. (blog.cloudfour.com)

Tools / Resources

A huge list of SVG Information

Of late Chris Coyier has been devoting lots of energy to SVG and in this post he compiles all his knowledge into one massive brain dump about all things SVG. Bookmark! (css-tricks.com)

Common Pitfalls with the HTML5 Drag ‘n’ Drop API

An article describing a few issues the Gravit team encountered and the workarounds they used. (medium.com)

Stateful Design

Re-use, “stateful” design and screen-flow using Layer Comps and Place Linked Smart Objects. (medium.com)


A simple gulp task that extracts and inlines critical-path (above-the-fold) CSS from HTML. (github.com)

Load CSS or JS Files Simply & Asynchronously (filamentgroup.com)

Package Management for ES6 Modules (youtube.com)

JavaScript (and Node) Best Practices (noahbuscher.com)

Responsive Design Workflow – book (responsivedesignworkflow.com)

Must-watch videos about JavaScript (github.com)

Paul Irish – Parallax Performance (youtube.com)


GitHub’s CSS

Mark Otto dives into the details of how GitHub does CSS. Quite an insightful article revealing some great tools and techniques but also highlighting some internal flaws. (markdotto.com)

Simple ideas & effects for website notifications (tympanus.net)

Can I Use redesign (caniuse.com)

Responsive Logos (responsivelogos.co.uk)


Front-End Developer at Dropbox

Do you want to come help us build world-class UX on products like Dropbox, Carousel and Mailbox? We’re looking for people who share our passion and belief that the best technology is simple, beautiful and usable – and that our users deserve the absolute best experience we can build. (dropbox.com)

Front-End Engineer at Optimizely

We are looking for a front-end engineer to join our fearlessly creative and data-driven team of modern marketers. This position reports directly to the Head of Optimization and will work broadly across the company. Come join us! (optimizely.com)

Advertise in next week’s newsletter →

From The Blog

Sass Source Maps in Chrome

Over the last few years there has been some major advancements in the tooling we use on a day-to-day basis but one feature that really took things to the next level was the introduction to CSS source maps. (web-design-weekly.com)

Last But Not Least…

3.14 things I didn’t know about CSS (vimeo.com)

JS Bin now has Pro accounts (jsbin.com)