There are many ways to code a website, so I'm not going to attempt to tell you all the different ways to get it done.  Instead I'm going to tell you how I code websites.  I don't have a claim to perfection and there will be many other people who utilize different techniques and workflows.  I'm open to making this a conversation and possibly learning different ideas or ways to improve my process.  This will be a multi-part article because otherwise it would be massive and difficult to manage.  I am going to discuss tools, coding and workflow.  I will attempt to make this a fairly comprehensive guide so I expect it will take me months to complete, but I'm not in a huge hurry.  For me this will be a living document because I will adjust it as I adjust my coding, techniques and workflows.  I will break it down into sections and this will splinter into separate more detailed blog articles.  I do hope you enjoy this article and please give any feedback that is constructive and helpful.  

I have decided to break this article down into the following sections:

Direction:  you need to have an idea of where you want to go before you can start building a website.  The direction phase is one of the most important parts of the entire process.  Building a website is similar to building a home, and the most important part of your home is a foundation.  Without a solid foundation your house is destined to fall down no matter how aesthetically pleasing it appears.

My Direction Process

I feel like one of the most critical parts of a design is having an actual conversation with the person who is the decision maker on the project.  For most of my clients this is the owner of the business.  In this conversation I want to ask good questions and listen intently to what is being said.  I need to understand my clients business and I need to understand who are their customers.  If 90% of a clients customers are women then I would lean towards a more feminine type of build including typography and color choices.  If a clients customers are over 50 years old then you will want to consider different choices for that age demographic vs teenagers.  Taking the time to ask questions, listen intently and have a genuine conversation with the decision maker is a huge step in helping to unravel the build process.  Take good notes during this meeting so you can refer back to them at a later time.  I also utilize Evernote to organize my notes and thoughts for each of my clients.   

You will find that clients are very different in regards to the level of involvement they have in the project.  Some clients are very hands off and some clients are very hands on with what they are looking for in a design.  During the conversation try and get a feel for the type of person you are dealing with.  I usually prefer dealing with more hands off clients because they are easier to please and I'm given more creative license while designing.

The next step I take is to identify 4-6 websites that are generally in the same industry as my client.  I find something that I like about each of the example sites and then I send the list to my client to review.  I don't share the things that I like or dislike about the site.  Instead I request that the client gives me what they like and what they don't like about each site.  This step is huge in determining what a more hands on client is looking for in regards to taste and design. I also ask if there are any websites that client loves or has any suggestions that they would like to see incorporated.  Look for patterns in the notes you receive from the client.  These patterns will help to make decisions about the types of elements a client will like on the website. 

The last step I take in the direction phas is to sketch out the original design thoughts on a piece of paper.  Some people create very detailed wire frames and drawings, but I utilize a rough sketch approach citing things that I definitely want to have in the design and other optional elements.  Then I begin to search for colors and font pairings that match the tone of the site.  With my rough sketch, colors, and font pairings I'm armed to start mocking up a website. 

Unlike some designers I don't feel it is my obligation to change the decision makers mind in regards to a website design.  My goal is to create a design that is search engine optimized, user friendly, conversion friendly, and liked by the decision maker.  I don't feel like those four goals are mutually exclusive and my goal is to accomplish all of them on each of my projects.  If a decision makers choice is something that I feel would not help the site be user or conversion friendly I will lay out my case.  However, in the end I will do whatever my client wants as long as they are informed about the consequences of my objection. 

Tools:  You won't need a whole bunch of tools but you will need some software tools for writing code and manipulating images to work on the website.

My Tool Box

