Blog

And all that Malarkey

For over ten years our blog’s been a popular destination for thousands of website designers and developers from all around the world.

Art Directing the Web

As I mentioned last week, I’ve written a new talk to help me cope with my obsession with making layouts that are different from what we mostly see on the web these days. It’s called ‘Art Directing the Web’ because in the talk I make the point that we should make different layouts not just for difference sake, but to better communicate the meaning of our content and to tell better stories.

Using contenteditable while designing with a browser

While I’m finalising the table of contents for my ‘shot,’ I’ve been thinking about the things that I regularly do when I’m ‘Designing with a Browser’, one of which is using the contenteditable attribute in the templates that I share with clients.

Creating a colour palette inspired by Martin Scorsese’s film Hugo

Over the last few months, we’ve been working with a client on the design of a mobile analytics ‘web app.’ I’ll show more of it when we add it to our portfolio, but because lately one or two people have asked me about how we choose colour palettes, I thought I’d share how we came up with the colours for the Elemez app.

Complete Madness

I like to think that at Stuff and Nonsense, our house isn’t so much a place to work as it is a house of fun and although we take the work we do very seriously, we don’t take ourselves too seriously at all. We hope that sense of fun comes across on our site and today we’re putting aside our embarrassment, putting on our baggy trousers and unveiling a new header on our home page.

Seven

You might think — because all the talk at the moment is about seven inch tablets, in particular the iPad mini vs Google’s Nexus 7 vs Amazon’s Kindle Fire HD — that a seven inch tablet was a seven inch tablet was a… Right? Wrong.

About those long line lengths

Thank-you to everyone who tweeted and emailed about the site. The reaction was overwhelmingly positive. More than I’d hoped for. And I’d hoped for a lot. Some of the comments came with bugs I need to fix and suggestions for improving the site and its performance overall. I’m really grateful for that. A little bit of follow up from yesterday’s site launch.

We need a standard show navigation icon for responsive web design

You know those responsively designed sites where — on small screens like smartphones — navigation is either hidden or set at the bottom of a layout, then revealed when you click a button? Well, I think we need a standard ‘show navigation’ icon for that button in responsive web design.

Responsive type references

When we’re designing responsively, getting type sizes right can be tricky. On small screens especially, we need to make sure that passages of body text are comfortable to read and that we don’t set headings too large or with too much leading.

Tools like Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight — so I needed to find a way to decide on my type sizes before I start using Fireworks or Photoshop.

So I made type reference files and uploaded them to a server (and now to GitHub.) There’s really not much to them. They contain only headings, paragraphs and small text, but of course you could expand them to include any number of different content types if you need to. I open them on all my test phones, e-readers and tablets.

Because different typefaces need different treatments, I made type references for both serif (Georgia) and sans-serif (Helvetica) typefaces. The next time I start a project, I’ll likely hook up one to my Typekit account too, so that I can test my web fonts on real devices before (and during) a design.

I’m sure that smarter people can improve the tools for a technique so I’ve posted my files up to GitHub (whatever that is.)

Responsive type references on GitHub.

Designing for ISO

This year’s been one of my busiest for speaking, teaching and designing for clients. You might not be able to tell that though, because when I deconstructed this site a few months ago, my portfolio was one of the things that didn’t find its way back. I’ll rectify that in the new year, but in the meantime I wanted to share some of the projects I’ve been working on, starting with this — a redesign for ISO, the International Organization for Standardization.

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.

Expect wonkiness

I’ve been wanting to create a new look for Stuff & Nonsense for a good, long while, but I felt daunted by how much work I imagined there’d be for a redesign. My work diary is so full that I couldn’t see the time I thought I needed, so the site stagnated and over the last few months I couldn’t bear to look at it. Then a few weeks ago, Elliot spontaneously redesigned his site and inspired me to follow suit.

Dig the new breed

Old fashioned causes like that still stand
Gotta rid this prejudice that ties you down
(Ghosts by The Jam)

Love, love me, do

Ahead of an announcement I’ll be making tomorrow (don’t tell anyone, but it’s about Hardboiled Web Design workshops), I decided to make a little fun of myself.

Video of my Hardboiled Web Design talk from DIBI 2010

If you didn’t get a chance to catch my Hardboiled Web Design talk at a conference this year, your luck just came in. Those fine chaps at CodeWorx have posted a high quality video of the entire talk. I’ll post a text transcript and slides from the talk later this week.

Working on MobiCart

Back in August I started work on a new design for MobiCart, a new mobile e-commerce platform, designing both the front-of-house site and the back-end admin. It was fun, although it lasted only a few weeks.

CannyBill redesign goes live

