So, you want to build a website, but you don’t know where to start. I have good news. Even though web design can be an intimidating process that requires technical and creative skills, you don’t always have to start from scratch. You can decrease the intimidation factor and even maybe decrease time and cost requirements of a website build by starting with a pre-built template.
The Function of a Template
All websites have templates. For example, you might have one template for the homepage and different templates for content pages based on the category they fall into. Having a standardized set of templates from which your site is built helps to create much-needed consistency for users.
Just imagine that if the next time you were shopping online every product page on a store’s site had a totally different layout. You’d have to reorient yourself with each page change which would be inefficient and annoying. So, for every website build process, you must decide on your site’s templates.
Now in some cases, you may want to build custom-coded templates because you have custom requirements, or you simply want your site to stand out from the crowd. However, this might cost you more time or money than you want to invest in the project. In this case, you can take advantage of the copious resource that is pre-built webpage templates.
You can find a wide spectrum of template designs for sale and for free online that you can use in your next project. Even if you, or someone you’ve contracted with to build your site, have the technical and design skills necessary to make a good design, a pre-built template can help you accelerate your project’s timeline. And if you don’t have all the skills but still need to build something that will serve your needs, a template can be a great guide and shortcut.
But what about a lack of originality in design? Well, you of course don’t want your site to look exactly like someone else’s but starting from the same place as someone else doesn’t necessarily guarantee you’re going to have a problem.
Like webpages, templates are just files of HTML, CSS, JavaScript, and other code. You can edit this code however you like. I’d go as far as saying that it’s unlikely you’ll find a template that has the exact combination of elements you want in the exact orientation and style you want that you can just plug your content in and go. There’s always going to be something you want to delete or something you want to add.
Adapting a template
How much you can change in a template and how far you can take one to get the design you want is completely up to your coding skill level. I, for example, have fairly basic knowledge of HTML and CSS and a tiny bit of knowledge about JavaScript. However, I’m also comfortable searching online for tutorials and code snippets to help me do things with code I’ve never done before. That’s a big plus if you want to build a website but aren’t a developer or programmer by trade.
With my skills, I was able to take the free template from W3Schools pictured below…
…and transform it into this high-fidelity prototype below of a design I’d previously created for my favorite bakery’s website.
Now you might say these are completely different, but there are a few things I kept from the template.
It had a simple navigation bar that stuck to the top of the page as you scroll. I changed the background color of it, justified the menu items right instead of left, and added the search input, order button, and logo which, with a little help from JavaScript I found, all scale down or are hidden when you begin to scroll down the page.
The template featured a full-width header image carousel with a centered heading and paragraph text over it. I edited the carousel feature to make it a static image, justified the heading left, and replaced the paragraph element with a button.
Right below my header, you can see that I used the 3-column image and text section from the template, only I rounded my images, placed the text below them instead of above, and added headings.
I also repurposed the template’s footer, keeping its social media icons and moving the address and phone number icons and text from the contact section into my footer.
There were also plenty of small elements like buttons and inputs from the template that I moved to different sections and styled differently. I didn’t have a use for certain things whole like the “Tour Dates” section or the “Contact” section in the template, but I was able to cannibalize from these when the opportunity arose.
Having the skeleton code for certain elements already built in my file saved me time in that I didn’t have to remember or research everything in the moment to build it. All I had to do was copy and paste them where I wanted and apply CSS changes.
The other big thing from the template that I kept but you can’t know I did unless you look at my page’s code was the responsive styling already built in the template’s external CSS file. With only a couple of exceptions for which I had to add some CSS, I was able to make my page work on most screen sizes as intended with little effort. That was a gift because it can take a lot of time and back and forth with your code to achieve a responsive design.
Templates Still Require Work
Don’t get me wrong, building this one page still took a lot of time and effort. I still had to write plenty of inline and external CSS to add all the styling I wanted. I still had to go back and forth on the exact sizing of elements. I still had to make sure my design worked across devices and browsers, and debug when I found problems. And I still had to search the internet to help me do some things that I wanted to do but couldn’t pull from my own knowledge or the template.
Using a pre-built template even came with its own set of challenges. I had to take time to orient myself with code I hadn’t authored in order to edit it without problems. For example, I forgot and left the JavaScript that automatically rotated the template’s header image carousel when I changed it and had to spend a while trying to figure out why the photo gallery I’d added was automatically rotating.
Despite these hiccups, I was able to bring a design idea for a homepage to life in a functional and interactive way a lot faster than if I’d had to type every single line of code by hand. Templates can be a great leg up but don’t expect them to do all the work for you.
References
Miro, L. (2019, October 9). how to redesign your website with a template? Medium. Retrieved from https://medium.com/javarevisited/how-to-redesign-your-website-with-template-7ebcf6512abc
Soliman, F. (2020, January 25). 14 things you should know before purchasing a website ready made template online. eSiteReq. Retrieved from https://www.sitereq.com/post/14-things-you-must-know-before-buying-a-web-template
Thomas, V. What is a custom website page template? Thomas Digital. Retrieved from https://thomasdigital.com/custom-website-page-template/
W3.CSS templates. W3Schools. Retrieved from https://www.w3schools.com/w3css/w3css_templates.asp
