This story is a bit long, but I promise it will be worth it, because it contains the two most important principles every designer must know and take to heart if you intend to do great work anywhere, under almost any circumstances, over the long, long haul of your career.Sticking To It – fresh from JZ in Automattic.Design
Hope you’re hungry!
Web Design and Typography
This is freakin’ awesome: Styling Text With SVG Filters from the Code School blog.
John D. Jameson writes great mini-articles about web typography and front-end development on his personal site.
Here’s a look at twelve kinds of italic typeface, with some notes on their cultural contexts, historical backgrounds, and practical applications: Italics Examined, from Hoefler & Co.
So you’ve seen a typeface in use – on a poster, in a magazine, on a website … and you want to know what’s the name of that typeface. Here are five useful tips to identify it: The 5 best Tricks to Identify a Font – Video by Typography Guru. Hat tip: Typewolf.
In the Magazine
Write a better class of CSS: Tim Baxter shows how to make our CSS as semantic and meaningful as our markup in today’s A List Apart: Meaningful CSS: Style Like You Mean It.
Rachel Andrew, Eric Meyer, Jen Simmons & I discuss radically new web layouts—for real this time—in Episode 115 of The Web Ahead, recorded live at An Event Apart: thewebahead.net/115.
Design For Real Life authors Sara Wachter-Boettcher and Eric Meyer chat with Jason Ogle on the User Defenders podcast: userdefenders.com/podcast/design-for-real-life/
Speaking of radically new web layouts, the future of web layout needs your input and feedback. Read and respond: A Revised Subgrid Specification, by Rachel Andrew.
Better CSS Drop Caps with “initial-letter” (hat tip: Rachel Andrew)
In April of 2009, in a post every web designer, publisher, or business person should read, Joshua Schachter told how URL shortening services like TinyURL and Bit.ly came to be, and why the latest ones were so addictive. (Missing from Joshua’s account of their utility is the benefit URL shorteners can provide when sharing an otherwise obscenely long link on the printed page.)
The prescient post concludes that, despite their benefits, such services ultimately harm the web, decreasing clarity while increasing the odds of linkrot and spam:
[S]hortening services add another layer of indirection to an already creaky system. A regular hyperlink implicates a browser, its DNS resolver, the publisher’s DNS server, and the publisher’s website. With a shortening service, you’re adding something that acts like a third DNS resolver, except one that is assembled out of unvetted PHP and MySQL, without the benevolent oversight of luminaries like Dan Kaminsky and St. Postel.
There are three other parties in the ecosystem of a link: the publisher (the site the link points to), the transit (places where that shortened link is used, such as Twitter or Typepad), and the clicker (the person who ultimately follows the shortened links). Each is harmed to some extent by URL shortening.
There’s more, and you should read it all.
One of Joshua’s recommendations to minimize some of the harm is that websites do their own URL shortening instead of relying on middlemen. I’ve done some of that here, via the ShortURL plug-in for WordPress. Thus I use zeldman.com/x/48 instead of a much longer URL to notify my friends on Twitter about a new comment on an oldish thread. Likewise, zeldman.com/x/49 redirects to yesterday’s big post, “Write When Inspired.”
Rolling your own mini-URLs lessens the chance that your carefully cultivated links will rot if the third-party URL shortening site goes down or goes out of business, as is happening to tr.im, a URL shortener that is pulling the plug because it could neither monetize nor sell its service.
tr.im is now in the process of discontinuing service, effective immediately….
No business we approached wanted to purchase tr.im for even a minor amount.
There is no way for us to monetize URL shortening — users won’t pay for it — and we just can’t justify further development since Twitter has all but annointed bit.ly the market winner.
The Short URL Plugin for WordPress installs automatically. It provides simple statistics, telling you how many times a link has been clicked, sets up redirects automatically, allows you to choose a custom link style, and more. You’re not limited to shortening your own URLs, although that’s mainly how I use it; you can also shorten third-party URLs, turning your site into a miny TinyURL. I’ve used this plugin for months, with nothing but joy in its cleverness and usability.
[tags]ShortURL, plugin, WordPress, plugins, joshua schachter, tr.im, bit.ly, URL, Twitter, TinyURL, web, usability, internet, links, security[/tags]
10 Things They Don’t Teach You in Design School. Via Designmeme. (Sorry for lazy post, but I’m at SXSW Interactive.)
A proposal for improving comments.
The Grid System is a resource for all designers to learn about the benefits of using grid systems, golden ratios and baseline grids. Fabulous. Via Coudal.
Short (2.5 minute) video of photographer George Del Barrio’s shoot of urban folk musician Rahsaan Salandy, for his upcoming album.
Mr. Williams emphasized many times that, despite its buzz, Twitter is still a tiny, two-year-old company with just 25 employees. “It’s good that the expectations are high, but give us a minute,” he joked.
Imagine loneliness so intense that you begin to notice the attractiveness of headset wearers in stock photos. Imagine time so heavy on your hands that you create a website dedicated to your sad little obsession. Imagine no more. Discover Headset Hotties. (From those wonderful people who brought us Instant Rimshot.)
[tags]links, twitter, grids, gridsystem, comments, conversations, stateoftheweb, survey, westciv, headset, hotties, coudal, filmmaking, photography, George Del Barrio, Rahsaan Salandy, Jason Santa Maria, WebDirections, Twitter, NYTimes, Facebook[/tags]
Over the weekend, I added my Ma.gnolia bookmarks feed to my blog post template, such that every post would be followed by links to and descriptions of the last five external web pages to have caught my fancy. Inserting the feed into the template was easy and took all of three minutes.
This morning, I removed the feed.
Why I inserted the feed
From 1995 until around the time Happy Cog worked on the Ma.gnolia design project, one of the things I wrote about here was other people’s websites. I did it because I was passionate about web design, and so were the people who read this site. And of course, writing about other people’s sites also provided a ready form and steady stream of content. From 1995 until about 2001, I wrote here several times a day, and had millions of readers.
Then married life, and a business that grew in spite of my lifelong effort to avoid commercial success, ate into my blogging time. Today I write less frequently and have fewer readers. In an effort to provide linkage even when I don’t have time to write posts, I added my Ma.gnolia feed to my site’s sidebar in 2006. (It’s still there, on my front page. You may need to scroll down to see it.)
A flaw in the design
Not everyone notices the Ma.gnolia feed in my sidebar, due to a flaw—one of many—in the way I redesigned zeldman.com in 2004. (I used to redesign this site several times a year, but haven’t touched it since Spring of 2004.)
When I redesigned zeldman.com in 2004, I thought it would be “neat” to make my sidebar’s linked text almost the same color as the background until you hovered over it. The idea being that the focus was on the site’s content, not all the little crap in the sidebar. The sidebar was like sand, and you, the reader, were like a beachcomber with a metal detector. Hover the metal detector over the sand, and you might find a quarter. Hover over my sidebar, and you might find additional content.
Like most “neat” ideas that aren’t entirely practical, this one required compromise in the execution. The result is a conventional sidebar with low-contrast text. Because of the low contrast, lots of people (including people with certain kinds of dyslexia) pay little attention to the sidebar’s content. So I need to redesign.
But meantime, slipping the Ma.gnolia feed out of the sidebar (on blog posts) and into the body of posts itself seemed like another neat idea. People who’d ignored the Ma.gnolia feed in the sidebar would now, finally, bask in its glory. Every post would end with the last five third-party links I’d reviewed. Neat, neat, neat.
Why I removed the feed
This morning I removed the feed from the body of the blog posts for a technical reason and a design/usability reason.
Technically, as we all know, it’s not a great idea to pull content from a third-party site. The third-party site can be slow. It can get hacked. It can even go down, causing one’s own pages not to finish rendering. (As I write this, Ma.gnolia’s server appears to be taking a little nap—an infrequent occurrence, although the server is often slow. As for my embedded Twitter feed, like yours, it suffers from near-constant narcolepsy.)
And from a design usability perspective, the idea just didn’t gel. For one thing, people would dig up old posts and write comments on them about sites newly added to the Ma.gnolia feed. Owing to the age of the posts, those comments were unlikely to be found by other readers. And as soon as the feed updated, the comments would become nonsensical, because they discussed content no longer found in the post.
So the feed is gone.
[tags]design, usability, ma.gnolia, zeldman.com, happycog, links[/tags]