Written by Matthew Boyles
on May 19th, 2023

Website refresh for a more concise experience.

What started as a little housekeeping had turned into a full refreshed design for my own website. I was only planning on reviewing page copy, reducing the page count, and cleaning up unused CSS but one thing lead to the next and I ended up reworking more than initially intended.

Website refresh

As a website designer I do think it’s important to continually evolve my own web properties. This is the 4th version of my website since it’s launch in 2013, however it’s the 2nd since 2022. 

I have toyed with the idea of changing and updating it on a yearly basis, but I think that it will be hard to maintain that kind of schedule with client work and other projects taking the time they do. I have worked on this small refresh over the past 3 months in between launches, meetings, and awaiting approvals. 

This build is still a static HTML/CSS/JS website with a web application handling form submissions from a subdirectory. 

So what is new?

Content:

I decreased the amount of text on the site overall by nearly 60%. 

Less is more? 

Maybe, but I developed a different concept for the user path and I felt that much of the information I had on the pages would be better suited as PDFs available for download if the user wanted to take the time to look look over them. This allowed me to streamline the info and help keep the user engaged by moving quickly from homepage through the contact pages. Reducing the time needed to be on the website has shown to increase conversions and helps keep the user experience positive. 

The design is now more focused and clear with bigger bolder titles and a better path through the website. I also eliminated some unneeded pages in an attempt to be more concise. I used my analytics data from the past 12 months to determine what info was important to the visitors, and I could clearly see what pages were not being visited before someone contacted me.  

CSS:

I removed Bootstrap as the CSS framework and went with a customized css for the grid/layout. This grid system is still bootstrap based and operates very similarly. I have special spacing classes separated from the core css to give me more control over the layout and to be able to make tweaks to keep the site looking good on all devices. 

I still use and love Bootstrap on a lot projects because using it as a custom compiled sass framework is beneficial to speeding up the beginning of projects. But since this is my own website and I have as much time as I needed I wanted to try something different. 

While not perfect (yet) I could see this css grid-work becoming standard use for me on client projects as I continue to adjust it to be used as an easily selected, bespoke style css base. 

JavaScript:

I added Greensock JavaScript library to the site so I could easily include scroll triggered animations and smooth out the transitional animations on the pages. 

I cleaned up some other JS on the site to improve performance and usability. 

I updated the Swiper JS and Light Gallery JS to the latest versions for the improved performance and security. 

I also added some of my own JS for a new new hover animation I thought up. I did not see it as a part of the usual libraries I use, so I took a swing at writing it myself. Now, writing my own JS is still very new to me, I am way more comfortable with HTML and CSS but I am working on expanding my JS skills this summer. 

I think of my website as a structured playground, and want to be able to use it to test my limits and try new things. 

What it means for you?

If you would like to discuss your current website and get some ideas on a refresh and how your website can work harder for you let me know, send me an email.