↓ Twitter is updated more often, so read it! ↓

Archive for the ‘design’ Category.

Take the 2008 A List Apart Survey for People Who Make Websites

I took the 2008 ALA survey, and you should, too

I took the 2008 ALA survey, and you should, too

I took the The Survey for People Who Make Websites on A List Apart, a website for for folks who make websites. it’s a fantastic survey, looking at many aspects of a website maker’s professional career, education, and background. I highly recommend taking it if you are, in fact, a person who makes websites.

To take the survey, go to http://alistapart.com/articles/survey2008. It takes less than 10 minutes.

If you’re from Pittsburgh, and you like Pittsburgh, you should mention it in the comment at the end. Say something about Pittsburgh being a great place for webkind because it’s cheap to live here and there’s all kinds of bandwidth available in its many data centers. There’s trendy areas and lots of opportunities to succeed starting one’s own company, getting a job with any of the startups here, or finding a position at one of the many established Pittsburgh staple companies (figuratively, not actual metal staples, folks; i.e. UPMC, Ariba, Highmark, etc.).

The vital importance of being printable

The most recent change to my blog theme is one which most of my readers will never see. I added a print media CSS style sheet to all pages on the blog. Go on, try it. Use your browser’s “print preview” function to see it.

Rarely do folks actually print a post from someone’s blog. If it is a blog which does see some kind of readership with an unusual habit for printing articles, e.g. a blog about education which professors frequently print and distribute to their students, then the author or designer usually provides a “print preview” link or the printing user simply deals with the output, however many extraneous pages it may be.

However, accessing this printable version, that is, a version that prints without advertisements or colorful site paraphernalia, requires that the user click on a certain location, an extraneous action often neglected by visitors in a hurry.

This most recent change came about when I actually did have a reason to print one of my posts, and I realized that I wasted approximately five pages of paper just to get a small post. Now, I could have easily specified a page range when printing, but who does that? Users want to click print and have the article in hand.

I hate wasted paper, and most sites use some kind of div as a constricting container for the body text of the site. These containers often occupy less than the width of a page of paper, so the content fills only a portion of the paper, rather than letting the browser decide the width of the text on the printed page.

Print media style sheets remove this extra action and allow the designer of the site to decide how the printed output of a site should look.

The WordPress Codex’s Styling for Print article mentions five key element IDs which are generally a part of every theme:

  1. #header
  2. #content
  3. #comments
  4. #sidebar (or #menu)
  5. #footer

These elements, and their children, are the ones that need to be customized to give a WordPress blog a printable look.

One can append his or her new print style sheet to the bottom of style.css using the @media print{} enclosure, or editing header.php and adding a whole new line, like I did. I prefer to have a separate file for easier code maintenance.

The most key part of my print.css stylesheet is the part which hides elements which have little use in a printed copy of any page of my blog.

#sidebar, #headerad, .search, #hmenu, #content .navigation,
#footer, #respond, #commentform, embed {
    display:none;
}

This is a screenshot of my Blogger Health Insurance article so you can see my blog design even if you’re viewing this in a feed or on a mobile device.

Screenshot used in the printability article

I used Ubuntu’s built-in PDF printer to produce these two print-outs of the site: one with the print style sheet, and one without it.

Open both of those PDFs side-by-side and follow the comparison table with me.

Feature Without print styles With print styles
Blog title Ugly default font, takes up a large amount of space. Subtitle looks like regular text. Title is displayed in intended font and with “Printed from” appended to it to make it look more professional (but it’s only printed on browsers which support :before and :after on elements). Subtitle is present, but smaller and italicized in order to be relatively inconspicuous.
Major Navigation Displayed in bullet form, previous and next entries listed Hidden entirely, as there is no need for them on a printed copy of a single article.
Article title Smaller than the blog title, and in the same ugly, default font. Largest text on the page so that it demands the most attention and can be easily spotted when searching through multiple printed documents. Font is displayed as intended.
Body text Body text is in the same, ugly default font as the headlines and titles, so it’s not differentiated from them. The links are in blue and will print gray on a black and white printer, so they will be virtually unreadable several generations of copies later. The body text is of a font different from the titles and headlines, as is very attractive. The links are simply underlined and are in black, so they will be just as readable as the remainder of the text even after multiple generations of copies.
Block quotations The block quotation is merely indented on the left side. It is virtually indistinguishable from the rest of the text. The block quotation bears a simple gray bar to separate it from the rest of the text, as well as having forced, justified margins.
Article length All of the text is large, so the printer needs three pages to get the whole article, including the categories and tags. The text is smaller, but still very, very readable, so it requires half of the space: only a page and a half.
Comment box Shown. Hidden. It’s not needed in a print-out!
Sidebar Shown, and it takes approximately four pages to show it entirely. Hidden: it’s virtually not needed in a print-out. It’s purely navigational, save the Twitter feed. Even then, if the user needs to print out a Twitter status for some odd reason, he or she can click on the associated link and print the status from its twitter.com page.
Footer Shown, takes up an inch or two on the page. Hidden: it doesn’t contain any information useful in the article. I could (and really, should) have a copyright notice in the footer which is displayed on both the screen and the print version.



