What’s in a website?

Vision:

Every website begins with a vision following a specific need. Be it the vision of the website’s owner or that of the web designer, it starts with a visual concept. These visual concepts are sometimes sketched on a piece of paper or some or other desktop or mobile application. This vision however needs to be transformed into a fully functional website that will “wow” its visitors. There are almost as many different approaches as you will find web designers/developers. In the process set out below we will investigate the workflow followed by most developers/designers.

Getting that vision digital:

Most web designers will use software such as Adobe Photoshop, Illustrator, Corel Draw etc. to create a visual representation of the website that will be built. The process of creating a mock-up of the website not only assists with the actual design and layout but also assists in calculating the different measurements to be used when coding the website. Once the mock website has been created in one of the mentioned programs and approved by the client the visual design must be recreated using different coding languages. As mentioned above this process is normally done by the web designer who takes a keen interest in the different colours used, the aesthetic layout, the fonts to be used and the overall look. Great care is taken to incorporate and promote the client’s brand in the overall design.

From digital vision to code:

Web designers will normally do the coding bit in a text editor (such as Dreamweaver, Notepad, Aptana or Brackets to name but a few), to recreate the visual design they have created in the previous step. In order to do this the web designer will use HTML (hypertext mark-up language current version: HTML5), CSS (cascading style sheet current version CSS3) and a bit of JavaScript. HTML5 is used to create and build different parts of the website such as the header, navigation bars, articles, sidebars, images, footers etc. All the content that you will see on the website is placed there using HTML5. The web designer will use CSS3 to style all the content that you see in the website in order to make it look just like the mock-up referred to earlier. For example, CSS3 is used to define whether the navigation bar will be horizontal or vertically placed on the website. With HTML5 the navigation bar, for example, is automatically placed vertical with bullet points. CSS3 is then used to remove the bullets, place it horizontal and create different looks when a cursor hovers over a menu item etc. In order to make the website a bit interactive for the visitor the web designer uses JavaScript. JavaScript can be used to create animations or image slides on the website. The web designer is normally responsible for coding the part of the website that is visible to the visitor.

The web developer comes into play when the necessary code is written to ensure that the website, the visitor and the server can communicate with one another. An e-commerce website for example needs customers to sign in, make payments via credit cards, PayPal or other electronic means. This data needs to be stored on a database on a server and should be kept safe. In order for a customer to sign into his/her account which is kept on the server there needs to be communication from the customer via his/her web browser to the server. The database on the server will only allow access to the customer if his/her information was entered correctly. The database will now have to communicate back to the customer via his/her browser and accept or deny entry. After granting access the customer purchases a product after which the server must accept payment, inform the website owner of the payment and order, change the stock level in the database etc.

In order to do all of this a lot of behind the scenes calculations and processing take place. In order for this to be possible the web browser and the database need some sort of manner to communicate with one another and exchange data in a secure manner. This is where the web developer comes into his/her own right by creating the necessary coding using PHP (Hypertext Preprocessor). PHP is a server side programming language that is used to establish a direct link between the customer’s input and the database on the server. The data on the server is stored and updated in databases using a Relational Database Management System such as MySql which is most noted for its quick processing, proven reliability, ease and flexibility of use.

In a nutshell, the designer creates what you see and the developer creates what makes it work.

From code to actual website:

Once all the coding has been done and the website’s code has been debugged (removing code errors) and debugged, and debugged again, it needs to be uploaded to the server and the database needs to be created. This includes all the html web pages, its style sheets and content such as images and videos. In order to do this a File Transfer Protocol (FTP) software is used to move the files from a computer to the server. Upon transfer of the files to the server the website is immediately available and functional.

The above article was intended to give a very brief overview of the processes that go on behind the scene and which the customer is normally not aware of. Many hours actually goes into designing and developing the website and making sure that it is fully and properly functioning. In this article we discuss mobile or responsive websites.

You are welcome to ask questions, make any comments or share your opinion.

®WebScripto is a Pretoria based Web Design Company.