London-based Levitate Architects came up with this ingenious solution to a book storage problem and created a loft-like bedroom nestled under the roof of the top-floor apartment.

(via kottke)

There are many ways to make websites run faster. In this section, you can discover performance best practices that real web professionals employ in their everyday work. These practices have improved the user experience for millions of users and we hope they are useful for other web developers.

Here at Wall St., we host some of the largest financial websites on the Internet. From The New York Times to E*TRADE and Barclays to Charles Schwab, our data centers serve content to millions and millions of users per week. It’s imperative our websites provide accurate market data, look good, are easy to use, and are fast. With so much information to relay, we’re pushing a lot of data (including scripts, CSS, images, etc.) through the pipe. So Nicole’s presentation was perfect fodder for our design and development teams.

A few highlights from her talk, with some links for your consumption follow.

• Nine best practices for designing and building faster websites:
  1. Create a component library of smart objects.
  2. Use consistent semantic styles.
  3. Design modules to be transparent on the inside.
  4. Optimize images and sprites.
  5. Avoid non-standard browser fonts.
  6. Use columns rather than rows.
  7. Choose your bling carefully.
  8. Be flexible.
  9. Learn to love grids.
• Watch her presentation on the YDN.
• PNG8 is the clear winner for images on any website. They’re smaller in file size than GIFs (I didn’t believe it until I saw it), and they support transparency in IE5.5 and IE6. No CSS filter hacks needed. If you’ve got a copy of Fireworks, you’re in business because Photoshop doesn’t help create PNG8′s transparency. If you don’t have Fireworks and are comfy with the command line, see this guide to making alpha transparency in PNG8.
• Embrace Smush.it — a web service and Firefox plugin created by Nicole and former co-worker Stoyan Stefanov. The tool allows web developers to upload images of any kind while Smush.it runs through a long list of compression algorithms stripping meta data and needless information from them before spitting them back to you in a Zip file. It all happens in seconds and a few tests we ran here — 15 images reduced in size by 320kb (99.18% compression rate) — yielded impressive results. Evidently, Smush.it is in the process of being adopted by Yahoo! which has immediately interrupted the service (but hopefully not permanently).
• Consider Object Oriented CSS, or OO CSS. Much of OO CSS is in the 9 best practices mentioned above. But it’s not what you think. It’s not object oriented in the traditional programming sense of the term. It’s object — as in a virtual thing: a module, a header, a sidebar bucket, etc. I had a hard time with this one in the beginning. Most of OO CSS is pure common sense — at least it is here at Wall St. Sit down, evaluate your designs before you start building, and determine a baseline for common elements across the site. Then piece together your CSS efficiently. Three really useful tips for page layout:
  1. Don’t use height-specific modules. Let the content determine the height. This is genius and must be recognized by designers. Vertical grids, not horizontal.
  2. If you have two or three modules with rounded corners that are different but look similar, just pick one and move on. “Users aren’t that sophisticated,” she said.
  3. Use grids to determine layout, and let the content fill 100% of the available space. This way two columns becomes three columns or becomes 6 columns and the content continues to just fit.
• Set aside a few minutes to watch her presentation on OO CSS. It’s not earth-shattering stuff, but she does make some interesting points that convinced us to approach web dev from a slightly different angle.

Thanks Nicole. Safe travels in India.

 -webkit-border-image

Launchpad HQ:

So for example, the image to the right is an original image from the iPhone. Its width is 29px. That breaks down to there being 14px on the left and right, defining the rounded corners and a 1px sliver which is the body of the button. So, in theory, if you were able to keep the left and right sides of the button stationary while expanding the 1px center piece, this would create a horizontally-scalable button with only one image.

But alas, how would we do this using only CSS? Well, I started digging around Safari’s ‘-webkit’ innards, and was able to to use the -webkit-border-image to accomplish exactly what I wanted.

This goes very nicely with the iPhone GUI PSD.

/* Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
/* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
0% { -webkit-transform: rotate(-50deg); }
/* Rotate a leaf by 50 degrees in 2D space at the end of the animation */
100% { -webkit-transform: rotate(50deg); }
}

We’ll see this in IE29.

(via)

Until some future version of HTML gives us new native controls to use in a browser, at Google, we’ve been playing and experimenting with controls we call “custom buttons” in our apps (among other custom controls).

(via)

(via SimpleBits)

For each and every PNG, GIF or JPG I sliced out of this beautiful design, Photoshop seemingly stripped the brightness and sharpness from the images. My template’s images looked perfect in Safari, Opera, and IE—even IE6!—but not in Firefox. Firefox, in which I do my initial development, is apparently the only browser in the market which acts this way: (I eventually learned) it cannot read color profiling embedded in images. Let me say that differently: Firefox 3 can read profiles, but they’re turned off and only available with an add-on or some configuration changes. I changed every possible setting in the Photoshop “Save for Web…” dialog with no success.

