Web Design Weekly #55

Headlines

State of the Word 2012

Matt Mullenweg doing what he does ever year at WordCamp San Francicso. Really great to hear his visions for WordPress to have auto updating like Chrome. He also highlighted some cool WordPress-powered sites that show off the power of the platform and also what the future holds for WordPress 3.5 and beyond. (wordpress.tv)

Beyond Media Queries

Luke Wroblewski re-caps Brad Frost’s presentation at An Event Apart in Washington. Brad talked about the principles behind adaptive web design and shared a number of awesome techniques for creating responsive pages. (lukew.com)

Poll Results: How do you order your CSS properties? (css-tricks.com)

CSS4 Pseudo-elements – submission by Adobe (github.com)

Support for @supports in Firefox Nightly (broken-links.com)

Articles

Introducing CSS blending

The Adobe Web Platform team drafted a proposal with Canon that describes a couple of simple additions to CSS to add blending to the browser’s rendering model. The CSS and SVG working groups accepted the offer which means that the document is now officially a “Working Draft”. If you want to be ahead of the curve, be sure to check out this nice overview by Rik Cabanier. (adobe.com)

Tags in CSS files

A nice little tip from Harry Roberts on using tags in your CSS file to find sections quickly. Working with large CSS files can be painful at times. Implementing solutions like this are definitely worth thinking about and discussing with your team. (csswizardry.com)

Jumping the Hurdles with the Gamepad API

The brand new Gamepad API is fresh off the press. It landed in Chrome 21 last week and it’s also on the verge of being supported in Firefox. In this article by Marcin Wichary, who is a User Experience Designer at Google explains how they added the Gamepad API to the fun Jumping the Hurdles doodle and what they learnt during the process. (html5rocks.com)

Magazine-like Layouts for the Web with CSS

Another great post from the Adobe Web Platform team. Adobe is putting in a huge amount of effort to bring true magazine-like layout on the web. Currently this is not so easy. CSS Regions and CSS Exclusions allow content to remain semantically structured while also enabling true magazine-like layout, and ultimately a much more expressive web. The article discusses APIs that are not yet fully standardised and still in flux. Tread lightly. (html5rocks.com)

The Worst Website Ever Made? Usability Hell of London2012 Olympics Ticketing (usabilityhell.com)

Firefox for Android: Remote debugging is here (starkravingfinkle.org)

Dribbble’s Position on Spec Work (blog.dribbble.com)

“Old” Flexbox and “New” Flexbox (css-tricks.com)

Resolution in Media Queries(girliemac.com)

Tools / Resources

A beautiful UI pattern for side menus

Hakim El Hattab has done it again. He is one awesome developer with so many great experiments over the years. This time he has developed Meny. An experimental CSS 3D fold-in menu. Works in any browser that supports CSS 3D transforms. (lab.hakim.se)

Sublime Text 2 tips: Distraction-free mode, ColorPicker, and Placeholders (shoogledesigns.com)

CSScome – Tool for sorting CSS properties in specific order (github.com)

Glue – A simple command line tool to generate CSS sprites (github.com)

Mozilla Developer Network revamped! (developer.mozilla.org)

A student’s guide to web design (studentguidewebdesign.com)

Inspiration

This is Now

The This is Now project is a visual composition which uses real-time updates from the ever popular Instagram application based on users geo-tag locations. The tool streams photos instantly as soon as they are uploaded on Instagram and captures a cities movement, in a fluid story. (now.jit.su)

Redesigning Wikipedia (wikipediaredefined.com)

The end of formality (37signals.com)

How To Learn(samsoff.es)

Last But Not Least…

Emoji cheat sheet for Campfire and GitHub (emoji-cheat-sheet.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 *