I had long wanted to attend a conference. I follow a lot of people on Twitter who would regail us with their hash tags and @ replies while on their various stints in various parts of the world. I had my envies and so, when Build Conference was announced, I decided I would go.

I had watched a number of videos from Build 2010, specifically memorable for me were those of Frank Chimero and Dan Cedarholm. I recognised that it was the type of conference that if I was going to attend, I would enjoy it. So like an excited child on Christmas morning, on the day the tickets were released, I purchased one.

When the speakers were announced, I didn’t recognise many of them as speakers. I knew the Standardistas and Simon Collison, but the rest, while I knew of their work, I had never heard speak. I suppose, at the time, I must admit to having had a slight pang of disappointment for this very reason; that I hadn’t heard these people speak. What I have learned is that the “unknown” is far more rewarding than anything I could have ever expected.

I must pause here and point out that Andy McMillan is, in my opinion, a singular individual. I do not think there is anyone in the industry making the efforts that Andy is to progress and forward the “thought process” of web design. Sure, there are excellent conferences all over the world, that focus on the craft and the methodologies of web design. But Andy seems to understand that sometimes we, as humans, really need to be challenged. That challenge makes us different people. How we rise to these challenges define us, and define our work. I should have known when I received the first issue of The Manual, that Build was going to be something different; far different from my expectations. I should have known, as I read out Frank Chimero’s essay to my wife in our garden on a sunny summers Sunday, that the nature of how we were going to be provoked in our thinking, was going to be different than any “How to” session or book. I should have known.

To say that I feel humbled today, two days after the conference, alone in my hotel room in Belfast, with all my colleagues re-dispersed, is a bit of an understatement. The conference itself, was phenomenal. It was thought provoking. It was re-affirming (because, sometimes, we can lose faith in ourselves when those around us don’t always know what it is we do). The Standardistas brought us on a voyage of craft. Josh Brewer made us strive to find delight in design. Craig Mod reminded us of the joy of books and how that will change, but remain in the future. Jason Santa Maria discussed the future of Web Typography. Jeremy Keith made us question our legacy. Simon Collison gave us a history lesson for the future. Perhaps, most importantly, Wilson Miner made us cry.

I will never be able to explain to anyone other than those who also attended the conference, exactly how I felt in that auditorium. No one watching the future videos of the talks will know what the electricity between the attendees was throughout the course of that day. But that’s not the point. It was an experience more than an event and had I missed it, I would never have known. That I didn’t, changes that for me and also makes it all the more important.

I also met some amazing people. If I were to list them all here, this page would become a Twitter trap, so I’ll refrain, but if for no other reason, the presence of so many like minded people is a gift in itself. Being able to discuss the intricacies of how and why we do things the way that we do, without having to explain our rationale, is so important to all of us. Sometimes we don’t always have this exposure, so being able to spend time with these people, make contact with these people and get to know these people was worth the trip alone. I have made so many new friends and acquaintances. I could never put a value on this.

Build conference is, in my opinion, the only conference you must attend. Save your pennies, scrape your pocket lint, beg from your family. This is not to diminish the value of other conferences, but having been a part of this one, (barring the birth of a child) I cannot imagine not attending again. It has re-ignited an ember within me that had been smouldering. It has touched my emotional core. It has made me question my process, my methods. It has made me question myself. It has made me question.

And this is wonderful.

I was working on a site there the other night. I had a bunch of text being added to a sidebar, which was cramming in on top of itself. So I added the following line to my CSS (the bulk of the id’s and classes are left out for clarity):

section p {margin-bottom: 1.5em}

Lovely, I thought. All will be well now. But when I reviewed the page, the padding was doubling the space after the last paragraph. It didn’t help that this text was in a section box with a background colour and 20px padding, so that extra 1.5em was making a real mess of my bottom padding. The problem was, these boxes could just have an image, or could have only one paragraph of text. How was I going to resolve this? Then it struck me, I only needed spacing on a paragraph, followed by a paragraph. Doesn’t CSS have a solution for this!

section p+p {margin-top: 1.5em}