After further snooping and a little detective work in our design department, I learned my version of Photoshop was embedding a color profile—without my knowing—and this profile wasn’t “generic.” The generic profile means Photoshop won’t “color manage” your file and save it out to whichever format specified in true color. Interestingly enough, CS2 was making matters worse for me. I hadn’t yet upgraded to CS3 at work, so after doing just that, I followed these instructions—which should be set by default in Photoshop—and am feeling happy again.

This is much better. See the screenshot below.

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

In 1961, when Mr. Wood bought the house with his ex-wife Joan, who is also an architect, for $3,600, it had been empty for two decades. All of its 65 windows were smashed, and its slate roof was wide open to the sky. Vandals had been creative: on the second floor, the interior shingles were embedded with marbles (they still are), which had been blasted there by some sort of firearm.

On three sides, four-by-eight-foot plywood signs proclaimed: “For Sale. See Any Broker.” “So we did see any broker,” Mr. Wood said. “And he told us the owners were asking $5,000 but they’d take much, much less.”

Calling all designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites. It is time once again to pool our information so as to begin sketching a true picture of the way our profession is practiced worldwide.

Possibly the most important invention of the past century, the web is undeniably one of the most robust engines of knowledge transfer, political and social change, artistic endeavor, and economic growth the world has seen.

Remove the web, and billions in trade disappear. Websites enable people who can’t walk to run to the store. They bring knowledge and freedom of thought to places where such things are scarce; make every person with a connection a citizen of the world; and allow every citizen to be heard.

Yet nobody bothered to conduct a serious inquiry into the working conditions of people who make websites until A List Apart launched its first survey in 2007.

Last year nearly 33,000 of you took the survey, enabling us to begin figuring out what kinds of job titles, salaries, and work situations are common in our field.

The survey takes about 5 minutes. Take it now.

I’m still running WordPress — which is even better than ever now in version 2.6 — and have applied WP Super Cache for public-facing pages, plus Google Gears for local “turbo” mode. Overall, the pages are on this new site are startling fast. The Flickr photos in my footer are cached smartly, too, thanks to FlickrRSS.

The biggest switch of all is the move to a new domain: markhealey.org. I own the .com and the .net variations, but the .org suffix is most perfectly suited to this new site. It was fairly easy setting up .htaccess files to handle the heavy lifting for the many hundred of permanent redirects needed to get from markhealey.net to markhealey.org. One side affect of this switch, is that your RSS reader might show a few dozen “new” posts — sorry ’bout that. There shouldn’t be a single hiccup but be sure to let me know if you experience any issues. 

Drop me a line and let me know what you think of the new digs. The old site now lives at v4.markhealey.net.

I am in the middle of a site redesign, and this is one less thing standing in my way. I like 37signals’ take on MobileMe and IE6: I, too, am hoping this is the beginning of a trend. 

Forgive me if I sound harsh, but if your skill set is basically HTML and CSS, then I think you are worth maybe twelve bucks an hour. HTML and CSS are extremely simple languages anyone can learn in a weekend by picking up a good book or two.
…
So what is valuable? Judgement. Logic. Creativity. Ability to learn quickly. Ability to work under pressure. Experience. Empathy. Design theory. Design history. Opinions. Decisions. And so on. I’d like to think that a good 80% of what my employer pays me for is for these things. Hopefully only a small percentage of my salary is because I know CSS and Photoshop.

Via Inman.

What is it about people still using IE6?

Now, my website is clearly not the most popular on the Internet, so I can’t assume 47% of everyone on the Web is using IE6. But I get a significant amount of traffic. From all over the globe. Lots of my site’s visitors might actually be looking for the Other Me (explanation), however, the fact remains: it’s a lot of traffic. Maybe it’s not as clean of a cross-section view as, say, CNN.com’s or NYTimes.com’s statistics might be, but it’s it’s good enough for me.

And, I’m not going to pretend IE7 is a great browser, but it’s a giant leap forward from IE6. Even my infrequently-booted Parallels-run copy of Windows XP has updated itself to IE7. Get with it people; do yourselves a favor and stop using the world’s shittiest browser.

One of the first posts, “New Space“, shows off Wall Street On Demand’s newest digs. The company is growing at a sizable pace, and overflowing into this new office was natural — or so I’m told (I started here just days after the official move-in). Our creative director said:

It was interesting to take an IA perspective to physical architecture and design the space from a usability perspective. Our goals were to foster communication, help make new relationships, provide quiet in the storm, and give people a workspace that was professional (sorry, no dot-com foosball tables) while being adaptable and flexible to the myriad of uses that our team finds for their space.

