Website designers workflow

Intro

My suggested list of the workflow for building a website

After client/designer liaisons with clear objectives set and given an approved design to follow you can proceed to the website build

1. Register the domain names
2. Set up your local directories, see guide below for standard pactise
3. Set MAMP to look at your new project to be able to run it locally
4. Start coding in a text editor I recommend BBedit
5. Open your favourite web browser I recommend Firefox to view via the local link provided by MAMP
6. Create your working directories - Directory file naming conventions
7. Start coding the website
8. The company or project logo - Create favicons
9. Create a DEV (Development) domain on your web hosting service to upload the site as you develop it
10. FTP create a connection between your locally hosted site and the allocated DEV server space
11. Upload your website to DEV location
12. Nearing completion offer DEV location to client for approval and or comments
13. Check your website code (html/php and css) by Validating through W3C validators by pointing to your hosted DEV version of the site.
14. Test the site on multiple popular browsers to confirm or adjust how it views/operates
15. With client approval, testing and validation complete create the LIVE domain location on your host and upload the site
16. Add the legal disclaimer pages. GDPR acceptance of cookies, privacy policies, acceptance of cookies etc.
17. Register the new website with search engines
18. Add any open graph social media code to social media links
19. Provide any CMS username and passwords to clients, with some assistance in how to update their website
20. Add any requested analytics software, again with username and passwords for clients to access reporting software
21. Unless e-mail is outsourced to the customers own MX servers. Set up client e-mails providing secure username and passwords

Directory & file naming conventions

Before you start you’ll want to create your directories to contain the elements of your website. Name all of your directories with lowercase alpha characters. You’ll want to create your index.php file and .ico file and store them in your root directory.

Create the following directories within your new website build directory and name it “mynewdomainname.co.uk”, of course using the name of your project.

• css
• downloads
• fonts
• images
• js

• favicon.ico
• index.php

Directory Set-up

CSS

This directory to contain only your CSS3 .txt files. A well designed site should contain no more than 3 .css files. Idealy they should be fonts.css, layout.css and style.css. Many websites fall foul of too many style sheets both external and internal and although there’s nothing inherently wrong with this, more often than not, those sites will have many errors and it becomes very difficult to determine which style’s being overridden by another.
NOTE: You might be using a template for a website that already uses many .css files to create the website but you want to create your own styles and positioning of elements. If so it’s good practise to create another .ccs file and call it something like overrides.css it’s name suggesting exactly what it’s doing. Rather than altering the existing .css files which can lead to complications. Override them with your overrides.css file. Make sure you order your .css files with your overrides.css file being the last to be called.

downloads

This directory for storing any documents you may wish visitors to your site to ‘download’. An example of this may be some Portable Document Files or Microsoft word documents.

fonts

This directory for storing any fonts that you want to host and use with your site. This is ONLY for fonts you’re serving along with your website. You may be delivering the fonts used in your website via an online font provider, in which case this folder would be empty. Your font provider would supply you with the url to their server which you would point to through your fonts.css file. If you are serving your own fonts then there should be a .eot, .svg, .ttf and .woff file for each instance of font.

images

This directory for storing any images and graphics that you’re using on your website. Most commonly these will be .jpg’s and gif’s. Remember to optimise all of your graphics and photos before uploading them to this folder. Photoshop offers many compression algorithms as does Adobe Fireworks.

js

At some point you’ll be using some javascript on your site. This could be for anything from form validation to a neat photo gallery. Store your .js files here.

favicon.ico

The .ico file is a graphic file. It’s the icon that appears in your browsers search bar and also appears next to the bookmark when you bookmark a page. It has to be stored in the root directory along with your index file for it to work properly in all browsers.

With the advent of many smart devices you now need many different versions of the favicon icon to display properly on these devices. Still the images need to be stored in the root directory of your website. With one graphic icon you can create the many different versions with an online .ico generator such as http://realfavicongenerator.net/.

index.php

Finally, your index file. This of course can be .htm, .html but for the purposes of this exercise we’re skipping those. Move straight to PHP. (These days most servers are set up to interpret .php files). You may be coming to this without knowledge of PHP but don’t worry apart from the suffix (.php) your index.php file can be totally html. As you learn more you can introduce .php snippets and includes. You can’t do this if your file’s named .htm or .html

 

 

Please share if you find the content useful - thank you

Contact

	FORUM
	Have a comment or something to say? Say it here…

[privacy policy]