Web Design Weekly #91

Headlines

The State Of Responsive Web Design

Stephanie Walter takes a comprehensive look at what is possible in responsive web design right now and what challenges are still yet to be solved. A good overview and a great jumping off point to go and explore each challenge in more detail. (mobile.smashingmagazine.com)

Advanced CSS workshop

In this 4 hour workshop Ben Schwarz will take you through transitions, animations, complex / seldom used selectors, techniques to roll powerful components as well as build tools, how to intergrate responsive design elements into your projects, browser prefixing and techniques for building commonly used patterns. (theint.ro)

Opera Next running Blink now available (opera.com)

Articles

Hashed classes in CSS

Harry Roberts has long advocated that you shouldn’t be using IDs in your CSS. In this article, he proposes ways to adhere to this, while still creating selectors which can be identified as unique. (csswizardry.com)

Responsive News – Images

The BBC News developers give a quick overview of their solution for delivering images into a responsive web page. Good insight in to how a large organisation chose to tackle the responsive image issue. (responsivenews.co.uk)

How To Build The Digital Subway Map Of The Future

How? By using web technologies of course. A broad overview of the process that the Control Group have undertaken to build interactive maps for the New York City subway using HTML5 and JavaScript. Be sure to watch the video. (fastcolabs.com)

What I Want from a Web Font (paulrobertlloyd.com)

Support this newsletter by becoming a member for the price of a coffee →

Tools / Resources

Logic in Media Queries

Chris Coyier provides a handy overview/reminder of the logic that can be used when constructing your media queries. (css-tricks.com)

Pattern Lab by Brad Frost

Brad Frost has put together a very comprehensive pattern library. Make sure you hit the ‘disco’ re-sizing option while you’re there. (patternlab.bradfrostweb.com)

Pure by the YUI Team

The YUI folk have put together a set of small, responsive CSS modules which can be used as a starting point for every website or web app. (purecss.io)

Screensiz.es

A web service which shows screen specifications and pixel densities of popular devices. (screensiz.es)

Tips and Tricks for Testing WordPress Themes (smashingmagazine.com)

Keyboard Shortcuts in Chrome DevTools (developers.google.com)

How to write a Yeoman Generator (yeoman.io)

Sass Style Guide (css-tricks.com)

Inspiration

Ladda by Hakim El Hattab

A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. (codepen.io)

Hacking Preprocessors

Alex Sexton explains how the parsing and compiling steps of CSS preprocessors can be hacked to do anything you like such as refusing to compile the new intern’s !important rules. (alexsexton.com)

Front-Trends Videos

This year’s Front-Trends conference was in late April and they have just started to upload some of the amazing talks. Sit back, relax and enjoy! (vimeo.com)

Jobs

Senior UI Designer at Campaign Monitor

As part of our small and passionate in-house team you’ll be involved in every step of the design process – all the way from concept through to seeing your feature being used by over 700,000 of your peers. You’ll be designing and building world-class UI’s – so your experience and opinion will be called on a lot. (campaignmonitor.com)

Advertise in next weeks newsletter

Last But Not Least…

Discover Meteor: Build Real-time JavaScript Web Apps

In this new book by Tom Coleman and Sacha Greif you will learn how to build a real-time Meteor app from scratch. Use the discount code ‘WDWEEKLY’ for 20% off. (discovermeteor.com)

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *