The Trent Walton Workshop

The adventure started with a workshop on Controlling Web Typography with Trent Walton. Half a day full of tips and tricks you can use with some type, HTML, CSS and jQuery. Best explained by giving an example: my attempt to re-create a movie title still in the browser, using HTML, CSS and jQuery.

Friday
the
13
th

The original movie title still comes from the Movie Title Still Collection by Christian Annyas

The Conference

Like last year the line-up of speakers was impressive and all the talks were linked on a common theme: Design. So many good things were said, and here is a summary in tweets.

All clients are created equal, but some are more equal than others. #naconf /@danielmall — Joke de Winter (@jokedewinter) January 19, 2012

Make something that matters by using your knowledge to give something back. / @naomisusi #naconf — Joke de Winter (@jokedewinter) January 19, 2012

“We are all apprentices in a craft where no one ever becomes a master.” / @rockthenroll #naconf — Joke de Winter (@jokedewinter) January 19, 2012

Step away from the computer – it encourages positive disruption. / @rougebert #naconf — Joke de Winter (@jokedewinter) January 19, 2012

We should break things like our lives depend on it. / @TrentWalton #naconf — Joke de Winter (@jokedewinter) January 19, 2012

It’s 2013 and you’re back here and you didn’t do something – you fucked up. / @fictivecameron #naconf #bladerunner — Joke de Winter (@jokedewinter) January 19, 2012

“I made it in yellow because it’s important” / @fictivecameron #naconf #bladerunner — Joke de Winter (@jokedewinter) January 19, 2012

Be balanced: reclaim your creativity. / @denisejacobs #naconf #creativebrain — Joke de Winter (@jokedewinter) January 19, 2012

We are paid by the client but we make work for the audience. / @fchimero #naconf — Joke de Winter (@jokedewinter) January 19, 2012

As a web designer you need to be able to do many things, and one of them is making sure that your websites work in all browsers great and small. And there are many browsers: Internet Explorer (6, 7, 8 and 9), Safari, Firefox, Chrome, Opera, … just to name the major players.

Some web designers will graft away all day and night (and possible through the weekend) to make sure that every pixel of their design looks exactly the same in every browser on earth (Do websites need to look exactly the same in every browser?), and other web designers will disagree and focus on making sure the content and functionality of a website is in line with the capabilities of the browser used to view the website (Do websites need to be experienced exactly the same in every browser?).

So as a web designer you make a choice to which group you belong and you deal with it in which ever way is the most suitable one.

In the three years I have been developing websites a lot has happened. Flash websites came and went, CSS went from 2 to 3, HTML (torn between XHTML 1.0 and HTML4) is now all set for HTML5, mobile web traffic is booming with the increase of smart phones, and all browser manufacturers have upgraded their browser versions several times.

All this is very exciting stuff, but there is one downside. From all the browsers out there Internet Explorer (IE) has long been the leading browser choice by many users to access the web (at the moment Firefox is leading the pack), and currently 4 versions of IE are being used all over the world. The oldest version, IE6 was born in 2001 and apparently died on March 1, 2010. The most recent version is IE9, launched in 2011 and supports a great deal of the new developments in CSS and HTML (which play a crucial part in how you experience a website). IE6 supports considerably less of them.

IE6 is now such an outdated browser that even Microsoft wants to see the back of it. According to them 7.7% of all users on the web use IE6. Feel free to wonder what the problem is here: 7.7% is hardly a number to loose sleep over. But if that 7.7% happens to be 100% of the visitors to your website then you wouldn’t want to disappoint them.

I am a great believer that the web is there for everybody and needs to be accessible to everybody, regardless of age, ability, location, device or software used to access it. A lot of the new developments in web design enhance the way in which users experience the web and therefore it seems strange to still spend time and money to support a browser which has been superseded by three other version of it’s own manufacturer.

So I have made a decision that will affect those 7.7% of IE6 users. I will make sure that those IE6 visitors are able to read and access the content of the website and make use of the functionality in a way that is fitting with the capabilities of that browser, but it is very possible that the overall design and feel of the website will be very different from what other users in more capable and modern browsers will see.

The future is now, and web design is at an exciting point in it’s lifetime. Whatever the reason might be that some people are still using IE6, it shouldn’t hold back the rest of the world in moving forward towards a brighter and better web.

Designing and developing websites with web standards means:

• using valid HTML code,
• using semantic code (making sure each section of code is wrapped in the correct tags to give the section value and purpose),
• separating your content (HTML) from presentation (CSS) and interaction (JavaScript).

Doing this brings only benefits:

• valid code means browsers will be better at rendering your page,
• semantic code means search engines will be able to make sense of you page and index the content properly
• separating content from presentation and interaction will make your site load faster in browsers, and will make maintaining your site easier
• and a bonus benefit: it improves accessibility for all users.

Why the blue beanie you wonder?
Well the benchmark book on Designing with Web Standards was written by Jeffrey Zeldman in 2003 and on the cover of the book he wears a blue beanie.

