Stuff & Nonsense. Website designers in North Wales

Blog archives

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

A belated update to Transcending CSS (not an April Fools’ joke)

I always vowed that I wouldn’t update Transcending CSS, but there’s always been something about that old book that disappointed me and now I have the chance to fix it.

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.

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:

Stu Robson’s Sass Media Query mixin

An interesting media query mixin that also deals with legacy Internet Explorer. I need to play some more, but this looks promising as a better solution than mine for Rock Hammer.

Nutty responsive assumptions

The Stuff and Nonsense nutty boys header is pretty tall and I decided I wanted to reduce its height for small screens, such as phones, in landscape orientation. When I wrote the CSS to make this happen I made some nutty assumptions. In the spirit of sharing our mistakes:

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.

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:

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.

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.

Is separating layout styles from design atmosphere using data-layout good practice?

I’ve been reading Jonathon Snook’s Scalable and Modular Architecture for CSS book this week. (It’s well written, practical and perfectly formatted for Kindle. I learned a lot and I’d highly recommend it.) In SMACSS, Jon recommends breaking down stylesheets into rules for:

  • Base
  • Layout
  • Module
  • State
  • Theme

He establishes a naming convention for these categories of styles. Jon says:

I like to use a prefix to differentiate between Layout, State, and Module Rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate layout styles from other styles.

I like this idea a lot because, 1; I’ve had a fascination with naming conventions, and 2; I’ve long had a problem with mixing styles for layout with styles for ‘atmosphere’ (colour, texture and typography,) something we’ve all done for years.

To me, using classes makes sense when we need to ‘classify’ items such as modules on a page. They make sense for groups of styles in a theme too. But it doesn’t make sense to me to use classes for the layout outline of a page, particularly when many times we add the elements they style purely for layout reasons and especially in a responsive context. It feels somehow messy.

Years ago, when oft-used browsers only supported element, class and id selectors, we didn’t have much choice. Now that browsers from Internet Explorer 7 up have solid support for CSS attribute selectors, we can bind our styles to elements based on their attributes. That’s why we’ve seen more and more people binding styles using ARIA role attributes. For example:

<div role="navigation">…</div>

[role="main"] {
/* styles */ }

Reading SMACSS got me thinking. Why not abstract layout styles even further than Jon suggested, by using HTML5’s data- attributes instead of classes. Something like:

<div data-layout="content">…</div>

[data-layout="content"] {
/* styles */ }

Conceptually, this fully separates styles for layout from every aspect of atmosphere. Although I’m aware that there are no practical advantages to using data-, to me it somehow feels cleaner.

I’m not 100% sure if this could be a legitimate use for data-. What are the experts’ opinion? I’d be interested in hearing if you’ve used this approach already and what you think might be the possible advantages and disadvantages?

There, I said it

Faruk Ateş in Opera Confirms WebKit Prefix Usage:

I’m left feeling that this is just Browser War II, and what grace we’d regained by switching to Feature Detection rather than UA sniffing will be lost once again as a result of these moves.

With some luck, things will just become better for the users of those browsers who will once more pretend to be someone they aren’t, and us web authors aren’t inconvenienced too much. Meanwhile, it is left—again—up to web authors to invent the tools to placate the browser vendors who gave us this mess in the first place.

I commend Opera for finally admitting — through their decision to adopt WebKit Prefixes — that their real motives are the corporate motives we always knew them to be. That they’re not the standards champions they pretend to be. That they’re prepared to break a fragile, but working standard for corporate gain.[1]

What their actions also tell us is that despite hiring some of the best minds in the business[2], their strategy of evangelists and ‘web openers’ has resoundingly failed to convince developers that Opera is relevant. If that wasn’t the reality, they would have no need to adopt another platform vendor’s prefixes.

What Opera forgets in its colossal arrogance, is that vendor specific prefixes were intended to give developers a choice to support a browser platform — or not.

We were never ‘required’ to include a full set of prefixes.

Excluding Opera didn’t qualify as ‘invalid.’

If I choose to exclude Opera (or Webkit or Mozilla or Microsoft,) that’s my choice and my right.

1. For the record, I don’t have a problem with a profit motive, just hypocrisy. 2. I don’t have a problem with individual Opera employees either (although many think I do). This isn’t about them.

