thoughts

Retrospective on a site redesign

The Premise

I want to get better at completing private projects so I decided to try an incremental approach. My wife made a site for our wedding photos many years ago. It’s static HTML, CSS and desktop-only. I’ve been wanting to redesign it for a long time. But instead of holding on to my grandiose plans that will never get done I decided to start with the bare minimum.

I knew that I wanted to make a WordPress-site so I decided that the first step would be to just convert this static site into a WordPress theme and make it responsive.

Mobile screenshot of an old website that is not adapted to the small screen.
Screenshot of the old site.

I threw out my old design ideas and opened up the old site in a separate window. Also in a mobile browser. I knew that I wanted to develop a theme based on Underscores by Automattic but I also knew that I didn’t want to go all the way and develop a full-fledged theme worthy of public publishing. That would get in the way of actually getting this very simple site done, as in up and running. I wanted to convert a static site into the beginnings of a WordPress-powered site that I can keep working on in increments, like you would continue working with a live site once deployed only this is a site for personal use so it’s not critical in any way.

The Approach

Instead of drawing up new designs and documents outlining the exact scope of the first version of my theme I decided to get started by doing a quick recap of an old Underscores tutorial by Morten Rand-Hendriksen because I knew that design would fit and his style would inspire me to start planning ahead for my own theme.

To avoid scope creep I decided to focus on the different types of content already present. That meant styles for:

  • Headings
  • Paragraphs
  • Links
  • Images
  • Thumbnails
  • The site Header and Footer
  • Two kinds of content areas

Thats from the perspective of styling components, but when doing layout in WordPress you have to think about the content in terms of the different PHP-templates being used to display certain types of content. I only needed a few:

  • posts and pages.
  • maybe the thumbnails
  • something to display the single images

I wanted to replicate the behaviour of the old site, which had 4 pages of categories each displaying a grid of thumbnails. Each thumbnail led to the larger image when clicked on. I knew that I wanted the site to handle the display of the image in full size. I did not want to leave it up to the browser to just open the image file.

(Gutenberg to) The Rescue

In the end, the new Gutenberg editor in WordPress saved me a lot of work. The built in Gallery-block on a default page worked just fine for the grid of thumbnails that I wanted. Then it was just a matter of linking each thumbnail to the attachment page and using the image.php template file to display the image attachments in full size.

The Result

Now I have a live responsive WordPress-site instead of a bunch of static HTML and CSS which will serve as a playground that I can use to develop a bunch of different skills:

JavaScript/React:

  • I will build some Gutenberg blocks.
  • I will build an independent React photo site that gets data from the WP REST-API
  • I will build something with the WP GraphQL-API

WordPress/PHP:

  • I will build a WordPress plugin that improves the experience of viewing the images on the site.

The Conclusion

I set realistic goals to improve upon something and I met them. I threw process out the window and just started coding (I even forgot to do version control). That was okay because I just wanted to get something done! Now I have defined some next steps (see list above) and I will decide which project to tackle first and why.

I will also decide which part of the process to improve upon and why. Maybe I will spend more time on the design before starting to code or maybe I will improve some part of my workflow.

WIP.

Why do I like weird music?

I sometimes get asked what I’m listening to right now and “WHY?” The “why” is often preceded by a clip of some strange emo or hardcore. I never get this question when I’m listening to some mainstream popular music and I find that strange but whatever.

Right now I’m listening to the first Marmozets album because they have been on my mental todo for a couple of years honestly. I heard one of their singles a long time ago and they did indeed strike me as very weird and wonderful.

And I try to go out of my way to find interesting stuff that tries to be something new.

I don’t know why I lean towards harder and sometimes extreme music but my theory is that my upbringing on Ella Fitzgerald, The Beatles, Ray Charles etc gave me a taste for artists with a lot of pent up energy and emotions. From scat singing to screaming to The Beatles later emo years, as a kid I felt like they spoke to me. Even the pompous My Way with Frank Sinatra spoke to me about an old person’s death anxiety.

And maybe, this kind of intensity is not to be found in other genres of music? I mean, maybe in the artists, but does it come across in their music? For someone like Billie Eilish, sure. But she is far from representative of mainstream music and that is one of the reasons why I love her music.

The broth is confused

Another first-day-at-the-new-job. Working primarily with people is always fun and challenging, plus it has the added benefit of feeling relatively easy for me. It comes naturally. But working with people always mean a lot of new names and faces. It also usually means a lot of information and some disinformation. Many cooks will spoil the broth with confusion. I think I’ll be happy and tired by the end of the week.