Site Version 7.0 (2016)
February 23, 2016
It's been about four years since I took a serious look under the hood. And in that time, a lot of things about this site had begun to annoy me.
The last redesign was in March 2012, and it was easily the biggest personal web project I've ever done, requiring me to recode essentially the entire site, page by page. But doing it right it meant I would never have to go back and do it again, and that fortunately turned out to be the case, at least for most of the content itself. But because site architecture was my primary focus in 2012, I left the actual look and feel of the site basically alone, which hasn't really been significantly changed since Version 4.0 was launched way back in 2006 — a whole decade ago. (And that version was largely based on the 2002 look.) That's a seriously long time.
So now I've finally gone back and given the site a visual facelift to bring it into the modern age. Even though I didn't have to touch most of the content, the master template and styles rework (which was a complete-from-scratch redesign and rewrite) was still a LOT of work — much more than I had bargained for when I started on this a month ago. As always, these sort of projects tend to have a domino effect. I still have some tweaks to make in the coming weeks, but it's ready for rollout.
Let's take a look.
Responsive design
The 2012 version offered an improved mobile experience, but it was not a truly responsive design. With 2016, now it is. The site will resize (based on CSS media queries) to virtually any viewport width you throw at it. Some widths are more optimal than others, but all should be acceptable. The whole design was really geared toward the "mobile first" philosophy. This has allowed me to build a single platform that adjusts to any screen size, and allow a richer, fuller mobile experience, rather than treating mobile as a stripped-down second tier. The truth is that I access my own site via mobile more often than on a desktop computer, so I wanted the experience for both to be equally good. You will notice this most with the home page, which is way better than the previous version's mobile home page (which was actually kind of embarrassing).
Less is more
I've pared a lot of stuff back for a more streamlined here's-what's-important approach, most especially on the home page, which has long suffered from needless clutter. (Busy was once fashionable, but not for years.) The left rail had links to site info pages but needlessly explained to you what each and every link was for. It was completely unnecessary, so I've killed it in favor of a simpler list of self-explanatory links. Meanwhile, the right rail used to be filled with links to my most recent 10 or so blog posts. Well, considering my level of inactivity these days, displaying 10 "recent" posts has meant pulling in content going back years — certainly not my intention when I created it. So all of those are gone as well.
I've slashed and burned the home page down to just a top story image, a few recent headlines, and then image links to the various series pages. Then in the right rail are additional links and my ad slots. It's very simple and very much scaled back to what is actually needed, rather than being a slew of obligatory links and verbiage. The less-is-more philosophy was carried forward through the entire site, which now is based on a single wireframe. (I've somewhat reduced the verbiage on a lot of the site information pages as well, and rewritten large parts of the site policies.)
Modern typeface
After stubbornly clinging to Verdana since, well, the turn of the century, I've finally jettisoned it in favor of a better, more modern typeface (Open Sans). This is probably the most noticable reading change to the site and I think it's a big improvement. Following current trends, the fonts are noticeably larger on desktop screens than in the previous design. On mobile, the text should be nice and sharp and readable at a fairly small size. My font usage was easily the most outdated (and awful, on certain browsers) thing about this site, so the change really makes the whole site feel more elegant and easier to read.
On-demand site menu
Keeping with the whole mobile ease-of-use is a new site menu that is always available and optimized for mobile and accessible from any page by touching the menu icon. This saves space on mobile layouts rather than sacrificing it to always-there navigation links.
Improved image quality
Because most smartphones today have high-pixel-density screens, I've created larger, sharper images to help account for that. The home page images, which I went back and painstakingly re-created, should look much better on your hi-res display.
Blog also reworked
Jammer's Blog has been an equal embarrassment to me lately, particularly the mobile version. But I finally bit the bullet, dug into the WordPress templates and reworked those too. Now the blog looks just like the review site, creating a much more unified experience. The sites are still technically separate, but they now employ an identical layout.
Core identity retained
Even though I've made some notable changes, I've also retained some key things about this site's identity — even things one could argue should have gone away. I still use light text on a black background, which may be ill-advised from a readability standpoint. But what can I say; I still like it. (I've opted for gray now instead of tan, which should be easier on the eyes.) Also, the blue gradient that has been this site's most obvious visual trademark since 1999, as well as a site logo typeface that evokes Star Trek, have been retained. This is still the same site you've always been coming to, with the content still being the top priority. It's just the next, better version now.
Feedback welcome
Let me know what you think of the new design in the comments below. I hope you like it.
26 comments on this post
Wed, Feb 24, 2016, 5:38am (UTC -6)
So far so good. It's a better read than it was before. The blue line to the left makes my eyes a little buggy though, trying to read the first line in a sentence, but I've a bit of weird colorblindness and some shades of blue make it hard for me to see. But, that wouldn't be a problem many folks have.
Thanks for taking the time to work on the site. It does indeed appear more modern and streamlined, and I like the changes. :)
Have a Great Day... RT
Wed, Feb 24, 2016, 9:33am (UTC -6)
Wed, Feb 24, 2016, 6:45pm (UTC -6)
Wed, Feb 24, 2016, 7:40pm (UTC -6)
Wed, Feb 24, 2016, 9:48pm (UTC -6)
Thu, Feb 25, 2016, 2:10am (UTC -6)
Thu, Feb 25, 2016, 10:03am (UTC -6)
At least I can SEE everything way better now, damn my eyes.
Sat, Feb 27, 2016, 4:29pm (UTC -6)
Sun, Feb 28, 2016, 6:33pm (UTC -6)
Mon, Feb 29, 2016, 10:16am (UTC -6)
Mon, Feb 29, 2016, 3:25pm (UTC -6)
Now that this is done, hopefully you can review STID :-)
Mon, Feb 29, 2016, 6:43pm (UTC -6)
Tue, Mar 1, 2016, 8:38pm (UTC -6)
Have enjoyed the site for a while now. Incidentally, I found you on my first watch-through of Voyager. I got to "Threshold" sat on my couch going "buhhhhhhh...What?!?" A quick Google search led me here, confirming that I was not alone in my utter befuddlement at that episode.
Wed, Mar 2, 2016, 3:18pm (UTC -6)
Thu, Mar 3, 2016, 9:27am (UTC -6)
Thu, Mar 3, 2016, 11:47am (UTC -6)
Thanks
Thu, Mar 3, 2016, 11:51am (UTC -6)
"Set Bookmark: hide this and all older comments"
Thu, Mar 3, 2016, 10:46pm (UTC -6)
Sat, Mar 5, 2016, 12:30am (UTC -6)
Sun, Mar 6, 2016, 1:48am (UTC -6)
You may need to refresh the page for the changes to take effect.
Tue, Mar 8, 2016, 11:50pm (UTC -6)
Wed, Mar 9, 2016, 12:18pm (UTC -6)
Tue, Mar 29, 2016, 11:53am (UTC -6)
I'd like to make a suggestion.
When you are in the comment stream and hit an "X", all the posts chronologically before that are not visible.
I recommend that when you select and "X" you remove just that one post from view.
Thanks. (STID is still waiting :-) )
Wed, Mar 30, 2016, 10:13pm (UTC -6)
Thu, Mar 31, 2016, 12:10pm (UTC -6)
Tue, Oct 10, 2017, 3:39pm (UTC -6)
would it be possible to remove the background-image from the comment boxes?
I found the text a little hard to read on my monitor, so I tried to disable it.
Something I liked:
body
line-height: 1.45em;
#commentsearchbox, #comments .commentbox
border: 1px #444 solid;
border-radius: 5px;
background-color: rgba(0, 2, 53, 1);
or
border: 1px #567 solid;
background-color: rgba(64, 64, 64, 1);
Submit a comment
◄ Design History