Web Design Weekly #63

A new site run by the Responsive Images Community Group was launched and aims to contain all the discussions around the hot topic in one place. Th guys at Zoompf look in detail at how fast really is. Jeffery Way’s screencast about Testem is a ripper and Adobe release CSS FilterLab. Enjoy.

Web Design Podcasts

As with all sites, podcasts can be up and down. Not all episodes are good; sometimes they are irrelevant and sometimes they are gold. Web design podcasts are a great way to stay in the loop about the ever-changing world of web design. They are a very easy way to learn about emerging technologies and standards, listen to in-depth discussions with some of the best designs and developers on the planet and continuously learn whilst you’re not at your desk.

Web Design Weekly #62

The web design world continues to produce amazing things. This week Tim Kadlec explains how we need to get our responsive sites ready for Windows 8, Ian Taylor dives into object-oriented CSS, Cennydd Bowles explains the design decisions behind the new TweetDeck, Chris Coyier answers more questions over on Smashing Magazine, Drew Wilson released all the Valio Con videos and so much more. Enjoy.

CSS Box-Sizing

Having a little knowledge of how the box-sizing property works and when you can utilise it is a neat trick to have up your sleeve. The reason for using the box-sizing property in your CSS is to alter the default CSS box model. Modifying the box model gives you the option of whether or not an element’s width and height include padding and border or not.

Using Sass source maps in WebKit Inspector

Lennart Schoors:

If you’re using Firefox and Sass you might have heard about FireSass, but Chrome users have been out of luck until recently. This is where source maps come into play. Source maps are a language-agnostic way of pointing your inspector to the right location in your unminified and uncombined files. Originally devised for JavaScript, they can equally be applied to CSS preprocessors.

A fairly recent commit enabled experimental support for Sass source maps in Chrome, so make sure you’re running at least Chrome 24.

Awesome! Well, thats if you are into the CSS preprocessor world.

The Infinite Grid

Chris Armstrong:

Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today we’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between.

We’re designing for an infinite canvas—and for that, we need an infinite grid system.

Cracking read!

Contrast Ratio Tool

Lea Verou:

I was always interested in accessibility, but I never had to comply with any guidelines before. At W3C, accessibility is considered very important, so everything we make needs to pass WCAG 2.0 AA level. Therefore, I found myself calculating color contrast ratios very frequently.

There are plenty of tools out there for this. However, I found that my workflow for checking a contrast ratio with them was far from ideal. I had to convert my CSS colors to hex notation (which I don’t often use myself anymore), check the contrast ratio, then adjust the colors as necessary, covert again etc. In addition, I had to adjust the lightness of the colors with a blindfold, without being able to see the difference my adjustments would make to the contrast ratio. When using semi-transparent colors, it was even worse: Since WCAG only describes an algorithm for opaque colors, all contrast tools only expect that. So, I had to calculate the resulting opaque colors after alpha blending had taken place. After doing that for a few days, I got so fed up that I decided to make my own tool.

You can read more about the Contrast Ration tool on Lea’s blog.

I absolutely dig how Lea just builds, builds, builds. Go Lea!

Epic list of Frontend Development Tools

A great collection of tool for frontend development by Cody Lindley. The list covers coding tools, references, guides, pollyfills, generator tools and performance links. All that is missing is a newsletter section… — Your Web, documented

Web Platform Docs is a new community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. Even though Web Platform Docs is still in alpha, you can already find lots of valuable content on the site, including information on:

  • How to use features of the open web, with syntax and examples
  • What platforms and devices you can use various technologies on
  • What is the current standardization, stability and implementation status of each technology specification

In the future, Web Platform Docs will include even more content for you to explore such as live code examples, resources for educators and much more.

If you want to get involved in making the documentation better, just sign up, it’s super easy.

Responsive Web Design Makes It Hard To Be Fast

Guy Podjarny:

I like Responsive Design. Heck, I LOVE Responsive Design. I think it’s a brilliant methodology, which address true challenges in a very good way. But no matter how fond you are of RWD, I think you have to face the music – RWD makes it very hard to write a fast website.

I’m not saying you can’t write a high performance responsive website. I’m not saying you shouldn’t use RWD (Responsive Web Design) – I would actually recommend it to most organizations. However, RWD makes pages inherently more complicated, and all in all would make the mobile web slower.