Joomla adventures – rebuilding a community (part 2)

The post in this web development mini-series focuses on the products and tools that were used in the process of building and refining the new Metropower site http://www.metropower.info along with some lessons learned along the way.

Managing the project and resources

Early on in the build process it became apparent that our Facebook chat group wasn’t going to be sufficient to keep track of all the works that needed to be done to get the new site live.

To solve this I took another tip from my professional life, using Trello to manage tasks amongst the admin team and tracking the progress of content to be migrated from old site to new. For small projects it’s free, perfect!

We only needed to use the one board for managing the website project, although I have started another one up post-launch to keep track of bugs and website improvements. I initially wanted to use a Bug Tracker such as http://www.flyspray.org/ but ran out of databases on our hosting plan so put that on hold for the time being.

We also decided to set up a centralised Google account to store archive data, purchased plugins and so on. Using a Google account made sense as it would also serve as the account to use for Analytics as well. Drive has been handy as a secondary backup location too.

Social media and analytics

A few years ago one of the admin team set up a Facebook group as a first foray into social media; now we have coverage across a wide range of platforms:

  • Facebook Page – allows us to post “officially” as Metropower
  • Facebook Group – social discussion board that sees a lot of traffic that the forum used to serve. Excellent for quick responses but not so good for reference topics.
  • Facebook For Sale \ Wanted Group – saves our members paying eBay fees when trading parts between members (!)
  • Instagram – this used to be really powerful but appeal is a lot more limited now the TOU have changed and we can’t embed a hashtag gallery on our website
  • YouTube – event videos etc. but needs a bit of work for suitable content and branding

I also use Google Analytics to track site usage having completed a very well-timed training session at work on how to track campaigns and analyse user interaction.

We purchased a couple of Joomla plugins to pull dynamic content from social media onto the website. For example all events are managed via Facebook then embedded into the website so we only need to update content in one place. Using social media on the front page helps to keep it fresh but does come at a cost, more on that below…

Monitoring

If the site goes down for some reason I need to know about it and being used to having tools like PRTG Network monitor at work I wanted something similar for the site. Again fortunately there’s lots of high quality, business-grade free tools out there for personal use – I use two of them to make sure we’re covered:

After some issues with registration emails not arriving for Outlook.com users due to another user on the shared server being IP blacklisted we also set up an account with HetrixTools to keep an eye out for any similar occurrences in future https://hetrixtools.com

Website tuning and troubleshooting

With the site up and running the next stage was to tune its performance as initial page load speeds were somewhat slower than I was hoping. After doing some research via the Joomla documentation and third party sites I found some tools to benchmark the site and see what could be improved.

The main ones I use (in no particular order) are:

Immediately I could see issues such as content not being cached, CSS and JS files not minified \ compressed etc. Some could be fixed manually by adjusting settings on the server but it seemed the easiest way to fix others was to purchase an optimisation plugin for Joomla.

After browsing the JED I chose JCH Optimize and have been suitably impressed by the performance improvements since. We jumped from an F grade all the way up to A by following the recommendations from the tests above in addition to enabling JCH Optimize.

To check that your server supports the necessary GZip compression settings test it with https://checkgzipcompression.com

The only way we could speed things up further would be to move from shared to dedicated hosting (cost being the only reason we haven’t done so already) and to use a CDN to deliver content (a bit overkill really in this case).

One decision I have had to wrestle with was the choice between raw speed and community content. Running the tests above on the home page where we integrate with social media content drags the score right down into the red, due to a combination of multiple redirects (Facebook API), uncompressed images (Instagram thumbnails) and Javascript parsing (YouTube embedded player).

The moral of this story seems to be that if you want a fast-loading home page keep social media integrations well away from it.

Whilst writing this post I just spotted a potential workaround for the YouTube embeds https://webdesign.tutsplus.com/tutorials/how-to-lazy-load-embedded-youtube-videos–cms-26743

After embedding the script into my template’s header there was a definite increase in page load speed and the YouTube scripts no longer appeared in the GTMetrix “Defer parsing of JavaScript” section of the report, a nice easy win there!

Next up

In the third post in this series I’ll go over some of the plugins used and the tweaks I made to get them integrated neatly in the site 🙂

 

Image credits:

Icons made by Webalys Freebies from www.flaticon.com is licensed by CC 3.0 BY
Advertisements

Joomla adventures – rebuilding a community (part 1)

Sometimes work skills cross over into personal life and being the resident IT geek can come in rather handy. Cars are one of my passions outside IT and I’ve been a member of an owners group called Metropower for well over 10 years now.

When we came close to losing our old website due to issues with the previous web host I decided to take on the challenge of building a new one – the first major revamp since the site started in 2003 (!)

Outside of my usual network infrastructure work I enjoy indulging a more creative side as well so it seemed a good opportunity to combine two skill sets In the end I’ve surprised myself with what’s come out from the project and picked up some very useful tips and tricks along the way so that can only mean one thing… time for a new post series 🙂

