In that time I’ve built more websites that I can remember, given training courses, spoken at conferences and, possibly the biggest achievement to me, been able to do that most basic thing of buying food and paying the rent without having to borrow any money. (I honestly thought after a few months of freelancing I’d fail miserably and have to move back home with my tail between my legs.)

From July, I will no longer be freelancing because I’ve just formally accepted the role of front-end web developer at a web agency called Message. I’m also moving (again) into my own flat, still in Brighton.

It wasn’t an easy decision to make because I love being a freelancer. I love the flexibility of working wherever I choose, being my own boss and planning my week. I love the independence it gives me and the variety of working on the visual design of a party website one week, and the IA of a school website the next.

But in the past few months, it’s been too much. Work has been picking up a lot which is great, but as a result I have to spend an increasingly disproportionate amount of time outside of the code editor; writing contracts, sending emails, chasing up payments. There’s the pressure of getting cashflow right so I can pay the rent and have enough money (and time) to go out and enjoy myself. I wanted so much to stay living in Brighton where I feel I’ve finally settled and made lots of friends, but it was difficult to justify as I have to do so much commuting. I felt like I was in over my head. The stress was making me physically ill, and I never want to stop enjoying work, so it was time for a change.

I’m really looking forward to starting work at Message next month. They’re a short walk along the seafront from where I live, and after meeting all the people who work there, I know I’ll fit right in. I can’t wait to settle down and work in an office with other people, have more of a routine and be able to come home at the end of the day and actually be at home; not live and work in the same place. I feel like I’ve achieved everything I wanted to achieve as a freelancer, and now I need a new challenge.

There’s a lot I’ll miss about it and it was a very difficult decision to make, but I know I’ve made the right choice.

Most of the pictures annotate conversation threads, but on one page there is a collaborative abstract drawing. We use different coloured pens to show the branches the picture takes.

Here’s a picture someone drew when the supply teacher we were assigned that day entered the classroom and announced “Funtime is over.”

We refer to another supply teacher as “the woman who shouts”.

In this picture, I’m trying not to catch Lucy’s lurgee.

The themes vary wildly from dinosaurs, to reasons we hate a particular subject, to various ways the faulty science equipment will kill us. There’s even a bunny suicide themed section on what form of suicide would be better than reading poetry in a double English lesson. (All very light-humoured, we weren’t that emo!)

I went on to create my first website for my friends with a guestbook and visitor counter which was an extension of the sketchbooks, and as a result of the books getting confiscated a number of times. Unfortunately, the place I hosted my site (freewebs!) was eventually blocked by the Great Firewall of RM, which encouraged me to seek alternatives and build a real website using HTML with a forum and chatroom. Not long after, I began making sites for other people and by the start of A-Levels, I’d quit my weekend job and was building sites whenever I wasn’t at school.

And to think it all started with some doodles in a sketchbook.

Sketches

Below is a picture of how Natalie Downe plans her code using sketches.  Please take a look at some more of these on her Flickr photoset on Planning Artifacts because they really are very inspiring.

3D Models

Natalie also makes 3D models for interactive elements of sites. This is a jQuery slideshow.

One of the things I like a lot about Natalie’s method of planning is that it gets you away from the computer. And for those of us who spend all day staring at a glowing rectangle, that’s got to be a good thing.

Computer Models

If you’re more inclined to planning on the computer, or want something to use in documentation, you might find computer software more appropriate. I like using Google SketchUp to prototype sites, particularly ones with a number of layers or if I’m working with other people on the same code. It’s an architecture application, but I like using it for sites because it lets you view the model in 3 dimensions (great for z-indexes), it’s free and also a lot of fun to use.

I’d love to see other examples of website planning if you do something differently. And if you don’t currently, I would really encourage you to spend a few minutes trying out one of these methods, even if it’s for very small sites, as it will really improve your code.

They’re real people

The blog talks about real people who work in the company, like Alison, Ben, Ryan, James and Denym from Finance. You can tell that the people who work there have a really fun time. By putting up photos and quotes from each of the team, it gives the company a human touch and makes it seem more friendly and approachable. They even put up photos of company events, like their sports day.

And the shortest shorts competition was fearsome. And frightening. Fearsomely frightening.

Fun copy

Their copy is colloquial, light-hearted and self-deprecating at times. Here’s an excerpt from their knitted hat of the week” award.

Without further ado. The winner is……weirdly long pause…fumble with envelope…Big Bee Hive by Kerri from Essex.

They don’t just talk about carrots

The blog has stories on the sorts of things that people working in an office might talk about. Like what do you call the crust at the end of a loaf of bread? At the end of the article, they add “Tell us what you call the thick-bit-of-bread-at-the-end-of-the-loaf and the best name will win a breadbin full of smoothies and some toast (lightly buttered).” This encourages people to add comments, which is always good on a company blog.
At the end of their mailing list, they have some fun, unrelated links that people have sent in, like Youtube videos.

