Everything old is new again this week on Friday Focus. This week: some 8-bit retro inspired websites!

Designs of the Week

Very cool take on the one-page personal site, where everything’s 100% pixelated, even the once-detailed app icons.

This is a nice break from all the overdone grunge, ornate, and gradient-ridden websites—just a moderate amount of sharp-edged elements. I love that the blog has low-resolution, pixelated icons to represent each post.

This is a softer take on the whole isometric perspective, hues and all. And it’s great that instead of a large landscape header, it’s a vertical background on the left.

Social Media Weekly

Design – The Medium is the Mess
“Yes, we can learn from the many years of work that went into divining rules of thumb for other mediums but we should also remember that the web is not just a new and different medium; it’s an ever-changing, ever-evolving medium.”

Programming – Fix It Fast: Rapid IE6 CSS Debugging
“So, is there a way to shortcut through some of the hair-pulling and learn good debugging right from the start? MAYBE. The following is my cycle of preventing, catching, and fixing bugs in IE6. If I could, I would email it to myself in 2004, but until I figure out how to do that, posting it here will have to do:”

It’s seems like whenever I create a fixed-width design, I automatically set it to 960px. This is no accident- after all, as it’s stated on the 960 Grid System site:

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

The problem, of course, with going with a fixed-width of 960 is that it’s not very nice to the people still using 800 x 600 resolutions. And, like it or not, there are people who refuse to move up to 1024 x 768- no matter how new or modern their monitors may be. My father-in-law is one.

Then I checked Hobo’s updated screen monitor resolutions, and they’re reporting that among the 124,727 visits their site had in the past three months, only 1.55% are using 800 x 600. The problem is that 1.55% is 1,684 visitors.

Now finding that out makes me feel a bit like a jerk. 1.55% sounds small, but over a thousand six hundred people is something. By fixing my width at 960, I’m serving them up a design that they won’t see in its entirety even if they have their browser window on full screen (and many don’t). Essentially, I’m forcing them to scroll to the right- something I never, ever want to do.

Now, I’m not denouncing 960px layouts- indeed, I’ll continue using them, but maybe I’ll stop and think more often about who the website’s visitors are. What age group am I designing for? Are they more likely to be on older monitors?

I’m interested in hearing from you about what fixed-width sizes you use in your design.

In my last post, I talked about a couple reasons why partnering is better than outsourcing. Today, I thought we’d look at 3 common online business partnerships.

First, there’s the developer and designer partnership. My friend is a gifted web developer. A couple years ago, he tried to start his own business where he built websites from scratch for individuals and small businesses. However, his business didn’t grow very much because his design skills were lacking. Fortunately, he met a designer a couple months later and they decided to form a partnership. With the designer’s help, he was able to land bigger clients including a private college.

Second, we have the writer and designer partnership. This often plays out in the ebook industry. A writer will write an ebook but he needs an ebook cover to capture the attention of prospective buyers. Also, instead of just having an ebook cover created, many writers will also have the designer format the ebook with interesting fonts, cool icons, and attractive graphics.

Here’s a good example. Lose Control of Your Marketing! (pdf file) is an free ebook by David Meerman Scott. He partnered with Doug Eymer, who designed the ebook. If you check out the ebook, you can see how Doug made it much more enjoyable to read than if it was just plain text.

Third, we have the marketer and business owner partnership. This is when a marketer promotes an existing business for a share of the profits or equity. This type of partnership can be lucrative for the marketer if she does a super job while the business owner doesn’t have to worry about losing money in the deal.

Of course, there are many more types of partnerships. In fact, you can literally mix and match the different people in the partnerships I mentioned. A writer could work with a developer to start an online magazine. A marketer could help a designer get more clients. That’s the beauty of partnering. You can add value to your business without spending a lot of money by finding a qualified web worker who has the skills you don’t have.

What are some other partnerships that you’ve seen on the web?

font-family is one of the most widely used CSS properties, and with good reason: sometimes you can change the entire feel of a design with this one property. But selecting fonts for your stack also greatly influences your design’s readability and accessibility- which, ultimately, is what’s most important in any web design. That is, if you want your visitors to actually read your content.

The font stack I use most commonly is:

font-family: Arial, Helvetica, Tahoma, sans-serif;

Use this, and you can’t go wrong- because nearly everyone has Arial, Helvetica or Tahoma installed on their computer. And in the off chance that they don’t, the “sans-serif” in there will use a similar font that they do have installed.

Sometimes, though, if I’m feeling a little saucy- or have fallen in love with a particular font- I’ll do something like this:

font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;

By sneaking in a “Myriad Pro” at the beginning of my font stack, I’m making sure anyone who has the font installed will see it when viewing my page. (This is just an example, by the way- I’ve long gotten over my love-affair with Mr. Myriad). The point is that you can do this with any font of your choice- just as long as you keep the rest of the “safe” fonts in the stack.

Now, Myriad Pro is a fairly common font. It was Apple’s official corporate font, used in Wells Fargo’s identity, and comes packaged with Adobe Reader. So it’s safe to say that a lot of users will have it installed. But what if the font you want to use is a little more obscure? You can do the same, tacking it onto the front of your font stack- or you can take control and use sIFR or FLIR, two methods that are easy to use- although a little more involved. Still, I recommend that you use these methods only for headers or titles.

When deciding what fonts to use in your stacks, I recommend taking a look at Code Style’s Most Common Fonts List, which is updated regularly, and is totally fascinating for geeks like me.

What fonts do you use in your stacks? Do you use sIFR or FLIR?

*Update: Also check out Cufon, another alternative to font embedding. Cameron Moll discussed it here, with some lovely test pages. Thanks to Wes Baker for his comment!

It doesn’t happen a lot on Friday Focus, but this week we have a bunch of websites featured, all dressed up in brown.

Designs of the Week

Social Media Weekly

Design – How Much Intelligence Does Good Design Really Require?

Design – An Ode To border-radius

Programming – Using XAMPP for Local WordPress Theme Development