This weekend I launched the redesign of 8164.org. The old design served me well for the past year and half. The main reason for the redesign isn’t due to boredom with the old look, but more for functional reasons. The old design was geared towards emphasizing the most current article. That’s why the old homepage only showed the excerpt of the latest post, nothing else. In the past couple months I took a break from posting. During this time, I found myself reading some great blogs with short posts. There were times when I felt compelled to write some short entries here too, but the old design wasn’t set up for that. If I posted 2-3 shorts a day the homepage layout just didn’t make any sense.
Homepage now serves as an intro to the site, as well as lists past articles.
Article area width increased from 600px to 800px. This is because I want to post photos and images in bigger format without using thumbnails+lightbox, or smaller unflattering sizes. I’m a big fan of Boston Big Picture. A wider area also gives me more options for content layout.
Removed the fixed position footer navigation bar. I still think it’s a good navigation method, but I see this type of footer being used a lot these days, mostly for social media reasons. I also removed the prev/next links as well. Judging from my web stats, they were hardly being used. Fixed position also doesn’t play well with iPhone’s view-port.
Comment section is hidden by default. I want less clutter upfront.
How and what I write, has a lot to do with what I read. Content wise, I’m a fan of Coding Horror and Daring Fireball. I like great link blogs such as Kottke and Waxy links. Going forward, I see myself posting a mix of long and short posts. I no longer have enough free time to write lengthy posts full time.
I really like the grid layout of the AAP magazine and its use of bold imagery mixed with type. As for the Hirshhorn Museum, the inspiration came not from its works of art, but how they’re being displayed. There’s so much space around a piece of art, and sometimes a showroom contains a single display. Whenever I look at the exhibits there, I get this airy feeling and am able to pay full attention to what I’m looking at without any distractions. The spatial arrangement feels just right. That’s another aspect I’m hoping to accomplish with the new blog design.
“Simplicity is about subtracting the obvious and adding the meaningful.”
— John Maeda
Undoubtedly, people would describe the new design as minimalistic. I probably would too, for lack of a better word. I’ve always been a fan of such designs, I also feel it reflects my personality. However, to me, minimalism describes a thinking process, rather than an end look. I didn’t have a design visualized when I started brain storming, but rather I tried to identify the elements that were absolutely needed. The goal of the design is to have readers concentrate on the writings without distraction. The graphical elements are there to serve the hierarchy of importance of the content. To me, designers’ personal sites should reflect their unique tastes.
The typography treatment in the old design was terrible. When I put up the site in 2008, I didn’t pay too much attention to proper formatting. This time, I tried to fine tune some details.
The hardest, and also the most time consuming part in the redesign process was finding the right font for the site/article header, and the right method of implementing it. I feel choosing a font for personal use is an intimate experience. I have many favorite type faces to use when I create web projects. However when it comes to my own site, I feel the font choice should definitely give people an idea of who I am. I’m not a serif type of guy, even though I love serif fonts, especially the slab kind. I’m definitely not Baskerville Italic despite what this old guy says.
I’ve narrowed my font choices to Digital Sans, Orbitron, Geogrotesque (suggested by Sander), and Helvetica Neue.
For the time being, I’m using Helvetica Neue(Helvetica, Arial for fallback). I’m not entirely happy with the current web font replacement methods out there. Most likely I’ll end up using @font-face, however due to various hinting support, many fonts still look horrible on Windows OS. I feel even though tremendous effort has been made to improve typography on the web, we’re still so far away.
I wrote the new theme in HTML5 and some CSS3. I plan to experiment with new HTML5 elements in the future posts. (e.g. <canvas>,<video>,<audio> etc) I also wrote the new HTML layout in a way that allows me to customize individual posts further than just changing the background image/color. This particular entry uses the default look, without customization.
There are still some minor CSS formatting issues with Internet Explorer 7 & 8. Although I don’t support IE6, I still try to make the site somewhat consistent, but it doesn’t need to be pixel perfect. I also need to go back and tweak some of the older posts since they were customized for the old theme.
Thank you for reading. And also thanks go to my online friends who provided me with valuable feedback during the redesign process. Overall I’m happy with the design. I feel it’d allow me to write posts of different natures: long and short, text heavy and photo showcase.
I’d love to hear what you think of the redesign. Feel free to drop me a note in the comment section.