Elliot Swan

If you’ve looked at any of the stuff to be included in CSS3, you were no doubt bouncing off the walls in excitement until you remembered how long it tends to take some browsers to support that kind of stuff.

But some good news: Quite a bit of this CSS3 awesomeness can be used right now to spice up your designs. Some (most) of it will not render in all browsers equally (generally those of the IE variety), but websites don’t need to look the same in every browser–nor should they. Just because IE6 users can’t see some fancy effect doesn’t mean everybody shouldn’t. Similar to how those watching TV on a standard television will not be able to see HD, users on older browsers need not get the same experience as those on newer browsers as long as they see nothing wrong with the site.

But enough ranting and onto the good part. CSS3 properties you can use now and how to use them:

Read more…

In a world where everything–including your competition–is just a click away, grabbing and keeping my attention is the first step to making me buy your stuff, subscribe to your content, or whatever else you want me to do. It’s also a part of the second step, the third step, and every other step when keeping me happy afterward. 

Thanks to clients who delay coming up with content and that wonderful Latin we all know so well, design and content is often separated. But this is a major disadvantage.

Graphic designers don’t design a product ad without good copyrighting, so why do web designers think they can design websites without good copywriting? While there may be some instances where writing the content and designing the interface cannot occur simultaneously, just as much emphasis should still be placed on making content accessible to an online audience.

So how do you do this?

Read more…

The CSS text-shadow property is now supported by Safari 3+, Opera 9.5+, and FireFox 3.1 (currently in beta). So when is the time to start using it?

Now.

Certainly not everybody will see it, but better to have some people experience it than nobody at all. That is, if you think before you type and don’t abuse it. When used correctly, text-shadows can be a great addition to a design. If you aren’t careful, though, it’s quite possible for them to end up as bad as the next blink tag.

Read more…

It all started with a Moleskine.

I’m a big fan of brainstorming, so naturally I got to thinking. I wrote down what I wanted to communicate, what elements and pages I needed to have, etc.

Next came the grid. I decided to give 960.gs a try, first starting off with the 12-column grid. After a couple hours of playing around, I ended up switching over to the 16-column and came up with this first design:

Read more…

If you’re viewing this via your favorite web browser, you’ve probably noticed that things look very different than last time. If you’re reading this from your favorite RSS reader, come on over and check things out.

I’ll be providing many more posts in the near future with all sorts of things learned from this redesign (subscribe to the feed if you haven’t already to keep up with those), but I just wanted to do a quick overview post to quickly point out a few things.

Read more…

With the redesign on its way and actually in the browser testing stage now, I’ve had the fortune to spend a few quality hours debugging IE as of late. Generally I don’t have too many un-fixable issues with the browser and any PNG issues can be easily solved with a filter or some JavaScript, but today’s pushed me over the edge.

Why it’s usually no biggie.

As I’m sure you are aware, IE 6 doesn’t fully support transparent PNGs and generally display them with ugly gray backgrounds. Generally this can be solved by using a filter that IE does support as follows:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="theimage.png", sizingMethod="crop");

There’s also a brilliant solution that avoids the filter and can be used through the DD_belatedPNG script.

Read more…

Google “web design tutorials” and you’ll mostly find Photoshop tricks and tips, CSS 101 articles, and how to make graphics straight out of the ‘90s. What’s often overlooked (yet equally important), however, is what happens before all of that–the brainstorming.

Read more…

A lot of what I was/am trying to accomplish with the Tumbl3 redesign is a certain amount of centralization and connectivity between the various fragments of my online presence. So far I’ve greatly simplified the design to allow for various content types, built and integrated TweetRemote, and have now added a lifestream that runs off FriendFeed.

Besides being an excellent tool for all the stalkers out there, I’m hoping it will prove to be an easy way to share all the cool stuff I find and possibly do around the interwebs. It does not get sent through the RSS feed for this site, so you don’t have to be worried about being overloaded with information. However, if you do want to keep a more watchful eye on it you can subscribe to me on FriendFeed or keep a watch on this feed (or just randomly check the page–some things are just more fun the old-fashioned way).

The code is very easy to set up for any account (really only requires changing one variable), so it may also get a public release in the near future.

What other ways have you seen or used for controlling the fragmentation of online presences due to the social web? Do lifestreams interest you?

Cool animation by Glenn Marshall done with Processing.

Designing doesn’t start when you fire up Photoshop. This may be where the design starts to materialize into a visual form, but just as important as that is what you do before Photoshop–the planning. I’m not talking about sketching out a rough design in your Moleskine notebook, though that’s great too. I’m talking about getting to know your users.

If you were starting a business, you’d hardly just buy a building and start putting stuff in it now, would you? Nor should you be doing the same with your designs. If you’re going to be designing something, first you need to know what and whom you are designing it for.

Oftentimes user profiling involves a lot of time and a lot of money. Surveys, complex analysis, and teams of over-priced professionals are ctertainly one way to go about it. However, most design jobs provide neither the time nor the budget for that kind of stuff. Luckily, for most design jobs you really don’t need all that to get a good idea of who your target audience is and what they’re about. Really all you need is a moderately-sized brain and a good idea of your product, and I think at least most of us can afford that.

Read more…