A new look to this site

January 16, 2024

Earlier today, I pulled the trigger and updated the look of this site. A few weeks ago, I mentioned that I was playing around with some new ideas. I have wanted to redesign this site for some time but never had the inspiration or made the time to do it.

The former look was something I put together in 2012. It was only supposed to be a temporary facelift. I used some very basic colors and randomized them when you visited the site. I cut my teeth on Sass when I built the theme in 2012. Then at the end of 2013, I made the site responsive, applying all that I had been learning while working at Easy Designs. I made a couple of other updates along the way but it was time to retire that.

Sources of Inspiration

I have been inspired by a couple of different people’s work. I have admired Ethan Marcotte‘s site which he redesigned in 2020. I like that it is a very clean design and the typography feels good. I am a fan of the different grid layouts he used. I wanted to be very careful not to copy what he had done but to use it as inspiration. I am planning to build some different grid layouts in the future.

I also like Michelle Barker’s CSS In Real Life. Again, it is a very clean design with nice typography. I appreciate that both sites offered a light and dark theme. I have only done a light and dark theme on one other project but that was several years ago. One of my previous design interactions was a dark theme with a yellowish text color on brown.

I recently came across Robb Knight‘s work. He has given me several ideas for future content expansion. Like the other two sites I referenced, I liked his dark theme. He has an interesting color scheme that is not quite my personality. But I really like the contrast that it gives to the design.

What has not changed

I consider this more of a site refresh than a site redesign. The layouts on the site are essentially the same. I did not rewrite any of the HTML code but kept the same structure. I did not rewrite the CSS from scratch but just went back and refactored the code that I already had written in the past. I updated a few bits of content (photo on homepage and about page) but most everything is the same.

What has changed

• Color scheme – I changed the color scheme to reflect more of my personality. Blue is my favorite color. It is the color of some of my favorite sports teams (Royals, Jayhawks, Rays, Manchester City). I paired it with a beige or lighter brown color for contrast.
• Light and dark modes – As I mentioned before, I have only written CSS to do light and dark modes for one other project in the past. Currently, the mode you see is based on your system preference. I plan to add a theme switcher sometime in the future.
• New typefaces – After playing around with several different typeface combinations, I chose Lora for the headings and Nunito for the body text. I was originally thinking about Halant for headings and Nunito Sans for the body text. But when I applied it to the site, it didn’t feel right and I did not like the pairing.
• Fluid type and spacing – One of the driving factors in this refresh was the typography. I knew that I wanted the type to be fluid and I wanted the spacing to have a strong relationship to the type. I believe Andy Bell is the one who turned me on to Utopia. I used it a couple of years ago when I built my son a site. This is only the second time I have used Utopia. I like that it used a type scale so that all of the type has a relationship to each other.
• Broadcasting my RSS feeds – My site has always had an RSS feed. I have used a RSS reader for almost twenty years now. With the recent revival of the Indie Web, I have been encouraged by others to make sure my feeds are highly visible to those visiting the site. I have added the feeds to the homepage and to the footer of the site.

What I gained from the experience

Personal projects are a great place to learn something new or experiment by getting your hands dirty and building it. As I mentioned, I cut my teeth on learning Sass in my previous site design. This site refresh gave me the chance to gain some experience with new tools and practice some things that I have not been able to do in my work with LGND.

• Custom properties – I have been slow to embrace custom properties in my work. But to pull off different color schemes, it is almost imperative. I really enjoyed working with custom properties in this project and plan to make greater use of them in future work.
• Fluid typography – As I already mentioned, this project gave me the chance to use Utopia to create a more cohesive work with font sizing and spacing. It was also another great use case for custom properties as the Utopia tools generate custom properties to apply the system as you write CSS.
• It gave me a chance to play around. There is a lot of value in that. It also came at a time when there was a lull in my workload so it was nice to have something to work on that I was motivated by and could keep my tools sharpened.

Next steps

When I started this process, I wanted to be able to quickly get up and running with a new look. And then build upon that look and let the site evolve. I was really motivated to update the look after spending so much time on the site in December when I posted every day.

Here are the next steps in the evolution of the site.

• Light/Dark Mode Toggle – I would like to give visitors a choice between these two color schemes. I personally have my system set for dark mode because I like the dark mode UI but I prefer to view sites in the browser in light mode. Firefox has the ability to choose light mode for browsing but not every site honors that. I like sites that give you a choice because I will usually choose light mode.
• Rewrite the HTML – I want to rewrite the HTML for the site. For some reason, I used a lot of IDs and used those IDs in my CSS. But I moved away from that years ago, probably not long after I had written the CSS for this site. I also was using underscores in class names and my preference has long since changed to using a hyphen instead. I also want to update the semantics.
• Rewrite the CSS from scratch – I want to rewrite the CSS and try to make it leaner than it is currently. I wrote a lot of CSS for specific needs along the way. I also want to make the CSS more modern.
• Grid layouts – I really like CSS Grid layout. I want my site to reflect this affection. I want to use my site as a playground to try some new layouts.
• Accessibility – I also want my site to reflect my commitment to accessibility and being a champion for accessibility. As I was polishing up the theme to launch today, I added several focus styles to the site. I know that giving attention to the site semantics will go a long way in improving the accessibility of the site.