RSS ? Recent Blog Posts

Blogs » Web Design
 

Pixel Perfect

: Web Design Blog

You can stick your em-dash up your dot dot dot

by James Edwards

So once again I find myself intensely irritated by a growing wave of practice that is touted as correct when its correctness is entirely arbitrary. I’m talking about the finer points of typography.

A recent post by Christopher Phin, called Top Ten Typographic Mistakes Everyone Makes really exemplified that for me (sorry Chris, nothing personal!) with remarks like this:

there’s little chance that using a period instead of an interpunct will obscure or confuse your meaning – but they are nevertheless wrong

And this:

those aren’t proper quote marks; they should be sixty-six and ninety-nine quotes

The use of interpunct is not more correct than period, the use of straight quotes is not wrong, and (my personal bugbear) the use of three dots instead of ellipses is perfectly fine. Exactly as with grammar, the details we’re talking about here are not rules, they are conventions, and no more right or wrong than the collective will that made them conventional.

We see similar examples in grammar, for example over split-infinitives. According to the prescribed rules of grammar it’s wrong to split an English infinitive: to go boldly rather than to boldly go. But language is a living thing and it changes all the time. Really, the …

 

Real-world Gloss Effects in Fireworks

by Alex Walker

Web 2.0 glitter: Shiny, Shiny, Sha, La la la...The internet — particularly its Web 2.0 version — is a very glossy place. In fact, I think if far-away aliens ever eavesdropped on our wireless internet transmissions, they’d conclude that humans must live in a hard world of polished marble, wet glass and high-gloss plastic.

While the gloss effect is probably getting a little ‘long in the tooth’, the main problem I have with it is the overall boring perfectness of the reflections. On the web, wet floors are always laser-cut mirrors, and glossy buttons always seem to exist in a perfect, evenly-lit vaccuum.

Real world reflections and wet floor effectIn the dirty, scratched and smudged real world, wet floors have dull spots and distortions in them and glossy surfaces warp, blur and reflect the patchy, organic world they inhabit.

Without wanting to wind the fashion clock back to the ‘distressed 90’s look’, you can give your reflections a bit more character without too much more work.

The Method

1). Let’s start with a rounded rectangle — …

 

Adobe Photoshop Express Launches

by Alex Walker

Well, we’ve known is been in the wings for quite a while, but the beta for Photoshop Express — Adobe’s first online application — finally touched down this morning. Although they undoubtedly bring a mammoth graphics reputation to the table, they may not have it all their own way as there are already some well-established and classy competitors in this new arena — specifically speaking Picnik, Pixer, Phixer , Pixenate and Fotoflexer.

First impressions:

1) The sign-up process wanted to know which country I came from — as long as it was the US. Come on guys! Are you FedExing the app to us? DO computers use a different gauge of Interweb in Europe?? Have the terrorists been waiting to use Photoshop Express to make particularly visually attractive evil plans?

Silly stuff. Don’t ask questions that only have one answer.

2) The interface is a basically an online Adobe Bridge, with lots of blacks and charcoals making your imagery appear richer. If you’re a Bridge fan, Express will feel very familiar, although being a consumer-level product, you would have to question how many users could draw on Bridge experience.

