ROAR Resources

How Are Websites Programmed: From Design to Working Website

Ever wondered what programmers actually do to turn a design into a functioning website? In this article we take a look at what the professional website developer actually does all day.

1. CUTTING THE DESIGNS TO HTML

When you first see the design of your website 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 [1]  file. These are the ‘source’ or original files which contain all the design formatting, graphics, fonts, text and style guidelines [2]. 

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 CMS has been added). It’s also the point at which the mobile version of the design is coded. Often this will look different to the standard desktop version of the website because of the constraints of screen size. For example, you’re likely to see the ‘hamburger’ (three stripes) instead of a menu or you might find the page’s content stacked in one column rather spread out or find that actual content is changed because of its appropriateness to a mobile browsing experience.

Next we make sure that the web page looks the same for different browsers (and different versions of the same browser) [3]. This is known as browser compatibility and can take quite some time to get right.

This is also the point where your accessibility (high visibility, dyslexia, no graphics, etc.) styles are created and browser tested.

2. BUILDING THE CONTENT MANAGEMENT SYSTEM

Now for the ultra-techy bit. At this point our programmers usually geek-out because this is where all the functionality defined in your specification gets turned into your Content Management System. In reality what we’re doing is customising an existing ‘engine’ (in our case that’s Proteus but it could WordPress, Magento, etc.). The extent of the customisation is dependent on the nature and number of functionality requests you’ve made that aren’t already covered by the basic engine. Unsurprisingly this, to a large degree, determines how long the coding element of the project will take.

At the end of this process you (in theory) should be able to enter content into your CMS. However, 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.

3. INTEGRATING THE HTML WITH THE CONTENT MANAGEMENT SYSTEM

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 edit/add pages and content into the CMS and see them appear as a web-site.

Once this is done you should be in a position to test your new website!

 

[1] 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, Adobe Illustrator another, but on the whole Photoshop is the industry standard.

[2] Zamzar is a useful little online tool if you are trying to view PSD files. This website will convert one file format into another so you can turn your PSD file into a JPEG.

[3] The typical browsers most web designer companies work to are; Chrome, Internet Explorer/Edge, Firefox,Opera but here's a more complete list from Clicky which includes how many people use what make and version of browser.

 

Have fun.

 

 

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.