Category Archives: CSS and Design

Thoughts on CSS, Design and sometimes, a little bit of HTML.

The Bother from the Other: Oct 25, 2011

I had a very productive weekend, one which included: yard work, basement cleanup, gym, personal time with family and friends, design work and consulting work. So: no Bother yesterday and today’s rather slimmer.

Politics

Blake Gober on the GOP field. His money is on Romney. Mine is on Perry. Either are acceptable to me. However, I’d like to see the rest stick around until after Iowa and New Hampshire and Florida before anyone drops out.

On the social contract:

Our friend, moronette Dagny, said last week, “The social contract exists so that everyone doesn’t have to squat in the dust holding a spear to protect his woman and his meat all day every day. It does not exist so that the government can take your spear, your meat, and your woman because it knows better what to do with them.”

Design

I have been fascinated by this series of posts on the history of Arial from Paul Shaw. He’s been trying (hard) to trace its history and the intent with which it was created.

Reading that has led me to Nick Shinn’s indictment of Helvetica, and the entire modernist, humanist, completely outdated family of sans serif typefaces. (PDF)

Prayers and Petitions
Elizabeth Scalia’s son’s fiancee is having a CAT scan. Details are scant, but may they find what ails her, and may she recover from it fully.

Deepest of condolences to Sarah Smith, for the passing of her dear friend John Corckran, who passed away at the tender age of 35.

Magazine-format blog: points to ponder

The “magazine” format has taken blogs by storm this year, and if you’re of the mind to move your blog in that direction, there are a few things to consider.

First, ask yourself: what is a magazine? As a collection of features covering different topics, one can argue that most blogs fall under the term, but online and print magazines share predictable, consistent sections which different readers can flock to. Consider Newsweek’s last-page editorial. Last time I checked, Anna Quindlen has as regular gig on that page. When I have a chance to peruse a printed Newsweek at the local CVS, I go straight to that page. Other readers go straight to other section. A magazine is a consistent, regular publication with content that is expected by the audience. If you’re a free-form blogger who can’t deliver that kind of content consistently and frequently, the magazine format will leave entire swathes of your site with poorly updated material.

Continue reading

A retrospective of WordPress Classic

In God Emperor Of Dune, Leto II Atreides ruled for almost four thousand years as tyrant of humanity. In doing so, he created a desire for people to be free, and ensured that they will never stagnate and fall victim to the need for a single commodity for existence.

Back in 2002 I started to learn web design from a code-based perspective. The CSS techniques we now consider standard were at the time, groundbreaking. Grey Matter, Blogger, and Movable Type were the frameworks of the day, while I started poking around with a then-little-known program called B2. Fast forward a few months, and a then-little-known guy named Matt Mullenweg decided to fork B2 into a new project, called WordPress.

Continue reading

Nine-sixty

I’ve been doing a little research for a few upcoming web projects of mine and, reading through resources on grids, I came across the 960 “system.” It’s then that I realized a few things: first, a lot of the swank designs that have come out in the past two years use this or Blueprint as a framework. No wonder a lot, and I mean a lot of the designs seem eerily similar in form. Second, after having looked at both the CSS rules and the document structure in implementing 960, I could understand just how quickly a design can be rolled out. One benefit is that it’s got the fixes needed for cross-browser compatibility.

Personally, because I can be the contrarian when I want to be, it almost feels faddish using it. I wouldn’t mind deploying it for client sites, but I’m not sure it feels right here on mine.

Coffeetable presentation

We’ve all come across this kind of online feature before: “top 25″ this, “top ten” that, of any subject from skin care products to methods of murder. Most models follow two paradigms for presenting a feature like this. The first is your usual long article, with a jump or pagination, featuring more than one entry per page. A good example will be IHT’s 25 Examples of Good Urban Design (found from: OTB). The other method is to present one entry per method: whether it’s a page or Flash or AJAX slideshow. Some slideshows would be prefaced by short prose before sending the reader through an arduous journey of clicking through page after page of entries, with a photo and two or three sentences for each. Forbes’ The 25 Most Influential Liberals In The U.S. Media would be a representative example. I call this second method the Coffeetable Presentation, because it mimics the content-light nature of coffeetable books. Each chapter in such a book is introduced with a single-page, sparsely written introduction followed by high-quality color photos with tiny, short, but ultimately irrelevant and vapid captions.

Let’s take #25 of the Forbes list, Michael Pollan. The caption:

Writer and journalism professor, University of California, Berkeley

The author of The Omnivore’s Dilemma and In Defense of Food, Pollan has had more influence than any other contemporary writer on mainstream American thinking about what we eat. His manifesto–“Eat food. Not too much. Mostly plants”–should now be in political vogue. (Obama likes arugula.)

