PixelCounter - Indie Front End Web Developer

For people outside of computing, or even who aren’t directly involved in some way with web development, it can be very difficult to understand the different levels and roles of various members within a team and who become responsible for creating their website. Of course there isn’t any set-in-stone roles, many developers transcend and have skill sets expansive enough to cover more than role, but it’s usually the case that if you want the very best, you don’t necessarily want one person who claims they can design and develop your website for you. You might find you end up with a technically perfect website with a nice, but not a visually amazing design. Equally back-end developers don’t generally like the front-end stuff, or don’t have the same level of skills that a front-end developer (should) have. So the problem is conveying this to non-developers (and most commonly: clients and potential clients). I’ve found myself trying to explain the concept of three different roles (design, front-end, back-end) in a variety of ways but over time I’ve developed my “Highstreet Store Analogy” and I’m not saying it’s perfect, but I’ve helped a lot of people grasp the concept of different development roles using it: If you imagine an empty highstreet store, there are a few things that need to be done to set it up, and prepare it for general public use:

The Designer
The designer is the guy who comes into this empty shell of a shop and looks around, talks to the new shop owners, and to the guys who will be doing the shop fitting. They take sketches, go away and come back with a document that says something along the lines of “paint that wall red, put the changing rooms over there and the check out desks in the corner over there”. They show the shop owner how the store will look, produce concepts, liaise with the customer to visualise their expectations, and produce a floorplan, a colour scheme, and a layout for the shop. This is the designer’s role: in web development they are very talented artistic individuals who take the website owner (client)’s expectations from meetings and discussions, and produce concepts and then mock-ups to show them how the website will look. In the same way a store designer will produce drawings to show how the new store would look. Typical Skills: design, artistic, an eye for detail, PhotoShop

The Front-End (or Client-Side) Developer
For this concept to work, you have to understand a fundamental idea that all websites are split into two areas: the front-end, which is everything that the visitor sees and touches – the interactive level; and the back-end which is the technical architecture on which the site is built: the chassis and engine of a car compared to the bodywork. The front-end developer takes the designer’s ideas (usually in a PSD file), cuts them up, formats them and turns it into a working website. In our store analogy, this is the decorator who comes in and paints that wall red, puts the changing rooms over there, and builds the check-out desks, putting them in the right corner. They make everything that the customer coming in off the street will touch, feel and use whilst in the shop. As well as fitting out the store to the designer’s specifications, the front-end developer also puts up the company’s sign outside, arranges the window display, hires the teenage kids who sit on the pavement with a big sign pointing to the shop, and generally ensures everything is in place to entice customers in. In web development, this is Search Engine Optimisation and it always starts with a valid, semantic, and well-built front-end to make sure that the search engines rate it highly – that our high-street store is in a busy area of the street rather than down an alley where no-one will pass it or visit. If people can’t find the shop, nobody will visit – the same is true of websites. Typical Skills: XHTML, CSS, XML, JavaScript Frameworks, SEO

The Back-End Developer
The back-end developer is the final piece of the puzzle. This is the contractor who walks into this freshly-designed and painted highstreet store (which at this point should look great but isn’t yet ready for public use) and sets up the stock room, puts in the Point of Sales systems, and hire the shop staff to stack the shelves and serve customers. This is everything that goes on in your website that actually makes it work as an application rather than an empty but very accessible and attractive room – the interaction with the website’s database, membership log ins, payment systems. Back-end developers also prepare the server and the website’s running environment – attaches electricity, water and gas to your high street store, and makes sure that when you open your store, that everything runs smoothly. Typical Skills: Backend Languages and/or frameworks (PHP, Python, DJango, .NET), Databases (MySQL, etc), Server Administration (Apache, IIS)

Aside from these purely development skills, bigger projects and sites (website development through an agency rather than freelancers or contractors) will also need a project manager – someone who oversees the process, communicates with the client, makes sure deliverables and deadlines are hit, and makes sure that the process runs smoothly. Of course, everyone has different opinions on this, and no one role is more important than the others – you need all three to build a functioning website. I always work on the basis that having different individuals who specialise in each of the three areas results in the best website since they have focused on that one area and thus honed their skills further than a developer who has spread himself out over more than one skill set. That’s not to say that someone with more than one speciality can’t be just as valuable, they’re just less common (and often more expensive!). If you’re struggling with a client tryign to explain this process, try my highstreet store example, it works well for me…!

A-NT : a very talented designer
My front-end/client-side development portfolio
Jamie Scott : One of the best back-end/LAMP developers in the South
Top image diagram from Shop Mapper with thanks