This is the new 320 and Up

A lot’s changed since I wrote the original ‘320 and Up’ — my ‘tiny screen first’ responsive web design boilerplate — one year ago.

Universal Internet Explorer 6 CSS revisited

It’s been almost three years since I launched, what most people thought of as the bat-shit crazy Universal Internet Explorer 6 CSS stylesheet.

LESS

About two years ago, I tweeted “If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!” I meant it too. After-all, CSS isn’t hard to learn and it’s easy to write and write quickly. So why would you need a processor like LESS or Sass?

Responding

After pushing my redesign live yesterday, I’ve been asked a few times about why I pulled respond.js (and with it, CSS3 Media Query support for older versions on Internet Explorer) from the new site.

320 and Up

As Jeremy mentioned yesterday, just before An Event Apart in Seattle, I spent a few hours on a spot of guerrilla testing at an AT&T store. Specifically, I was looking at how Windows Phone 7’s Internet Explorer browser handles ‘responsive sites’.

Hardboiled CSS3 Media Queries

This entry has been deprecated:

Please use 320 and Up instead.

Making layouts responsive using CSS3 Media Queries are a big part of the work that I’m doing for the Hardboiled Web Design site in the run up to the book’s launch.

Proportional leading with CSS3 Media Queries

Yesterday, Mike Davidson announced the sweeping redesign of msnbc.com article pages. The redesign is especially brave from a traditional news outlet business perspective as it emphasizes readability and enjoyment over page views. But I do have a minor gripe with its typography and set out to find a solution.

Internet Explorer 9 is on the boil

Yesterday Microsoft announced the third Platform Preview of Internet Explorer 9. I’ve been using this preview for a while, testing how their newest browser stands up to the examples I’ve designed for Hardboiled Web Design.

Do try this at work

Today, RIM unveiled its latest mobile browser. It runs WebKit making every mobile platform except one run that rendering engine. With that in mind, I’d like you to try this experiment.

Enable CSS pseudo-element selectors in Internet Explorer with IE-CSS3.js

A week ago I was grumbling (again) on Twitter about JavaScript selector engines and enablers for Internet Explorer.

You’re living in a fantasy world

Always an example of the best the web design industry has to offer, this year 24 ways, the advent calendar for web geeks, has its focus firmly set on moving your web design forward.

Image management, naming and attribute selectors

Writing this week about eating accessibility humble pie and using CSS attribute substring selectors, a comment by clever Craig Cook sent my imagination reeling.

Eating accessibility humble pie

We all make mistakes. Right? Particularly when it comes to accessibility. Often in the rush to ready a site for launch, we forget to check the details that can make a world of difference. That’s what I did when I launched the latest For A Beautiful Web.

Changingman layout (updated)

Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license. (This entry was originally posted on 23rd November 2005 and has been updated in 2009.)

Advanced CSS Styling workshop example

I’m busy working on the slide deck and example site files for our Advanced CSS Styling workshops in Birmingham, Newcastle (and Tokyo). I’m really excited about this new workshop format and wanted to share one of the example site pages.

Fearful

Smashing Magazine published an excellent primer for CSS3 properties by Inayaili de Leon today which referenced a little of my work. I was pleased, but as today as gone on and I’ve watched the comments roll, my heart started to sink.

An appropriate use for CSS frameworks

Could this be the day that I eat my words about CSS frameworks? I’ve been mean to them in the past, written harsh things. I once likened them to instant cake mixes in response to Jeff Croft’s What’s not to love about CSS frameworks?.

CSS: A tribute to selectors

I wanted to learn more about CSS attribute selectors. — This article was originally published on And All That Malarkey on February 20th, 2005.

Universal Internet Explorer 6 CSS

How do you answer the Internet Explorer 6 question?

In defense of IE6

I've got a Honda CRV. It's eleven years old. It's rusty around the bonnet, the electric windows are sticky and the exhaust is noisy. That's OK. It's been reliable, hardly serviced and as I only drive it a few miles about twice a week, it does everything that I need it to do. I'll probably drive it until I can't drive it anymore.

Site Compatibility and IE8

The Internet Explorer team today posted details that IE8’s Compatibility Mode (replicating IE7) will not render sites exactly as IE7 does.