We tried for art gallery + laboratory + library.

Check it out.

Not sure what I’m talking about? Find any story on the news Web site (here’s one for you), start reading it, and highlight/select any word and double click. A smaller new window opens with the results of a query automatically run for you.

A good user experience. I love it.

I say what he says:

“One way to judge the scope of an app is to think about how much time you’re intended to spend using it. There’s plenty of room for apps you use here and there for a few minutes at a time, or which you launch just once or twice a week. There’s hardly any room at all, though, for apps you work in for hours at a time, every day.

By this measure, Coda, the new app from Panic, is an epic.”

Kudos, John.

First, let me say if you haven’t read that article, do so now. If you have already, continue. Remember we started with a simple but obtrusive “halt!”? The code looks like this:

var needToConfirm = true;
window.onbeforeunload = confirmExit;

function confirmExit() {
if (needToConfirm)
return "Are you sure you want to leave?";
}

We modified the above to handle many more fields, and to compare arrays using a combination of functions afforded to us by Prototype, 4Guys, and others. You should view/download the full script to see what I’m talking about. All this excitement is of course about how this script can now process (check, compare, validate) all the fields on any form. When I discovered this I slapped myself on my forehead like those new TV commercials for V8. Doh! It’s easy:

On line 4, replace this:

var f = $$('div#myform input');

with this:

var f = $$('form#id input','form#id select');

Replace “#id” with your form’s Id. Using Prototype’s utility function, this creates an array of all the form fields and hands it off to our script… ultimately stopping a user if they made a change to any values, and letting them go if they have had a view-only session.

Editor’s note: The previous version of this script was downloaded a ton of times. I’m assuming folks are using it, and I’m positive there are ways to improve it. Comment away!

ColorJack: Sphere 

I can’t tell you how excited I was when I… oh, damn. It looks like Islip airport is already using it. Please see the screen shot below for a sample of the “Please read for easy navigation” technique.

SitePoint contributor Kevin Yank authored a post titled, “Microsoft Breaks HTML Email Rendering in Outlook 2007.” I didn’t even get past the opening paragraph before I started having heart palpitations. You may recall an article I penned last November on the topic of formatting XHTML emails for today’s myriad mail clients.

If support for web standards in browsers is improving slowly, then support in email clients is moving at a glacial pace.

Microsoft has officially decided to drop the IE-based rendering support from Office Outlook 2007 in favor of… you guessed it, Word. Great Scott!

I wouldn’t categorize myself as a Microsoft hater, but this decision ranks up there on the Top 10 Most Moronic Moves Ever Made While Trying to Win Over Web Developers list. For the first time in years, Microsoft releases an update to their highly used web browsing client which is significantly more supporting of web standards than previous versions. Yet, Redmond opted to use Word’s far superior web page rendering engine in Outlook. I am, of course, being as sarcastic as I’ve ever been.

The news, as bad as it is, is not the end of HTML emails in Outlook. We’ll have to redesign them to be thinner, with less emphasis on appearance and more on getting back to plain-and-simple content.

Unless Microsoft does the old switchero, with the impending release of the consumer version of the Office 2007 System, expect to redesign your HTML email templates in favor a much less instead of what IE7 offers — much more.

This version, fourth in the latest collection of WordPress-driven sites, is full of fresh code, content, photos, and — most importantly — me. If you want yours to go, I’ve even worked in a smooth print style sheet (but please print to PDF and save some paper if you’re just testing).

Since I’ve been burning the candle at both ends for the past few weeks, I have a backlog of great posts for my blog I’ll roll out soon. Stay tuned.

Enter stage left: Douglas Bowman’s Sliding Doors of CSS courtesy of ALA.

I added two tabs to my new view, repositioned them on the right side — which took some fancy footwork because this awesome technique only demonstrated the tabs as left-justified — and started the browser testing. With some minor edits to the CSS, my new tabs worked perfectly in almost uniform fashion, except in IE7. The browser correctly interpreted both of these declarations, including the Holly Hack (a.k.a. the Be Nice to Opera rule), previously undetected by IE.

#tabbednav ul { margin: 0; }
html>body #tabbednav ul { margin-bottom: -10px; }

A post on Zeldman.com helped me figure this one out, and allowed me to specify rules using a modified Holly Hack. This declaration targets Opera and Mozilla browsers, but all versions of IE don’t see it, including IE7:

html>/**/body #tabbednav ul { margin-bottom: -10px; }

Thanks to Zeldman and donovan.

Update @ nearly 4PM:
After further testing, Safari picks up my modified Holly Hack and improperly renders my tabs. I guess I’m going back to the drawing board.