I am a web designer and I not only support web standards, I use and implement them every day.

My entry, How Far to the Top of the World, uses geolocation to determine where you are and then calculates the distance between you and Mount Everest. I admit that it’s not an application that is going to save the world, but it has been fun to make and I learned a few useful things about geolocation, Google Maps, SVG images and providing fall backs for geolocation fails and when JavaScript is not enabled.

The books I received as a price proofed to be very useful when building the application (I had already bought and read them as e-books earlier in the year) and I would recommend them to anyone serious about designing and building websites.

• Adaptive Web Design by Aaron Gustafson gives an overview of progressive enhancement and how to apply it to give users access to the content without technological restrictions.
• Responsive Web Design by Ethan Marcotte explains the fine art of responsive web design and guides you through the techniques and design principles needed to deliver a quality experience to your users regardless of the size of their display.

So there, I am a Notably Mentioned Web Designer. And now go find out how far you are from the top to the world.

About a year ago I read about the 10k competition by An Event Apart where the brief was to develop a web app using current web technologies (HTML5, CSS3, JavaScript), all squeezed into no more than 10Kb. I quite like a little challenge every now and then, and this seemed like the perfect one.

After a bit of brainstorming the idea came up to create an Arty Bollocks Generator. I have to confess here that I am not the brains behind the words of this thing. That’s all down to the skill and mastery of David James Ross, who has a way with words that I don’t possess.

And so we set about creating the generator. David went of thinking up some “credible” artist statement combinations and I coded up the necessary JavaScript to make it work. All brought together in some new fangled (at the time) HTML5. It was my first attempt to create an HTML5 website, and I had a lot of help from HTML5 for Web Designers by Jeremy Keith published by A Book Apart.

Anyway, the Arty Bollocks Generator was thought out, build, designed and developed and submitted to the competition. We had some positive comments and it felt like a nice interlude in between the commercial work.

I don’t know how it happened but it seems that last week the Arty Bollocks Generator was found online and has since begun a whirlwind tour of the web. It’s been great to see the appreciation from so many people.

We always felt that the generator has more scope to it, and the plan was to develop it a little further, but with all this attention we’ve brought it forward. So now the Arty Bollocks Generator has it’s own domain. It looks mostly the same, but this time I used another book by A Book Apart, the brand new Responsive Web Design by Ethan Marcotte, to guide me through the build to make the design responsive.

So there you go, how something you do in your spare time for fun ends up going round the world like wildfire. I would like to extend a heartfelt thanks to everyone who’s looked, enjoyed and tweeted about it: Thank you. It’s inspiring me to do more stuff for fun.

But for me it underlined again the importance of attending web conferences:

• it inspires you,
• it spurs you on,
• it teaches you something you might not have known before,
• it underlines things you already figured out,
• it gets you away from your computer screen and gives you the chance to meet some real life flesh and blood people (Oooh! There are people out there?)

After I attended my very first conference (The Future of Web Design 2009) I came away feeling inspired, with improved knowledge and overall better equipped to be a web designer. I had learned more in one day than I had all year reading blogs and books. I don’t want to knock the importance of blogs and books, but hearing someone talk about their views, motivations, techniques in and on the web, has a bigger impact than reading about it. The words come alive and it puts a face to a name, it makes it more personal, it makes you read blogs and books by that speaker differently, because you now know what makes them tick and what they regard as important.

At the end of that day I decided there and then that attending web design conferences are an investment into my (never ending) web education and an important addition to any books I might buy.

Because of the well known lack of a proper web design course/degree most web designers are self taught, and I have come to see web design books and blogs as the syllabus and web conferences as the lectures in my quest to learn everything there is to know about web design.  And in my opinion the lecturers are ace – experts in their field, better than any university or college could provide, and probably, all things considered, at a fraction of the price.

Picture courtesy of magrolino (from Flickr)

When I heard about the New Adventures in Web Design conference, delight and novelty aside that the conference was in Nottingham rather than in a far away (and expensive) place like London, I was also delighted that the ticket price was unbelievably reasonable (£80) without compromising on the quality of the speakers, something which was moaned about when the conference was announced because the speakers were the same old faces again.

I agree that most of the speakers at New Adventures are very seasoned at what they do and speak all over the world, and yes, apart from two I have heard them all speak before. But that’s because I am lucky enough to be able to go to the odd conference, and that is not the case for every web designer, as proven by the fact that New Adventures attracted quite a few “conference virgins” (Colly’s words). Whatever the reasons are that they never attended a web conference before, that doesn’t mean they should miss out on the good speakers.

I think by now most web designers will have bought a copy of Hardboiled Web Design (and if anybody hasn’t: what are you waiting for? A written invitation?), so it’s nice to see and hear Mr Andy Clarke in person. He has spoken in numerous high profile places on both sides of the Atlantic in recent years, so why should he not speak in Nottingham too?