On needing a timetable for CSS dash extensions

A couple of weeks ago, Ryan Taylor interviewed me for the Boag World bodcast on the subject of Internet Explorer 8 and the state of CSS in browsers generally.

Do UK government web sites need to look exactly the same in every browser?

No, they don’t. As Jeremy Keith so kindly pointed out, it’s a subject that I have been banging on about for quite a while now.

More on developing naming conventions, Microformats and HTML5

It seems like a lifetime ago that I first sat down with a cup of tea and a bourbon biscuit and thought about the conventions that we use for naming HTML/XHTML id and class attribute values.

Is CSS3 RGBa ready to rock? (screencast)

Who said that you can’t teach an old rocker new tricks? At An Event Apart Chicago, it was Dan Cederholm‘s latest talk example, Color Transparency With RGBa that made me sit up and take notes.

Are CSS tables ready for prime time?

I was lucky to be sent a preview copy of Rachel Andrew‘s soon-to-be-published book Everything You Know About CSS Is Wrong!, published by those nice chaps at SitePoint. I’ll be writing a full review later this week, but as the book is largely (almost exclusively) devoted to CSS display : table; properties, I couldn’t wait to try out some of the techniques she advocates.

(Exclusive) Conditional-CSS for Safari Touch

Want an easier way to re-style and optimize your pages to work better in Safari Touch (or Mobile Safari if you prefer) on the iPhone or iPod Touch? I did and now with a custom version of Allan Jardine‘s Conditional-CSS I have it. And you do too.

Activate The Death Ray, Microformats workshop example site

Back in April, I was booked by Carsonified to present a half-day workshop on Microformats as part of their Future Of Web Design London spectacular. So what have Microformats got to do with death rays?

I Keep Faith, CSS workshop example site

Having been booked by Carsonified to host a full-day workshop on advanced CSS back in May, in the weeks leading up to the show I had a flash of inspiration. Why not combine one of my favourite topics with one of my favourite musicians?

CSS Working Group proposals

My entry of last week, where I called for the current W3C CSS Working Group to be immediately disbanded, has generated some serious debate, and a few raised voices. I’m glad that is happening. Now, after a little more consideration, I thought I would outline some concrete proposals for how the CSS Working Group could change for the better.

CSS Unworking Group

Following Opera’s action, today I am calling on Bert Bos, chairman of the CSS Working Group, and those higher up within the W3C including Sir Tim Berners Lee, to immediately disband the CSS Working Group in its current form. I am asking for immediate action to be taken on the formulation of a replacement CSS Working Group that will include new members who are not the representatives of browser vendors.

What’s not to love about instant cake mixes?

Over the past several weeks, I’ve been bombarded (in e-mail, in person, and over IM) with questions about instant cake mixes. It’s completely understandable people would come to me with these questions.

Lost any CSS lately?

If your Internet connection happens to lose a bit of CSS data, you get a mess on your screen.

CSS: Browser testing order

I would prefer that clients save money for more valuable things than achieving pixel perfection.

More power to the people

How can the CSS Working Group give web designers, developers and visitors want they need?

And All That (IE7) Malarkey

To Chris Wilson and the IE7 team, I acknowlege the work that you have done thus far and I’m confident that IE7 will be everything that I expect it to be. Please don’t let me down.

Naked

The one where Malarkey takes his clothes off.

Clearing floats without structural markup in IE7

The one where Malarkey sits with the Internet Explorer team at MIX06 to ask for a recommended answer to a common question.

And All That (Conditional Comment) Malarkey

If you can help out by checking across a range of pages and posting links to screenshots, I’ll be unconditionally in your debt.

CSS3 Multi-Column Thriller

As with all good thrillers, I want to find out what will happen at the end.

CSS: Specificity Wars

A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn't seen before. Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training.

Hide CSS from Safari

If you feel the need to be nasty to Safari, here's another way to do just that.

Ambition No.142

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

3d CSS Zen Garden

I’ve been thinking about making a CSS Zen Garden entry for a little while now, but before I think about design, I wanted to understand the Garden’s XHTML structure. I don’t know if this has come up anywhere before, but it seemed sensible for me to make a graphic illustration of the XHTML file.