Redesigning StevePavlina.com – Part 2
This is part 2 of the 9-part series on Redesigning StevePavlina.com.
Looking for Ideas
I didn’t know exactly where to begin this project, but I didn’t let that stop me. Many people will avoid working on a project because they don’t know where to begin. When I’m in that situation, I just impulsively begin anywhere. I know that if I pick a bad spot to begin, I’ll figure it out quickly, and I can change course. The important thing is to get into the flow of action and stay there. Don’t avoid or delay action just because you don’t know what to do next. Quite often the correct actions only become visible when you’re in motion, even if you’re headed in the wrong direction. Overcoming inertia is critical. A project or an idea will die if you sit still and ponder it too long.
I figured that a reasonable place to start would be to look at other websites, especially popular ones in my field, to get some ideas. Maybe I’d find parts of sites that I liked that I could semi-model as I redesigned my own site.
That turned out to be mostly a waste of time, at least in terms of how I thought it would be helpful. Maybe I’m just picky, but I didn’t see much out there that appealed to me when I deliberately tried to find things I liked. What I mostly saw was lots of clutter, fluff, advertising, confusing interfaces, and unnecessary complexity. I saw a lot of modern bells and whistles that were far beyond what I had on my old website, but I felt that many of them detracted from usability. As a visitor to a new website, what does parallax scrolling do for me? It just makes the site look more complicated than it needs to be. It was cool to see the first few times when it became possible — Oooh! How do they do that? — but after that it’s mostly just annoying.
On the other hand, I could say that this turned out to be a good way to begin since I gained a lot of inspiration for what not to do. By seeing so many things I didn’t like, I could at least rule them out. This also helped me refine my design philosophy. I realized that I wanted a site that showed a high degree of respect for the readers and that was straightforward, honest, and clear.
I never found a single site that inspired me. I saw some really creative designs, but none seemed appropriate for my own site.
Oddly, it was only much later, when I stopped trying to deliberately look for inspired ideas elsewhere, that I would occasionally stumble upon a website that had some design aspect I really liked.
Updating My WordPress Knowledge
Another seemingly good step to take early on was to update my WordPress knowledge and get up to speed on its latest features.
I started blogging with WordPress version 1.2 in October 2004, which was only the third WordPress update after version 1.0 had come out in January of that year. For several months before that, it was only available in beta. At the time of this writing, WordPress 4.5 has just been released. You can see just how many dozens of WordPress updates happened in between on the WordPress Releases page.
Since I began using WordPress when it was much more bare bones, my site was originally designed for that era. WordPress had only been out of beta for nine months before my site launched. Back then it wasn’t at all clear that it would become the hugely popular platform that it is today, and it had many competitors too. Back then it wasn’t a fully developed content management system that you would use for an entire website. It was really just for blogging. I did have the sense that blogging would eventually take off, but betting that WordPress would become a stable long-term platform was still a risk.
So back then I didn’t want to overcommit to WordPress dependency. Consequently, the original version of my site was only partially managed by WordPress. My home page, about page, contact form, and many other pages were all hand-coded HTML, not managed by WordPress at all. It seems obvious in hindsight that I should have put the entire site under WordPress control many years ago, but even with the mix of WordPress and non-WordPress content, the site still worked just fine, and it was always easier to incrementally keep adding to that structure instead of redoing it. But of course each step further down that path made it that much more difficult to do a ground-up redesign.
I had occasionally updated my WordPress knowledge along the way by incorporating newer features but only in a haphazard manner. I started with the Kubrick theme in 2004 and then customized it over time. It was a good theme for its day, but it lacks modern features like responsive design. I remember modifying the theme many years ago just to add support for widgets.
I understood that my knowledge of WordPress was too rooted in the past, and I needed to update it. So I spent hours reading articles and browsing around on WordPress.org to learn about the latest features and to familiarize myself with what was possible. I also wanted to get a better sense of where WordPress was heading.
I challenged myself to try to forget about my historical relationship with WordPress and to imagine that I was just starting out with it fresh today. How would I use it differently if I hadn’t already been blogging with it since 2004? This led me to some conclusions. For instance, I should take better advantage of available plugins and perhaps even learn to write my own. I gave some thought to a number of features in WordPress that I really should be using but never bothered to integrate into my workflow. I accepted that if I really did this redesign intelligently, I’d also have to change some parts of how I work, not just how the website looks.
I spent some time looking through the plugin directory as well. Presently it contains more than 44,000 plugins. I glanced at some of the most popular ones to give myself a better sense of what was out there. I began compiling a list of plugins to try later, and I imagined how I might use some of them on my new site.
Additionally, I took a Udemy course on WordPress and went through it in about two days. It was a little basic for me, but it helped refresh and update some of my knowledge and made me aware of even more plugins I should check out. I gained a better sense of what was possible for a modern WordPress site.
Updating my understanding of the platform was a wise idea. It got me thinking about some practical features I could include, and it helped me to begin visualizing some of the new features my updated website could have.
Desktop Server
One outstanding software tool I began using at the beginning of this project was Desktop Server. I saw it in action when someone demonstrated it at the August WordPress meetup, and I could see it would be a great timesaver. Desktop Server lets you run an Apache web server on your own computer, including PHP and MySQL. It will install WordPress for you too. This meant that I could develop my new site entirely on my MacBook Pro without even needing Internet access to test it.
I installed the free version of Desktop Server on September 14, 2015. Then I installed the latest version of WordPress and imported my existing website’s database. This gave me a local copy of the blog to tinker with. If I made a mistake and corrupted anything, it wouldn’t be an issue because this was all on my laptop, not on the public webserver. My WordPress database is over 100 MB in size, and it only took 2 seconds to make a backup copy. I corrupted the database several times while tinkering with it, and fortunately it only took seconds to restore a backup copy. This approach was a great fit for my desire to experiment a lot.
By using Desktop Server, I could access my website in development via any web browser at a special URL. That URL wasn’t accessible to the whole Internet; it only worked on my own computer. I couldn’t access it from my iPad or iPhone either since it only ran on that one machine, but that was good enough for most of the development process. Much later on I would put the new site on a staging server, so I could test with other devices via the Internet.
I use a late 2013 MacBook Pro with a 2.6 ghz quad-core processor, 16 GB RAM, and a 1TB flash drive as my main computer. This is overkill for running WordPress with only one person accessing the site at a time (me), so everything was super speedy and responsive. Running WordPress locally made each iteration of testing ideas much faster. I have a decent 50 Mbps Internet connection, but it’s no match for running everything off my local machine and not having to transmit any data over the Internet during development.
Desktop Server did indeed save me a lot of time since I didn’t have to FTP any files to test ideas, and I could install and try different themes and plugins as much as I wanted without any risk to the live site. If I made mistakes along the way, it was no big deal.
I still use Desktop Server to test some ideas on my local machine if I have doubts about them working on the live site. Once I get a good solution working locally, I can transfer it to the live site with relative ease.
Desktop server even includes a local mailbox, which I used to test my contact form. I was able to view the resulting emails in the local mailbox immediately without having to send any test emails over the Internet. This meant I could test and tweak the contact form even when I wasn’t online, such as on an airplane or in an airport or coffee shop with egregiously bad WiFi.
Sublime
Around the same time, I was also introduced to the editing app Sublime, again by — you guessed it — the WordPress meetup group. I tried the free demo and liked it so much that I bought the full version, and I’ve been using it ever since. It has a lot of features I don’t use, but it’s speedy and has excellent language-aware color coding (even for a color blind person). The color coding helps me avoid mistakes like accidentally commenting out some code that I expect will run; I’ve made that mistake more than once.
I mainly used Sublime to edit CSS and PHP files. Later in the project, I used it to write my own WordPress plugins. I also used it to edit the .htaccess file. I really should take the time to learn more of Sublime’s features. There are probably some cool features I’d regularly use if I practiced them a bit.
When I write prose, such as new articles, I always use an editor with dark text on a white background. But for some reason when I’m writing code, I prefer to do it with light colored text on a black background. I think a lot of coders are like that, but I’m not entirely sure why. I think the darkness helps me concentrate better, and it feels easier on the eyes while staring at blocks of code for a while. Coding often involves a lot of staring. I once met a programmer who loved working in a pitch black room with only the light of his screen; it actually seemed like a great way to completely tune out distractions.
I find that using quality tools makes a project go more smoothly. It’s important to me to use tools that I enjoy. If I don’t like the tools I’m using, it’s easier to procrastinate on doing the work. But if the tools are a pleasure to use and if I respect their elegance, I get drawn into the work without delay.
Choosing a Theme
The first big decision I had to make was which theme I would use for the new site. There are so many to choose from!
I didn’t want to design my own theme from scratch since I felt that would be too much work. It might have been technically rewarding, but I didn’t expect it would be worth the effort. In the past I started with a popular theme and then customized it to my liking, so I figured that same approach could work again this time.
I began looking through the WordPress theme directory. I installed dozens of free themes on my local test site. Then I activated and tested them one by one to see what they’d look like with my actual blog content. Most were blah. Some were hideous. And some were truly hideous.
Overall I was disappointed. I looked at hundreds of themes and tried out dozens of them, but I didn’t find any that I liked well enough to use as a basis for my own site. Some of them looked interesting and creative, but so many themes looked like they were designed for a different type of site, like a photographer, a recipe blogger, or a restaurant. I felt like it would be too much work to customize them for my needs. I’d say my biggest disappointment was that most of the themes I looked at were just lacking in elegance, clarity, and usability. I have a high respect for elegant design, and I didn’t see much elegance among the free themes I looked at.
I thought that maybe this was a good thing though. It meant that I might have to look elsewhere or create something custom, which might be okay since then my site would look different from all the free-themed sites out there.
I learned about some paid theme sources from the WordPress meetup group, so I began checking those out next. Overall I was more impressed by the paid themes. I saw some better designs, but I still couldn’t find anything that I liked for my own site. Again, I kept thinking that these were good themes for other types of sites, but none seemed like a good fit for me. Sometimes I felt like I was going clothes shopping in the women’s department — lots of nice stuff, but nothing I’d personally wear.
I spent a lot of time looking at the Genesis themes since some developers from the meetup group loved Genesis, but I just didn’t like any of their themes enough. They seemed nice and fancy on the surface, but none of them stirred my soul. I also spent about two days researching the Genesis framework, but that turned out to be a dead end, although it was an interesting technical excursion. I ruled out using Genesis or any of its themes.
The main thing this phase accomplished was to give me an even better understanding of what I didn’t want. I think this helped me develop and refine an internal heuristic that would later allow me to recognize what I did want. At the time, however, I still didn’t have a clear vision of what I wanted to create. All I had were some basic principles, desires, and intentions to guide me.
I wasn’t going to settle for a theme I didn’t love though. If I had a tight deadline, I would have had to pressure myself to make a decision at this point, a decision I probably would have regretted. Fortunately in this case, patience was my ally.
We’ll continue this series in part 3, which will be posted when it’s ready.
Continue to Part 3 in this series.