ACOP has been a fascinating website to do, because it was the first time that my task was to update the design & content of an existing website done by someone else.
Now, I really don't want to criticise the previous person. He had almost no funding to work on it (and I'm not being paid at all for this one), it was among his first work as he was starting out, and he was getting no co-operation from the organisation's members to provide any new content. So what he'd achieved in the circumstances was pretty good, but the lack of updates was embarrassing, with most of the organisation's current members not mentioned on the website, and most of the people who were mentioned no longer being members.
The old site was done using the Drupal CMS, most likely using some default template. So although the site was properly "responsive" (behaving well on small screens), its design was essentially an uninspiring four shades of grey. Given that it is really a portfolio site, the thumbnail usage was inappropriate - all images were trimmed to be square, presumably so that they could be placed close together, but this eye candy solution had the effect of cropping many images in inappropriate ways.
Drupal seemed to be overkill for a site that didn't need complex coding, and perhaps this was confirmed when the new editor found that back door solutions had to be used because the editor permissions to create new pages weren't right. So it was a straighforward decision to go to CMS Made Simple with its pre-canned roles of Administrator, Editor and Designer.
The site's layout (menu header, slim footer, wide main content column and member menu in the narrow right column) was working well, so I kept it (mainly to avoid having to make all those design decisions again). You can see the old site here in the Wayback Machine. Drupal's responsive layout for the old site, with the right-hand menu column moving to the bottom of the page on phones, was good enough so I set up the same behaviour. This is common practice, and Google has a name for it, they call it a Mostly Fluid responsive web design pattern. Doing this makes web pages particularly long on phones, so that scrolling back up to the top of the page to get to the menu is a real pain, so I added a Scroll To Top button as contributed by Robert.
For front page eye candy, at first I more or less copied the old site's 4x4 thumbnail matrix of members' work (admittedly without the complexity of making each thumbnail being a two-image slideshow), but eventually decided it was simpler to just embed the group's image-rich and frequently updated Facebook feed.
What I felt did need an update was the all-grey colour scheme. So I decided to make subtle changes, basing my colour scheme on the colours of Pittwater. I adopted a CSS3 gradient for the menu background, using the local ocean colours of blue and green, with a fall-back to ocean blue for older browsers. A pale sky blue worked well as content background, and I used a deep blue (the colour of Pittwater itself) for the borders and also for the footer. The obvious other local colour to use for the site background was beach sand, but I found that a plain colour didn't work well, so I searched DeviantArt and found a great collection of wallpaper textures by Giles Hodgers- and paid him the whole six dollars or so that he asks for commercial use of his entire collection, and adopted his beach sand.
As for the web fonts, I rather liked Chewy (which was used on the old site for the page titles), so I kept it, but in a darker shade of blue (to improve the contrast). For the other fonts, I didn't do anything original, I just followed the guidelines by Jeremiah Shoaf, who says that using Roboto for the menu and Open Sans for the content is pretty much standard practice.
Working out how to display the galleries of members' work was a problem. There are so many good gallery plug-ins out there (virtually all written in jQuery) that there's no point in trying to write your own. I eventually decided that Fotorama by Artem Polikarpov was the best for the purpose, because I wanted a slideshow with thumbnails (like the old site). The only penalty was that Fotorama doesn't support IE6, but even Microsoft ran their own Counting down the end of Internet Explorer 6 website, which says that IE6 usage here in Australia was down to just 0.3% in 2015. So I wrote a Fotorama plug-in for CMS Made Simple's Gallery module, and one of these days, I'll get around to sharing it.
By this time the old site had recently been updated with contact details for members, with a few email addresses exposed to the web. So I needed a contact form to replace that. There is a contact form template in CMS Made Simple, but it only allows one email address, and the documented solution for multiple addresses is quite complex - hence risky that it might not survive the next CMS software upgrade. So I searched for other people's solutions, and found Joe Pettersen's Contact Form and modified it extensively, by using PHP instead of jQuery to do the input checking, and adding select case statements to contain the name and email address data. The result is a bit clumsy (in the sense that it mixes software and data) but works fine, and is easy to maintain because it is a single PHP code module.
The person who had recently taken over the content on the old site had already updated much of the content, but we both felt that it needed more to tie it to the local area, so I wrote an About Pittwater page, and realised I could point out that Pittwater has Australia's third largest scheduled ferry network (after Sydney Harbour and Brisbane River). I don't think that's generally known, and it was a nice tie-in with one of my other sites. The problem on this page was getting a good picture to use, and I found a great air photo on Wikipedia, which fortunately has a licence that allows re-use if credit is given.
When I started, I hadn't yet learned much about website optimisation. I used Google's PageSpeed, which taught me a lot about how to optimise the page HTML and CSS. I think the site is now just about as fast as it can be, within the limitations imposed by using Google fonts and Fotorama, and by not having different sizes of images for different devices (because it would then be harder to maintain the site). For further advice, I've recently used GTmetrix which gives me an A-grade on both PageSpeed and YSlow desktop speed tests - that's nice to have, although it does not rate as well on phones. I guess you never know what this sort of analysis will show up - I was warned that Fotorama was phoning home to Moscow, which turned out to be usage tracking. There is a switch available to turn this off.
Photo editing for the web can be a minefield, so we don't get the members to do it themselves. We use freeware XnView (on Windows) for all photo editing. It's good enough, because it can do cropping, resizing. metadata removal (and if necessary, manual adjustment of brightness, contrast and colour balance), and it aggressively compresses the output jpeg images. The results are better, and the files smaller, than allowing CMS Made Simple to do resizing itself.
The original site had tried and failed to interest members in setting up and maintaining their own pages, so I decided that the CMS Made Simple limitation of not being able to assign separate edit permission for each gallery page is unlikely to ever be a problem. If it turns out that there are people who want to keep the text on their own pages updated, then this will be achievable, by assigning them ownership of their page, and the page template that I've written will prevent them accidentally messing up the galleries.