Site Redesign - 2021

I can't believe that it's been 6 years since I last launched a redesign of my website. I guess I owe a lot of that to how great the YooTheme template was that I had been using. I have always been pleased with how it looked, but I also knew that sites these days are a lot more visual and graphically intense (oh how times have changed!)...so it was time for an update, using YooTheme Pro (aka, YooTheme Page Builder)

This site runs on the Joomla open source content management system, which I have been using since it was released back in 2005 (I was using Mambo before that). Joomla has stood me well (one of my sites featured in books about Joomla) but I confess that this update was more of a challenge than I expected. In fact for the first time ever, I actually found myself writing up my own design document to get it clear in my head just how I wanted the site structured.

Let's be clear about two things...(1) this site isn't a complex site. It features just over 40 articles in total. (2) like the YooTheme Warp template I used before, this new version of the site is strongly based upon a look and feel that YooTheme provided and that I modified and restructured. The difference this time is the technology behind that theme...known as YooTheme Pro.

Joomla themes old and new

Typically the structure of a Joomla website can be divided up into two parts - Joomla based content + static Template/Theme

This is how my previous site was. But a lot has changed in the area of Joomla themes and what drives them under the hood. It's common these days for templates to be developed using a framework that is 'separate' (for want of a better term) to the Joomla CMS. Effectively, Joomla goes from being the database that drives dynamic content into a static template, to being a database that drives content into a dynamic framework, that helps deliver the theme and overall look to the site. Or to put it another way - Joomla based content + Template based upon underlying framework

This framework (in this case YooTheme Pro) adds greater complexity to a Joomla site. Is it needed? No. You can easily function with a static template that gives your site the look and feel you want, whilst pulling content from the Joomla CMS. But that approach has limitations that are starting to show their age.

Is the framework useful? Yes! Beyond anything that a standard template/theme can achieve, the YooTheme Pro framework (and others out there) provides a level of functionality and complexity that you are not going to experience in standard themes. From pages with multiple dynamic sections, complex parallax scrolling and more, the most significant feature of these frameworks is the level of manipulation you are able to make across your site, on a page-by-page basis, section-by-section basis or more. Effectively, the framework provides greater opportunities to dynamically alter and affect the theme for the various parts of your site or the site as a whole...sometimes in a simple click.

 

Planning the move to YooTheme Pro

The first step I took in deciding to make the move was to map out my site. As mentioned, it isn't a complex site and over the years I have learned that when it comes to extensions to use with a Joomla site, less is more. When I look back on my NZMac.com website, it's quite scary how many extensions I used on the site and how quick I was to add more to the mix. Updating them and applying changes I wanted, created a nightmare in terms of maintenance. This Bluengrey.com site has never used that many extensions....and in fact, I set about reducing the number, by no longer using YooTheme's WidgetKit...as their Page Builder system has a gallery component inbuilt.

So I mapped out all the pages and then selected which look and feel (a theme called Makai) from YooTheme that I wanted to use.

 

Once I got to understand that theme, I then restructured my site to better match with it, and produced the following plan...

 

Now it might seem odd to map my site to a theme, but I wasn't really doing that. Mostly what I was doing was realising what was frequently accessed from my site and what wasn't. I used to have an approach that said "put it all out there, on the main page" and I wanted to stop that. Part of the reason for that is simple...I don't publish to the site on a regular basis, so it made sense not to plaster the main page with outdated content.

The next thing I did was compare the YooTheme Pro theme that I selected with my existing content. I noticed that the theme made use of intro images for articles a lot. I have never used those, so I set about updating each article to include an introductory graphic. It won't be displayed at the top of each article, but it will be displayed in category listings. At the same time, I realised that some of the videos that I had on the site were made for times when video had to be smaller...so I updated the clips from all the bungy jumps to be larger in size (it always pays to keep backups at the highest quality possible!).

Goodbye WidgetKit, Hello complex custom fields

As mentioned, the previous version of my site used YooTheme's excellent WidgetKit component to include galleries and slideshows. But as YooTheme's Page Builder included those features built in, I wanted to remove WidgetKit from use. That took a great deal of planning...even going so far as to create a Word document, reminding me of what articles had a WidgetKit section embedded within them.

This immediately caused an issue. With WidgetKit, you build your slideshows or galleries within the component, and then all you do is add a snippet of code into your Joomla articles to have a certain gallery display. In other words, the slideshows or galleries never really mixed in Joomla until they were displayed on the page that you saw on the site.