There is no exposition whatsoever about Pollan’s infuence over mainstream American thinking about what we eat. I can argue that Rachel Ray’s ubiquitous cheekbones on a large number of processed food products (delish!) would have a greater “influence over mainstream American thinking abotu what we eat.” I can spend some time explaining why I think so. What does not fly is that it is because I said so. I don’t have numbers, so I can’t say how commonplace the appeal to authority has become in online writing. I can only say that among feature writers in Larger Media it is one of the most glaring errors they commit.

Let’s take in good faith the need for an appeal to authority in a caption. Perhaps there are word counts to not exceed, right? My great problem with Coffeetable Presentations stems from the inability to request a full list of the featured items. I will not groan over such a presentation if there is such a link that says “see the full list,” or even in the coarsely worded “click here to see all entries.” But too often in my experience, no such link exists.

It prevents fast scanning of the content, subjects the reader to wait times for each request, and makes it difficult to jump from one point of info to the other. I wonder, to what end is all this mousing about clicking, and the only reason that makes sense is that it allows the content provider more opportunities to serve out ads. Some might think that’s as good a reason as any, but I don’t think so.

What is a theme and what is it not?

I’ve designed WordPress-powered sites and blogs for almost five years now. I have my niche, for which I am grateful. Recently, I came across some huff-and-puff regarding Matt Mullenweg’s decision to remove over 200 themes from the repository, citing non-compliance with the GPL.

I have a feeling I’ve been living under a rock for the better part of three or so years. I’ve watched the WordPress community from the sidelines. I saw its expansion and internecine conflicts. I’ve remained silent on most issues out of being ignorant on so many of them and am not afraid to admit to being so.

However, recent events have raised questions and concerns. Jeff Chandler wrote a thoughtful post on Premium Themes and I am left with a few questions and thoughts of my own.

Allow me to introduce you to my design workflow. Whenever I design for a client my first step is to almost always begin with the WordPress Classic theme’s document structure. Old habits die hard and I have found it to be one of the most efficient ways to start off with a “naked” theme. I strip the CSS file of everything except the theme header, substitute it with a blank template of code of all the elements I use in almost all my designs, and start coloring and shaping. I have never, still do not, and perhaps never will, follow the Photoshop-to-code development workflow. If a client wants something exotic, like a horizontal navigation bar (with tabs!), I have a codebook for that too. Now, I tell my customers that the site I design for them is for use on that project only, or for whatever number of sites we agree upon. The combination of images and CSS code form a look which, I believe, is the intellectual property of either myself or my client (depending on the terms of the contract).

The question, then, is, what part of my design falls under the GPL? Does that mean that any one party can rip off an entire design I make, despite the inevitable embarassment at having me parade their lack of creativity for all to see? It’s so easy for me to reverse-engineer the look and feel of Jeffro 2.0 without looking at source codes for HTML and CSS, but I do not, because it is a professional embarassment to do so. What portion of his, or anyone’s, site can I “liberate?”

What is covered by copyright? I know that blocks of CSS code don’t get that benefit, and for good reason. Faux columns would never have caught on, for example. I don’t think that only the content presented by the blog is covered, though. The look and feel of a site are part of its identity, especially if the design is relatively unique.

What are the limits of the GPL when it comes to Themes, Premium Themes, and Blog Designs? This inquiring mind would like to know.

Yet another reason why I would never use foreign characters in graphic design

From Althouse, the Nth example in a long line of stupid, avoidable mistakes involving the use of foreign characters, especially Chinese, in publishing and graphic design:

A respected research institute wanted Chinese classical texts to adorn its journal, something beautiful and elegant, to illustrate a special report on China. Instead, it got a racy flyer extolling the lusty details of stripping housewives in a brothel.

Chinese characters look dramatic and beautiful, and have a powerful visual impact, but make sure you get the meaning of the characters straight before jumping right in.

There were red faces on the editorial board of one of Germany’s top scientific institutions, the Max Planck Institute, after it ran the text of a handbill for a Macau strip club on the front page of its latest journal. Editors had hoped to find an elegant Chinese poem to grace the cover of a special issue, focusing on China, of the MaxPlanckForschung journal, but instead of poetry they ran a text effectively proclaiming “Hot Housewives in action!” on the front of the third-quarter edition. Their “enchanting and coquettish performance” was highly recommended.

The column includes an apologia that Althouse and another sharp reader, notices: “Chinese is a tonal language, which means words sounding the same can often have very different meanings depending on how they are spoken.” Mark Liberman expounds: “But what’s really puzzling about this sentence is not its misleading way of describing lexical tone, but rather the implication that Chinese tone is somehow relevant to MPI’s unfortunate choice of cover art.”