If you look at this post in Print Preview, you’ll see a message in the code block. My print format truncates after 80 characters (I think). While this is usually not a problem, since my code blocks are generally meant to be copied and pasted instead of typed, I decided to include a short message at the top for browsers which support :before on elements in CSS.

Designing a decent print style isn’t very difficult. That very simple design took me just short of an hour. That hour of time infinitely increased the readability of printed copies of my blog, and completely eliminates the need for any kind of “printer friendly” link within the article metadata. Visitors to my blog who are so compelled to share my articles via sneakernet and hard copy won’t have to waste paper or ink printing unnecessary parts of the site design and can focus on what they want the most: the article text.

Check out the Styling for Print article at the Codex for more information and tips. Also, check out my print style using Print Preview and tell me if it doesn’t work for you!

Whoa, Vista really does suck

I’ve used Ubuntu 7.10 (Gutsy) nearly exclusively for approximately a month as of today. I’ve used Windows XP here and there, but only for gaming or using a program such as OCCT that doesn’t have a Linux equivalent (if you, dear reader, know of a PSU voltage graphing program for Linux, please let me know in a comment).

Today, I helped my grandfather set up a new computer he’d bought during the summer. It’s a Compaq with a Celeron 365, 512 MB of RAM, a Radeon XPRESS 1100, and Windows Vista. It crawls. It’s my first experience with Windows Vista, and it was horrific.

The computer took more than forty minutes to uninstall Norton Antivirus, a trial of which had expired before my grandfather had even used the computer. Windows Explorer whited-out windows constantly because the computer was so loaded down with bloatware, including Yahoo! Search, HP Advisor, unnecessary, constantly intervening programs asking for Internet service provider contracts (grandfather already has an ISP—NetZero).

I can’t believe that Compaq could conscionably sell a computer like this.

I hooked him up with Firefox and Thunderbird, and attempted to install AVG’s free edition, the best free anti-virus available for Windows. It failed, though, because the version I had on my toolkit flash drive was the version just prior to Grisoft’s addition of Vista support.

Ridding this thing of all of the unnecessary crap was virtually hopeless. I would have liked to outfit the computer with Gutsy, but I didn’t have a CD more current than Edgy with me (700 MB on dial-up = fail). There’s also no one I know around Louisville who has enough Linux experience to help him out regularly, and I live 420 miles away.

Honestly, Vista feels like a beta of an operating system. I turned off the Aero eye candy in order to speed things up a bit, but it didn’t help significantly.

Now, after having used the latest in Linux (Gutsy) and the latest in Windows (Vista), I’m even more convinced that the Linux desktop experience is less intrusive, quicker, more usable, and, well, far superior to its Microsoft-pushed counterpart.

We’ll see in a few months how Mac OS X is—I plan to get one of Apple’s rumored ultraportables, should it materialize.

Update: Two User Access Control dialogs just to rename a shortcut on the desktop, neither of which say anything about what the user is doing? Excessive bullcrap. A single “Are you sure?” dialog would suffice. If this is indicative of the rest of the Vista experience, I think I’ll stick with Windows XP for my Windows needs.

Political junk mail: Christine Donohue

I love politics, I really do. However, I really hate political campaign junk mail—the kind of stuff that comes within a week prior to election day. Generally, a candidate gets party members’ address through the local election office and spams them with papers and postcards declaring the candidate to be the “most qualified” or the “most experienced” and whatnot.

I got one today for Christine Donohue, a Democrat running for Superior Court Judge in Pennsylvania.

Christine Donohue mailing

The problems with Ms. Donohue’s mailing are these:

  • It says she has experience as a statewide judge, and is the only one on the ballot who has. Where? I’ve never heard of her. When did she serve?
  • The PA Bar association says she is “highly recommended.” Why?
  • She’s apparently endorsed by labor unions across the state. I can confirm this because of a mailing my mother received from the PA State Teachers’ Association. But why?

As far as I’m concerned, Ms. Donohue has done nothing with this mailing but give me blog fodder. I’ve heard her name, yes, but I don’t know anything about her. Look at all the wide open space on the mailing. I’m sure the designer could have put some more convincing information, such as prior judgments, her schooling, her hometown, and such, rather than a couple short lines of 60-72 point letters with sweet nothings.

Dealdotcom.com to go live tomorrow

