the long-awaited sugarlaws redesign

March 2nd, 2018

Ok, bear with me, because there’s quite a bit of a story here.

Remember how two years ago I told you that I was rolling out a new version of this site? Well… here’s what happened.

At the time, I’d hired a designer and was all set to do a full revamp of this blog. There was just one thing that was standing in my way: I had no idea what I wanted it to look like. I wanted it to be more streamlined than what I had before, but that was about as far as my thought process had gotten. I was also smack-dab in the middle of having a one-year-old and starting my law practice, so I had exactly zero minutes ever to think about this blog and what I wanted it to look like.

Can you imagine what I got back from the designer with this top-notch guidance? Yes, probably you can. I got a design that was not very good, not what I wanted, and not something I was ready to implement on the site. I blame myself for this mostly — and it pretty much ground the entire redesign to a halt.

So, what did I do?

I did what any extremely Type A, somewhat-computer-proficient website owner might do. I decided that I could do it myself. Rather than trying to (1) figure out what I wanted, and (2) communicate it to someone who could execute it, I decided to just scrap the idea of a designer and do the whole thing on my own.

This was only slightly less ridiculous than it probably sounds. I’d always customized all the back-end code on Sugarlaws myself. I primarily use WordPress to maintain this blog, which lets me integrate a lot of third-party software with pretty minimal work on my end, but the actual code behind the site design is based off a theme I started using in 2011 and customized on my own from that day on.  So it didn’t seem totally impossible for me to do this project myself. 

As a quick refresher, here’s what the site looked like before I dug in:

… not actually that bad, right? Sure, it’s maybe a little DIY, but overall it’s a pretty cute blog layout. So, I thought to myself, since I’ve gotten it this far, I can take it a bit further, right?


Oh, so very wrong.

What happened next? I proceeded to break the entire site, in a way that I couldn’t even begin to fix. I created a new header that looked terrible, and also didn’t work as a functioning link to the homepage. I removed all the navigation on the site, so the only way to see older posts was to scroll one by one through every single page I had ever posted to this site. I so thoroughly broke the column layout that the post box on the page overlapped with the Press box in the sidebar… and so on.

Worst of all, because I didn’t actually know what I as doing, I couldn’t figure out how I’d broken any of these things in the first place, so I couldn’t fix them.

Let’s have a quick look at what the site looked like when I was done, shall we?

“Aw, Katy,” you’re thinking. “It’s not so bad. You’re being too hard on yourself.”

Here’s what a category page looked like (which, I remind you, was the only remaining way to navigate around the site):

Sure glad I didn’t go with a professional designer, huh?

See that messy overlap? Removing one line of PHP code would fix it. Unfortunately, despite having set out to do the coding myself, I didn’t know which line it was or where I could find it.

This was primarily because I didn’t understand PHP.

Which is kind of like saying, “I’m really having trouble parallel parking, mainly because I don’t know how to drive.”  Or, “I’m having trouble composing a sonnet in French because the only language I speak is Mandarin.”

So I was stuck. I could have gone back to the drawing board with a new designer and tried again. But that wouldn’t have solved the big issue of not knowing what I wanted and not trusting that anyone except me could execute it.

The fact is, for me to fix what I’d broken, I realized that I had to better understand how the code I was messing with actually worked. I couldn’t just make random tweaks to files, cross my fingers, and hope that what showed up was what I wanted to create. I had to actually understand what was going on under the hood of this website to un-break what I’d broken.

To fix that one line of PHP, I had to understand every file that the website pulls its content from, how they all fit together, and how to purposefully change them to get where I wanted.

And, you know what? When I really thought about it, I wanted to learn that way more than I wanted to fix this site.

Yes, learning programming is not the easiest way to redesign a blog.  It is, undoubtedly, the absolute hardest way to redesign a blog.

But my goal wasn’t exactly to fix this site — it was to learn enough that I could fix this site.

And over the next two years, that’s what I did. It took a ton of my time — time which isn’t easy to come by, with a baby and a full-time career. But I learned, little by little, the pieces of actual programming that I needed for this site, and some that I didn’t even need here. It was incredibly hard at first — some days, it still is. But, little by little, I’m getting there.

It’s helped a lot that I’ve transitioned from practicing law to a management role with a technology company.  (Surprise!  More on that later.) Obviously, that’s huge in terms of support, usefulness, and the ability to practice some of the skills I’m learning in real time. But this has been an interest of mine since the earliest days of this blog (my very first post was me complaining about pulling my hair out after a weekend of messing with HTML – awww!) and I’m really excited about how far I’ve come in the meantime. I’m sure I’ll find myself writing more about this as the months go by, but I thought the site redesign would be a fun way to introduce you guys to this new interest of mine.

And that site redesign?

Two years later, when I finally turned to it, do you know how long it took me to do the entire redesign all by myself?

One afternoon.

It took a single day to fix everything that I’d broken, and to open up the content in a way that would be more user-friendly and well-designed. I’m not done yet (of course not), but I’m at the level now where if something is broken, I can fix it myself.  Which was where I always wanted to get — even if it took me years to get there.

And when I took my new design live at the end of that afternoon, I was (and am) incredibly proud of how it turned out, and of all the work I put in to get here.

So, here’s what I’m promising you guys from here on out. I want you to read my posts — they’ll always be a focus of this blog. But I also want you to pay attention to the site itself, because another big part of my focus here is using this site as my new sandbox for programming as I learn it.  If you’re reading this through a feed or on social media, check back to the site itself every once in a while to see what I’ve added.  I always knew I wanted this site to evolve, I just wasn’t sure how, and now I think I have it. Hopefully you guys will learn a little bit along with me as we move forward from here!

Last but not least, I want to leave you guys with one last screenshot to show how far I’ve come.  Here’s what Sugarlaws looked like when I first launched the site, with the code that I spent a weekend pulling my hair out over in late 2007.  Some of you guys might even remember this!  We’ve come a long way over the last decade, and I, for one, am really excited to see what’s next.

Tags: work

5 responses so far ↓

  • 1 Rosa // Mar 4, 2018 at 12:35 pm

    Hello Katy, I have enjoyed your blog since the very beginning. I am so glad to hear your voice again. Sending you the best.

  • 2 Katy // Mar 5, 2018 at 3:41 pm

    Thanks Rosa!  I’m excited to be back. 🙂

  • 3 piknu // Mar 8, 2018 at 7:00 am

    Firstly, I love the logo. I’m looking forward to seeing the new design 🙂

Leave a Comment