Stuff & Nonsense. Website designers in North Wales

And all that ‘Malarkey’

Since 2004, our blog’s been a popular destination for thousands of designers and developers.

Zoe Gillenwater on Leveling Up With Flexbox

The Guardian’s take on Mobile-first Responsive Web Design and IE8

The Guardian’s Kaelig Deloumeau-Prigent recently wrote about their struggles and strategy for dealing with Internet Explorer 8. People visiting my site using Internet Explorer 8 are few and far between these days, but those that do could be good customers, so with our redesign I wanted to make a real effort to give them a good experience.

Querying Apple’s Nelson Mandela billboard

Apple doesn’t have what many of us would consider to be a fully responsive website, but that doesn’t mean they don’t sometimes use two of Ethan’s ingredients; flexible media and CSS3 media queries, to improve the placement of some elements on an otherwise fixed page.

Ten years of Sliding Doors of CSS

Exactly ten years ago today, on October 20th 2003, A List Apart published Doug Bowman’s Sliding Doors of CSS.

Star Wars styling (a silly idea that might just work)

I sometimes work with other designers helping them to translate their design atmosphere and wide screen layouts into responsive designs. Breaking down their designs into systems is big part of what I do. In practical terms that means working through what are sometimes dozens of static visuals to identify patterns of typography, use of colour and layouts, both smaller modules and whole page compositions. From these patterns I classify and identify elements and compose stylesheets based on them.

Two good links to more on CSS filters

Following up on my M M M Madness post, here are two good links to more on CSS filters:

My prediction? Designers are going to go CSS filter crazy over the next year.

M M M Madness

While I was preparing the slides from my full day CSS3 For Responsive Web Design at Smashing Magazine, I got very excited by the new filters in CSS. (313 onwards in my slide deck.) These filters — not to be confused with those legacy, proprietary Microsoft filters — are now well on their way to becoming part of a standard.

Slides from my full day CSS3 For Responsive Web Design at Smashing Magazine

I’ve just come back from a trip to beautiful Freiburg in southern Germany where I hosted my new CSS3 For Responsive Web Design workshop at Smashing Magazine. I went to Freiburg last September when Alex and I attended Smashing Conference and we had a brilliant time. The folks at Smashing Magazine were genuinely welcoming and I jumped at the first opportunity to work with them again.

CSS Tricks: Just One of Those Weird Things About CSS: Background on <body>

The CSS Zen Garden at 10

I’m struggling to believe it quite frankly, but The CSS Zen Garden was planted ten years ago today. I don’t think we should underestimate the importance of The CSS Zen Garden in the history of the web. Its influence still resonates today. Now it’s back accepting submissions and making some of us feel very old.

Three Saturday CSS3 For Responsive Design links

My Responsive Web Design workshop at Smashing Magazine is getting closer and some tickets are still available. In the meantime, here are three useful new resources for responsive layout using CSS3:

aprilFools.css

Steven Bradley: Working with flexbox (the new specification)

This could be most essential CSS3 media query you’ll need today

We know that it’s only web designers who habitually resize a browser window to see if a site’s responsive. But why not reward their dedication with a little something special? Add this to your stylesheet:

@media only screen and (min-width: 960px) and (max-width: 970px) {

body {
-webkit-transform : rotate(180deg);
-moz-transform : rotate(180deg);
-o-transform : rotate(180deg);
transform : rotate(180deg); }

}

This could be the most essential CSS3 media query you’ll need today.

Flexbox syntax for IE 10

Three clever people talk about CSS layout

Not since the turn of the century, when we largely shifted from using CSS positioning to floats, has CSS layout been so interesting. Here are three great reads from just today that are all worth your time:

PS: If you can remember either The Noodle Incident or Position Is Everything, it’s past your bedtime.

Getting prepared for Windows 8 and Internet Explorer 10

Microsoft launches Windows 8 in just a few days, so now’s a good time to turn our attention to Internet Explorer 10. Here are two links to help you get prepared:

Keegan Street’s Specificity Calculator

Chris Coyier: Media Queries for high resolution displays

Conor MacNeill: Major and Minor Breakpoints for CSS

Dave Rupert: Five steps to gettin’ flexy

Tweetbot for Mac Alpha CSS animation

Tweetbot for Mac Alpha is notable for a whole bunch of reasons I won’t get into here. Instead, I found something notable about the CSS the Tapbots team used on the page for their alpha release.

CSS3 Animations, transitions, transforms and gradients to go unprefixed in Firefox 16

CSS3 superheroes

Harry Roberts: The open/closed principle applied to CSS

CodePen

A quick tip for Internet Explorer styles using LESS

For me this week is all about testing the responsive application templates I’m designing in legacy versions of Internet Explorer. Along the way I picked up a new LESS CSS trick (who just said “old dog?”)

Firefox’s file uri origin policy and web fonts

File this one under gotchas.

I’m desktop browser testing a series of layout templates for a current project today. Everything was going really well until I encountered some files where my web fonts stubbornly refused to display in Firefox, but rendered perfectly in every other browser. Luckily I found the reason for the problem and a solution to it.

Stephen Hay: Multi-column confusion

Type study: Sizing the legible letter

Original Hover Effects with CSS3

Ambition No.142

My CSS Zen Garden submission, unimaginatively titled ‘Invasion of the Body Switchers,’ has been accepted. Thanks Dave!