One of the great mysteries of Chinese is that an ideogram represents the same concept but is pronounced differently across dialects. Well, as far as mysteries go, it isn’t a mystery per se in that it can not be rationally explained, but it is, to this Westerner’s mind, bizarre. Liberman’s article goes on and on, but is perhaps best summarized by comedian Daniel Tosh’s line (which I paraphrase on best recollection): Do kids in Japan get tattoos of English words?

GMail themes

Screenshot of new GMail theme.
Screenshot of new GMail theme.

It isn’t just Ann; after having a rough morning at work it’s way cool.

It can be argued that it’s quite unnecessary for such a tool, but we humans crave customization, even if the only end is to please our aesthetic needs.

Project: Republicans Against 8

Screenshot of Republicans Against 8 site
Screenshot of Republicans Against 8 site

My lastest project was actually launched over a month ago. Under the art direction of my client, RSC Partners, in conjunction with the Log Cabin Republicans, I developed the WordPress theme for the Republicans Against 8 site.

I had a lot of fun working with RSC on this one. For one, the rounded boxes with the gradients, combined with the type used for the sidebar buttons, are a charming throwback to the developing days of online design. Tempered by judicious proportion and layout, it was a risky move, but I personally think that we pulled it off.

I am not one to post YouTube videos on my site, so I took the time to learn how to resize YouTube videos and to use fish-on-Friday (I could call it Kosher, too…) code for them. The top-row tabs were a new interface flourish that I plan on using on a few upcoming projects.

The Republicans Against 8 project not only expanded my portfolio, but has taught me a few new tricks that I can use. I’m a low-volume designer who’s a stickler for details. This isn’t my full-time job and is a source of meager supplementary income, but making websites is fun for me, and with every project I aim to learn something new about the craft and this one certainly has met that goal.

Wow

Jeff Goldstein pops up his head from his shell to share with us a horrific account of awful performance in the web design/web mastery market.

I, for one, am lucky enough not to have had encounters with the pathologically dissastisfied client. Most of my design work happens rarely (about three to four jobs a year) enough for me to keep my head on straight and not count on it as a primary source of income. My clients know I have a day job and I work a max of two hours a night, four weeknights a week. My clients also know that despite this, I have at most a three week turnaround time. My prospective clients know that I take only one job at a time. And most of all, my clients also know that when I give them the First Iteration, it is THE time to reject it or improve upon it.

The discussion section at Jeff’s post has gone ballistic. I would like to grok that it is rare for designer and client to get into a public shouting match, but when it does, it’s like a car in open flames pulled over on the side of the road. Can’t help but look.

The sound of an old fart grumbling

I remember getting my feet wet with blogging back in late 2002. Oh boy, were those the days: the politics, the blogfights, the blocky but groundbreaking methods with which CSS was used to finally make the web a little easier to design. I’ve been around since b2, and I’ve seen the way the designs for WordPress has changed a great deal.

Part of it is the technological aspect: back then a screen resolution of 1024 pixels wide was uncommon; at least I wasn’t restricted to the so-called “web-safe” palette. Now we have widescreen monitors, though I know plenty of Windows users who have not kicked the habit of maximizing their browser windows. It’s a pain for flexible designs without a max-width (or for users on Internet Explorer). Broadband penetration, though low in America compared to the rest of the world, has aided in the development of graphics-rich themes. Sadly, I have seen the WordPress realm suffer from what I refer to as the Garage Effect: the bigger the garage, the more shit gets stuck in it.

After reading Theme Shaper’s The Future Of WordPress Themes, I’ve realized just how out of the loop I have been with WordPress. I don’t regret it, though: much of my time has been spent on other things that have enriched my life. Now, I don’t mean to accuse anyone blogging and designing themes as not having a life, but it wasn’t for me. I did release for general use a modified version of Dave Shea’s pea- (or was it puke-) green “classic” design for WordPress before Kubrick took over in v1.5. Cool blues, warm gold: it was a minor hit, and blogsome (bless their hearts) and their other multi-user environment, blogs.ie still stock that design and quite a few users still have it. But something I have sworn I will not do is release an actualized, capital-T WordPress Theme for general consumption. My background in graphic design—since I was eleven—has in me ingrained the importance of a customized look for a customer. Having released the Jaws (blue) “theme” to the general public, I decided that that was the extent of my contribution. It would break my heart to build a WordPress theme “for everyone” only to find it picked apart and modified and twisted to serve someone else’s means.

