Blog

Spotted the difference?

  • Words: Andy Clarke

This is the all new Stuff and Nonsense web site. Things have changed a great deal around here since the last time you may have stopped by. This site is a merger of two domains, the Stuff and Nonsense company portfolio plus the archives from And All That Malarkey.

If you have any comments or suggestions, or you find something out of place, please contact us. We look forward to hearing from you.

This is the all new Stuff and Nonsense web site. Things have changed a great deal around here since the last time you may have stopped by, as this site is a merger of the Stuff and Nonsense company portfolio (formerly at www.malarkey.co.uk) plus the archives from my weblog And All That Malarkey (formerly at www.stuffandnonsense.co.uk). It's a brand new site and marks a brand new start for my tiny corner of the internet.

Some regular visitors may have noticed something strange over the last couple of years. That I had a weblog called And All That Malarkey on stuffandnonsense.co.uk and a design company called Stuff and Nonsense on malarkey.co.uk. Confused? I was.

In Underpants over my trousers I explained the reasons behind my domain dichotomy and asked readers what, if anything, I should do to rectify the situation. Some people thought the reversed domains were quirky and even strangely appropriate. So I did nothing and my domain issue stayed unresolved, even while Stuff and Nonsense's reputation grew and And All That Malarkey gained notoriety.

For many different reasons, in Reg and his Rhodesian ridgeback I explained that it was time to call it a day on And All That Malarkey. It was time for a change of direction and this seemed like the perfect opportunity for me to resolve my long standing domain dilemmas. I also feel that as Stuff and Nonsense is a tiny company that is predominantly focused around my own creative work, that running two web sites under two different domains now seems inappropriate. I am the company, the company is me, ably assisted by my wonderful wife and our freelance colleagues and partners. So why pretend otherwise? And why run two sites? So now there is one site, focused around my creative work and portfolio, my writing about web design and my conference speaking.

From rags to riches

Although it seems like an age ago, even when I designed the previous incarnation of the Stuff and Nonsense portfolio site, I was not entirely happy with the end result. At the time I felt constrained by the demands of business partners and paid advisors who wanted to steer the company down a more corporate route. Even my choice of grumpy looking business types for the home page was a subtle poke in the ribs for my straight laced associates.

Much of my humour and personality fell by the wayside and although the site was critically well received, found its way onto several CSS gallery sites and even wound up in Jeffrey Zeldman's second edition of Designing With Web Standards, I still felt disappointed. Even though the site was not ideal, it did serve its purpose for a time.

Throughout last year while I was writing Transcending CSS and re-establishing Stuff and Nonsense as an independent company, the site stagnated. It became a thorn in my side and a reminder of the miserable times that I was putting behind me. Some people even wondered if I was still making creative work, so lacking was the site in updates.

Now all of that has been put to one side and after several months of planning, designing, writing and coding, you are looking at the result. The new and improved Stuff and Nonsense.

New and improved

So enough about the past. What about now? The new site is a complete ground up rebuild with not a single image, word or line of code carried over from either the portfolio site or And All That Malarkey.

There are Ace Face branding illustrations by the wonderfully talented Kevin Cornell who many of you will know as the staff illustrator on A List Apart magazine. As you might expect, Kevin's work-in-progress pencil sketches are as wonderful as his paintings, so I have added an Easter egg somewhere on the site. Find the egg to see the sketches.

Kevin also brought our S&N logo, inspired by British motoring association badges from the 1950's and 60's, to life. Working with Kevin was a joy and there will be more of his scooter riding characters appearing as the site develops. You can read Kevin's take on the project over at Bearskinrug.

Other people also had a hand in the making of the site. James Edwards, PPK and Simon Willison wrote and debugged JavaScript. Mark Wubben created a custom version of sIFR3 to add sparkle to the typography and my colleague Owen Gregory made magic happen behind the scenes by his work on the shiny new Expression Engine CMS.

What about Internet Explorer 6?

As has become traditional, if you are using an old time browser such as Internet Explorer 6 or earlier, you will be seeing a different design to those using a modern, more CSS savvy browser.

