When building a site, you want consistency. It helps in the design, and makes it easier to communicate with your intended audience. You might call it repetition. The easiest way to do that is via a template.
Now different development environments allow you different methods. WordPress has themes, some content management systems (CMS) call them a template, but what ever it is called, it is a tool that helps keep the look and feel of your website consistent. Dreamweaver has had a template system for as long as I’ve used it, probably longer.
You might think, isn’t that the job of the CSS? And you would be partially correct. Yes, the CSS helps maintain the look and feel. But it needs to work with the structure of the HTML tags on the webpage to ensure that all of the elements are there. If you leave out a section of a webpage, then you will have a page that is different. If you build a pages without a template, it will take you longer to build your site, and it will increase the number of differences in your site.
Therefore, working with some sort of templating system is very important. If you are not using a software solution or CMS, then you can work with an old school template system. That is where you create a file, usually called something like template.htm, and always open that file to start. Then save it to the file name you are going to be working on.
Before you Build the Template File
Let’s look at the process of building out a web page template. If you’ve gone through the previous steps about determining your website users’ persona you should be ahead of where most people are. If not, go back and do that – or look at updating your persona(s) as necessary.
The Persona(s) of your users will help identify two things. One you should have already seen – which is determining what pages they will need. This is helpful in building out your navigation bar. It will also help you start to determine the look and feel of your site.
Look and feel is the basics of your design. Are you going for something light and fun, somber, serious? Are your users old, and need larger type? Maybe they are tech savvy…or not.
The look and feel helps determine the color scheme that you use, as well as other things, such as will you have soft rounded corners on images, or square images? Will you use images with a light or darker tone range? Maybe just black and while – but have a color highlighted to draw the user’s attention in contrast.
The base Bootstrap CSS file gives you several primary colors to work with for theming. However, that doesn’t always work for your intended audience. Luckily there are sites out there that help you theme a Bootstrap file, to make it work closer to your design. One such site is https://bootswatch.com/ . They have free themes that work using Bootstrap – all you have to do is swap out our CSS file link with theirs.
Sketching a Design
I also recommend sketching out some ideas. You don’t have to be an artist. This doesn’t even have to be shown to anyone. I’ve sketched more than one idea out on a restaurant napkin. The idea is to determine what needs to be in the site.
Working with a design idea, is very helpful. See what sections of your page will stay the same, vs change. The parts that will stay the same, they should be in your template.
Once you’ve made some of those decisions, and built your sketch, you are almost ready to start building your HTML template file.
Setting Up a File Structure
When I build out a site, I like to have an organized file structure. I will pick a location for the files, and then add in sub-folders for custom assets (JavaScript and CSS), images, etc. Depending upon if I’m building a website based on a server language (PHP, C#, etc) or not, I may need to add a folder or two for personal imports and/or a framework I’m using.
Starting off organized is very important. A failure to be organized will make working with the project much more difficult as it goes on.
Getting the Basic Template
Now I like to start with the template that is available on the Bootstrap website – https://getbootstrap.com/docs/4.3/getting-started/introduction/
This gives us the basis of an HTML5 page, the header, body, with links for JavaScript and CSS style-sheets. If you modified the theme of your page – then you will want to change out the link for the style-sheet to a local file which you’ve downloaded and put into your own folder.
Next, I will build out my navigation and navbar. I should know the pages I already need based upon some of the pre-work. If I’ve even built the navbar already, I can just drop it into the HTML template page.
Most websites have several components that remain the same from a layout perspective. There is a header (usually with branding info, navigation), a content section (with optional side bar), and a footer. The footer may have links in it, some copy right information, etc.
When you build your template, and consider the sections which will be static throughout the site, you can build that into the template, and save yourself a lot of time rebuilding it on future pages.
Some of the tags will use regular HTML tags (elements) others will need to have classes to implement the Bootstrap standard.
Luckily most of this is easily buildable within Bootstrap based off their starter template.
Save your completed file. Once this is done, you are ready to move on to
Files Not Based off the Main Template
Now not all pages will be based off of your template. If you look at something like CNN or YouTube, the homepage is vastly different than the homepage. Sometimes you will have one or more pages that don’t fit your template.
Homepages, landing pages, and others all potentially have different page layouts. So if you don’t want/need that same layout you can use something different.
A Note on Dynamic Content
Building a template in a dynamic language such as PHP, Java, or ASP.Net isn’t that different. You just need to know how the dynamic language creates the HTML file.
Some modifications I’ve used when working with a dynamic language is loading the menu from an external file so it is easier to update. Loading content randomly and/or dynamically. This is especially things like the side bar which has content that might need to change regularly.
However, those are just add ons with the content. It’s easy to get tied up with that – in reality, it’s just how the dynamic content will be creating your HTML tags, so never lose sight of that.
Creating a Template for a Bootstrap Enabled Website was originally found on Access 2 Learn
