Top 10 Joomla Beginner Mistakes and How to Avoid Them

You know how it goes. You create a fantastic Joomla website with great architecture, awesome usability, clean code and optimized images, and when you’re done, you hand it proudly to your client with (hopefully) some explanation of how to use the site’s backend. I usually create a video tutorial that explains how to perform the basic features.

The client is happy, you get paid, and you move on to the next project. A few months later, when the client comes back with some questions or wants you to upgrade or add some features, you notice that the site is not quite as clean as it used to be, not as optimized as it used to be, and so on. In fact, it’s kinda messy and crappy. Not a site you’d like to sign your name on or to have in your portfolio.

What went wrong?

Joomla is great because it empowers even non-designers to manage their sites themselves. The problem is that those customers, in their effort to run the site without bothering you, make mistakes.

During the years I’ve been developing Joomla sites, I’ve noticed that some of these mistakes repeat themselves. If those clients knew just a little about what to watch out for as they start using their new site, maybe they wouldn’t make them.

Feel free to send your customers this post to help them avoid these mistakes.

1. Links to outside sites open in the same window.

There’s a very simple rule here: all links to external sites should open in a new window, not the same window. You don’t want to lose that person forever. If a user clicks to a new site in the same window, they’re gone. All HTML editors have the capability to choose “new window” when creating links. If you are linking inside the site however, you should usually open the link in the same window (this is the default). Leave too many windows open while the user browses the site, and they’ll end up with a messy browser.

External site: New window. Your own site: Same window.

Choose to open the link in a new window, if you're linking outside your site

2. File names should be descriptive.

red_rose.jpg

Let’s say you create some images of flowers to upload to your site. You could call the images “1.jpg,” “2.jpg” but these names will make it hard to find, and search engines won’t know what to make of them. Even “flower1.jpg” is not good enough. The more specific, the better. For example, “red_rose.jpg” is a great file name. This is not only good for usability (it’s easy to know what the image is without having to open it) but it’s also a great way to get free traffic from Google when people search for images of a red rose.

3. Not resizing images.

One big flaw of Joomla is no ability to resize images; that’s your job. Of course, you don’t need to resize the image. You could upload a gigantic image and resize it on the HTML Editor interface by dragging the corners. But large images take longer to load, and that picture will still load as a large image. Speed is important, so if you want to keep your site speed down, you must resize the image before you upload. There are many tools for resizing images. www.shrinkpictures.com is a good one for beginners but any image editing software, such as Fireworks, can do the job too.

4. Having spaces in file names.

lady_gaga.jpg, not lady gaga.jpg

When you create a file, any file, be sure to use underscores instead of spaces.

So a photo of Lady Gaga should be named: “lady_gaga.jpg” and not “lady gaga.jpg.” Use a space and the characters “%20 “ will replace the gap when the browser reads the file. This creates a messy code and can create unpredictable problems. Here’s a great article about the best practices for creating file names:
www.thesitewizard.com/webdesign/create-good-filenames.shtml

5. Placing all the images in the same folder.

Joomla allows you to create new folders according to topic under the images/stories directory. For example, if you have an “about us” page with photos of your team members, create a new folder, call the folder “team” and place their images there. Place all your images in the generic images/stories/ folder and in no time you’ll be struggling to find your images when you want to add them to your articles. Keep your images organized by topic.  And of course, no spaces in the folder names!

Some HTML editors will let you do this on the spot, when adding an article, but the default HTML editor that comes with Joomla, won’t. So you’d have to go to site->media manager and add a new folder there.

Keep your images organized by topic

6. Not using the available heading for text formatting.

Every template has a style sheet file (CSS file) with headings for formatting. The title of your article is already formatted by Joomla but the rest of the article usually needs some more headings to break the block of text.

There are two ways to do this: the right way and the wrong way. The wrong way is to highlight the title, choose a font, choose a color, choose a size, click the bold button, and center it. It works but it creates messy code and it’s hard to maintain. If you wanted to make all the titles inside the articles green, not bold and in Arial font, for example, you’d have to open each article and make each change manually. That could take a while.

The right way to format text inside your articles is to use headings. This will create clean code and if you decide to change the way the headings look, all you’d have to do is open the CSS file and make the change once. (That’s not for beginners but you will get there eventually).

Select one of the available styles, especially the headings style

7. Typing directly into Joomla.

When you login to your Joomla admin, you start a session. The length of the session is set to 15 minutes by default but can be changed on the global configuration page. Start typing an article directly into Joomla then and your session will end before you’re finished writing. When you try to save your work, you’ll lose it. Trust me… been there, done that. It’s not fun. The solution is simple: write it in Word, save it, then copy and paste it into Joomla. But be careful…

You've got 15 minutes to finish typing , or else...

8. Copying directly from a Word document to Joomla.

This is a very big mistake that can take your site down (I’ve seen it!). Creating your site’s copy in Word is a very good idea but copying from Word directly into the Joomla HTML editor produces messy, bloated code that Google hates and which can mess up your site. The solution is simple: strip out the code by copying the text into Notepad first, then copy from Notepad into Joomla. Notepad is easy to find on your PC under “accessories.” I’m sure Macs have a similar program.

Copying from Word directly into the Joomla HTML editor produces messy, bloated code that Google hates

9. Adding underline to text that is not a link.

Text should only be underlined if it’s a link. People are used to clicking on underlined text. They see an underline so they assume it’s a link. If you need emphasis, use bold, italics, a different color, all caps, or a bigger size. But don’t use underline.

Text should only be underlined if it’s a link

10. Hard coding links.

There are two ways to link to a location on your own website. The wrong way is to find the article on your site, copy the URL from the browser window and use this link when creating a hyperlink. It’s messy, and if you move your site, change the article’s title or change your SEF extension, you’ll be in trouble.

The right way is to use the HTML editor to link to the article or menu item. The HTML editor will know the right URL to use in a way that doesn’t mess up your site. Make sure you always choose “relative” in the HTML editor settings, if available. The basic Joomla HTML editor doesn’t allow you to do this the right way, choose an HTML editor that does (My favorite is WYSIWYG Pro).

The right way is to use the HTML editor to link to the article or menu item

That’s it! If you follow these practices when working on your Joomla website, you’ll be in an excellent shape, and in time, all this will become second nature. Remember, we all started at the same place you are today, and we all made the exact same mistakes. I hope this helps.

Web designers, what are the biggest mistakes you see when handing a site to clients? Please add yours below.