Update @ just a bit before 4PM:
Ok, final update. I promise. In the end, I was able to make some modifications to one other rule and didn’t end up needing the negative margin. If anyone knows more about this “/**/” hack, ping me, I’m curious now.

If you have ever tried to send an (X)HTML email from your web apps, you and I both have a lot more to ask for.

I’m currently writing an application for a client of mine that’s rich in user interaction. In part, users can create accounts, verify email addresses, forget passwords, and more of the standard account-related functions. Needless to say, without any unnecessary overkill, we will be sending a good amount of emails to my client’s user base. I could have easily opted to send text-only messages, but the requirement included displaying a logo, bolding text, and other graphical presentations otherwise not available in text-only. So, without much hesitation, I charged ahead. Whip up some clean (and strict) XHTML, use loads of my already-fine-tuned CSS rules, pump in some content and we’re off!

Wrong. And this was just the beginning.

I use my Gmail account for testing — it’s convenient because all the messages get lumped into one conversation for easy review, not to mention the huge disk space and (my favorite) delete button closely within reach. But for all of Gmail’s successes, it sure wreaked havoc on my nicely-formatted XHTML messages. Evidently, Gmail strips every shred of code out of your email, and rebuilds it in its entirety before spitting it back into it’s wonderfully successful conversation view. Those unique div, span and other IDs? Gone. The short and sweet CSS rules? Gone, and definitely not working. Hell, even my one-line footer wrapped in a small tag didn’t render properly. I now know why I can’t read my itinerary confirmations from the airlines in Gmail.

To make sure I wasn’t out of my mind, I changed my testing email address to an account I manage with Outlook on Windows and Mail on the Mac. Naturally, the message came through looking as perfect as I could have ever imagined. I repeated this process with Mozilla’s Thunderbird and then webmail at Yahoo!, Hotmail, and AOL — all succeeded, but in different ways. Microsoft’s widely-used Outlook client performed the best (same goes for Outlook Web Access), followed closely by OS X’s Mail. Neither re-wrote my code. Yahoo! did better than Hotmail, but Hotmail’s new interface liked the HTML and CSS hybrid a little more than the old but it still wasn’t perfect.

I am fighting an in-browser application war! Here we have browser-based applications developed by the world’s largest software manufacturers performing the same basic functions displaying standard XHTML and CSS content from the same source — and it just doesn’t work. Grrr. In the end, it’s Gmail that is causing the biggest headaches.

Yesterday, I finished restructuring the code following tips I read about on this highly-useful Interweb (I love that old Verizon DSL commercial). Here are a few that helped me get going again:

• Don’t put anything in the head of your email template.
• Forget the love you have for your fine-tuned CSS document; there’s no hope of using it (as an externally linked file). You’ll have to drop all your classes and ids replacing them with hideous inline styles. If your email’s recipients use Gmail, you’ll need to do this one.
• If all else fails, especially with AOL, use a table to position your goodies. I can’t believe I typed that, but when it comes to this and saving time, it works.
• Have patience. I nearly tossed my lappie out the window on more than one occasion.

As of yesterday, my client’s customers are ready to receive fancy-schmancy emails. No matter which mail client, web-based or desktop, Mac or Windows, they’ll all see the same content — as it was intended by this designer. Now that it’s done and I’m filling out my time sheet, I find myself having a hard time justifying the large chunks of time spent formatting arbitrary (yet critical) emails when there’s plenty of other work that needs doing. It seems funny to me but after all these messages, like them or not, are part of your app and, more importantly, your client’s outward-facing marketing.

Visit Jude Healey Photography today.

Poor XSL
One of the reasons I’m discontent with the three biggies — Safari, IE7, and Firefox 2 — is their apparent blatant disregard for a designer’s freedom to exercise his or her right to a custom XSL—styled XML feed. I don’t normally spend too much time writing XSL documents, but for one client’s particular requirement, they wanted a custom XML feed page. The client’s user base, we anticipated, was not RSS-savvy and we’d hoped to ease them into the process for consuming news, regular updates, and more. So, enter a fairly simple XSL style sheet and the über—friendly appearance of styled XML. Not so in the latest versions of these browsers.

It’s possible that I haven’t yet found the setting in the browser preferences or the line of code that fixes it, but the aforementioned Big Three are overriding my XSL! (Opera handles the XML as intended.) They favor their own display of RSS feeds and bully mine out of the way. (See theirs. See mine.)

I’m not even going to try to explain why the software makers decided on this, so if you know of a fix, let me know.

Born from her passion for stopping moments in time and capturing them on film, Jude’s new business specializes in wedding photography in and around Charleston, as well as traveling to destination weddings around the world. Her services also include engagement shoots, and family and individual portraits.

C’mon, put your party hat on, and join in the fun. Check out www.judehealeyphotography.com today.