out with the old - in with the new(ish)
With the 2nd anniversary of this website’s publication approaching, I thought it would be a good time to look at refreshing it, as the design and functionality had been unchanged since its launch. There was nothing particularly wrong with the site I published in 2022, so my initial thoughts were a few tweaks here and a spruce around the edges and it would be done in a few days. Well, it’s 5 weeks later and the tweak and spruce tuned out to be more of a dismantle and rebuild with some head scratching and compromising along the way, so here’s what I learned from this experience.
Identify How You Want Your Website To Look And Interact With Visitors
Having my site up for 2 years provided me with the opportunity to look at which parts I still liked and what parts I would like to change. I also visited a number of different websites to determine what aspects of their respective designs I liked which enabled me to draw up a list of options to consider. I also looked at alternative website builders to my current one which is Squarespace but elected to stay put as I had built up a working knowledge of using Squarespace to keep things ticking over and it would have required me to learn the technicality of other builders along with making new hosting arrangements.
My original site was designed using a template from Squarespace 7.0 and I used the in-built features that were available to create the various pages. This led me to look at the Squarespace 7.1 template to see what the differences were between the two and it was at this point, the tweak and spruce began the transition towards a dismantle and rebuild for the following key reasons:
My main gripe with version 7.0 was the faffing about with text blocks and image blocks along with spacers to control the position of everything on the page. What looked ok on the design page would sometimes look like a dog’s breakfast when viewed in a normal setting, so a fair bit of time was taken up making adjustments to ensure the page looked ok. The new ‘Fluid Engine’ feature in version 7.1 looked more intuitive when it came to adding content to each of the pages, but it came with its own challenges which I’ll touch upon further on.
I also wanted a different look in my image gallery which I consider to be the core part of my website. On looking at the gallery options in version 7.1, I immediately liked the ‘Strips’ view and on checking the template options in 7.0, I determined this feature was not available so if I wanted to change the look of the gallery to this style then it would have to be a move to version 7.1 to utilise it.
Another feature I wanted to change was the site navigation. My original site used navigation links which sat along the header bar at the top of the page. Whilst on one hand they gave the site visitor a constant visual cue as to where they go to in terms of the site pages, having too many pages would have resulted in a cluttered header bar, so I wanted to adopt an alternative approach.
Make Use of the Asset Library
A handy feature of the Squarespace platform is the Asset Library. When I designed my original site, I used to upload each of my images separately to each of the pages that contained my image collections, in effect I was duplicating the process resulting in more time taken to complete each task. I subsequently discovered that uploading an item such as an image to the Asset Library would make it available for adding to other pages more quickly as it didn’t need to be uploaded again. I also learned that having an effective naming convention for each asset made it easier to find in the library should it be required for more than one page. The other handy feature is the ability to create folders within the Asset Library which enables everything associated with the website design to be stored within an appropriate folder.
Help Is At Hand
As I mentioned earlier, I undertook some research into what I wanted my redesigned website to look like, the one big issue was this would require moving beyond the in-built features of Squarespace. Although it is fairly straight forward to get a site up and running with Squarespace, it does have its limitations. To go beyond the in-built design features requires entering the world of ‘Coding’, and this was to be the main reason my initial 2 to 3 day tweak, turned into a 5 week coding safari.
The more I wanted to push the boundaries of my design, the more reliant I was going to be on inserting what is referred to as Cascading Style Sheets (CSS) code which basically is a set of instructions that enables your website to have a particular look or functionality and I also needed to utilise some Javascript coding as well. My challenge was I now knew what I wanted in terms of my design but how I got there was the knowledge gap I had to cross over.
Over the hours and days, I was able to find what I was looking for from a variety of sources. Youtube was an initial port of call, but it didn’t provide the in-depth answers I was seeking. I did visit the Squarespace Forum quite a bit as I soon discovered this was the best source of information and will also say at this point, the members within this forum were some of most helpful and patient group of people I have ever encountered. I also purchased some code from a developers’ website and again the level of support before and after the purchase was great and would use them again without hesitation if required. I also found snippets of code online which enabled me to try it out and see if it worked and if it did, then tweak it accordingly.
Although I was inserting code into my website design, I wasn’t writing the actual code. It was more of a copy and paste exercise, but I needed to understand to some extent what the code was designed to do, in order to amend it to meet my specific needs. I got there in the end and to provide context in the before and after of my design. My original website had 19 lines of CSS code added to it and this related to only 2 tweaks to the Squarespace template. My redesigned site has been bulked out with 676 lines of code relating to 43 tweaks to the standard template design.
Double Check Your Page Layouts Across Different Devices
Whilst the CSS Coding contributed to a significant amount of time taken to complete the design, another time stealing area was verifying the design layout. As mentioned earlier, this was a bug bear of Squarespace 7.0 and whilst the new Fluid Engine feature of Version 7.1 made it easier to add and move stuff about on the design page, the big frustration was having to constantly check the lay out across a desktop, a tablet and a mobile screen as moving things about regularly caused some disruption to the alternate screen layouts.
What looked good on one or even two different screens could look a mess on the other so each page, each layout and everything added in had to be triple checked. Certainly amending it for mobile and tablet viewing was straight forward but it was also another reason why 676 lines of CSS code was required as some of the code had to be specifically targeted to display correctly on the tablet and mobile screens.
Accept Areas Of Compromise
By the end of this redesign, the list I had made at the beginning of this 5-week process was nearly complete however, I had to accept that one feature was not going to be possible unless I was prepared to up sticks and move to a new web builder so in the end I got as close to what I wanted to achieve and comprised slightly on this design element.
I also decided at this time to keep the website on a personal plan and whilst this is a cheaper option for being hosted, it does limit to some extent the ability to add additional features but in all honesty, I don’t have a need for them at this time. I thought the desire to change the site navigation located on the header bar would have required upgrading the subscription plan, however a late night delve online one evening, located some CSS code that enabled me to make the switch to a ‘Slide Out Hamburger’ menu. This means if I add new sections to the site over time, they will be displayed better in a ‘list’ style as opposed to being crushed up on the site Header.
Hit The Button
I could perhaps have carried on with more pernickety changes but the time taken to get to this point has meant processing my work has taken a back seat. As well as still having images from previous trips captured a while back go through, I haven’t even processed the images I did manage to take from my trip to Paris in November when I travelled there to see two of my images in the PX3 Exhibition. I’ve therefore decided it’s time to get the switch from the old site to the new site complete by transferring my domain. If I feel inclined to make any further tweaks then this can be done at an appropriate time in the future but for now it’s back to the front end of my photography work again.