In Part 1 and Part 2 of this tutorial of how to make a website from start to finish, I talked mostly about the preparation before you begin the development and publishing process of the website. Now, in Part 3, I’ll talk about the actual coding and development of the site, the publishing process, and then how to test and improve your site once you’ve finished it. Here’s a list of each item we’ll talk about:
- Database Design and Creation
- Site Development
- Cross Browser Testing
- Installing Analytics
- Publishing Your Website
- A/B Testing, Data Analysis, and Site Optimization
As in Parts 1 and 2 of this tutorial, I’ll use our fake restaurant website as an example for each item in the list.
1. Database Design and Creation: Before you go ahead and build your website, you should determine if you need a database to store any information for display or interaction purposes. If you are using WordPress, then there are tons of plugins that can help with this. If you aren’t using WordPress, then you should build out your table structure, determine the foreign key relationships between tables, build them, and insert at least some test data before you begin your site development. I’m not a database expert, so I won’t go on to describe the details of this step, that’s up to you, I’m just saying you should handle it before you start developing.
For our restaurant website, we can go in one of two directions. We can have hardcoded menus, or, we can use a database to power the menus. If menu items are consistent in structure (if individual items all follow the same pattern of a name, description, and price for example), then I’d opt for a database. I’d set up a table of menu items and menu categories (such as appetizers, salads, desserts, etc.), and possibly seasons since we talked about the menu changing seasonally before. Then I’d handle the foreign key constraints from the categories and seasons tables into the menu items table so that each menu item has a name, description, price, availability (boolean flag so we don’t have to delete items), category foreign key, and season foreign key. I’d handle the interface for editing these database tables later.
2. Site Development: Now that you’ve got your designs, content, database (if needed), and CMS (if needed), you’ve got all the tools to complete your site development. Here’s how I’d recommend going about the development process:
Step 1. Get your header and footer templates or master file set first. To do this, build out a full single page in static HTML with your CSS in a separate document. Now that you’ve gotten a full single page, you can identify where the content is going to change from page to page, thus allowing you to pull out the parts of HTML that will remain the same on every page. With this knowledge, you can separate out your header and footer files (or master file, depending on what environment you are coding in), leaving you with a single working page that uses template file/s plus and external style sheet.
Step 2. Begin building out your other individual pages. Add more CSS as needed. Add in your content as you encounter each page. Hook in your database if appropriate. Focus primarily on all of the static content (whether it is hard-coded or brought in from the database doesn’t matter), and leave the interaction for later.
3. Cross Browser Testing: After you’ve finished development of your site, it is time to test! Depending on the complexity of your site, you could include some other quality assurance in this testing, but for simpler sites, for the most part, cross-browser testing is probably sufficient. Currently, it is important to test in IE, Safari, Firefox, and Chrome. It is also ideal to test those browsers on both a Mac and a PC (except for IE on Mac). Depending on what you expect your user base to be like, you may also want to test on an iPad, iPhone, and Android. Between those three mobile devices, you’ll cover a huge majority of your smaller screen sizes.
For our restaurant site, I’d open up the same page on each browser, and fixing any issues that arise in all browswers before moving on to another page. I’d also go through the navigation in an intentional and systematic way. I find this is the best way to ensure you don’t miss any issues.
5. Publishing Your Website: Now that you are sure your website is ready for public view, it is time to upload it! If you are using a CMS (such as WordPress), then publishing is easy. If you aren’t using a CMS, then you need some way of putting your new website files onto your server. I use Filezilla for Mac, an excellent FTP client, but there are a ton of good FTP programs out there. With your setup hosting, you should have received FTP credentials. Add them into your FTP software to access your server, and then drag and drop your files in. That’s it!
6. A/B Testing, Data Analysis, and Site Optimization: After setting up analytics and publishing your site, the job isn’t quite done! Now you’ve got to analyze any data that is coming in, and spend a little time optimizing language to increase various conversions and actions on your site. You might want to verify that certain language is getting across your message or bringing people to a different page. I’ve used various A/B testing services, but currently, I’m hooked on Optimizely. This service is not free, but there are free ones out there.
For our restaurant site, there may not be a ton of A/B testing to do, but I would definitely want to see if users were visiting the site, how much time they were spending on it, what content they mostly wanted to read, etc. You can learn what keywords are bringing users in, which can lead to good marketing tools down the line.
That brings us to the end of this three part tutorial on making an entire website, from start to finish. We talked about the beginning stages of branding, planning, and designing, to the middle stages of development preparation, to the final stages of development, publishing, and analysis. I hope it helps you understand how a website comes together, and all the things that you should consider when working on a project the whole way through. If you have questions or comments, obviously, feel free to share or contact me directly. Best of luck on your website projects!