With WidgetKit gone, I was going to need to add the information about the gallery and slideshow images into my articles....when previously, they didn't even know that the images were around. That was WidgetKit's job. So the structure of each article was in going to be quite complex.

Let me give you an example. My most challenging article was one that features 5 galleries, all with a little bit of text between each gallery. It's this article here concerning a visit to Apple Stores in DC and London.

I had to find some way to set up an article in Joomla that had the structure of...

• Text
• Gallery
• Text
• Gallery
• Text
• Gallery
• Text
• Gallery
• Text
• Gallery

I decided that the solution was to chop up complex Joomla articles into a series of dynamic fields, that contained either text or slideshow or gallery images. It was going to be a lot of work, so I decided to post a question on the YooTheme website to check that I was taking the best approach - https://yootheme.com/support/question/143418

That approached seemed the best way to go and it wasn't too much effort for a lot of articles that didn't actually feature slideshows or galleries. But in order to get everything correct, I had to map out the content in each article on my site. Here's me keeping track of the number of slideshows or galleries used in the pages about visits to Apple Stores.

 

From there it was a lot of work adding in the custom fields to Joomla (something I had never used before) to be able to separate parts of the articles into their various sections. This would mean that when the articles came into the Theme, I could use YooTheme's dynamic content options to display each of the various sections in the way I wanted.

Explaining it better...and in images

So, here's what I mean, explained mostly in images.

I wanted to create a definition of an article in YooTheme that was the same for any article pulled into the theme from Joomla's content. In YooTheme's terms, dynamic content. You don't have to work that way...you can develop all your content within YooTheme Pro's Page builder environment, but I wanted to keep the core of my content within Joomla.

So once I knew (via the answer I linked to above) that using custom fields was the correct approach....and that an empty custom field wouldn't get displayed within the theme if there was nothing for it to show. I then came up with the proposed Page Builder structure that encompassed every article on my website...

 

The image above defines the structure of every article on my website....but it's quite common for not all of the sections to be needed. For example, this article is going to end with 1 slideshow only, so the structure will be...

 