This now means that the spacing will only be applied to the top of a paragraph, which occurs after another paragraph. Fantastic! I’m so happy, I’m sharing this with you!

As web developers and designers, most of us work within the strict confines of a process. Whether this process involves user testing or not (and if it doesn’t… why!?!?!), our usual parameters of work revolve around the client and their expectations of us. While this is all very well and good and delivers a product the client wants, it has inherent let downs which most of us don’t really think about.

Young developers and designers out of college are clean slates. They are the rough cuts we get to shape into the diamonds they want and we need them to be. Full of vim and excitement, they don’t know about process’, they don’t know about methodologies. These are abstract notions they discussed in class in college and now are expected to conform to. They just want to build websites and make cool stuff. It takes a while to get past that shell-shocked stage to understanding what working to timelines and schedules mean, but above all else, it takes a while to get used to dealing with clients.

Clients are demanding animals. They want everything and they want it now. Why do they want this? Well, part of the reason is that they are web users themselves and have seen things online that they want to include in their websites. It doesn’t really matter how relevant it is to their content or their business, they want it anyway. And they’re the client, right? So they get what they want.

I’ve found to my detriment that you should never say no to a client. Some of you will be saying “hang on a minute here” at that statement, but it’s true. Never use negative language with a client. Don’t say ‘no’. It took me a long time to work this out, but there’s a rationale behind it. Client’s don’t want to hear no. Saying no to a client is a very counter-productive message. They have ridiculous expectations of their website? Explain why they are ridiculous expectations. They want irrelevant functionality? Explain why it’s irrelevant. Don’t say no.

All this brings us to the crux of our problem. Clients don’t know what they want, they only think they know what they want. Clients also don’t know what their users want. Rarely do they know what it’s like to be their own customer. Their requirements and requests are internal; introverted in their viewpoint. They are what they want, often without consideration for the customer. They will give you direction saying things like “Our customers need access to ‘x’ information” but they have no facts, figures or user testing results to backup these requests.

So as developers and designers, and certainly as people working in the User Experience field, it is important for us to take all these different ingredients available to us, and mix them in a big pot to deliver the best product we can. Use the young energy to create solutions which are new and exciting. Encourage the old heads to guide and focus. But above all else, help the client see the woods. It is important to ask the questions and put them in the position to understand, not only what they want of themselves, but also what their users and their clients expect of them. I was going to call this post “Your client’s clients are your client”. That’s probably a bit abstract and also not entirely true, so rather than get clever, let’s just stick to the point. Help your clients see the woods past the trees.

For those of you unaware, Refresh is a (spreading) global initiative to bring design and development individuals of like minds together to speak and share their collective knowledge. Dublin is no exception with Refreshing Cities Dublin taking place in the Science Gallery once a month.

As part of this initiative I have been invited to speak on the subject of Web Accessibility. I’ll be making this talk on April 27th, 2011. It’s a fantastic opportunity and I’d like to thank the people behind Refresh for giving me this chance.

The subject of Web Accessibility is massive and comprehensive, so I hope to be able to cover as much as I can in the hour I’d like to try to keep the talk down to (ideally 45 minutes, let’s see how it goes). I’m going to help people see that Web Accessibility is not just a task we should perform towards the end of a project, but should be something we consider at every step of the way through the design and development process of the website. I’m going to show people what it means to the various different types of people and their respective disabilities to interact with websites, and why these are important matters to consider. I’m also going to discuss the future of web technologies, specifically HTML5 and WAI-ARIA, and how they are going to continue to enhance and improve our development and our websites.

I’m really looking forward to giving this talk and really hope people in the industry can take something from it. If you’d like to come along, tickets are free, but you must book them from the Science Gallery website, which you can access here. I really hope you can all make it and look forward to seeing you there!!!

So I bought Andy Clarke’s “Hardboiled Web Design” lately and have been devouring and savouring it over the past week or so. I’ve only a chapter or two left, so once I’m done I’ll write a full review. So far, it is without doubt THE (pronounced ‘thee’) web design book du jour and a must read for everyone in the industry. Between Andy, Dan Cederholm over at Simple Bits and Chris Coyier on CSS Tricks*, I’ve been feeling the CSS3 love.