It seems like months ago (it was) when I handed over my design templates for the redesign of CannyBill. Since then, the canny chaps have been working hard to implement the design and @RellyAB has been working her strange magic on their copy. Yesterday the new CannyBill site went live.

I, The Jury

I asked: Web designers are cool, but private detectives are cooler. No argument, but why can’t you be both? The answer? You can.

Could you be a dick?

I’m in the middle of preparing materials for a new book, “Hardboiled Web Design”. To demonstrate CSS3 selectors, transforms and transitions I’m putting together a page in the demonstration site, “It’s Hardboiled”. That’s where you come in.

Trimming form fields (repost)

Web forms often ask visitors for non-essential information, but long and complicated forms can hinder a sales or sign-up process. Wouldn’t it be cool to give users the option to hide these optional fields at their own discretion. (This entry was originally posted in 2004 and has been updated in 2009.)

What does browser testing mean today?

Before we send over our design files to the chaps at CannyBill, first a run through of the browsers that we have tested in the new design and some musings about what browser testing actually means today, in the face of an ever more diversified browser and device landscape.

A top down look at the CannyBill redesign

With the first phase of the CannyBill redesign process drawing to a close, I would like to say a huge thank-you to the CannyBill team for encouraging a public, open design process and to everyone who has commented and tweeted their helpful suggestions.

Prices and plans design patterns

When is it the right thing to do not to attempt to reinvent a well established, tried and tested design pattern or convention. This question has come up while I have been designing the CannyBill prices and plans page.

Advanced CSS Styling and the CannyBill redesign project

It’s not everyday that I get to work with a client that completely gets why it’s important to push the progressive enrichment boundaries by using HTML5 and the kind of advanced CSS styling that I teach at my workshops. Luckily, the CannyBill team do more than get it. I’d like to share a little of the HTML5 and CSS that I’m using for this project.

Designing the CannyBill home page

After two weeks on the CannyBill redesign project (one of which I spent traveling to Chicago for An Event Apart), it time for deep breaths as I talk about my design of the home page for the new CannyBill front of house site and ask for your thoughts and suggestions.

CannyBill design process, package contents

Liked most of my projects these days, I’m designing the next iteration of front of house site in a browser rather than making static visuals of page layouts. I know I’m in danger of sounding like a broken record, but I genuinely do find the process to be faster and better at scoping ideas and demonstrating them to clients. So I thought I’d share the start of this process and the files that I use.

CannyBill redesign peer research

I have to confess that when I’m designing, I often don’t take too much notice of a company’s peers or competitors.

Designing with @font-face delivery services

With all the buzz around @font-face delivery services such as Typekit, one question remains to be properly answered. How can web designers show concept work to their clients when the fonts they want to use are hosted (and protected)?

Sisters

I’ve been slowly evolving the design of For A Beautiful Web over the last few months since I relaunched it in April. Back then I stripped it back from its almost universally unpopular first design, then added hints of a future direction on the home page. Now that design has matured and today I launched its sister site at Transcending CSS.

New Internationalist — the last ten days

It’s been ten days since I uploaded the last batch of New Internationalist design files. Since then the team at New Internationalist have had time to live with the templates and make a small number of suggestions and requests that I have implemented over the last couple of days.

For A Beautiful Web DVD cover artwork

While the folks at New Riders work hard on editing the three DVDs that I recorded in February, and I make trouble by asking for tiny changes, I turned my attention to designing the cover artwork.

New Internationalist redesign - entering the final stages

Now is the time, particularly during this open design process, where I get nervous about presenting the design I hope to launch. While I know that there are still aspects left to resolve, I wanted to share my process and thinking behind what I’m showing today.

Struggling with the New Internationalist wordmark

For the last few days I’ve been working on the branding aspects of my New Internationalist redesign and I have to admit that I’m struggling. There is a raging argument going on in my head. Please help me make it stop.

Walls Come Tumbling Down

As I’m putting together Walls Come Tumbling Down, the talk that I am giving this year at @media 2009 London and An Event Apart, I wanted to share some of my notes on how the current recession will affect the way that web designers and developers work.

1930’s-40’s in Color

It’s possible that this should be an elsewhere entry, but as so many people have emailed, tweeted and otherwise asked about the placeholder images that I’m using in my New Internationalist redesign process, I thought I’d share the source.

A top-down look at the New Internationalist redesign

Thanks to all of the excellent and constructive feedback so far, I am today working towards the New Internationalist pages that I am designing being feature complete and ready for sign-off next week. With that in mind, I wanted to share with you a top-down view of all of the pages that I have been working on.

The New Internationalist home page challenge

