In September, I challenged readers to complete a small site based on a fictional brief. The goal was to see the different ways people can approach the same build, only using the features available in core Joomla. Read the original challenge here.
Results
We had a total of two responses! They each took very different approaches to the brief.
{slider title="Submission 1 - Brian Teeman" open="false"}
Submission Summary
Brian has done some really clever filtering with custom fields here, and built a more complete site than I expected from the challenge! See his submission here.
What he says about his submission
Can you tell us a little about your approach?
The objective of building this site was not just to only use core Joomla but to also make it attractive, accessible and very fast. I always aim to hand off a website to a client so that they are fully able to manage the content on the site. That means the site has been built in such a way that the "magic" takes place with the css and the layouts. The client only needs to deal with the content without being concerned with any of the "complex and scary" technical stuff.
What was the most challenging part of this task?
On the trips page I have created a "masonry style" layout with filters. This is all just css. Each trip is an article with some custom fields for displaying additional information. The page is a customised category blog layout and the filters are created from content custom fields.
What was your favorite part of this task?
My favourite part of this exercise was to produce a site that will hopefully showcase, when used correctly, the power that Joomla provides out of the box. You have all the tools you need - you don't need to rush to install a million extensions. Spending just a little time in advance to organise and structure your content pays off. With this site anyone will be able to update any of the content as it is all just content.
Is there anything else we should consider?
The photo gallery on the home page is the mod_article_news module again with a custom layout which displays all the articles in a category. The thumbnail image is the article intro-image. The larger image is the article full image and the displayed caption is the alt description. The layout is completely responsive and will dynamically adjust the size of the thumbnail images dependingon how many articles are in the category. This module uses some additonal bootstrap javascript. Using the web asset manager the module loads just the standard bootstrap javascript for modals and carousel and an additional bootstrap javascript library for the lightbox.
On the individual trip pages the header image is the article full image. The information in the six boxes are custom fields. The covid information is a tinymce snippet as is the "accordion" which is javascript free using the native html5 summary/details.
Our review
Accessibility: While I can't do a full audit for the challenge, overall the accessibility seems okay; my only concerns would be the focus styles on the menu and video prompt as well as the contrast of the icons on the trips against the fun gradient background. Other than that, the site has good heading structure and images have alt text; it does seem to meet most accessibility guidelines.
Usability: The site is well organized; I like the icons on the trips, though I have to hover over them to know what they indicate. It would be clearer if the icons changed depending on what they were indicating so I could tell at a glance which trips were full, for example. Overall, the usability is good.
Meets brief requirements: Well, it's a travel company that uses the provided logos and colors! Beyond that, it's a full departure from the brief. This is what Brian had to say about that:
"I have probably ignored almost every part of the brief, but that's because the client was wrong. Creating a standalone site as an addition to their main site might have seemed like a good idea but it dilutes the SEO etc etc.
"My only real concession to the design brief was the addition of the floating ghosts. That is also just a custom html module with an image of a ghost and some css animations to move the ghost around. Because it is actually quite annoying it only runs on the home page and only last for sixty seconds. Of course as its a module I have already set it to be unpublished on November 1st when I guess the client will probably want to replace it with a flying santa."
Possibly there's a Joomla bug, because I still see the ghost! (Where's my Santa?)
Innovation (either in design or development): This is where this submission really shines. The magic filtering based on custom fields is very clever and innovative, well done! There's an article on Brian's personal site detailing how he did it; it's worth a read. Creating a photo gallery from articles is also an approach I wouldn't have expected, and an interesting way to handle the thumbnail vs enlarged images (and their alt text).
Management experience (how easy is it to make content updates?): Based on Brian's description, content updates should be relatively easy, particularly in the "trips" because of the use of custom fields.
Overall:
Brian certainly thought out of the box for this submission. He ignored the brief, but went above and beyond to make a fully functional site with clever features not typically seen without 3rd party extensions. Bravo, Brian—this is fantastic. Thank you for taking the time to explore the possibilities and submit your site!
{slider title="Submission 2 - Paweł"}
Submission Summary
Paweł went all in on the haunted-themed brief, which delights me! See his spooky single-page site submission.
What he says about his submission
Paweł focused on creating a "landing page encouraging contact". Unfortunately he didn't answer the other questions (no worries!), but he did provide an admin login for me to explore the site. It looks like he set up the site as a category blog layout with "trips", so each of the three trips on the homepage is an article. He also used custom fields to add some structure to the trips with the lead-in and numbering.
The main banner/hero area is a custom module, as is the contact form at the bottom. The reviews are a newsflash module; each review is an article, and the fun pumpkin rating is also based on a custom field in each article.
Our review
Accessibility: Again, I can't do a full audit for this, but I did notice some things that people may struggle with if they use assistive technology. Mostly, the lack of alt text (or empty alt text attribute) as well as no headings would make it hard for some users to figure out what's going on and what's important on the site.
Usability: The layout of the page is clear and compelling; visually, it's easy for me to explore the different trips and find the ratings. The menu that goes to each page section is a nice touch!
Meets brief requirements: Paweł did a great job of meeting the brief! I really appreciate the featured trips as they are real places and he took the time to write up real-seeming content for the site.
Innovation (either in design or development): Again, I'm delighted by the design and leaning into the 'spooky' theme the (fake) client wanted. The little illustrations are fun and the graphic elements support the content without being distracting.
Management experience (how easy is it to make content updates?): It's a good start—using custom fields to structure the content helps people manage content a lot! They may struggle with the custom modules, like in the main banner, but that typically doesn't need to be changed as often on most sites.
Overall:
Paweł, thank you so much for taking part in the challenge and having so much fun with it! I really like your submission and your approach to the brief. It does a good job showing that Joomla can manage different kinds of content easily and beautifully, even if the desired end result is a single page.
{/sliders}
Thank you both for taking the time to submit your work! I love both submissions.
My biggest takeaway—custom fields are integral to managing structured content in Joomla, and can make it easier to build complex sites just with the core. From there, the details change based on what you're trying to do, but the sky is the limit!
What's next?
Well, that's up to you! Given how many holidays from all different cultures and religions happen in the next 2-3 months, we'll be putting the challenge on hold.
A new brief will be posted in the Spring of 2023.
What do you think of these two fabulous sites? What should the next challenge focus on? Can't wait to hear from you!