They are generous

As well as offering money-off vouchers to people who subscribe to their mailing list, Innocent also reward customers who write to them with suggestions.

Back in April when we launched our first ever banana free recipe – kiwis, apples and limes – we got in touch with everyone who’d ever written, emailed or called to ask us to make a smoothie without bananas and sent them a free voucher to have a bottle on us.

Useful information

Dr Shilpee is a regular writer on the Innocent blog, and she answers questions people send in about health matters and adds recipes. A bit like an agony aunt in a magazine. She adds credibility to the blog, as well as giving useful titbits of information.

Lots of photos

The photos the staff upload to the blog are rarely cheesy stock ones. They take pictures of their staff, customers and even sketches of new concepts and artwork.

However, it’s worth bearing in mind this sort of fun approach doesn’t appeal to everyone.

I have never read such awful label copy in my life. What are you on at Innocent. Do you really think this is funny and appeals to ‘normal people’. You have gone one step too far!!

Are there any blogs or mailing lists you subscribe to that you think get it right?

“Step into middle England’s best loved department store, stroll through haberdashery to the audio visual department where an awfully well brought up young man will bend over backwards to find the right TV for you. Then go to Dixons.co.uk and buy it”.

(Also, note the tagline: “Dixons.co.uk – the last place you want to go”)

I thought this was a really clever, albeit cheeky advertisement. It is brutally honest, and makes the point to look elsewhere for a better browsing experience, but once you’ve tasted what’s on offer, to go to the place that sells it cheaper. It draws upon the fact that although we love good user experience, we are heavily swayed by price.

However, what does this say about user experience? This ad suggests that only the luxury retailers can offer it, that it’s expensive, middle class and unnecessary after the product has been chosen. But is it? Surely good user experience extends beyond the point of sale, and even in a recession, it should be an investment, not an overhead.

Have Dixons shot themselves in the foot, or do they have a point? Is good user experience only for the high-end of the market, and should retailers like Dixons continue to scrimp on customer service and let retailers like John Lewis pick up the bill?

In an ideal world, all the content is the same height, and blocks will float and clear properly.  But this is not an ideal world.

So below is what happens if the content in some blocks is longer than others.  Yeugh.

We could specify the height, but this is a really bad idea.  You can’t guarantee that the content in the blocks will always be the same height, and you’ll get ugly overlaps if you’re wrong.

One way of achieving this is by wrapping a div round the first three blocks which clears the content above.

But this means adding extraneous divs to your markup.

If we know how many blocks are going to be in each row, we can tell which ones to clear using the nth-of-type selector.

So this clears the 4th, 7th and 10th block

.block:nth-of-type(4),
.block:nth-of-type(7),
.block:nth-of-type(10) {
clear: both;
}


And this adds margins onto every first and second block in a row. (You can probably think of a more streamlined way of doing this if you’re better at maths than me!)

.block:nth-of-type(1),
.block:nth-of-type(2),
.block:nth-of-type(4),
.block:nth-of-type(5),
.block:nth-of-type(7),
.block:nth-of-type(8),
.block:nth-of-type(10),
.block:nth-of-type(11) {
margin-right:40px;
}

Browser Compatibility:

Unfortunately, not many browsers currently support this.  Firefox 3.1+, Safari 4.0, Chrome, Konqueror, and Opera (albeit incorrectly). But if you’ve got a high proportion of users on these browsers, you can have a go at implementing this and get it to degrade quite nicely.

Nick Pellant did a stella talk about Building Your Company. I was worried it would overlap on the things mentioned in mine, but it didn’t at all. He seemed to cover everything that I didn’t have time to mention, and I was quite jealous of the way he presented while walking across the stage, without notes, whereas I stayed pretty much glued to the spot. He also had very few slides, meaning the attention was focused purely on what he was saying. His presentation style seemed to echo that of Ryan Carson (watch out Ryan) which is perhaps expected since Nick works in the same offices as Carsonified. He even gave out lovely free posters at the end which cover all the points he mentioned. These are handouts you don’t want to throw away. All in all, a great speaker and also very talented at his work.

Jamie Rumbelow did a talk about APIs which I was really impressed with. He’s 14 and seemed completely relaxed with talking about something quite complex to a room full of people. He is also very enthusiastic, and was asking me how he could help with Scrunchup. A very sound guy, and one to keep an eye on.

If you could buy stocks in teenagers, I would buy as many as I could in James Proud. This is an 18 year old guy who has his head well and truly screwed on. He gave a pitch about his project, Gig Locator, and blew away the audience and the panel. This guy knows exactly what he’s talking about. He knows his product really well, has good ties in his product’s industry, and keeps his two feet on the ground at all times. He’s business savvy and an engaging speaker, as well as having a really decent product. This guy is gold dust. Conference organisers take note.

