Redesign, Again.

I tried. I really, really tried. It’s an itch that can’t be scratched. A hunger insatiable. The itch comes, so you scratch. A moment of relief, and then it begins again. The hunger rises, so you eat. Your stomach settles, but then the gnawing emptiness begins to grow again.

Yes, I redesigned my blog again. It’s about to get nerdy in here. Fair warning.

The Background

Feel free to skip this part if you just want to read about this new design.

The first design, after YEARS of not doing any web design (so much has changed!) came in March of 2012. I affectionately refer to that theme as bryanlilly.com Alpha. It was pretty awful, but it felt good to not rely on someone else’s theme (Seinfeld: Not that there’s anything wrong with that!). Alpha lasted about a month. I designed bryanlilly.com Beta in June 2012. Beta was my first attempt at integrating the twitter bootstrap framework (now just called bootstrap; web nerds can check it out here). It was like a new, delicate toy that I wasn’t completely sure how to play with yet, but I was just excited, and a little trepid, to take it out of its box and see what it could do.

After pushing the Beta design out, I began to dig deeper into bootstrap. As I learned more and more about the framework, I began tweaking my design to utilize some of the cool things I was finding. Beta lasted longer than alpha (three months, I think), but after countless tweaks I decided to redesign the site utilizing bootstrap from the ground-up. Thus entered bryanlilly.com version 1.0. Bootstrap made the project a lot easier and faster than the last two designs. So, since I used all these fun new things from the beginning, the design bug would lose its bite…right?

Wrong.

I began to read articles on responsive design, while also noticing that traffic to my site from mobile devices was growing. Great. So, taking the principles of responsive design and using some built-in features from bootstrap, I retro-fitted my design to be responsive to what type of screen you are viewing my site from. Ok. Itch scratched, now…right?

Wrong. Hilariously wrong.

While I sat content, looking at my new design with the pride of a new, geeky dad, the devil himself¹ began his ancient whispering. Do you really think you don’t need to have a better understanding of jQuery? Is HTML5 and CSS3 really enough? You shall not surely die if you learn just a little jQuery. It was over. Weaker than Adam, I took the bite. I do! I do need to understand jQuery a little more.

Oh foolish man that I am, who will save me from this design cycle of death?

So, here we are: bryanlilly.com version 2.0. Built from the ground up using the bootstrap framework (including its javascript plugins), responsive design, and a dash of homegrown jQuery. Hey, September was four months ago—maybe this time we can shoot for six?

Elements of the New Design

So, what’s new with this design? Here are some things.

A Focus on Content

Technically, this has been true of all four redesigns so far. Let’s face it. This is a blog. If you’re here, you’re here to read stuff. Now, I want my page to be more aesthetically pleasing than nothing but black text on a white background, so each design has features that emphasize the content.

Contrast. I really liked the color palette used in my last design, and might use it on future projects, but I felt something was missing in terms of contrast. In this design, I went back to a simple but high contrast design—a dark background with almost-white areas that feature text, causing them to pop-out. The text is front and center, as it should be.

Font. Just as with the other designs, I want to make reading easy. The web is a fantastic medium for media consumption, but a terrible one for our eyes (which, as free advice, if you’re on the computer a lot and wear glasses, save up the money and get an anti-reflective coating for your lenses!). This is because most devices capable of delivering a connection to the internet is back-lit, which causes eye-strain. Add to that a small, hard to read font, and that makes for a terrible experience. The base font size for all of my articles is 18 pixels. This is a bit larger than most websites. I’ve also included several easy to read fonts. If you have helvetica neue light installed, that is the type-face you’ll be seeing for the main text of the articles. The font color is a charcoal, not a straight black, which also lightens the amount of eye-strain. I’ve also increased the space between each line of text to make it more book-like, and to make it easier to scan the text without it blurring together.

Limited distractions. It’s no secret that I’m a fan of minimalism in design. I love simple, elegant designs. With that in mind, I’ve tried to keep things that aren’t the main thing on my site to a minimum. If you’re on a large tablet, desktop computer, or laptop, you’ll see a sidebar to the left of my site (if you’re on a small tablet, or a phone, it moves below the article but more on this later). While I have a sidebar, I’ve tried to make it so that it’s not distracting from the start. BUT, I’ve also included some things to make it less distracting than it already is. Each section of the sidebar has a little ‘x’ in the top right corner. Go ahead and click one. I’ll wait.

Back? Good. See what happened? It closes that section so that all that is visible is the section title. But did you notice what else happened? When you moved your mouse off the section, its opacity dropped to 20%, effectively making it fade away. Do this to the whole sidebar and the article becomes the obvious focus on the site. Of course, a lot of you are reading this on a feed aggregator like google reader, so you don’t get that distraction to begin with, but I still get enough traffic to the site that I thought it worthwhile. I may add an option later on that allows you to close and fade each one with a single click.

Responsive Design

As more and more people use tablets and phones to access the web, responsive design becomes more and more important. Responsive design, in a nutshell, is designing a website so that it responds to the size of the screen that you are viewing it on. Fellow-nerds out there can read this article for a primer on responsive design. Beware, the rabbit hole goes deep.

Drop-down Navigation! The first thing I did in order to adapt to a smaller layout is adjust the links at the top of the screen. On your computer or large tablet, the links are laid out horizontally—pages of my site on the left, links to social media on the right. But if you were to view this on your phone or small tablet, the links would smash together and force some of them down, making for an ugly site. Bootstrap to the rescue! On smaller screens, the horizontal links are collected into a nice drop down menu (magic!), keeping them out-of-the-way until you need them and again giving precedence to the content.

Fill the screen! When you are on a small screen, wasted space is, well, wasted. Extra “gutter” space means smaller areas for content. Smaller areas for content means disinterested readers with lots of eye-strain. View this site on a phone and you’ll notice that all the extra gutter space disappears, with the article filling 100% of the width of the screen. Again, the font is a bit larger than normal, with extra space between lines, making reading easier even on a small screen. You’re welcome, dear reader, you’re welcome.

Those darn sidebar sections! So what happens to our friend, the sidebar, on a smaller screen? We want to keep the main thing the main thing, right? You don’t come to my site to see what categories of posts I’ve written; rather, you’ve probably followed a link to a specific article. No need to waste space, right? And didn’t I just say the article expands to take up 100% of the screens width? At the same time, I didn’t want to get rid of them because someone might like what they read and decide to explore the other types of articles I have. In order to meet both needs, I’ve made it so that the side bar sections move to directly under the article and its contents. Furthermore, if you’re viewing this on a small screen, I’ve set it so that each section is closed automatically instead of being open as they are on a computer. Less wasted real estate, more focus on the content. Don’t say I’ve never done anything for you.

jQuery?

Yes, jQuery. jQuery is a more fun version of javascript. It adds the ability to do more with your site while writing less code, hence their motto: Write less, do more. Now, I’m no expert in either javascript or jQuery, but I’ve been digging into these two coding languages in order to get a better grasp on their syntax and use.

Uh-oh. Does that mean another redesign is coming soon? Well, let’s be honest. Probably. But not because I have a better grasp on jQuery, like with bootstrap and responsive design. The beauty of these languages is that I can simply add the code to my .js file, and work them into the website as need be without changing much of the design.

But again, let’s be honest. Another redesign is going to happen eventually.

Foot Notes