I was reading an article on swissmiss this evening which mentioned a font called Champion Gothic by Hoefler & Frere-Jones. I visited the site to have a look and in the carousel showcasing the font, there was an image that made me stop and have think. I’ve taken a screen shot here:

It reminded me of doing our Linocuts and Silkscreen prints years ago in school, so I wondered if, in using the latest and greatest CSS3 techniques, I could replicate this effect. So here’s a small demo of how I achieved it.

NB: I’m not, in ANY way, going to attempt to make this work on older browsers. If you’re not viewing this site in Chrome, Safari, Firefox or IE9, then sorry, it’s not going to work.

So to start, I need a simple HTML page to which I’ve added a section element with the text I want to display in a paragraph tag:

<section>
<p>Slipscreen</p>
</section>

Nice and simple, not too much taxingness (I know. I made that word up). Next we need to apply the styles. First off, I wanted to choose a typeface, so I used one of Google’s freely available typefaces:

<link href=’http://fonts.googleapis.com/css?family=Anton’ rel=’stylesheet’ type=’text/css’>

Anton’s a nice narrow form of impact sans-serif typeface. In all uppercase, it’s not quite the same as the Champion Gothic sample we saw earlier, but close enough for the purpose of this demonstration.

So we have our typeface and we have our markup, let’s start applying styles.

html {
text-align: center;
background: rgb(180,170,160);
}

body{
margin: 0 auto;
width: 960px;
}

section {
margin: 50px;
padding: 15px 50px 40px 50px;
position: relative;
width: 800px;
height: 300px;
background: rgb(83,70,70);
}

Ok, first things first. I always like to make sure that my html wrapper, coupled with the body tags, allow me to position my content nicely in the center of the page. People don’t always agree with me on this, but I like to do it. It’s like my safety blanket. But what, wait, what’s that? You didn’t know you can use the html tag in your style sheet?! Mais biensûr! It’s a block level element isn’t it? Of course you can. Also, fixing the width of the html and using the body tag as a center aligned column removes the necessity for all those nasty div’s with id’s like ‘wrapper’ and ‘container’. Yuck!

Our section tag is then created with a bit of a margin, a bit of padding, a bit of a height and width and a nice background colour. I always used to use hex colour-types, but since I discovered opacity settings, I much prefer using rgb values. They’re no easier nor difficult to use than hex values. I’m also lazy, which is why I use the ‘background’ style attribute as opposed to ‘background-color’. Imagine I added an image to that style, I’d have to go back and delete the text ‘-color’!!! Ugh, so much hassle.

Anywho, moving on. Now that we have our structure in place, I need some styles for my text. There are a few shortcuts in here which are brilliant.

One of the things I’ve always loved about text shadows, even in PhotoShop, is that if you set the blur to zero, you effectively get a duplicate of the text you have inserted. Also, one of the lovely things about CSS opacity is an element’s opacity can be set to zero (invisible) yet it will still cast a box or text shadow, and that’s what we’re going to use here.

section p {
font-family: ‘Anton’;
font-size: 6em;
font-weight: bold;
text-shadow: 8px 4px 0 rgba(194,177,145,1);
color: rgba(60,40,20,0.45);
text-transform: uppercase;
letter-spacing: 0.2em;
}

What are we doing here. It’s really very simple. We’ve used our Google Font, given the text a nice large size and made it bold. Now, we’ve given our text a text-shadow with no blur, which is the kind of ‘prime print’ of our effect. Next we applied the ‘offset print’ of our effect and lowered the opacity so that the background colour and the text-shadow colour can be seen through it. Next we force the text into uppercase and add a little letter-spacing so the effect isn’t looking so cramped.

In the end, it’s just a bit of fun and a proof of concept, but I’m really glad these techniques are available to us. Yes, if you’re looking at the result in an older browser, you’ll only see the dark color of the text, but hey, that’s not why we did it, is it?!

View a demo of this effect here.

