The Ultimate Guide For Building Awesome Joomla Websites
Have you ever heard of Joomla, the open-source content management system (CMS)? Introduced by a friend when this tool was in its infancy, this became our go-to resources for websites when I owned and operated my marketing company. Joomla drives my personal website and blog, as well as Path Of The Freelancer. I also drive most of my website design clients to build their website on Joomla.
This guide originally started as a response to a Facebook question on my wall. "Can you suggest any resources for a Joomla beginner?" As I shared my Joomla work on Facebook, other questions and comments came up about the CMS and this quickly grew.
This page is designed to help those curious about Joomla on how to maximize their experience. Here's what you can expect as you read this ultimate Joomla guide.
- An Introduction To Joomla
- Why Use Joomla (Instead of Wordpress)
- Website Hosting
- Designing Joomla Websites
- Joomla Extensions
- Image Repositories
- My Process For Building Semi-Custom Joomla Websites
Are You New To Joomla?
Why Use Joomla (Instead of Wordpress or Drupal)?
While there are other great open-source content management systems like Wordpress and Drupal, Joomla is my preferred CMS system. Shortly after it was released in 2005, I began constructing websites using this platform. Over the years using both Joomla and Wordpress extensively, I've come to conclude, out of the box, Joomla provides designers and configurators more control over the website, content, and SEO elements.
While extensions on both sides can fill the gaps, I prefer to stick with the base install with the least amount of add-ons as possible. Beyond the website control, and more intuitive admin experience that Joomla provides me, it also has some specific advantages to the other platforms as described here by Brent Laminack, and listed below.
Joomla...
- is technically superior to Wordpress
- has a more flexible page layout paradigm than Wordpress
- has a more sane development path than Wordpress (& Drupal)
- has better graphics than Drupal
- lacks a huge corporate backer (which has pros and cons)
On the home page of Joomla.org, they state the following as why you should choose this open-source CMS.
"Hundreds of developers have been improving Joomla! since the first version was released in 2005. This immense effort has made Joomla! very popular, easy to use, stable and secure. Joomla! has thousands of free extensions and templates allowing you to customize your site to fit your specific needs."
While these make Joomla a strong contender as the foundation of your website projects, it's best to discover each tool for yourself and learn which will work best for your specific applications.
Joomla Website Hosting
The first step in working with Joomla is setting up a website host. Thankfully, for those of you who are new to Joomla, Siteground offers a 90 day free Joomla hosting package. This will give you more than enough time to discover this CMS platform.
In 2006, I began using Hostgator.com as a reseller. My experience with Hostgator was initially positive, but as their support declined after getting bought out I migrated from them to a new hosting company called InMotion Hosting (affiliate link). Both Hostgator and Inmotion use CPANEL, which is a powerful website hosting tool. It has been invaluable in my troubleshooting scenarios.
Designing Joomla Websites
Joomla uses the term "template" for the designs on its platform. We have the option to either create our own templates or purchase ones we find online. It is my preference to find and alter templates, instead of building them from scratch.
Existing templates are great resources for building excellent websites quickly and cost-effectively. I call this approach semi-custom website design. There are two methods I'll use when approaching semi-custom web design.
Method one consists of picking a template similar to what I envision for the project. At that point, I will customize it to me and the client's direction. Method two consists of picking a solid barebones template (Afterburner 2 or Master 2, both free) and building it from ground zero into what we want it to be.
In most cases, using a template and one of these two methods generates the results my client is looking for. There are some cases where a completely unique website is needed for a client and will require a different process. This custom website design methodology lies outside of my skill-set and preference of working.
Where To Find Great Joomla Templates
Yoo Theme
Yootheme is a great Joomla resource, with great templates and extensions. They also have a free barebones template, Master 2, and some of their extensions are free as well.
uikit
Overall, I have come to prefer YooTheme templates primarily because of their integration of uikit. The uikit includes a variety of preset design, layout and function presets which can be tapped into any aspect of the website. Simply put, I can do awesome things quickly and easily. Check out their core documentation here to see what it is capable of.
RocketTheme
RocketTheme is my second best option for Joomla templates. They also have great free Joomla extensions to make Joomla websites better. If you are interested in playing on Joomla without having to buy a template, they have a great free one called Afterburner 2, as mentioned above. The forums can be a great resource to look up answers to questions as well as facilitating new ones.
How To Successfully Navigate Joomla
At the end of the day, 90% of any issues, questions or obstacles I run into can be resolved by Googling them. In the few instances, I am unable to find an answer, I will post my situation on the RocketTheme or Joomla Forums and usually get helpful answers within a short period of time. For me, I am much more of a hands-on learner but if you prefer to work through tutorials, Youtube has just about any Joomla tutorial you would want.
My New Install Procedure
When I launch and build a new Joomla website, there is a procedure I follow to setup my workbench. It includes configuring the settings and installing several key extensions listed below. Each of us is likely going to have a different process, but this can be a great system to help you get started.
Global Configuration Settings
In Joomla, there is an area in the admin panel called Global Configuration. This is a resource we tend to use when building the site but rarely use after it is finished. When setting up a new website, these are the two actions I take.
- Under templates in global configuration, Turn on module preview positions. This allows us to add "?TP=1" to our front-end URL to see all of our module positions. This can be helpful when trying to discover where to place certain modular content.
- In Global Configuration, turn SEF URLs to ON. This will require we rename htaccess.txt to .htaccess. I will use the component we install below Profiles to do this. This will make our URL's friendly to the search engines and ultimately allow our site to rank higher.
- By default category and article URLs will include an ID number. If you want to turn this off simply navigate to the global configuration settings, go to articles, and select the integration tab. Change URL routing to experimental and underneath it, select Yes to remove URL ID numbers.
- After I've finished building a Joomla website, I'll go back into the system Global Configuration settings and turn on progressive caching. This causes the website to load faster, making it better for the user and search engines.
New Install Extensions
A great aspect of Joomla is its ability to transform into the type of platform you need for your application. With numerous extensions, you can implement functionality for almost anything you would want with little to no coding experience. The place to find these extensions is the Joomla extension direction. This directory is a great place to hang out, and I've spent hours looking through the extensions for implementing the desired functionality. Check out the great paid extensions as well as the many free ones.
The following are extensions I install right from the beginning.
- Akeeba backup: Akeeba is a great tool for backing up your Joomla (or Wordpress) website. Use it to backup your site and as a tool to migrate your website to different servers. After this extension is installed, run the wizard. After I complete this task, I change the save format from JPA to ZIP. It is easier for me to use the zip file. If you are comfortable with JPA, stick with it.
- JHackGuard or SecurityCheck: To help prevent website hacks, I'll immediately installed one of these two plugins to increase the security and prevent malicious activity. Doing this in tandem with Joomla release and extension updates prevents future attacks. With several backups using Akeeba, I've not got a plan to prevent attacks and restore the site should it happen.
- ProFiles: This great tool is a file manager. It allows us to edit our htaccess file and upload images and videos to the server that are larger than the media manager allows. If the Joomla media manager is limiting what you want to be able to do with files and folders, check out this tool.
Check For Updates
Before launching a website, I'll run a Joomla extension update check to see if any of the components need them. If they do, I'll update them before going live. Each time Joomla loads, it does a full update check. With one click, I can update Joomla or any of the components that need it.
Using Images To Bring The Site To Life
The more I have worked with websites, the more I have realized how much great images can transform the look of them in a positive and powerful way. Tapping into photo repositories can transform websites. Let the images do the heavy lifting. Here are some great resources for both paid and free-to-use commercial images.
Free To Use Images
- Unsplash (My favorite)
- Pixabay
- Gratisphotography
- Visit the Path Of The Freelancer Toolbox for additional free image repositories (select the images category).
Paid Image Repositories
Construction Tools
When building Joomla websites, there are several tools I use to create graphics and help me do my job better.
- Canva.com: This free tool and its many templates make graphics creation a breeze. It is also easy to use. Merge this with the image resources above and you will have a powerful combo.
- Colorzilla: This tool allows you to get the color code for any code you find online. It's a great resource for color matching or quickly grabbing color code numbers.
- Developer Console: Every browser has some sort of developer console. This allows us to inspect HTML code, style sheets when we are trying to troubleshoot.
- CloudConvert: This great free tool makes converting files from and to any format easy and quick.
Building great Joomla websites is a collaborative effort. Great templates, great extensions, great photos and great tools help me bring great Joomla website to life. In the next section, I'll share my process for building semi-custom Joomla websites for my clients.
My Process For Building Semi-Custom Joomla Websites (Websites From Templates)
Strategy Overview
This design process is an effective outline for building semi-custom Joomla websites. The way it's written, allows you to use this framework for Wordpress or any other system. As a quick reminder, 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.
Website Target
To Borrow from Win Without Pitching, there are three goals our website can achieve. We can educate the unaware, inspire the interested (Most common) 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. Once we've done so, our next step is to map out the website page architecture by building a visual site-map to align with these objectives.
Visual Sitemap
When we think about our website, we want to prioritize the user's experience. How do we want to guide them through the process, ultimately, to our call to action? The best way to do this is to build a visual/graphic sitemap of all pages and to create a flowchart 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 on 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 - View Template Demo Site. View Final Website.
- 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 - View Template Demo Site. View Final Website.
Template Selection
When we start our project, I will search the template repositories listed earlier on the page to find three I believe would best represent the look and feel we are attempting to replicate. Out of these three, my client will select the one they prefer.
If they're not satisfied with any of the three templates, I will have them look through all of the templates and find one they prefer. If they are unable to find a template they prefer, we will go to option two and use the bare-bones template to begin the process of building out the site from a skeleton template.
My next step will be to install Joomla on a test server and install the template we've selected.
Website Construction
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 (from above) 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. Here are the three phases of the project launch.
- 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 the website on different platforms.
- Check the 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 set up.
- Designated Tracking has been set up.
- Ensure titles and the alternative text has been set up.
- Speed test and optimization.
- Backup website.
Step 5 - Prepare For Launch
- Review and revise global settings.
- For better loading times, turn on compression for the template, and global settings. Enable progressive 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.
- The client provides relevant hosting information.
- Make payment.
- Set and communicate a launch date.
- Replace Favicon with a 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
Once we've launched the website, we'll need to explore these areas to ensure the website is properly transitioned into the maintenance stage.
- Website Handoff & Maintenance Lesson: This is where I'll provide my client with admin access and instruction on how to drive the website.
- Optional Website Support Packages: Clients who don't want to or have the capacity to drive the website will hire me to make all future changes.
- Website Tracking (Google Analytics & Keyword Tracking): To help us with strategic planning, we need to understand how our website is performing. I'll install the free Google Analytics on most websites, and for those wanting more advanced keyword tracking for SEO reasons, I'll offer a paid reporting package.
- Joomla Updates & Backup Package: The best way to prevent a hack is keeping Joomla and the components up to date. The next best thing we can do is have an up-to-date backup available for quick restoration. If my clients want me to manage this, I'll charge a recurring feed base on how often I'm updating and backing up the website.
Once these factors have all been discussed and resolved, my website project is complete. I'll support the client where requested and shift my focus to the next design project.
In Conclusion
Joomla is a powerful tool and one I'm grateful exists. Many wonderful and talented people have spent a tremendous amount of time and resources to turn it into the juggernaut it is. Joomla has positioned itself as a solid and powerful foundation for the future and I expect it'll become a dark horse as it increases its market share in the future. We'd love to have you join the Joomla movement and build your websites on it going forward.
Bonus! 49 Amazing Facts You Didn't Know About Joomla!
If you are wondering why exactly Joomla is the way to go, check out the infographic below. The enticing visual narrative follows the history and growth of this powerful content management system, what sets it apart from other site building platforms and what its unique strengths are. Infographic Image courtesy of WebsiteBuilder
- Created on .
- Last updated on .