In order to create anything in this world you need a set of tools to work with and that is no different for creating websites.  Without the list below I would be in a world of hurt.

  • From a hardware perspective it is helpful if you have a decently fast computer and internet connection.  Nothing gets more frustrating than waiting for work to get done because your systems are slow. 
  • You need a way to write source code.  You could use notepad if you like or you could utilize a full blown IDE.  There are a wide variety of different options to choose from so if you want to learn more check out this list
    • I utilize Brackets.io, which I have found to be a great code editor for my needs.  This might change in the future as I might start to play around with Visual Studio Code or PHPStorm.  In the end there is no wrong answer as long as you find something that can help you work efficiently.  From a coding speed and debugging perspective I think you should consider a package that includes autocompletion, syntax highlighting and code folding functionalities.  I also like a package that includes plugins or other options that will make your life easier.  One of my favorite plugins for Brackets allows me to transfer changes made to files automagically to a live server instead of having to open up the FTP software to transfer it every time a change is made. 
  • Photoshop or another image manipulation software is important so you can adjust or fix images as you add them to the website
  • Vectormagic is a piece of software that converts jpg, gif and png files and converts them to SVG.  SVG are scalable vector graphics and they usually look great no matter what size screen and the file size is generally smaller so they load faster than other pixel based image formats.
  • FTP software will allow you to upload files from your local environment to a server.  Filezilla is one free option but there are several options on the market.
Content Management System

I look at a content management system as a subset of tools, but it is important enough to have it's own category.  A content management system is a backend software system that allows a user to log into the system and make changes to the website.  That can include adding blog posts, changing images or changing verbiage.  Keep in mind a CMS is not necessary if you are writing your own code for your website and you understand HTML and CSS.  However, I'm a web developer and most of my clients want to manage their own websites by changing verbiage and images on their own. 

  • The most well known CMS on the market is Wordpress, it is utilized by around 30% of all websites around the world.  I won't discuss it here because I generally think Wordpress sucks
  • I utilize a licensed CMS that is made for developers named Perch.  What I like about Perch is it is easy for a developer to add the CMS system into my workflow, it is supported and it is affordable. 
  • There are literally 100's of different content management options to choose from including the big open source free options like Joomla, Wordpress, Drupal.  I would highly suggest doing some homework on what will work with the way you develop.  Because I write my own code I wanted to fit the CMS into my style and not be forced to fit my style into the CMS.  If you plan on coding in a way that you can write the code your way and fit the CMS in to your style then you should probably look at an option like Craft or Perch as they are made for developers.   
Local Development Environment

This is more software and is a developing tool as well.  A local development environment allows you to setup a server environment on your own machine, instead of using the server environment provided by your hosting company.  This creates a sandbox for you to create, change and just play around with your code, to see how it would look on a live browser.  It makes the process of coding much faster because your machine becomes the server so you don't have to constantly upload files and check changes on a live hosting server.  Another advantage of developing sites locally is that you can work on your site without being connected to the internet.

There are a few different options like Mamp, Xampp and Wamp.  I use Wamp, but all of these option will allow you to write and test your code locally.  

Layouts & Frameworks:  Most websites created today have a responsive layout and we have several options on how to make our site responsive.  There are many different a couple of different types of frameworks there are frontend frameworks and Javascript frameworks.  In this section we are going to discuss HTML5 frameworks because these frameworks allow us to create responsive designs so our code will allow our website to look great desktop, tablet and mobile devices.  We will briefly touch on Javascript Frameworks down in the coding section of the site. 

Layouts & Frameworks

A front end framework gives you a system to follow in order to create a responsive design.  The cool thing about frameworks is a lot of the CSS is already written you just have to add the correct classes to your HTML and your website should be fully responsive.  The downside is you will have to learn the details of the framework in order to be efficient using it.  Some frontend frameworks even include javascript as well.  If you decide not to utilize a framework you can utilize CSS Grid layout to create your own responsive design.  The benefit less code bloat, no learning of a framework and you will have to compromise less because you get to make all the layout decisions.  The downside is with this additional control you will need to do some more CSS coding to get your site exactly the way you want it, whereas in a lot of frameworks the styling is prebuilt into the system.  You will need to decide if you want to utilize a framework or not.  I will discuss a few options below:

  • Bootstrap:
  • Foundation:
  • CSS Grid:
  • Coding:  Whoa now we finally get to start coding the website!  Your website will definitely require html and css, but most websites also use Javascript to make the pages more dynamic and interactive.   
    • HTML 
    • CSS
    • Javascript
    • Server Side Scripting
    • Machine Language & Schema
  • Final Steps:  Our website is fully coded and functioning.  Now we can add the final touches to the project and get the website live.
    • Animation
    • Testing
    • Going Live
    • SSL & CDN
    • Final Miscellany
  • Smile, be proud of yourself, grab a beer and show off your work to the world!