6 Web Development: A Behind the Scenes Look

Ever wondered what developers do to turn designs into a functioning website? We raise the curtain on the magic right here:

We can divide the process of developing a website into three sequential sections:

Cutting the Designs to HTML

When you first see the design from the designers it will probably be in the form of a graphic, like a JPEG. However, at this point, it’s just a picture and needs to be ‘cut’ into HTML in order for it to become a functioning web page. That process begins with the designer handing over to the programmer a PSD file. (A PSD file is a file generated by a product called Photoshop and is extremely popular with designers. There are other software which designers use, InDesign being one, but on the whole Photoshop is the industry standard.) These are the ‘source’ or original files which contain all the design formatting, graphics, fonts, text and style guidelines: Here’s a useful little online tool called ZamZar if you are trying to view PSD files without using Adobe's Photoshop. Zamzar will convert one file format into another. So if your web designers send you a PSD file you’ll know where to go to turn it into a JPEG!

The PSD is then carved up into individual elements and coded so that it behaves like a normal web page (although it won’t actually do much at this stage until the content management system has been added). As the designs are written in HTML (a process called "cutting") they are also made to adjust their layout (and sometimes their content) depending on what device they are viewed on.  This is known as making the designs "responsive".

We then make sure that the web page looks the same for different browsers (and different versions of the same browser). This is known as browser compatibility and can be a little time consuming. This is also the point where the website is made accessible for people with disabilities (high visibility for the visually impaired, special colour schemes and fonts for those with dyslexia, no graphics for the blind, etc.).

Along with browser testing we also ensure that the code conforms with the standards set out by the World Wide Web Consortium – a technical standard all websites should obtain.

Building the Content Management System (CMS)

Now for the ultra-techy bit. At this point we programmers usually geek-out because this is where all the functionality defined in your wieframe and technical specification gets turned into your Content Management System (ours is called Proteus). In reality what we’re doing is customising one of our existing packages of Proteus depending on which one you originally choose for your project (Kick Start, Business or Enterprise).

At the end of this process you should be able to enter content into Proteus. However, you may be surprised to learn that we don’t recommend this for two reasons;

  1. you won’t be able to see your content appear on the front-end of your web site making it quite difficult to judge whether you’re entering anything sensible and;
  2. any changes to the system could affect (and possibly destroy) your content.

Integrating the HTML with the CMS

Once the CMS is complete it needs to be integrated with the HTML. Think of this as linking the back-end (the CMS) with the front-end (the HTML). Essentially this involves attaching a database to the HTML giving you the ability to add pages and content into the CMS and see them appear as a web-site.

Voilà! Your website lives and is ready for testing.


NEXT: 7 Testing: How to Test a New Website


digitalROAR LogodigitalROAR is a Web Design agency based in Staffordshire. We build websites that convert visitors into customers and enquiries through great design, rock-solid technology and innovative Digital Marketing. Let's make Contact.