Then there was Greg Cooper. Greg has made the decision to work purely in UI design for social networks, which is pretty smart in my opinion. As his specialism is quite niche, it will be really interesting to see what Greg is working on in the next few years. I’m sure he’ll be in hot demand by a lot of companies.
His presentation was really good, he touched on things like the importance of designing for the extremes – specifically designing how it would look if someone had a really long name which is something so many designers don’t think about.
Sadly, most people had left the conference before Greg started his talk, so not many people got to hear it. I guess this is the cost of making a conference free.

I enjoyed Charlie McDonnell’s talk a lot. It wasn’t about Web Design or Development, but about the life of a teenage YouTuber, which brought me back to my Media Studies days. If you haven’t heard of charlieissocoollike, check out his videos, specifically this one which is about tea. One of the interesting things he mentioned was that some of the things he is doing with agencies like the BBC is breaking ground in New Media, and him and these big organisations are on the same level, both trying different things and not quite sure what will happen.

I really enjoyed my time at the conference. It was great to catch up with Jon who came all the way from up North, and it was nice to be in a room full of like minded people of a similar age to me.  As with any conference in its first year, it has room for improvement, but I think it was a massive achievement that Rob and Grant managed to do it at all, and for free. The feedback from other attendees has been very positive, coming away with new contacts and ideas. And if inspiring a bunch of young people was their goal, they certainly achieved it, and I guess that’s all that really matters.

So what does a front end developer actually do? Let’s start with the “front end” bit. A website can be broken down into two main bits, the front end, and the back end.

The Front End

The front end of a website is the visual bit that the user interacts with. This includes the design, images, colours, buttons, forms, typography, animations and content. It’s basically everything that you as a user of the website can see.

The Back End

The back end of the site is the bit that you don’t see. It’s the code that makes e-commerce sites work, the database where your Amazon wishlist is stored, it’s all the magic that happens behind the visual part of the website that makes the website actually work.

Now for the “developer” bit. To explain what a developer does, I should probably clarify what a designer does.

The Designer

Designers decide how a website is going to look, what the colour scheme will be, how all the headings will look, and how all the pages will work together. They usually build a flat visual graphic of the site which has pictures of how the site will look and how each of the interactions will look. At this stage you can’t interact with it, it’s just a picture. They then hand this file to the developer.

The Developer

The developer takes the file that the designer has sent them, and they look at it and work out how they are going to build the site so that it will work in a browser. (A browser is the bit of software that you use to look at websites. There are lots of browsers including Internet Explorer, Firefox, Safari…).
Developers will break the design up into components, and start to build these into a website using code. They then test the site in lots of different browsers, and sometimes on mobile phone browsers too. Each browser treats the code slightly differently, and the developer has to make sure that the site is accessible for lots of different users on lots of different browsers, and on different sized screens.
They have to make sure the text can be resized without breaking the site, that the site is readable by search engines like Google, and people with visual disabilities using screen readers, or people with old technology. They have to make sure the site looks as close to the design they have been given as possible.

The Front End Developer

So combining these two things, a front end developer works on the code that makes a website look the way it does. They use HTML to build the content, CSS to style the pages, and sometimes use JavaScript and PHP to make the pages more dynamic.

Now, this is all a bit of a generalisation. There is a lot of crossover with roles, and my role as a front end developer may be different to someone else who also calls themselves a front end developer, and it all depends on their skills and background. There are also many different roles within front end and back end which I will probably go into another time.

The band may be glad that they wrote such a popular song that brought them to fame, but at the same time, it feels like a curse.

And we are grateful for our iron lung

I often regard my age and my gender as my iron lung. It has helped me stand out because teenage developers who are women are uncommon, and I doubt I’d be where I am today if were a man, or a little bit older, but I also regard these labels as a curse.

I’m worried that I will only get asked to speak at conferences so that people don’t complain there aren’t any women speakers. I’m concerned that the work that I do will be less important than my “female developer” label. No matter how good I am at what I do, there are some clients who don’t want to work with me because they think I’m too young, and then they go and pick someone else with ‘more experience’ to build their site in tables. There are events that I can’t go to until 2011 like SXSW, because I wouldn’t be allowed in any of the bars where social events are held. I find it hard to socialise when I am at events because everyone there is usually a lot older than me, and then when I am round friends my own age, I feel like we can’t relate to each other because we’re leading such different lives.

I hope this doesn’t sound emo, I guess I just wanted to get it off my chest, and because now I understand what Radiohead meant by their iron lung.

You can see my interview here http://techettes.com/2009/07/interview-with-tomorrows-web-speaker-anna-debenham/