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.

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 navigation was a bit of a challenge.  The selected state was quite fiddly to develop because I wanted the text to resize without dropping out of the green strip. Here’s what I did…

Above is the text at normal size, and below is the text 5x bigger than normal.

I extended the white background at the top of the image so that it would cover the green strip when the text is resized and not look too out of place.  The selected state is actually two images.

This is what the background image for the right half of the link looks like.  It’s long to allow for long links.  When the link is small, it looks shorter.

While I was working on the site, Nat showed me a really good way to make the site more maintainable and use less code.  The site is made up of strips of content – the header, main content, sponsors and footer, and these all have very similar properties (things like they all have a width of 80% and the same amount of margins).  Rather than repeating the CSS for each class, we added a class within each strip called “section”.  So if we needed to make a change to the layout and instead make the width 70%, we would only need to change this in one place.