Not displayed (because it doesn't have any content for this article) will be everything after that.

I then needed to set up custom fields that matched with what I had planned and with what YooTheme is going to be looking for...

I then started working through my complex articles, adjusting them into various slideshows and text areas, to match with the plan.

But you might have noticed that my list now only features 2 gallery sections and now has a massive 5 slideshows sections. This is because when I went through and did an inventory of my articles, I found that no article ever used the WidgetKit gallery feature more than twice, but the DC and London article I have mentioned, used 5 slideshows....so I needed to make sure that the overall plan accounted for that number of slideshows.

Time to look at that specific DC/London article again. Here's an image of the article, but you'll notice that there is hardly any text. This is because what you are seeing here is effectively everything up until the point that I want to display the first slideshow. What you are seeing is the teaser and the first content, before the first slideshow repeatable field...

 

In that same article, I now have custom fields where I have separated the article into smaller fields, to then have them pulled into YooTheme Pro theme and displayed. Here are some of the custom fields for the DC/London article...

 

You can see that the article is now a complex structure of text in a field, followed by a slideshow field, followed by another field of text, etc. The tricky bit is then how do you go about setting that up in YooTheme? Well again, it's answered best with an image...

 

It looks complex, but it isn't. First, the benefit is that I now have one "All Articles" template within my site that covers every article I'm going to display. When I set it up, I just needed to make sure that I had the settings right for the first slideshow, gallery and content element...and then I could just duplicate these, rename them and make sure that they pointed to the correct dynamic content. It looks like a complex template, but it isn't.

If you're still lost...maybe this graphic might help. I'm trying to show you where the content comes from (each field) in Joomla, which element displays it in YooTheme...and where it ends up being displayed on the page. This is basically saying that Joomla based content + underlying framework = content displayed in theme.

 

What about the homepage?

Copying is the highest form of flattery, right? I'm not going to pretend that the homepage isn't an altered version of the homepage that came with the theme...of course it is. It's the whole reason I selected that theme! But in modifying the homepage, I also started making design decisions that moved away from some aspect of the theme. Sometimes this was obvious (like choosing not to collapse the top menu bar on tablets) and sometimes it was subtle, like a change in how some links opened.....but I made sure that I documented these decisions in a Word document....not only to be consistent, but to remind me when I come back to the site at a later date, what the design decisions were that I made.

 

There are a lot of similarities between my homepage and the Makai theme...but I also fully appreciate that I'm not a designer, that I don't have access to a large number of unique images to use on my site, and that I wanted to keep a similar style to how YooTheme has set up their theme....so I'm more than comfortable with it.

Benefits of the new look

The new look allowed to me to simplify an already simple website. Part of this meant that I could easily remove a number of sub-menu items that used to be on the previous site. Instead of menu items for each category and subsection of a category and every article, I reduced the menu links down to around the 7 or 8. It was (oddly) challenging for me to do this...and I don't know why. I had got it in my head that if a link on my site wasn't immediately available, then people wouldn't find it...and that's crazy. One of the things that helped me change my mind, was that I reviewed the stats for pages on the site. Despite every link being accessible from the homepage in the previous design, not everyone went to those pages. Why keep promoting links to pages that people aren't wanting to look at?

In short, moving to YooTheme Pro allowed me to simplify my site and to highlight the significant sections of it.

Benefits of YooTheme Pro

One of the things that I haven’t mentioned yet, is that the dynamic nature of editing and developing within the YooTheme environment meant I could apply a change and see it immediately happen on screen as I worked. That immediacy was fantastic and meant that a lot of design decisions could be made quickly across the site.

Within the Page Builder environment, virtually every aspect of your theme can be changed immediately. From the way sections are displayed, the way animations flow or the fonts used....make the change and the site you are building and designing changes in front of your eyes.

At the same time, the advanced coding and scripting within Page Builder meant that adding greater functionality and visual effects, such as a parallax scroll, was achieved simply by the click of a button. Don't like the results? Change them instantly until you get the effect you are trying to achieve. I'm no coder and the YooTheme crew, definitely are the experts in achieving amazing site functionality and design.

The ability to save the layouts I had created, meant that re-using aspects of the theme as I developed or altered it, was incredibly easy.

Frustrations?

It's not all plain sailing, but my gripes are minor (I think...despite the tone). Here's some things that I had challenges with or things that I need to keep working on.

First, is the infuriating YooTheme support system. Bizarrely, answers to questions that you post aren't sorted in the order they are posted, so I find myself going to every question posted and immediately having to sort the posts by "Oldest" first. Why? Well what YooTheme have done is decide that the final (solved) answer to the question should be the most prominent. The problem is that some discussions have more than one answer, have follow up comments or questions or people adding to the discussion. When displayed the way YooTheme has these questions and answers, it's a mishmash of confusing posts...and it really irritates me! There's nothing wrong with highlighting the correct answer (in fact it should be encouraged) but it doesn't mean you have to alter the flow of the discussion to achieve it.

Styling the Search, Contact and Site Map pages of my site has not been easy and I'm not happy with how they look. These pages don't have a layout applied to them in the same way that other pages do, so I need to make use of a top or bottom module that I can add to the page. Problem is, no matter how much I try, I simply cannot achieve what YooTheme says I should be able to. There are some guidelines on how to do this on the YooTheme site, but every attempt to put a module in the correct place, ended up with on-screen errors concerning placing the module at the Top location.

I tried this so many times, carefully reading their instructions and trying to work through them. I mean I've used Joomla for years, so I should be able to understand it, right? I was just about to post a question about the issue on their site when I noticed something...their online support system is littered with multiple posts from users having exactly the same issue....I mean multiple posts of frustrated users! It leads me to both a sense of relief (I'm not the only one who simply can't figure this out)...and frustration. Why are so many people still having issues!? YooTheme need to either provide a far better tutorial on how to successfully use the top and bottom module positions for pages like this...or come up with a simpler method.

Over the course of developing my site, an update to Page Builder introduced the ability to design the 404 page for the site, so I am hoping that they do the same for inbuilt contact and search pages...although for the latter they seem to be suggesting they have already done that....but like my fellow YooTheme users, I'm still stumped.

Final thoughts

At this point, I'm very happy with not only the new look of the site, but the new structure....the latter being something that I hadn't looked at in detail for a while. So not only did the site need a new look...it needed some new thinking and a tidy up...and it got that.

Now that I have made the changes, I know that because I'm using the YooTheme Pro Page Builder, if I want to tweak the design, I can do that quickly and easily. In fact I've done that already since the new look went live a few weeks back. And if I want to introduce a new look in the future....I feel confident that I could move to a whole new YooTheme Pro design or indeed move away from YooTheme because of my more robustly structured, 2021 website. It's looking good!