How to build a website

There are as many different ways to build a website as there are to design a website. As with our How to Design a Website overview we are going to focus on our preferred method. This assumes you have already registered a domain name and purchased some hosting space. You will also need an ftp client and to know how to use it, check out CuteFTP or ws_ftp for Windows or CyberDuck for Mac for cheap and easy to use clients.

This also assumes you are not simply going to install and modify WordPress or one of the many other excellent prebuilt CMS systems which can have you up and running in very little time but rather are after building your own website from scratch.

For the most part we build bespoke CMS systems that are unique to our clients; they fit the clients' requirements exactly with no extraneous code to bog the sites down. Off the shelf CMS systems are great for smaller projects but, by their very nature, try to be all things to all people and consequently can include thousands of files, millions of lines of code, which may very well never be necessary. In most instances this may not matter but with larger projects it can lead to impaired performance.

  • Adobe Photoshop Adobe Illustrator Adobe Dreamweaver Adobe Flash
  1. Slice your designs

    . Firstly you will need your page layout designs probably (hopefully) created using a graphics package such as Photoshop or Illustrator. You need to cut these designs into the images you will need to be able to recreate the page in a browser as it appears in your designs. This takes a little practice and a little HTML & CSS knowledge to see which bits you are going to cut out and save. Generally if something is text you want to try and keep it as text so search engines can read it, so you can turn all the text layers in your page design file off – obviously if it uses a very non-standard font and you have no way of producing it with code you are going to need to save it as an image. Also any areas of single flat colour you are probably going to want to code becausee setting the background colour of a div takes a lot less bandwidth than downloading a huge flat white gif. If we look at the home page of this website as an example, the below image shows the top half of the page and the images needed to produce it.
    home page and images needed to produce it
    Everything outlined in blue is editable text so is readable to a search engine. To create everything else we need 5 images; the two tone background image which repeats left to right to create the header, the long grey bar which is used as a background for the navigation, the large patterned panel which is the background for the slider panel, the star graphic and the black block which is used as the background for the pricing box titles. Everything else is done via the HTML and CSS.
  2. Create you file structure

    . Like on your own computer, the file structure is simply a way of organising your site files so you, and anyone else who comes to work on your site, can find the files you are looking for. On small projects and unless you do it very badly it is unlikely to have an impact on the performance of your site. However traditionally you would normally have a folder for images, one for any CSS files, one for any javascript files and so on for all relevant resources. In a basic site your actual pages, 'about', 'contact us' etc. can simply go in the root folder – normally '/public_html', '/hmtl' or simply '/' depending on your host. So a simple site might look something like sample website file structure, which shows your local files on the left and your hosted files on the right. On larger projects, obviously, this can become much more complicated and you will likely only have an .htaccess file and an index.php file in the root directory to deal with all page requests and serve up the appropriate content using the relevant templates.
  3. Create your markup

    . Once you have your images you need to code the page to display correctly, that is create the markup. The current standard markup language at time of writing is HTML5 & CSS3. We tend to use Dreamweaver for this but you can use anything from a plain text editor like Notepad to FrontPage or any number of free WYSIWYG editors such as ckeditor or AceHTML. Be wary though that Word or FrontPage will inject a huge amount of erroneous garbage that you will probably want to weed out. You will need to code each of the pages you wish to put on your site, and link them all together (very important). If you want to add any sort of interactivity such as rollover effects try to do it through CSS.
  4. Add browser side scripting

    . Browser side scripting allows you to give feed back to a user in real time without needing to submit each page and request a new one from the server. Probably the most common browser side scripting language is Javascript, most modern browsers support some level of Javascript. Because it operates at the browser it can cause effects or changes in a webpage in real time, as the user is looking at and using the page, rather than having to wait for the page to be submitted and refreshed with new info from the server. Most effects, such as roll-overs etc. used to be created using javascript, but javascript has usability issues, some people either turn js support off in their browsers or may be visiting your site via a mobile device which does not support js, so in the interests of being visible to as many people as possible it is better to create effects etc with CSS where possible. Javascript is extremely useful however, it is a light, dynamic, powerful language. It can be used to give real-time feedback, for instance if a user is filling in a form and enters an invalid phone number, it's good to be able to tell them straight away so they can correct it rather than have to submit the form only to be returned to the form to correct the field. Be aware that any checks you run with javascript in this way should be duplicated server side – at the server – to ensure users cannot bypass them by simply turning js support off in their browser.
  5. Add server side scripting

    . For all server side checks and functionality you need a fully fledged scripting language like PHP, ASP, Perl, Python, Ruby, .NET etc. These are server side scripting languages; our favourite, and the power behind such sites as Wikipedia, Yahoo! And Facebook is PHP. It is an open source language, meaning it is free to use, and redistribute, it can be used on any platform, offers excellent support and is used by millions meaning there are hundreds of thousands of tutorials, forums, support groups etc. to help find a solution if you hit a problem. As with HTML you can code directly in Notepad, Dreamweaver or your favourite editor or you can make use of ready rolled frameworks such as Cake PHP or the excellent Smarty PHP etc.
  6. Connect to your database

    . Once you are into scripting and larger projects, and certainly if you are planning on building your own CMS, you will want to connect your website to a database. Connecting to a database means all your content can be dynamic; rather than being held in flat HTML files which need to be downloaded, amended and re-uploaded to affect changes the content can be edited directly in the database, usually via a web based control panel, but also via your db admin software such as phpMyAdmin. This can then be updated automatically with info from somewhere else or manually by logging into the db and editing the appropriate field. Most hosting packages come with some form of database support, most commonly MySQL. Databases can be used for all sorts of things, from storing the details of contact requests, to storing order details and creating a mailing list of past customers to holding every piece of information on the site in a format which anybody can edit whilst storing the time and details of that edit – see Wikipedia. For information on connecting your website to a database see connecting to a db
  • Follow
    Link Metric Facebook pages Link Metric Twitter Link Metric LinkedIn Link Metric Skype Link Metric RSS feed
  • Share

Testimonials

Link Metric's search engine optimisation work took us from a brand new site, not even listed in Google let alone ranking for any of our highly contested terms, to page 1 in Google in 12 months.

For many of our top performing terms we now have 4 or even 5 separate pages in the top 10, we dominate the first page of results!

Our increase in traffic has been phenomenal; I can't recommend Link Metric enough.

Tim Taylor, Foster Fridge

Get In Touch
Web Design London +44 (0)333 444 2011

Your Name (required)

Company Name (required)

Telephone Number (required)

Your Email (required)

Message (required)

captcha (required)