This is a feature that I started with the previous incarnation of And All That Malarkey with my 2Old black and white design and it seemed like a fun idea to again serve a black and white version to Internet Explorer 6. This time I am also serving one of Kevin's original pencil sketches of Ace Face in place of his full colour, painted version.

So why serve two different designs? Well, because I can. Will this hurt my business as so many prospective customers will be using Internet Explorer 6? Only time will tell, but I have a suspicion, based on conversations with my existing customers, that it won't.

So what's next? Over the next few weeks I will be developing my portfolio further and adding in more detailed information about the projects that I have been working on. I will also be smoothing off the rough edges and fixing bugs that I know will be reported once the site is in the wild.

The all new Stuff and Nonsense

I really enjoyed designing and building this site and I found the process liberating. I hope that you like it.

In case you might be wondering about a few things, I thought that I would compile a few short answers to some of the questions that I have been asked by those kind people who helped to beta test the site.

What CMS did you choose?

After much consideration and testing of various systems (plus a ton of badgering from Simon Collison) I chose Expression Engine and oh boy am I glad I did. EE has become my CMS of choice for non-transactional sites (for ecommerce sites there is nothing to beat Trading Eye).

What is the typeface used for the main headings?
Chaparral Pro Bold, available to download at Fonts.com
How did you achieve the text wrapping effect on the home page?
I'm very proud of that. It was accomplished with a combination of CSS floats, relative positioning and negative margins. I intend to write up the technique at some point soon.
What was yout inspiration for the main navigation?
The main navigation was inspired by a central Russian newspaper that I discovered during my research for Transcending CSS.
You used a table element to mark up your main navigation?
Yes. Although using tables for layout will normally result in hair loss, after several hours pondering the semantics of the navigation information I decided that it was infact tabular information.
How did you make the site black-and-white in Internet Explorer 6, and why?
Why? Because it seemed like a fun idea. I could just have easily make the full colour design render in IE6, but chose instead to use an < IE6 only stylesheet and several grey-scale images. To make inline images appear black-and-white I used a non-standard Microsoft CSS property: img { filter : gray; }. Do I mind that the IE stylesheet fails to validate? Not one bit.
Will you be blogging again?
No, and yes. There will be a new type of blog on this site towards the end of this year, but it won't be like And All That Malarkey as it will be focused around creative design topics as well as CSS and other web standards conversations.

Got something to say?

So here it is, the all new Stuff and Nonsense. If you have any comments or suggestions, or you find something out of place, please let me know.