Seriously: how hard is it to grab the Classic Theme skeleton, modify it yourself and make your own look? My current Anthem Of Our Dying Days theme is still based on Classic. If you have the mad skillz to muck up someone’s WP Theme into this… this… derivative thing, then Christ just grab some code snippets and make one for yourself. You’d be much happier knowing your site is nowhere near a sibling under the same bitch, ya? I am proud to say that most of the few sites I have designed over the years have remained virtually unchanged. Meryl‘s Press Pass theme has been there since, when? Crap I don’t even remember. And I am glad to say that no other blog design by my hand has even a remotely similar banner, or look. Why? Because I took my damn time to find out exactly what she needs with her site.

So it does leave me to wonder: with a whole subcommunity of “Premium” Theme makers out there, whose products sell between twenty to two hundred bucks (or more), do their buyers actually feel any sort of satisfaction to what they have? I don’t even want to start on the kind of content that’s been decreasing the signal-to-noise ratio over the past years. I just wonder how someone who got this Premium Theme might feel after seeing someone else with it.

If graphic design is a means of communication that enhances the power of the printed word, then just how much enhancement does your printed word get out of a design meant for use by many? Anthem Of Our Dying Days is not a perfectly designed design either: I think that my line heights are too tight for the kind of line lengths that I have, for example. But I know that the design works for me, it works for what few readers I have and I know that unless someone blatantly copied my CSS, it’s mine and all mine alone.

That said, in this day and age of hundreds upon hundreds of millions of blogs (did I get that number right?) the content of a blog isn’t just determined by how well it is written. It is determined by how many take the message, how much of a ripple it can make, or how many more are affected by it. Perhaps “cookie-cutter” themes aren’t as bad: they take away the need for someone to produce (or to pay someone to do so) a look that would work with their content. The focus could stay on the content being produced.

And that, taken to its bare roots, is what blogging has always been, still is, and will always be about.

Facelift

I initally named my new design as “Moonlit Beach,” which, while appropriate on a descriptive level, seems to be too simplistic for a name.

I needed a new background for the photos that I plan to more often showcase on this site. Comments are, as always, welcome.

A eureka moment

Three months ago I asked about a CSS layout positioning techinique that involved floated elements, three columns, and whose sidebars came after the main content in the document structure. After a moment of inspiration from the Neptune theme (which my friend asked to tinker with because the content section was too narrow), I figured out how to combine Neptune‘s CSS with flexible layouts using negative margins, by Ryan Brill. Here’s a mockup:

Positioning diagram of the nested divs and float directions used in my little project.

Check out the live example, whose content explains the positioning and has a few additional notes. I know that a lot of WordPress theme development and other CSS development has gone past doing things like these, but if it helps someone, it’s all good. In fact, even if it didn’t, I’m glad that I was able to figure out a puzzle that’s bothered me for more than a year, and I’m glad that I’m writing about it.

The look

Meryl’s got a new look going about her. Looks good, ya? Bears my mark, too.

This is the first template that I made that doesn’t have posts as the subset of the date. I remember reading Michael Heilemann‘s iconoclastic blog post about it a long, long time ago, but didn’t have the nuts to do it until now.

Her design is based off of Vesuvius, but then again so much of Vesuvius is based off of this ALA article, too. However, thanks to Rhesa I got my hands on the Neptune theme, which allows me to have a three column template with both sidebars following the content.

I’ll have to give it a long, hard look to see if I can combine elements from both sources for something great altogether. But in the meantime, I hope Meryl’s site makes for a fine addition to my little portfolio.

Blaming the messenger

I’ve been studying the CSS for the SlatyStain theme; it’s a pretty ingenious use of image backgrounds to layout the boxes and all that. I’m looking into using similar techiniques (like faking rounded corners using a header BG image, but I don’t do rounded corners) to improving Shiva’s CSS, because I am having problems with how this site looks in Safari (links to 70K jpg, btw).

I don’t know if it’s a CSS thing on my part or a Safari bug. I don’t have a Mac, and though I am not interested in getting one (especially just to make sure my designs look consistent), it would be nice to get to the bottom of this problem. Piecing together images just so that I can work around bugs seems almost like a more time-consuming method of applying CSS hacks, and at this point it isn’t laziness nor refusal to take upon a challenge that is stopping me from doing the SlatyStain techniques, it’s that I believe in making near-perfect CSS. You know what they say, in theory, perfect code should be rendered across user agents perfectly. It’s the user agents that get it wrong.