Most often when I’m designing a new site, I focus first on its content pages. Then, working from the inside-out, I finally arrive at the home page. This is the approach that I’ve taken in my work for New Internationalist. That said, a site’s home page is often what people want to see first, so who am I to disagree? Today I want to share and invite your feedback on my work on the New Internationalist home page.

The New Internationalist redesign process

When I was asked by New Internationalist to design for their online magazine, blogs and shops, the challenge seemed pretty daunting. The New Internationalist site has content that reaches back over thirty years, more page templates than you can shake a riot policeman’s truncheon at and a structure that involves some complex interaction design challenges. I also have limited time, budget and resources available.

New Internationalist online branding

As part of the New Internationalist redesign project, I’m focussing on how the organization presents itself online. To begin that process, I’ve been researching the printed magazine since it started in 1973. (I should stress that I’m not working on the organization’s overall branding, nor the design of the magazine.)

Help me to redesign New Internationalist

A few weeks ago I received an email from New Internationalist magazine asking me if I’d like to work on the redesign of their online magazine, blogs and shop. I was away from my studio when the email arrived so I pecked out a quick reply on my iPhone. I think it went something like New Internationalist? Oh fuck yes!

Still Really Worried

It’s always a pleasure to have the opportunity to build on work that I have done in the past, so a few weeks ago I jumped at the chance to work on a small visual design realign for my friend Richard Rubin of Really Worried fame.

Designing tweetCC

This week Brian Suda and I launched tweetCC, a Twitter micro-app that allows Twitter users to declare a Creative Commons license for their tweeted content. I’ll be writing more about why we decided to make tweetCC and why licensing you tweets is important in a future entry, but as several people have commented on my design and CSS implementation, first a few words about them.

Pajamas

Today it came to light in a blog post on Microsoft’s IE Blog that the company intends to include a new ‘compatibility feature’ and black/white list that it hopes will help users if sites break in the up-and-coming release of Internet Explorer 8.

A client-focussed copy style guide

Let’s be fair, few customers are professional writers and few hire one when making a web site. That is why I now include professional copywriting into every estimate as a non-removable item. When customers are adding their own copy to a site, I give them ten simple tips to follow.

Five CSS design browser differences I can live with

Web designs need not look exactly the same in all browsers. I know that’s a topic I have written about and spoken on a fair amount before, but somehow I’m always amazed by the reactions that I get when the subject comes up.

Time to stop showing clients static design visuals

Demonstrating our designs to clients as XHTML/CSS pages rather than as static Photoshop or Fireworks has streamlined our workflow and helped us to set and manage a client’s expectations better than ever before.

Designing For A Beautiful Web

When I set out to design the site to launch For A Beautiful Web I knew that I wanted to set a new tone and arrive at something a little unexpected. One of the ways that (I hope) I have achieved that level of unexpectedness was to turn to a classically trained artist, rather than a web designer for creative direction.

The Jon Burgerman Edition

To my complete and utter amazement, Jon Burgerman has agreed to create something truly, but unsurprisingly unique for this site. In doing so he has made me realise just how different a feel a new illustration can create, even when nothing else on a page changes.

Jasper Johns’ Flag at MoMA

Maybe I’m out of step with the fashion, but I would love to see flat colours and gradients give way to more visual richness and depth

.net magazine September 1998

What did I do with a Pentium 100 PC with 16Mb, Photoshop 4.0, Picture Publisher 7.0 and Frontpage 98?

Semantics and design

There is a danger of adversly effecting semantics through incorrect use of CSS.

MIX06: Viva Las Vegas

The one where Malarkey wears his glittery trousers around MIX06 Las Vegas.

MIX06: Viva Las Vegas

The one where Malarkey wears his glittery trousers around MIX06 Las Vegas.

Designing for: The Web Standards Project

SXSWi, The Web Standards Project is changing, entering a new time in its history, opening the hive up to better include the communities and issues we’ve done our black and gold best to represent since 1998. And with the new phase comes a new face, and I could not be prouder that Jeffrey Zeldman has today cut the virtual ribbon on my new WaSP design.

And all that (Design) Malarkey

It’s here. I've been meaning to redesign this site for a little while now and the urge was getting too strong to ignore. I just had to do it.

Changingman layout

Changingman, a liquid three column CSS layout with a fixed positioned and width centre column, released under a Creative Commons Attribution 2.0 license.

Tim Burton’s Corpse Bride online

Tim Burton’s Corpse Bride web site reminds us that Flash can still provide an undeniably superior user experience.

A List (taken) Apart

The new ALA 4.0 and an interview with designer Jason Santa Maria.

On top form

Form styling is often difficult to get excited about. So I’m collecting what you think are great examples of

design.


Contact us

x

Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ

(Here’s a map showing how to find our studio.)