Web Design Weekly #114


Responsive design, screens, and shearing layers

Responsive design might begin with the screen, but it doesn’t end there. In this article Ethan Marcotte touches on some recent articles by high profile individuals and gives his thoughts on where we are heading. Great read! (unstoppablerobotninja.com)

Icon fonts, unicode ranges and IE8’s compatibility mode (adactio.com)

Teamwork for Pros

The only collaboration tool designed by web developers for web developers. Integrable with Springloops SVN/Git Source & Deploy and 100% FREE up to 10 users, it gives you everything you’ll ever need to run all kind of code-oriented projects. Get stared now and see your projects grow in real-time. (dobambam.com)


Killer Responsive Layouts With CSS Regions

As web designers, we are largely constrained by the layout features available to us. Thankfully CSS Regions give us a few more options as CJ Gammon points out in this article. (smashingmagazine.com)

High Performance Animations

Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk and the chances are you’re not going to hit a silky smooth 60fps. (html5rocks.com)

Relying Too Much on Screen Size

Responsive web design has helped teams build amazing sites and apps that adapt their designs to smartphones, desktops and everything in between. But many of these solutions are relying too much on a single factor to make important design decisions: screen size. (lukew.com)

Transformer Tabs

Do you have tabs on your site? How do they scale? In this article Chris Coyier looks at some current patterns used by others and explores his own solution in more depth. (css-tricks.com)

Cite and Blockquote – reloaded

The definitions of the blockquote and cite elements in the HTML specification have recently been updated. In this article, Steve Faulkner explains what that means for us. (html5doctor.com)

Getting to know Safari 7’s (Mavericks) developer tools

Jordan Moore takes a quick look at the Safari developer tools that ship with Mavericks. (jordanm.co.uk)

A Better Way to Layer Type (trentwalton.com)

Say Hello to Offline First (hood.ie)

Tools / Resources

Pattern Library

The MailChimp Pattern Library is a byproduct from their move to responsive design. Super comprehensive. (mailchimp.com)

Creating Non-Rectangular Layouts with CSS Shapes

In this article Sara Soueidan goes over the basics of declaring shapes and creating some simple layouts using new CSS technologies. (sarasoueidan.com)

Animated SVG Icons with Snap.svg

Using SVGs on websites is becoming really easy with great libraries available. This post over on Codrops explores Snap.svg and ways to animate some SVG icons. (tympanus.net)


A great set of good looking icons open-sourced. Originally designed for the ionic framework but by no means need it. (ionicons.com)

Minisize – A responsive browser living in your Menubar

It’s a great tool for web designers and developers working with responsive web design. (minisizeapp.com)

Social Sharing

These simple CSS and HTML snippets make it easy for you to go social without hurting site performance. (github.com)

Jank Free: Let’s Make the Web Silky Smooth (jankfree.org)

Introduction to Autoprefixer (css-tricks.com)

Front-end Style Guides (fivesimplesteps.com)


The iceberg of jobs-to-be-done (teehanlax.com)


Front-End Engineer at Yelp – San Francisco

Our front end engineers are the glue between our engineering team and the more than 108 million people who visit our site every month. Yelp is looking for a front end developer who walks the HTML, CSS and JavaScript stack with ease. In this role you would do everything from implementing new UIs and features to battling browser inconsistencies through daily release cycles. (yelp.com)

Post a job in a future issue of Web Design Weekly →

From The Blog

The Ultimate Conference

To set things straight, nothing beats the real thing! Unfortunately, one can’t attend every conference but fortunately we do have the opportunity to relive some. I decided to create the ultimate conference (web-design-weekly.com)

Last But Not Least…

Paul Irish’s Web Fonts and FOUT Survey

If you have a few seconds you should head over to Paul Irish’s Google Plus post and chime in with your thoughts. (plus.google.com)

Favicon Generator

Generate the favicon images and HTML code that works on all major browsers and platforms. (realfavicongenerator.net)

If one hit a week isn’t enough, follow WDW on Twitter