- Arts and Design»
- Graphic Art & Design
My Process For Building Semi-Custom Websites (Websites From Templates)
How Many Websites Have You Built?
The process shared below is an effective outline for building semi-custom Joomla websites. While this process could be followed for Wordpress, my preferred content management system is Joomla. The semi-custom process is where we'll work with our client to build our design from an existing template. While elements of this process can be utilized for fully custom built websites, this process is focused on building websites from existing high quality templates.
To Borrow from Win Without Pitching, there are three goals our website can achieve.
We can educate the unaware, inspire the interested and/or we can reassure the intent to buy. Before we start constructing the website, it is important we identify which of these three objectives we want our website to accomplish. This focus point will help to guide all of our activities going forward. Once we identify which of these three goals we want to accomplish, we will identify what content would best accomplish each objective.
Our next step is to map out the website page architecture by building a visual site-map to align with these objectives.
When we think about our website, we want to think about the user's experience on the website. How do we want to guide them through the process, ultimately, to our call to action? I believe the best way to do this is to build a visual/graphic sitemap of all pages and to create a flow chart of the order we want the user to experience those pages. Once we know our objectives and how we want to accomplish it with our content, we will decide on how we want the content to appear.
Once we have this in place, we will not shift gears towards the design of the site.
Design Strategy Options
There are two design approaches we can take in our website project.
- The first option is, we find a template which is close to what we want and we customize it to fit our needs. Here is an example of one finished website which followed this process. Example 1 - Braselton Stover House
- The second option is where we select a bare-bones skeleton template. This is where we build the template up into what we want. I usually recommend starting with the second option. Here are two examples of finished websites which followed this process. Example 1 - Come and See Ministries | Example 2 - McKeever's First Ride
When we start our project, I will search these templates to find three I believe would best represent the look and feel we are attempting to replicate. Out of these three, you will select the one you prefer.
If you are not satisfied with any of the three templates, I will have you look through all of the templates yourself to find one you prefer. If you are unable to find a template you prefer, we will go to option two and use the bare-bones template to begin the process of building out the site you want.
My next step will be to install Joomla/Wordpress on a test server and install the template we've selected.
At this point we will know what content we want to use and we can delegate the creation of it. As we construct the pages, I will use image libraries to help elevate the look and feel of the pages. As the site takes form, we will work through a series of revisions to refine it into the site we want. Once we are finished, we will run a quality assurance test throughout the site to ensure it works as intended, on mobile and is search engine friendly.
- Pre-Launch Quality Assurance
- Website Launch & Post Launch Quality Assurance
- Website Transition
Pre-Launch Quality Assurance
Prior to launch, we want to test our website to ensure it is working properly and presented as intended. This phase includes the following 5 steps.
Step 1 - Mechanics
- Check all written and visual content is functioning as expected.
- Check all titles, headers, and navigation labels.
- Check all links are working.
- Check written content for spelling and grammar mistakes.
- Test all submission forms.
- Correct & update tags.
- Backup website.
Step 2 - Graphics & Layout
- Check image quality.
- Check download time.
- Check text layout.
- Check alignment of elements.
- Check color accuracy.
- Backup website.
Step 3 - Browser Compatibility
- Check website on different platforms.
- Check website on different browsers.
- Backup website.
Step 4 - Search Engine Optimization
- Global meta keywords and descriptions are completed.
- Each page's meta keywords and descriptions are completed.
- Internal links are setup.
- Designated Tracking has been setup.
- Ensure titles and alternative text has been setup.
- Speed test and optimization.
- Backup website.
Step 5 - Prepare For Launch
- Review and revise global settings.
- For better loading times, turn on compression for template, and global settings. Enable caching.
- Cleanup the backend administration panel.
- Remove unused items (articles, menu items, modules).
- Global Checkin.
- Clear Cache.
- Change global config email.
- Client approves the website to be launched.
- Client provides relevant hosting information.
- Make payment.
- Set and communicate a launch date.
- Replace Favicon with new version.
- Backup the website. Save a copy on the server and email a copy to the client.
Website Launch & Post Quality Assurance
Once all systems are a go, we will begin the process to launch the website. Here are the steps we will take.
Step 1 - Launch Website
- Migrates files to the server.
- Unpack and install the new website.
- Check the live website.
Step 2 - Post Launch Quality Assurance
- Check all pages and links.
- Check submission forms.
- Check tracking systems.
- Check visuals to ensure images are displaying appropriately
- Backup website
Documentation & Handoff Preparation
Website Handoff & Maintenance Lesson
Optional Support Packages
Website TrackingGoogle AnalyticsKeyword Tracking
Website Maintenance Support
Website Protection Plan