Most people understand cars. Rather than tech-speak you into complete boredom, let’s use a car analogy for web design and development.

The difference between web design and web development

Design and development are quite different beasts, but in short – one has to do with the pretty stuff (like the car’s body, finish and colour) while the other has to do with what’s under the hood (engine and chassis).

Let’s break that down …

  • The road = the internet superhighway (ugh!)
  • The chassis = the computer (or server) attached to the internet
  • The engine = your content management system (CMS)
  • The mechanic = a guy like me (a web developer)
  • The body painter, detailer & panel beater = the designer

I’m a hybrid of the last two. I bash websites into shape, fiddle with stuff under the hood, then whip over the whole thing with a new paint job. Which is when the detailing begins :) I used to only design websites, but needed more of a challenge so I also now tinker with the engine.

Your fuel by the way is site content. Like petrol, it will keep your car going. What content you upload and how regularly you do so will determine your online success.

 

Once I’ve got a server (chassis) attached to the internet (the road) running a programming language and database (also chassis) I can bolt on an engine (the CMS) and start beautiful work.

Server & Programming Language

(The chassis)

car-chassis-cms

If your website is built with a solid Content Management System (allowing you to update your site via an administration section) then you can guarantee that there is a server (computer) running a database behind it. That computer will most likely be running PHP (the language) with a MySQL database. PHP pulls website content (in the form of text and images) from a MySQL database and writes it to the screen as HTML. Think of the words and pictures on your website as content. Everything on your About Us page, photos in your Gallery, every News item and every Event you add – fall under the title of content. And remember, content is your site’s fuel.

Without a foundation, everything will fall apart. That’s your chassis. A computer running PHP, JavaScript & MySQL is probably the most popular choice for websites in 2014.

Computer languages are updated every so often (sometimes yearly) to allow for new functionality as the style (or new invention) dictates, but you will find many servers running older versions of PHP and MySQL too. Older servers are still running old versions of this software because they have older clients with big sites who rely on the same chassis. Banks are interesting cases because their chassis is often very old. I know of one bank using COBOL, a computer language invented back in 1959. COBOL Programmers are like hen’s teeth and can earn more than the Prime Minister of Australia.

But I digress. let’s lift the bonnet. The engine.

Content Management System (CMS)

(Your website’s engine)

your website engine cmsMost websites these days are built with a Content Management System (CMS). A CMS allows you to enter the back-end of your website and add pictures, text or upload documents without having to learn code. Whether you are using WordPress, Drupal or Joomla (there are hundreds of others) your CMS is the heart of your website – much like your car’s engine. And like an engine, your CMS needs regular maintenance (read about what I do to maintain a website here). It also needs security tweaked as hackers change their methods of attack. Sometimes maintenance on a CMS (engine) is performed every month. I find myself tweaking security on clients sites every day.

Without maintaining the engine, one day your car will simply stop and it will cost a lot of money to get it back on the road.

 

Drupal, Joomla and WordPress code is open-source. It is developed by a team of people (sometimes thousands) and each release is referred to as “core” code. It’s the job of your web developer to go in and check to see that you have the latest version of the code, but it’s not his job to touch it (more about best practice web development here).

NB: Some website firms will cripple an open-source CMS so that clients have to pay for updates.

 

I should talk about your web developer / development team next but I’ll deal with Web Design first because that’s probably what you are most familiar with.

Web Designer

(Panel beat and paint)

Web design has to do with everything you see on a website. It’s sometimes referred to as the superficial side of the business, but that’s probably not a fair commment. Web designers have to deal with many issues besides picking the right colour. They invariably lift the hood of the car to check that engine parts are functioning okay. A designer can sometimes get away without knowing what makes a site work, but you can only go so far with Photoshop and design skills.

Website designers typically deal with;

  • how a customer uses your website (website usability)
  • the overall site layout (website structure)
  • navigational heirarchy (can things be easily found?)
  • buttons (do they entice the user to click?)
  • form fields (too many fields and users will go elsewhere)
  • typography (is the site text easy to read?)
  • page titles (does my article title represent the content?)
  • headings (can Google easily understand my site for indexing?)
  • sub-headings (clarifying what the article is about for scan reading?)
Three clicks and they’re gone

Remember that?

Usability plays a big part. Is the site easy to use? Can site content be easily read on a tablet or smartphone? (i.e. Is it a responsive website?) If not, what needs to change?