You can argue that new speakers should be given a chance to break into the speaking circuit. Well, Greg Wood is a relatively new speaker on the scene, and he was speaking at New Adventures. That said, there are other (bigger) conferences that cater for new speakers by having a B-track. And with New Adventures being a brand new conference it is probably fair to assume that such a thing would have been a bit much for a first time – but watch their space, you never know.

Anyway, New Adventures in Web Design was a great conference, one I look forward to to attend again.

The last speaker of the day, Brendan Dawes, had a quote from a stranger on the train to Nottingham: “It’s always good to sit by the window.” I want to change that into: “It’s always good to sit in the audience of good speakers (old or new)”.

This time it was the Web Directions @media conference held in London on the 10th and 11th of June and I have written another summary:

• “SVG is like HTML for graphics” - Doug Schepers. Shapes are elements and can be styled with CSS.
• Rachel Andrew talked about CSS3 and went further than the obligatory border-radius (rounded corners), text/box-shadow, rgba, opacity, transform and gradient. She explained about nth-child (to target multiple elements according to a specification), attribute selectors, multiple backgrounds and media queries.
• Simon Willison, software architect for the Guardian, gave a presentation about crowd sourcing. It’s about collaborating with the silent audience of users to make something better than if you did it on your own.
• Andy Clarke gave a brilliant presentation about his hardboiled web design. He advocates that you should design for the best browsers first, then think about what the users will see in lesser browsers.
• He also mentioned that CSS3 has a text-stroke property! Just what I was looking for last week.
• Sandi Wassmer made sure we understood that you should design with purpose and intent.
• Hannah Donovan gave us a talk about Telling Stories Through Design. A presentation entirely made up on the back of an envelope (literally) (All very good though).
• She also explained about guerilla user testing. Go somewhere where there are lots of people, offer them some free coffee/tea/food and sit them down with a laptop and let them use the website that needs testing. Cheap and easy – brilliant.
• Microcopy: you don’t tend to think of it, but it’s the instructions you read when filling out a form; they are the bits of text that guide you through an interactive process like buying something online. The quality of these if often overlooked and under estimated. But no longer. Relly Annett-Baker encouraged us to give microcopy just as much attention as the rest of the content. Bad microcopy can stop users going all the way to the checkout.
• Steve Souders confirmed that building websites with web standards is the right way to go if you want increase the page load of your website. Separating your HTML, CSS and JavaScript in separate files is a start. Placing the links to scripts at the bottom of your page is another.
• Scott Berkun gave us a challenge to come up with a new idea that is not made up of other ideas? Answers on a postcard …
• iPad count: 10. Still way below what I had expected.

I have heard and seen so much that I am just going to summerize it:

• Websites don’t need to be experienced the same in every browser – Dan Cederholm
• Robin Christopherson showed us an accessible alternative to captcha. A free service called text captcha.
• Aaron Walter advocated the importance of emotional interface design. “Don’t just make it usable, make it pleasurable”.
• I learned from Niamh Phelan from IQContent that there is a lot more to Google Analytics than knowing how many people visited your website yesterday.
• Simon Collison had a look into the future of web design and predicted the launch of the iBoard. Forget about nonchalantly placing an iPad on your coffee table – the iBoard will BE the coffee table.
• Elliot Jay Stocks pointed out the importance of making time for pet projects. They allow you to express yourself and can be used in promoting your business too.
• HTML5 looks exciting! Thanks to Bruce Lawson’s demo.
• Brett Welch – Don’t build websites, sell an online business.
• Paul Boag stepped in for a last minute session on Track 2 on Wednesday and talked off the cuff about running a web design business. He said that you need a life outside of web design – it will make you a better web designer.
• Spotted the first iPad at 9.50 on Wednesday morning in Ryan Carson’s hands.
• Spotted five iPads in total – I had expected to see more of them.
• The Brewery (where the event took place) does the best conference food I have ever had.
• And finally I got some good feedback from Simon Collison and Mike Kus at the design clinic where I showed them a project I am currently working on.

And that’s it. Can’t wait for next year. Thank you very much Carsonified to put on such a great event.

It makes a huge difference to hear an author talk about his work rather than when you read the book or his blog. The impact is bigger when you hear it. A book or a blog are helpful back-ups, a sort of memorandum, in case you can’t quite remember whether to use float or positioning (for example).

Dan and Ethan did a brilliant job of explaining all their nifty little tricks in an elegant (and handcrafted) way. All in all a great day with lots of things to try out in my next web design projects.

Mobify.me is a free service which helps you design your mobile site by allowing you to pick and choose which bits you want to appear on your mobile site. It is fairly straight forward, but never the less it took me some time to get it all to look the way I wanted.

Still, I got there in the end and it’s all done and ready to view.

I could include the link to the site right here (there is one in the footer of this page), but unless you are reading this on a mobile device, in which case you are already looking at the mobile version, there is not much point to it – in a normal browser it doesn’t look quite as nice.