I began working on a project lately where I was given a design but the colour scheme had to be decided upon because it needed to go through a branding process. Part of this required me to use some “creative” methods of getting around a few problems. For instance, there will be gallery pages with spotlight boxes, which will have curved corners. Now, I could have gone and made a selection of images with these curved corners and set them as the background, but once the colours were decided, I’d have to re-do all these (and there’s quite a few of them). We had also decided that a gradient should be used on a horizontal navigation, but again, no definite colours. Finally, we needed to apply a global template to a series of images, so I decided a simple way to do this would be to apply a transparent png over these images (again, negating the necessity to re-edit all the images once the colours came in. There were a hell of a lot more of these images than those for the gallery pages).

Of course, at the root of this lay the question, how could all this be done. So I decided, once and for all, to take the leap off the CSS springboard into CSS3. The problem? The site will be viewed within a corporation, in which every employee has a desktop with access to IE6 only… a lot of the time across Citrix. So how do I do this? Never mind Joe Public, the majority of traffic to this site will be internal and it’s success or failure will be measured by how easily staff can access the site, not alone the public.

I started looking into these problems in parts. There are filter shivs and polyfills to accommodate the png issue. I decided the best library among these was unitpngfix.js. The next part was the CSS3 elements. I realised early that I wasn’t going to be able to use all the available CSS3 attributes in IE6,7 & 8, but if I found something that offered me rounded corners and gradient backgrounds, that would do. Happily CSS3PIE fitted the bill excellently and so I decided to use that. This would be my first time experimenting with behavio(u)r (apologies our North American friends, but I can’t bring myself to use your spelling, unless in code!) files, so I looked forward to the challenge. Finally, there were a number of alternative requirements which meant I was going to have to get very inventive with my jQuery. jQuery 1.5 was released last week, which allowed me to update the library on the site anyway. More on this requirement though in another post.

I mocked up the design in HTML. Unfortunately, HTML5 was not an option, as the intention was really just to reskin the original (content heavy) website, so I had fairly precise guidelines as to how much I could “maneuver” the code. Templates were sent for accessibility testing and came back with gold stars attached. Next came the implementation.

None of this sounds particularly taxing. But wait, things just got interesting! The templates had to be applied to jsp files to accommodate the current structure and backend implementation. This included the way headers and footers were included, bespoke forms on certain pages, etc. Initially there were no problems, but once the first draft of templating had been completed, there were some very obvious problems. The png transparency was hit and miss; it would work on some pages, not on others. Refreshing the page might ensure the fix kicked in, but just as easily might not. Then, all of a sudden, on very few pages, the IE6 browser would throw an “Operation aborted” error, causing the browser to crash. This in itself, is not too uncommon for IE6 across Citrix, but it was happening with an alarming amount of predictability and regularity.

Tracking this down the issues behind this was at first fruitless (the MSDN recommendation was to upgrade the browser!) and laborious. I tried alternatives for the png fix, but still found the errors were hit and miss and again, the shiv itself was unpredictable in its application.

Eventually (thankfully) after some searching of the CSS3PIE forums, I discovered that the reason for the “Operation aborted” error was due to the fact that DOM objects (for example a form) were being loaded onto the page by the JSP, slower than the CSS3PIE behavior was being applied to the same object. It took quite a lot of trial and error, but by creating a “lateload.css” file with just the behaviors included in it and loading it in the footer of the page, I delayed the application of the CSS3 styles until all the DOM objects it was required for, were loaded. Fix one accomplished.

Having gotten the CSS3 to work, I was now presented with a javascript error on every page. Yet more time and investigation revealed that CSS3PIE and Unitpngfix do NOT play nicely together. A quick #lazyweb query on Twitter and I was pointed in the direction of another behavior file, iepngfix. Having decided that the CSS3PIE was to be late loaded, I decided not to take the risk, and added the behavior for the iepngfix into lateload.css after the CSS3 transforms were applied. Fix two accomplished.

The use of these two behavior files has allowed me to use the main elements of CSS3 in a design, which, in the end, will actually not bear that much influence (the use is subtle and indirect), but being able to use it and make it cross browser has given me a real sense of achievement. Coupled with a number of accessibility modifications I made (which I’m equally proud of and will discuss in a later post), it’s been a real payoff and a nice piece of work to experiment on.

