For lack of a fancy name I just call it multi-single-line CSS. The premise is pretty simple: maintain the legibility of multi-line CSS while shortening total file length. The way it works is that you group similar attributes (for example width and height) onto a single line. In doing so, you’re saving space while making connections between attributes that are often referenced together.

As you can see, it’s a nice middle ground between long and short. Here are a couple more examples pulled from my CSS file:

Hopefully you find it useful, and if you have any suggestions to make it better I’d love to hear ‘em!

“Before I head out let me say that if you are looking for ideas to write on your blog or want to test an idea out Drawar Forums is the place.”

Before I start, I want to make it clear that I’m not bashing Scrivs or the Drawar Forums. Scrivs is a huge proponent for people sharing their ideas on their own blogs and he is constantly making me think, and the Drawar Forums provide a great place for discussion.

That being said, I think the last part of that tweet sums up the problem with a lot of design blogs. You shouldn’t need to “test an idea out” before you run it on your own blog. Have people forgotten that blogs are about opinions?

If you think that your posts have to be impenetrable before you can publish them on your blog, you are setting yourself up for failure. Anything you post should definitely be well thought out, but to assume that you can arrive at the irrefutable truth of a topic is naïve. Instead, explain your opinion clearly and open the discussion to others.

The way I see it, the comments sections of my own blog posts are one of the best places to learn. It is natural to be scared of what responses you will receive, but that fear shouldn’t prevent you from posting in the first place. How will you learn if you don’t solidify your ideas to begin with?

Diamonds from Sierra Leone (Remix), Kanye West ft. Jay-Z

Art direction doesn’t need to be an all-or-nothing treatment. Who’s to say there’s nothing between completely art-directed content and the default template? I think people get sucked into the idea that every post has to be drastically different to be a success. If there’s no reason to scrap your site’s structure, don’t do it.

That’s how I’ve decided to handle styling articles on my blog; I use as much art direction as they demand. I like to think of it as similar to the concept for the Rotis type-family by Otl Aicher:

• Templated. When your default template does the job, there’s no need to impress, just stick to the basics.
• Semi-Templated. Sometimes there’s no need to recreate the wheel but you still need to add a little functionality or flare to an article.
• Semi-Art-Directed. For when you need all the style of an art-directed article, but don’t want to isolate the article from the rest of your site.
• Art-Directed. The complete overhaul: scrap the entire structure of your blog (except maybe your navigation) and tailor everything to the article.

Of course these strict categories don’t really exist; they’re just an interesting way to visualize the idea.

The way I achieve the art direction on my blog is with two plugins: Designate by Benedict Eastaugh and Art Direction by Noël Jackson. Designate is an awesome plugin that automatically links a stylesheet with the article’s slug to the article if one exists. It would be great if it also linked javascript files, but since it doesn’t, I add specific jQuery code to articles through Art-Direction’s custom post field.

Take my word for it or try the system for yourself, but it’s very liberating. You aren’t ever boxed into a single style, yet you still have a solid template to fall back on when you need it. This allows me to use my blog as an experimenting ground as well—something that I find very important.

What do you think? Should art-direction be implemented in varying amounts?

The biggest challenge in designing for the iPhone is maximizing screen real estate and this is where my biggest problem with Opera Mini lies. One of its “features” you will notice immediately is that the title bar stays visible even as your scroll down the page. Why? It’s a waste of space. Be honest, how often do you need to look at the title of a page when viewing it? Close to never. Safari mobile does a good job of hiding the title as soon as you scroll down the page, why would Opera deviate from this behavior?

The Opera Mini browser on the iPhone

The presence of the title bar is made even more annoying by its obnoxious design. It’s almost as if Opera wanted the title bar to stay visible so that one-sixth of their logo would visible along with it. If somehow we did agree that the bar should stay visible, why would it be made red—a color that will compete (and potentially clash) with anything on the website you’re viewing. And to top it all off it’s separated by a 2-pixel black stroke and a dark drop shadow.

The only way to hide the title bar is to turn on “full-screen” mode. And in full-screen mode it simply never shows up even if you wanted to see it again. (You have to pretend to enter a new URL to get it to pop-up.) Of course, even in full-screen mode you can’t escape that ugly drop shadow.

My problems with Opera Mini’s interface don’t end with the title bar, but I’ll keep all the other points brief:

• 
  • Their logo in the top right corner is barely discernible and unnecessary.
  • What does that “recommend to a friend” button recommend… and why?
  • The icons in the bottom bar are too cramped.
• 
  • That page icon is unnecessary and old-looking.
  • The “Cancel” button is awkward sized and placed and it blends into the bar it’s on!
• 
  • Not only does this not tell me anything at first glance, but try using it… it’s a pain.
• 
  • Those icons are tacky and could easily be simplified to reduce visual clutter.
  • The active state for the menu buttons doesn’t read as an active button.
• 
  • The unnecessary icon makes another appearance.
  • Apple has gone to the trouble of designing good looking on/off switches and they were replaced by this? Seriously?
• 
  • And finally… if there was one place that might have benefited from an extra icon it is right here. A small magnifying glass inside the find bar would have been extremely helpful.

All of these findings are after having only quickly used the application; I don’t understand how the Opera team let some of these things slide. I understand that Opera Mini might be faster at loading pages than Safari, and some of the options it provides are very useful, but I really wish they would step up their interface design so I wouldn’t have to cringe while using it. What do you guys think?

My new logo was the starting point for the new look. I first encountered it while watching Triumph of the Will and I fell in love immediately. (Or at least after the couple seconds it took me to realize it wasn’t a weird “G”.) While based off the Fraktur style of lettering, that one is custom made and I took a few liberties to make it more dynamic.

Another source of inspiration for the new design was the accompanying League Gothic typeface. I already had a thing for Gothic sans serifs and since Typekit makes the process so easy, I couldn’t resist. I also like the coincidence of both Frakturs and Gothic sans serifs being called, well, “gothic” (hence the title of this post).

With the new identity made, I decided it was time to make my first printed portfolio. I kept the outside of the portfolio very simple—just black museum board with a wire-o binding—so that the work doesn’t have to compete for attention. The wire-o binding is important because it makes it very easy to update as I add and remove work. Just print, cut and rebind. For a little extra classiness I made mini versions of my portfolio to leave with the interviewer as well.

In my excitement I’ve even gone as far as to setup my iPhone with a matching background and icon—the kinds of little things no one will ever notice.

So what do you think of the new identity? Got any other tiny place I can apply it that no one will notice? I’d love to hear your feedback in the comments.