web designer car body painter

In a perfect world, a web designer will be designing in Photoshop and realising the look of your site using HTML and CSS with more than a little JavaScript thrown in (JavaScript does all the fancy stuff Flash used to do). Some Wed Design purists just use CSS, but as this ain’t a perfect world and because some servers aren’t fitted with the latest engines (CMSs), web designers often have to bridge the gap between design and web development.

Such is my life (actually it’s a lot of fun).

More often than not, web designers are not usability experts. This is particularly true for those designers with a print background. This is evidenced by the many very pretty but difficult to use websites. Designers moving from print to the web are often so enamoured by the technology, they will overlook things like usability (Does that button really look like a button or is it just a circle?) and SEO (Can Google see my site? Is my text text and not just one big image?).

A website is NOT a brochure

I often tell my students (I teach this stuff at Uni sometimes) “Be ultra-conservative with layout and creative with images, fonts and graphics.” People need to know where they are just by looking at the site and if it’s a good fit for their needs.

Another aspect to a web designer’s job is to make your website look like all other parts of the business. Your business logo down through colours and overall look and feel of your site should be consistent. In many cases, designers are lumbered with old logos, colour schemes and awful graphics. If a business has been using those graphics, then they have to be rolled into the design. It’s often why I don’t add every single website to my showreel. Some simply don’t look that great because of the old graphics and colours I’ve had to incorporate into the site design (just some of our graphic work).

In short, everything you see on a website is the responsibility of the web site designer. That’s why he has to be part panel beater, part spray painter and part detailer.

One thing your web designer is not is . . . a mechanic. That’s a job for your web developer.

website-mechanic

Web Development

(The mechanic)

Imagine topping up your oil up every 2 or 3 months, doing a full oil change every year, adding water, checking spark plugs and turning tyres while keeping an eye on the door-locks and window winders. That’s a developer’s job.

Like your car, your website needs a mechanic. Not updating your website properly will eventually lead to problems. You can get away with not putting oil and water in your car for a while, but one day, it will stop. I’ve taken over many websites which had just stopped. Some sites that come to me with have so much spyware and hidden viruses, I’ve just scraped the text and started again with a new server and oten a new domain name (these days domains like this are often penalised by Google).

Web development usually refers to the overall functionality of a website. Do you need an e-commerce shop with a checkout system? What about an event scheduler? Do you need on-site membership? What platform do we use? Drupal, WordPress, Joomla, Magento or Shopify?

The developer works under the hood, usually grappling with the ins and outs of the computer programming languages which transport your content to and from the database.

The Hybrid Developer / Designer

(The artistic website mechanic)

That’s kind of what I am. In the past, I could only go so far with the look and feel of a site. It was just a matter of time before I needed to get my head under the bonnet and start fiddling with “the wires”.

Sometimes it takes a team of people to develop a website, but more often than not, with today’s technology and a multitude of CSS frameworks to choose from, a website can easily be built by a single person (for example, a freelance web developer like myself – here are several reasons to choose a freelancer over a web firm).

An Artistic Web Mechanic (I really need to work on that) has the ability to both write and understand code (HTML, CSS, PHP, JavaScript) and has enough creative acumen to get your website looking great. This requires both a logical and artistic brain.

Search Engine Optimisation (SEO)

I also find a lot of my time is dedicated to getting sites found. There’s nothing more embarrassing than going live with a site – only to find that 2 months later, Google hasn’t indexed it because it wasn’t properly coded in the first place. To this end, I build all my sites with both usability and SEO in mind. I also recommend people try a Google Adword campaign in the early days – as a way to boost traffic.

About 5 years ago, your basic new website opened to an audience of about 300 people per month. These days, with late adopters finally hopping onto the web, that number has dwindled to about a third. And because Google keeps changing its algorithm to avoid spammers (read my article about SEO here) it’s even more difficult to get found.

In Conclusion

computer-programmerSo there you have it. Your website is (very much, actually) like a car.

The metaphor isn’t quite perfect, but hopefully this serves to illustrate the difference between web development and website design.

A computer programmer is another type of person you might meet in this industry. A different breed of human being entirely. More often than not, you’ll have a much easier time talking to a web designer than a computer programmer or systems administrator.

But that’s another post entirely.

If you found this post interesting, please leave a comment below.

Tags: ,