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, but there is no wrong answer as long as you find something that can help you work efficiently.
- 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.
- I highly recommend utilizing a local development enviroment which will allow you to write code on your machine and test it locally without having to upload everything to a server to test if it works properly. There are a couple of different options like Xampp and Wamp. I use Wamp, but either option will allow you to write and test your code locally.
- FTP software will allow you to upload files from your local environment to a server. Filezilla is one free option but there are several to choose from.
- Content Management System: This is not necessary if you are writing your own code for your website. However, I'm a web developer and my clients want to manage their own websites by changing verbiage and images.
- Local Development: We will need a place on our local computer to develop the website without having to upload files every time we want to see our work.
- Layouts and Frameworks: Most websites created today have a responsive layout and we have options on how to make our site responsive.
- 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.
- Going Live
- SSL & CDN
- Final Miscellany
- Smile, be proud of yourself, grab a beer and show off your work to the world!