I’ve experienced a similar problem with a few friends and the topic of RSS. I know for a fact that WordPress publishes valid feeds. Then, why do I have friends complaining to me that their RSS readers don’t show the site to be updated, or that they are getting errors? I have always hated to break it to someone that they aren’t using the right tool; it’s the same as someone using Safari complaining to me about the look of my site and telling them to go use, heck, whatever the fuck it is that shows this site right in a Mac.

But at one point, that’s how the bridge gives: I design with standards in mind, and two browsers in practice. I have minor workarounds (like jogging paddings here and there, using clearing divs, etc) but altogether I don’t have major hacks that drive my code crazy.

I’ve drawn the line: I will not be responsible for a software developer’s erroneous application of standards. And if the bearer of bad news in this case is the browser, then yes, the blame is squarely on them.

CSS positioning, revisited

A comment by Prof. Chris Lawrence on my previous post on CSS positioning got me thinking of a couple of things. Here’s what he said:

CSS positioning gives me a massive headache. I used absolute positioning for the sidebar and floated the main body to the left (and fixed the width of it so it doesn’t flow into the sidebar). And I use percentage widths.

It seems to more-or-less work.

Not to malign his CSS skills, nor mine, but plenty of us really have a hard time getting the hang of the box model, especially when we are already in possession of a codebase that works. We know it works, we can use it, but we dont’ really understand it. It happens not just among web stylists but engineers, biologists, doctors… It isn’t so much a plague but it is important that understanding be arrived at, even if just for the sake of knowing how to do something from scratch.

One thing that I have grumbled about in the past that I only recently understood is the fact that CSS, on the surface, has no mathematical expressions built in. Superficially, we can’t have a CSS rule that says: {width: [take the width of the containing element minus a certain amount]}. Truth is, margins and padding—box model bugs notwithstanding—are the way we do CSS math.

On a different note, I have been contemplating about contributing a theme to the huge array of WordPress themes available, but my conversations with Podz have made me change my mind. Instead, in the coming days I will release a basic HTML page that uses the Shiva codebase along with notations for positioning, etc. It’s going to be ugly, but it will be something that you can download in a zip file and test on your local browser without having WordPress at all. The positioning rules I use are common usage anyway, but I guess it would be a better contribution, especially to those who actually want to understand how my shit works, than for me to give away a drop-in theme that could be replaced on a whim. I’d rather help someone come up with a design they like that would last them for as long as they want.

CSS positioning question

Most sites that use a two-column layout—one like mine, for example—use the float property to move one section to a side and have the flow push the next to the other. Here’s a quick and dirty mockup of what I am talking about:

Box Model mockup of the CSS positioning on this site

Now, the Classic WP layout used a relative an absolute positioning for its sidebar. When I was developing Shiva I tried to use the Stopdesign method of absolute positioning something inside a relatively positioned box, but my colossal sidebar did something like the next mockup:

Bolx Model mockup of the CSS positioning that Classic WP had

Now, the question at hand would be, could the same layout on this site, without running into overflow problems, be achieved using relative positioning for all three boxes? (Red, black and blue.) Like so:

Box Model mockup of CSS positioning whose possibility is dubious at this point.

By what I know, I don’t think so, but if it could, it could solve my problems with floated elements.

UPDATE: For one thing, if I DIDN’T use a floated box anywhere in my content, and I posted an image that was too wide for either box the layout wouldn’t break. It would just run on past the box.

UPDATE 2: Just so we’re clear on the order of the document structure itself, the black box is a containing div which wraps both Blue and Red, in that order. I don’t do my sidebars early in the document.

Web design question

Are rounded corners really worth those one or two extra divs?

Additional thoughts: Considering how Coldforged’s methods (using a full background image to have a “faux div” and having Mozilla-compatible CSS rounded corners) are a bit more tasty, I am focusing the question on the “old method,” although since I never really tried it and am not interested in doing so, this whole question may actually be a waste of time.

Note to self: these are not the kind of questions to be pondered after the day I just had. Details? Oh. Never mind.

When creative types attack

The 2004 Republican National Convention website (screenshot) tries to dust off the boring, stuffy, religiously authoritarian stigma associated with Republicans in exchange for a look that reminds me of hip online clothes stores: DC Shoe Co. USA (Flash site, be warned; screenshot), Pacific Sunwear (screenshot), and American Eagle Outfitters (screenshot). Could it be that the creative types that “hip” Democrats used to hire until they decided that a dead-serious, un-hip look (screenshot) would be best for them moved over to design for the RNC site?

From Doc J, who wrote: The convention website is looking very un-GOP at the moment. It appears as if Gen X —or even the dreaded Gen Y — has taken over.

[Note: All screenshots are posted as JPG first of all to annoy Anne Van Kesteren (male), and second because it gave me the smallest file sizes for quality. They average 40KB.]