Getting up and running… crowdfunding

Metropower has always been a free-to-join community from the very beginning and as such we didn’t have any funds to draw on for the new website. With the vision I had in mind I knew we’d need some money to get the site up and running so we turned to crowdfunding… the £300 goal was reached easily and gave us the investment we needed to purchase hosting and some very useful extras (more on that soon!)

Ref: https://www.justgiving.com/crowdfunding/metropower

It was great to see how valuable our members find the site and the community that’s been built from it and our aim with the new site was to build on that and go even bigger and better!

CMS platform… decisions decisions

When our site first started back in the early 2000’s web technologies were very different to how they are today. Our users were pretty much all accessing from desktop PCs and the portal software itself was pretty basic… to all intents a series of static web pages. Most interaction was made via forum threads and at the time users would visit multiple times each day to check for new posts.

Via the magic of the Internet Wayback Machine some screenshots of the old site below:

  

Moving forward to the present day a constant message was that the site needed to be mobile-friendly and from my personal perspective needed to present content more effectively. As such getting the platform right early on was going to be important. Social media has also taken over much of the role of the forum, although it turns out this form of communication still has a place albeit in a less starring role.

A few years back I tried out WordPress as a potential replacement but although I love the product as a blog platform it didn’t seem quite as convincing managing more structured content.

On the other hand I’d seen a fair bit of Joomla via work and as a CMS it seemed to fit the bill. Add in a wide range of extensions and the decision was made… Joomla it was.

With that in mind we chose a UK-based web host so our data was local to us. Quality of support was high on the list and after shopping around we were recommend to https://www.webhosting.uk.com/

Their live chat facility looked great and prices were very competitive with what we’d been offered elsewhere.

Theme

Although I wanted to retain the core branding from the old site I felt it needed to be merged with a more modern style such as Google Material design. As such a commercial theme was high up the shopping list to give us a quality base to build from. After searching across many theme sites the TechNews template from GavickPro caught my eye.

Ref: https://demo.gavick.com/joomla3/technews/

It ticked all the boxes for being clean, responsive and also included a few neat additional extensions such as NewsShowPro, again fitting the bill for presenting fresh content in a simple way.

The reviews section with it’s animated score sections was perfect for our “How-To Guides” section which gave a modern twist to the well-known Haynes manual “spanner ratings”or better known by that famous phrase “refitting is the reverse of removal” (!)

Other standard features you’d expect from a modern website such as social media sharing, print friendly view etc. are provided by a rather neat radial menu in the corner of the article’s cover image.

Branding & customisation

With the Technews base in place it was time to customise it to merge some core branding into the new site.

Using my favourite colour swatch tool ColorPix a few core colours were extracted from the old website and I set about customising the TechNews base to suit the Metropower brand. The built-in Chrome Web Developer tools come in very handy for this, the element inspector and  Computed CSS sections in particular are worth their weight in gold!

   

Taking feedback from our admin team on board the colours and styling continued to be tweaked for some time to get to a place where it looked “right”. It’s one of those things that’s really hard to quantity upfront, especially when working without a strict design brief but when it comes together there’s that moment when you realise the project is coming together and it’s a great feeling 🙂

Images were an area we had to put a fair bit of effort into as our old photo stocks were far too low-res (2006 vintage) so all needed to be retaken afresh. Our members proved to be very helpful on this front and supplied images via social media and our new dedicated website Gmail address (one of many platforms this project ended up utilising, more on that later).

In advance of the site launch we sent out a teaser image on social media to give our members an idea of what was to come and the feedback was very positive:

Further customisations included:

  • additional navigation using Breadcrumbs Advanced module
  • textured header background to add contrast and depth to the theme
  • social media icons added to main nav menu

The screenshots below show stages of the build process:


standard TechNews theme with minimal customisation


adding sidebar modules, colour scheme CSS modifications and social media menu icons


breadcrumb nav module installed, textured header background and feature banners added

Documentation is king

As the design progressed I started to find I needed to dig deeper into the theme to achieve what I wanted. For example in our Store category I wanted a 2-column layout that wasn’t a standard feature of the theme so had to rewrite a new PHP layout file and CSS style to suit.

Given that I was doing this in spare time I knew I’d have to revisit some elements later on so decided quite early to write documentation for the customisations as I went along, in the same way I would if I was doing the project at work. Looking back 6 months later when adding new content I’m very grateful to my past self for making that decision!

  

A useful tip that I learnt from our web designer at work was to place a custom Administrator module into the Joomla back-end as the first thing that other admins would see when they logged in. We use this to remind people of the colour scheme hex codes, layout recommendations (image sizes etc.) and common locations for admin tasks. Again it’s something I’d recommend and have done on sites I’ve made since.

To do this go to Extensions > Modules, change the dropdown on the left from Site to Administrator then add a new Custom module in the cpanel position.

The next post will focus on the Extensions used to bring additional functionality to the site, as well as the various tools and platforms for optimisation, monitoring and management that have proved incredibly useful so far!