Even if you’re not a Bridge fan (like …

 

Making ‘IE6-friendly’ PNG8 Images

by Alex Walker

For all the recent buzz and bubble generated by the IE8 beta, the slightly depressing reality is that IE6 is still going to be occupying more of our thoughts (and nightmares) for the foreseeable future. Even as IE7 has begun to gain marketshare, I can’t say I’m spending any less time writing IE6-specific code than I was, say, two years ago. Sad but true.

Likewise, if we ever thought we’d encountered all demons IE6 had to offer, we were mistaken there too, as George Reilly recounted in an interesting read last week.

Despite the fact that George draws upon seven years of ‘Microsoft insider’ experience, he spent 5 months trying to eliminate persistent, ‘app-killing’ IE6 browser hangs when using the garden-variety PNG32 alpha-transparency hack.

The fact that even he eventually admitted defeat and converted his images to PNG8 could be viewed as a sobering lesson for us all. Can you be 100% sure your PNG32s aren’t locking up at least some of your IE6 users’ browsers?

Of course, these things are often a trade off.

  • Do you go for higher quality PNG32 images for most
 

PNG32 hacks and IE6. Is it worth it?

by Alex Walker

Last year you might remember me running through what I thought were the under-appreciated qualities of an image file format that seems to slip under the radar — the PNG8.

Namely:

  1. Small files sizes
  2. Graded alpha-transparency in all current browsers
  3. No requirement for potentially brittle hacks requiring JavaScript, ActiveX and/or other proprietary technologies.

Although, admittedly, you had to be prepared to slightly lower your expectations of the render in IE6, we considered the trade-off generally worthwhile — particularly as you begin to hone your skill for producing PNG8 images that degrade nicely in IE6. Personally I haven’t ruled out using PNG32 in certain situations, but PNG8 is certainly my weapon of choice.

Bearing this in mind, it was great to read a really interesting post on PNG32 hacks and IE6 by George Reilly on the new Cozi Tech Blog. For a little background, George spent seven years working on IIS at Microsoft, and as such has two things most of us can’t claim:

  1. an array of hard won Microsoft ninja debugging skills
  2. a black book of Microsoft contacts to quiz about nonsensical IE6 voodoo

Nevertheless after deploying the time-honored IE6 PNG32 hack in …

 

Remove Color Casts Using Photoshop Lab Color

by Alex Walker

Color Correction is one of those things you don’t get a lot of practice on as a web designer, so I thought we might look the quick and mostly foolproof method I prefer to use.

What is it?Let’s start with a question. What is this? (see blue chip to the right). If you said, "it’s a particularly pleasant shade of blue," you’d be at least partially right.

However, you’d be only be 100% correct if you said, "a zoomed up section of Cameron Adams’ cheek," for, as you can see the photo below, the man in blue was the man of blue the day this particular picture was taken.

The Man Of BlueNow, this is a great photo, but it presented problems when I came to use it as his author shot on a book cover. While the blue tint looks pretty cool in isolation, it comes off a bit odd when placed alongside a handful of normal, pinky-yellow toned author shots. I needed to moderate the blue tint (or more correctly "cast"), …

 

99designs launches!

by Matthew Magain

99 donuts
It’s an emotional moment when a child grows up and leaves home for the first time. The parents fret about whether their little baby will be able to fend for themselves on their own. Undeterred, the child throws himself, wide-eyed and fearless, into the big, wide world.

Today, Lachlan, Mark and Paul officially separated SitePoint Contests from the family to launch 99designs.

The launch is only the first stage of the 99designs re-branding — some of the features are new, such as user pages and the credit purchase process. The really cool stuff, however, will be rolled out over the next month or so.

As a bonus, the credit balance of any former participants in SitePoint Contests has been copied across to 99designs, effectively giving users a stack of free credits that they can begin using immediately. See the official 99designs blog for more information.

On behalf of the team at SitePoint we wish you guys the very best of luck, and we look forward to watching 99designs grow!

 

99designs Logo Contest Winner Announced!

by Matthew Magain

The most popular design contest ever held on SitePoint — to design the logo for the next evolution of SitePoint’s Design Contests, 99designs — has come to a close, and a winner has been announced!

In what was by far the largest contest to date in terms of both entrants and designs submitted, Bonic’s simple design incorporating a sketched folder (indicating thumbnail sketches that are part of the design process) has been declared the winning logo that will be used to shape the identity of 99designs.

Here are some statistics about the contest:

  • First prize: $1,000
  • Second prize: $200
  • Number of designers: 311
  • Number of submissions: 1472
  • Contest length (days): 4
  • Number of star ratings left: 280
  • Number of contest comments: 191
  • Number of feedback comments: 1304

I’ve written before about what makes a good design contest, and there are a couple of lessons that contest holders can take away from this contest to ensure that future contests are successful. For example, in addition to offering a reasonable prize and being prompt and diligent when leaving feedback, a winner for this contest was selected even though the design still needs some tweaking.

Another decision that made this contest successful was …

 

The Best Web Design Comics

by Matthew Magain

Many web designers are also closet comic-book nerds.

Andy Clarke came out of the closet at Web Directions South earlier this year when he spoke about finding inspiration for web design in comic book art.

I’ve noticed that a lot of other geeks have not only been embracing their love for comics, but writing their own. In fact, when a web designer or developer with a creative streak turns his or her hand to drawing comics, it can produce very interesting results. More than just a lunchtime distraction, comic strips about our profession can lead to insights about how and why we do what we do. Plus, keeping oneself abreast of what is happening in our industry includes not only knowing what people are talking about, but what they’re laughing about.

Seeing as a Google search for the terms “web design comic” or “tech comic” either throws up nothing or just a bunch of rubbish, I thought I’d post my favourite comics about web design. I don’t pretend it’s an exhaustive list — I’m hoping you’ll help me out by listing your own favourite geeky comics in the comments.

First up, and my hands-down favourite, is Kopozky (http://kopozky.net). This is really the …

 

Design Contests Needs An Identity

by Matthew Magain

If you’ve been following the SitePoint development blog, you’ll know that the SitePoint’s design contests is in the process of being relaunched as 99designs.

Given the nature of this community, it seems only fitting that the logo design for the new site be opened up as a contest to the members of the community that use the site.

From the brief:

99designs is the upcoming evolution of the SitePoint Design Contests, and as is only fitting we are holding a design contest for our new logo. The logo must fit in with the designs for the new site. We are looking for a fresh, simple logo and are offering a prize of $1,000, and we are guaranteeing that a winner will be selected and paid.

The contest went live today and will run for the next four days. There are already a handful of promising submissions, but if you think you can do better, get designing!

Currently experiencing some weird behaviour with Wordpress tags. Apologies to any readers who received this post multiple times in their feed reader. We’re working to get it fixed so it doesn’t happen again!
Fixed!

 

Sponsored Links

SitePoint Marketplace

Buy and sell Websites, templates, domain names, hosting, graphics and more.