Original comments

  1. #1 On May 11th 2007 at 12:25pm Faruk Ate? said:

    Rawk.

    Looking good. Can’t say I agree with the view that your navigation is tabular data, but eh, not gonna make a fuss.

    Big likes: color scheme, headers, typography. Smaller likes: navigation including a descriptive line, artwork, the finger to IE6

    Dislikes: comment fields on a separate page. Boo! All in all, good stuff though. Now get back to blogging. (Yes, yes, I know, I’m one to talk!)

  2. #2 On May 11th 2007 at 12:26pm Eric Eggert said:

    Nice redesign. I really like it. There’s a FOUC problem in Safari and probably you’re willing to fix this. The SIFR fonts look great and the illustrations do also.

  3. #3 On May 11th 2007 at 01:21pm Owen Gregory said:

    Lovely work, here, Andy. Your attention to detail is exemplary; every individual part of the site combines to create a coherent and compelling whole. Oh, and it was a pleasure to work with you on it.

  4. #4 On May 11th 2007 at 03:00pm Matt Richards said:

    Good work Andy, as per usual!  The site is absolutely beautiful, and the markup… even more so.  I had high expectations and you’ve blown them all away.  Not 100% sure about the navigation table, but in essence it is a ‘Table of Contents’, anyway, I’m sure you’ve spent much more time thinking about it than I have!

    Keep up the good work, I look forward to reading some of your upcoming articles.

  5. #5 On May 11th 2007 at 03:36pm Keith said:

    I’m glad you finally got it done!  Since I was lucky enough to see a preview a while back I’ve been waiting with baited breath.  Nice work, very nice.

  6. #6 On May 11th 2007 at 05:54pm Colly said:

    Woo-hoo! It’s finally out in the wild. Lovely, lovely, and I’ve still not explored it’s extremeties yet, even with the benefit of a long preview. Inspirational as always, you bugger.

  7. #7 On May 11th 2007 at 06:16pm David VanDusen said:

    You really delivered on this one.  The site is overwhelmingly solid, but it’s the little things that make it shine.  I love the “Remove Optional Fields” button on the contact form.  The easter egg in the ... oh wait!  The rest of you have to find it for yourselves.  And of course “How to use help” is a keeper. You really raised the bar with this one.

  8. #8 On May 11th 2007 at 06:57pm Matt Robin said:

    Congratulations Andy - good to see this up online, LIVE, and already getting the recognition it deserves. 

    (Strange, but I sort of like the IE version nearly as well as the colourful version! Which I couldn’t say about the previous version).

    I’m not sure about the numbered buttons on the end of the navigational lines (I mistook those for being ‘temporary’) - they sort of don’t match the style used for the rest of the front page. Having said that…I can easily disregard that minor gripe because there is so much more that I like about the site. I also thinks it’s cool that we’ve both re-launched our sites at the same sort of time.

    What the Dutchman said: ‘back to the blogging’...(looking forward to more articles from you Andy!)

  9. #9 On May 11th 2007 at 07:02pm Luke Dorny (luxuryluke) said:

    High-class and full of vigor!
    Well done. I’m still browsing it and x-raying your design via cssedit! Prawps!

  10. #10 On May 11th 2007 at 07:07pm Adam Schilling said:

    Bravo! Love the new face of S&N!

  11. #11 On May 11th 2007 at 07:11pm Steve P. Sharpe said:

    I’m loving the new design. Glad to see it’s using the mighty Expression Engine! Attention to detail is great, I’m sure I’ll keep finding little niceties the more I explore the site. Keep up the good work, fancy redesigning my site?  Hehe…

  12. #12 On May 11th 2007 at 07:35pm bearskinrug said:

    It’s live! I’m so happy to see that scooter again :D Congratulations, Andy!

  13. #13 On May 11th 2007 at 08:39pm Nate Klaiber said:

    Looks beautiful. I love the layout, the colors, and the artwork/illustrations are beautifully placed. Congrats on getting it out in the wild…

  14. #14 On May 11th 2007 at 11:17pm Aaron Gustafson said:

    Looking good Andy. Glad to see it finally launched!

  15. #15 On May 11th 2007 at 11:41pm Ryan said:

    So where are the archives from your blog?

  16. #16 On May 12th 2007 at 01:29am Andy Clarke said:

    @ Everyone: Thanks for all of those wonderfully kind words. I really appreciate them.

    @ Ryan: I will be making the archives from And All That Malarkey navigable in the next weeks. Until then it’s up to Mr. Google to help you out.

  17. #17 On May 12th 2007 at 09:36am Stéphane Deschamps said:

    I used to show your company’s site a lot for the witty background that only showed its easter egg when you pushed fonts up. Any chance to find it in a temporary folder somewhere on your site, the time for me to make a screenshot, give credit where it’s due, etc? I’m often teaching colleagues and this improved the ‘cool, wow’ factor a great deal.//

  18. #18 On May 12th 2007 at 10:56am andrew said:

    Another thumbs up. The FOUC in Safari is more a few seconds than a flash. Firefox by contrast displays a blank screen for those few seconds.

  19. #19 On May 14th 2007 at 12:53am Dmitry Baranovskiy said:

    Great design, as always. What about print style sheets? ;)

  20. #20 On May 14th 2007 at 01:06pm Jason Beaird said:

    Wow, amazing job Andy.  This is quite a redesign.  Love the Chaparral Pro headers!

  21. #21 On May 14th 2007 at 03:05pm Barry Bloye said:

    Nice. :) The redesign has the elegance and balance of a print design, but still feels like a dynamic, living, breathing website. Not the easiest thing to do!

  22. #22 On May 14th 2007 at 03:58pm Tomasz Gorski said:

    Thanks for very interesting article Andy. btw. I really enjoyed reading all of your posts. It’s interesting to read ideas, and observations from someone else’s point of view… makes you think more. So please keep up the great work. Greetings

  23. #23 On May 15th 2007 at 09:19am John said:

    Well, finally it’s all under the same roof, and it’s a nice roof at that.

  24. #24 On May 15th 2007 at 09:32am Dmitry Baranovskiy said:

    I am lucky person. I’ve found your easter egg! Could I have a prize? :)

  25. #25 On May 15th 2007 at 01:14pm Richard B said:

    You’re back! Woo! And… you’re using ExpressionEngine. Good choice there fine Sir. Good choice indeed. Site looks good Malarkey. Top stuff.

  26. #26 On May 15th 2007 at 03:11pm Markus said:

    Curious I was, I tested the site in IE 5.0 (yes, that’s a zero) and the page just compates up white blank; just the titel in the browser window being set. Other IE below seem to match you goals for the layout (black/white). Consider me pedandtic, but even today launching a new website we’re doing basic testing in IE5.0 and creating some custom CSS rules (go, conditional comments, go) just so far that at least the content is accessible. No matter of far off the layout falls from the concept ;) as long as everything is readable.

  27. #27 On May 15th 2007 at 03:52pm Andy Clarke said:

    @ Markus: Thanks for testing the site in Explorer 5.0 for us. As we have it specifically written into our client contracts that we do not write code for, nor test in abandoned browsers such as Explorer 5.x, we also could warrant testing or writing code for this site to allow for their quirks. Our statistics show us that all combined versions of Explorer 5.x account for less than 1.5% (630 visitors) of the 42,000 ‘Absolute Unique Visitors’ that this site receives on a monthly average. We therefore made a commercial decision on browser support.

  28. #28 On May 15th 2007 at 03:59pm simon r jones said:

    Nice job Andy (+ Kevin and others). Glad to see people not afraid of making creative use of the <table> tag!

  29. #29 On May 15th 2007 at 05:33pm Maleika said:

    Hi Andy,

    Overall I very much like the transition. I am not too fond of the logo. It may need to grow on me. The other illustrations are wonderful though, great work, Kevin! There is only one thing I do not like at all; “what’s a download?” at the bottom of the page. I doubt there is anyone out there who does not know what a download is? Even my 60 year old mother who never uses the computer knows what a download is ... While not wanting to conclude from a few people who know nothing about the internet, I feel this is overkill.

    I absolutely love the typography. It’s used and applied in a most powerful form. The footer is very nice as well, though the contrast of white text links on the background seem a bit harsh for my eyes. I must admit that I’m a bit envious that Mark Wubben created a customized version of sIFR for the site ... ;-)

  30. #30 On May 15th 2007 at 07:42pm Maleika said:

    Duh. That happens when you are sleep deprivated. I just saw the last paragraph on the “what’s a download” page. I need a break. :)

  31. #31 On May 15th 2007 at 09:05pm Mark Wubben said:

    @Maleike: Andy wants to feel special. I just helped out with the sIFR implementation.

  32. #32 On May 17th 2007 at 08:43pm Deaf Musician said:

    You never seem to disappoint your fans, Andy! I’ve been reading this site for 4 years now, and the stuff is great! Great job on the new design!

  33. #33 On May 20th 2007 at 11:09pm Dan Lane said:

    Awesome! Love it! Especially like the use of Slab Serif headlines. They seem to popping up all over the place at the moment. The Guardian Newspaper springs to mind.

  34. #34 On May 21st 2007 at 02:08pm Mark Ford said:

    Hi Andy, good job on the redesign -  I just noticed it’s got a mention on Smashing Magazine: http://www.smashingmagazine.com/2007/05/21/60-elegant-and-visually-appealling-designs/


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.)