I’m not going to go into the application of the behavior files (that’s well documented on the parent sites) but if you’ve any fear of using them, I can tell you they’re worth a look. Just make sure that your elements that require their use are all bundled together, e.g.

#id1,#id2,.class1,#id img {behavior: url(/path/to/file.htc);}

If you apply them individually, each instance makes a http request to the server and slows down your code considerably.

I posted on Twitter a smattering of books I had recently acquired, along with some old ones which resulted in the question, when did my library get so sensible?

This led me to thinking about the type of library I have. I’m into a lot of things and have books on most, not least Classical History, Art, Photography, Music, Science, Science Fiction, Movies and Rugby. What always astounds me though is the number of computer programming books I have. I’ve broken them down by shelf, into books that get used a lot, books that get used a little and books that get used rarely, each one slightly larger than the one before.

This is a the current ‘books that get used a lot’ shelf:

A lot of classics there and a lot of new stuff I haven’t finished (and in some cases, I haven’t started reading yet)! Like I say, this is just a small portion of what’s on my shelves. Tie into that my wife’s books (she’s an artists and reads lots on the subject) and it makes for a fairly hefty library.

Which is always a good thing, don’t you agree?!

By the way, the Stephen Hawking book in the Twitter photo? I got to Chapter 3 of ‘A brief history of time.’ I wonder how far I’ll get with this one?!

So, I couldn’t get Twitter Tools to work properly. It was constantly giving me “No tweets available at the moment.” After a lot of head banging and not really much information coming from the interwebs, I started to look at the backend of my installation.

A couple of online blogs and forums suggested uninstalling, deleting and reinstalling the plugins. Others suggested dropping the ‘ak_twitter’ table from the database, then uninstalling, deleting and reinstalling the plugins. None of this worked, but it got me on the path of looking at the database. I noticed that, as this is a multisite setup that the prefix to the ak_twitter table was the default, but each other table for each of the multisites had a number appended to the prefix. A quick look at the Twitter Tools code, and I was able to output the table name with the text ‘Tweets updated.’ when I clicked the ‘Update Tweets’ button. Sure enough, the expected table name had the number of the multisite appended to the prefix (so instead of outputting ‘prefix_aktt_twitter’ as the table name, I got ‘prefix3_aktt_twitter’). As this table didn’t exists, the tools couldn’t populate it, and my Twitter widget was like the Nazis in “Raiders of the Lost Ark”; it was looking in the wrong place.

I had to manually add the table name to the Twitter Tools code. If you need to do this, the table name is generated in three places. Do a search for $wpdb->aktt = $wpdb->prefix.'ak_twitter' and replace it with $wpdb->aktt = 'prefix_ak_twitter' (obviously, replace the prefix with whatever you set it to on your installation, by default it’s ‘wp_’).

Once this corrected code is on the server, go into your Twitter Tools, Reset Tweet Checking and the Update Tweets. Once the widget is on your site, you should get your Twitter feed as expected.

I wrote a blog post over on Arekibo’s Blog about taking part in 24theweb. It was an excellent event and an excellent day. I’m not going to repeat myself here, so check it out over there!

As you may have noticed from my blog posts, the tags and categories at the top of the posts are a bit all over the place (let’s not talk about the comments just yet!). I need to do something with them but in making this decision, I have come to question whether it is absolutely necessary to show them.

I have to say, that in all my time reading other people’s blogs and articles online, I rarely (if ever) refer to the tags. I understand how they work for SEO and certainly the categories are a great way to subdivide articles into relevant titles (as is used in the sidebar here). But is it really necessary to show these tags and categories on the actual blog post?

My feeling is no, it’s not. That’s not to say that they shouldn’t be used, just that I don’t see it as necessary to show them all the time. I’ve also had trouble thinking about how I should display them cleanly in relation to the post.

All feedback, as always, greatly appreciated.

And I’ll sort out the comments soon too, I promise!