There’s this new site called Dealdotcom.com that is basically Woot.com with two tier profit sharing. That means that you get a certain percentage, here 35%, of the profits of the purchases of people you recruit and you get 15% of the profits of the people they recruit.

Let’s say that you recruit two people who then also recruit two people. You’ll have six people in your tree. Let’s say they all buy something that is $100, but the profit is only $10. That’s $20 in tier one profit, and you’ll get 35% of that, or $7. That’s $40 in tier two profit, and that’s at 15%, so you’d get $6 there. $13 for not doing anything? Not bad. Not bad at all.

I did a little WHOISing and found that the guy who runs Dealdotcom.com is Marc Quarles, a somewhat well-Googled Internet marketer. Dealdotcom.com has a private domain registration, but the domain registration for Dealdotcom.com‘s name server domain is in his name. I confirmed this by visiting the first post on the Dealdotcom.com blog, which is authored by Marc.

I signed up, as it seems like a pretty good deal to me. However, I would have liked to not have to give my address and phone number up front. I think Dealdotcom.com would have more users if visitors only needed to create an account up front, then were prompted to add an address/phone number after confirming. It’s also going to need a captcha!

Also, there’s a field for a Tax ID# on the account page of Dealdotcom.com. This means social security number for most people. I think Dealdotcom.com would save itself a little bit of hassle if it relied on its users to take care of their own taxes. I won’t fill this in because I don’t know Dealdotcom.com well enough to trust it—it’s a safety issue. Additionally, the form is not secured via HTTPS. There’s no way in hell I’m submitting my SSN via an unsecured connection. However, upon closer inspection, the Make Money page of Dealdotcom.com does say to get an Employer ID Number from the IRS since, technically, as an affiliate, you’re an independent contractor:

As an affiliate, you don’t work for us, you’re an independent contractor. That means we don’t withhold taxes on money we pay you – it’s up to you to pay your own taxes. Someone has to pay taxes on the money we pay you, and it sure as heck isn’t going to be us! Thus, we use your Tax ID Number to report your earnings to the IRS.

Another big missing feature is the ability to delete your own account on the account page. I fancy that an email to Dealdotcom.com customer support could handle that, but, nonetheless, I want to be able to delete my account and my information from the Dealdotcom.com system for any reason, at any time, and immediately. The privacy policy is very short and to the point, though, and it clearly states that Dealdotcom.com won’t give the information out except to shippers of the items you purchase.

I would really like to have a name attached to Dealdotcom.com officially. It would add to the credibility of the fledgling site, as well as generate interest in the man or men (or women) behind the site.

I hope to generate a stalwart and steadfast network of people, so have at my affiliate link and let the commerce begin!

Really sweet window effect for Firefox users

When I was working on the previous post, I went to Arby’s web site and found a really, really neat window effect. Shortly after the site’s intro ends, the whole browser window shakes!

I extracted the code and simplified/beautified it a little (it was already pretty easy to follow) for your enjoyment. Check out the page I made for it, the shaking window effect.

Biased photography example, 2007 April 25 edition

I ran across an article today regarding Rep. Dennis Kucinich’s efforts to impeach Vice President Cheney.

Open that link in another tab and take notice of the picture of Kucinich.

That’s a very biased picture. First of all, his mouth is wide open, which instills a “he’s a loud-mouth whose piehole is always open” thought. Kucinich is already diminutive in stature, and the picture makes his head look odd-shaped.

A better picture would have had him making a face or pointing. An appropriate picture would have been bigger and shown his environment, as well.

15 tips to choose a good text type

Juan Pablo de Gregorio has a very interesting article about 15 things to keep in mind when choosing a text type/font.

In addition to what he’s mentioned, I keep these things in mind:

  1. Sans-serif for headlines and titles, serif for body copy, or vice versa
    • Visually separate headlines/titles and body copy in more than just text size and decoration/weight. The reader will be able to pick out headlines/titles quicker.
  2. Line height
    • Some fonts have a very, very high line height. While whitespace between lines of body copy is very important and visually pleasing, too much can make the text seem too large or indicate that there was an error in printing or layout. Most desktop publishing programs (and CSS, too) have a way to adjust line height. As a rule of thumb, I use a line height one-half point larger than the size of the text for body copy, and the same height for headlines/titles.
  3. Letter spacing
    • Pablo de Gregorio does mention it, but I’ll add a bit. For newsprint (not necessarily for the web!), it’s beneficial to adjust the kerning so that the letters are almost colliding. This saves paper space! It’s amazing what a kerning of -1 or -2 will do to text, allowing for more room on the page for text. However, keep it consistent–don’t adjust per paragraph or article, but use a standard style throughout all of your body copy that keeps things the same everywhere.
  4. Web-safe fonts
    • When laying out for the web, making sure that you’re using fonts that the majority of users will have. I’ve read and adhere to two very good articles about this topic.