Recently, I was approached to do a redesign of NochNoch.com. The site is a self-help, personal development blog written by a woman named Enoch Li.
Unlike other similar self-help blogs, Enoch doesn’t write “how-to” advice. Her content reads more like a personal letter, or journal entry, describing her experiences and what she’s learned. It was this aspect of her site that I decided the new design should showcase.
It sounds like a no-brainer, but the more experience I gain as a designer, the more I realize how important content-focused design is. It’s easy to fill a page with decorations and graphics and make it “pop.” It’s much harder to cut down the distractions and fluff and really build the site from the content out.
I wanted NochNoch.com to embody that feeling of a personal letter. I wanted readers to enjoy handcrafted text that was set beautifully following typographic principles. Read the page “My Story” for the perfect example of what I was trying to capture. And hopefully did.
Trying to embody a handwritten letter or journal entry is great but this is the web, not a piece of paper. NochNoch.com has readers all over the world reading in multiple languages and on multiple devices.
Prior to the redesign, Enoch was maintaining separate sites for Chinese and English, each with its own mobile version being served to small-screen users. The new design integrates this all into one. Traditional Chinese and English are now on one site and the appropriate language is automatically served based on a user’s computer settings (with the option to change by clicking a button in the footer).
Furthermore, the mobile versions have been abandoned in favor of a fully responsive design. Try resizing the browser window and you’ll experience the site shrink, the font size adjust, and eventually the columns rearrange. This adaptive design is an elegant solution that allows every user to have a similiar experience whether they’re on a big desktop monitor or tiny iPhone screen.
And the experience is really what is important here. From the carefully set text, to the colors, to the soft transitions when you hover over links, every design decision was made to capture and sustain the personality of the site.
It’s for these reasons that this has been one of my favorite blog redesigns thus far. It was great working with Enoch. I’m grateful that she allowed me to experiment and the push the boundaries rather than settling for a “typical blog design.”
I think it paid off.
Two friends from Philadelphia recently moved to Beijing, and I was curious to find out if they overpaid for housing. I decided to check The Beijinger for some local prices.
On one of that ads, the agent said to see his blog for more apartment listings. So I open up his NetEase (blog.163.com) page and this is what I see:
I was shocked to see the similarity between a random Chinese real estate agent’s blog and the Tumblr theme I developed last year. Here is a shot of my theme:
But I thought, Okay, maybe it’s just a coincidence. There’s nothing about my theme that is so original that couldn’t have also been made by somebody else.
I clicked around NetEase and found the actual theme page. It’s called “Studio” and the author’s name is “Bad Song”.
I started checking out some of the theme assets, and sure enough, they’re mine. The background is the exact dimensions and size as mine. Seriously, they’re both 528px by 490px and 58,015 bytes. Exactly the same. No way that’s coincidence.
Anyway, I’m not really angry or anything. I’m more shocked by the randomness of finding a Chinese guy with a blog theme ripped off from me.
But maybe it wasn’t so random, especially since this “Studio” theme has over a hundred thousand users. A hundred thousand users!
I might email this Bad Song fellow and call him out on it. Just to see how he responds.
Anyway, there you have it. This is why everyone picks on Chinese designers for their approach to R&D: research and duplicate.
Web designers, do you lay out your sites using a baseline grid? Do you love the sweet, sweet smell of vertical rhythm in the morning? Do you hate blog posts written to sound like marketing text?
So do I. I also hate having to open Photoshop just to make a one pixel wide image every time I want guides for my baseline grid. That’s why I made BaselineMe.
BaselineMe is a little experimental web app that generates a vector image to use when establishing a typographic baseline grid.
How To Use It
Type set consistently on a baseline grid creates a beautiful vertical rhythm. Cue Bringhurst:
Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.
The metering of horizontal space is accomplished almost unconsciously in typography. You choose and prepare a font, and you choose a measure (the width of the column). When you set the type, the measure fills with the varied rhythm of repeating letter shapes, which are music to the eye.
Vertical space is metered in a different way. You must choose not only the overall measure – the depth of the column or page – but also a basical rhythmical unit. This unit is the leading, which is the distance from one baseline to the next.
When setting text with HTML and CSS, this rhythmical unit is determined by the
If you have a line-height of 24 pixels, you’re going to want all vertical measurements to be multiples of 24 pixels. Therefore if you have headings, blockquotes, lists, or even images (including padding and margins) your text always ends up following the same cadence.
In order to check the math and ensure that the text is lining up properly, most designers create an image to use as a guide. Typically, this image has a width of 1px and a height of the line-height.
Then, they repeat the image vertically on the page using CSS. The declaration looks something like this:
background: url('img/line-height-guide.png') center top repeat;
And the result:
BaselineMe allows you to do the same thing, but you don’t have to create the image. You can just use a URL in the CSS declaration.
If you have a line-height of 24px, just use this:
What about 16px? Bam:
Easy, peasy, lemon-squeezy.
And if you want to save the file for local use, you can paste the URL into your browser. Save the page as an SVG and you’re all set.
To Any Programmers Out There
BaselineMe is a really simple application. Basically, it’s just an SVG file with a little bit of PHP in it to grab the URL. Pretty cool, right?
Anyway, I’m sure the are better ways to do it and more options that would be useful to people. If anybody out there is interested in improving BaselineMe, please email me!
I whipped up a new homepage for Affordable Art China this weekend. They’re showcasing a new event in Shanghai. You can see the site live here.
HTML5 Boilerplate + CSS Grid
I’ve been using HTML5 Boilerplate for all my projects. And on the last few I’ve also used CSS grids. Combining the two isn’t hard, but it’s annoying to have to do every time. So, I made a couple templates that combine HTML5 Boilerplate with a 960px grid and a 1140px grid and uploaded them in case anybody else found them useful.
It’s the newest version of Boilerplate and it includes jQuery, Google Analytics, and HTML5 shiv. The index.html also includes a demo grid. The stylesheets for the grid systems have been integrated into Boilerplate’s style.css. (With the exception of the 1140 grid’s IE-specific sheet.)
Let me know if you end up using them (and if you find any bugs or make any useful modifications).
If you guys haven’t checked out my tumblr in a while, I recommend it. I’m using the Simple Blocks theme by Will Moyer & it’s beautiful. I may try to use it as a springboard, but it’s pretty nice as is.
Thanks a lot! It’s hard to believe that almost 700 people are using my theme. Weird.