Save as ICO
July 10th, 2008
Wouldn’t it be great if Photoshop could save an ICO file? Well, it can with this plugin:
http://www.telegraphics.com.au/sw/#icoformat
Thanks Toby. You got my $5 donation.
Archive
Archive for the ‘design’ Category
CSS vs Tables: Both are winners
July 8th, 2008
In response to a post question I’ll give my two cents regarding CSS vs Tables. First let me say that I’ve done quite a lot of UI coding. I’ve coded my own designs and lots of designs from other designers. I’ve also been doing this since before CSS existed.
My impression is that the biggest argument against CSS is, “what happens when a user has a browser that doesn’t support or render CSS correctly.” That was a real concern about 5 years ago but lets face it, today that really can’t be a concern. I think that as coders we feel this compulsion to make our shit work everywhere, all the time. I would urge anyone to resist that urge. There is such a thing as diminishing returns. What’s the point in spending 50% of your time – or more – trying to get something to work right for 5% of your potential audience. (I’m just throwing out numbers here.)
One downside to a pure CSS approach is that it’s not much good at placing things 2000 pixels below the fold. I’ve been to sites that over use CSS and I can tell because I change my default font size to make it easier to read. What happens on these sites is that the text begins to run under or over images and adds. It makes it a bit of a pain to read.
I would simply say use both CSS and Tables. Here’s the general layout I did for a hospital in Manhattan:
For SEO reasons it’s good to get the content as close to the top of the page as possible – I’m talking about the code, not pixels. This may not be the issue it once was but search engine algorithms are changing all the time. I’d say error on the side of caution. Don’t give a spider 200 lines of code to wade through before getting to the meat of the page. In order to accomplish this I made a table with two columns – leftNav/content – and two rows – banner/logo at the top which spanned across the two columns and then the leftNav/content row. You know what I put in the banner and leftNav cells? A transparent.gif. That’s it. So the spider would get to the <body> tag and read: table cell with an image, another table cell with an image, and then the good stuff: content.
At the bottom of the page were <divs> that contained the code for the banner and leftNav. Those divs used absolute positioning to place them at the top of the page. Note: we used images for our leftNav – against my recommendation. If you have text links it might be beneficial to have them closer – code wise – to the top of the page to give the spiders something to eat before the content.
Another reason to use CSS is if you are coding for another designer. I can tell you this: designers design. If they have time on their hands they will tweak their designs. In other words, “designers can’t make up their frakking minds.”
So you can guess the drill: designer gives me a Photoshop file to break out into code. I look at it and judge it to be pretty simple so I hammer away with <tables>. A few days later the designer sends and email with a “tweaked” layout. I look at it and slap my forehead. Yeah, they only moved things around a little but it completely fraks up my table layout. Shit, I should have used CSS.
Moral of the story: when in doubt use CSS as much as possible when there is a chance that the design might change. By my calculations that’s ALWAYS. Think of it this way, God created the earth, et al. and by all accounts he’s a pretty bright guy. And even he redesigned his creation with a flood. So if God had used CSS in the first place then maybe he could have just wiped out the bad parts and kept the good parts. He could have put all the “innocents” animals and children and such in a separate <div> from those mean old humans. Even the humans could have been kept in separate <divs> depending on their . . . okay, I digress. 
So, after all this blah, blah, blog what have I said? Lets see: use as much CSS as you can but when you need a <table> use it. There is no layout god out there that will smite you for it.
Beamtrees
March 21st, 2008
Woot – beamtrees.
There’s a good explanation there about how these designs are created.
Anyone have a particle accelerator I can borrow to make one?
Interview with the StellaArtois.com design/development team
March 2nd, 2008
StellaArtois.com has launched a cool new site to promote their beer. They went way beyond creating a great looking site by using interactive video to tell a story that the user can participate in.
The user watches video and then has to interact to achieve some result before going on. In most cases I had to try more than a few times to get it right. Which is fun and makes it a game like experience. The setting sun was particularly challenging until I thought diagonally, hint-hint.
The following is an interview with the design/development team that put the site together.
1-What applications did you use to create the site and which were your
favorites? Conversely, which applications were the most challenging to use?
Since the site consists of a lot of filmed material much of this work has been done on film, in 3D and in Adobe AfterEffects.Then it is put together and made interactive in Flash with design made in Illustrator and Photoshop. The filmed material was compressed in Sorensen Squeeze.
I guess that all members of the team working with the site had their own challenges but the most challenging application for me personally is also my favourite Flash. I guess thats no surprise since I’m the Flash developer.
2-What was the biggest technical hurdle to overcome?
The balance between filesize and videoquality is always an issue.
But for the “le Courage” site I would say the flash players performance on slower computers. In some cases we would have multiple layers of video, some with blending effects and at the same time 20 moving objects controlled by the users input. We had to work a lot on the optimization to make it flow nicely.
The planning of the filming and/interactive parts in le Courage was a great challenge as well as the post production of the filmed material. To get the right mix of reality and fantasy and to make the filmed material blend in with the different Flash objects without sacrificing the “cinematic values”.
3-If you were starting over from scratch on this project is there
anything you would do differently?
No, this is the perfect project. But of course if we had built it now we probably would have looked at the possibility to build it in AS3 for Flash player 9. That would have solved a lot of issues with performance making it possible to add some of the effects we would have liked to add. Such as using larger video without losing quality and speed and more moving objects.
4-What was your beverage of choice for get-togethers after work at the
local pub?
Stella-Artois in our office since the local pub doesn’t serve it.
5-Is there anything in the site that you added that you are particularly
proud of that you would like people to know about?
I would say the whole experience, how the many parts of the site all works together to create a great atmosphere. And how it’s all focused on the perfect glass of Stella Artois.
6-Was the brewmasters young apprentice hurt when falling of the end of the
world?
No, that was all visual effects, the hen is also OK.
You can also read an interview with the creators at the StellaArtoisBlog.com: part 1, part 2.
Cool Flash work by Nike.com
January 14th, 2008
Here’s a really cool site by Nike.com – (warning: this page will resize your browser)
This is the kind of site that give Flash both a good and bad reputation. It’s amazingly interactive but the usability is, well, challenging to say the least. To be fair, I would put this in the “User Experience” category of Flash sites. Much like a movie website. The object here isn’t for you to buy something but to play around and enjoy the space. Now the onus is on them to make a compelling experience that will motivate someone to discover the usability so that they can experience the site.
What I really question about sites like this is the Return On Investment. No doubt this site cost a chunk of change to design and developer. So does Nike really expect that this site will increase sales enough to pay for itself? From my perspective I’m just glad that work like this is being done. It gives Flash developers some good work and at the same time I’m sure it influences other companies to follow suit.
I’d be interested in what people think of this site and if it’s good or bad for the Flash platform. Please post a comment here if you have an opinion on the subject.
77 million paintings
January 13th, 2008
77millionPaintings.com is a work of generative art by Brian Eno, or so he says himself.
It seems like what’s happening here is using Flash to randomly fade between a set of images. I’m not sure this is what I would call generative art but given that the world isn’t black and white and so neither is generative art then I’d say that this is slightly generative art.
Nike shows us how web video is done
January 7th, 2008
Nike’s new website for their Nike Air shoes show us how to it’s done. This is a paragon of how video work can be done in Flash. Try doing this with any other video player – not possible.
Ross Lovegrove on TED talks
January 4th, 2008
Ross Lovegrove on TED talks. Lovegrove is pretty wacky in a creative genius sort of way. (Note: I have to respect anyone who says, “fuck’em if they can’s see the brilliance.” Especially if they’re saying that to Sony.)
A hopefull future for better email clients
October 29th, 2006
Allison Randal’s blog – O’Reilly Radar – about how email doesn’t work, got me to thinking about how Adobe Apollo might influence the application market. Sure, there’s the cross platform capabilities and the ability to work with data both on and off line. But I think one of the aspects that might be getting overlooked is how it will help build an ecosystem of application development.
Currently to develop applications you need a host of programmers, system analysts, etc. It’s a lot to bit off and a big commitment. But with Apollo you can pretty much leverage you’re current employee assets. Any serious design firm has a few Actionscript coders around. You’re pretty much set. Well, these people are going to have to get up to speed on Actionscript 3 and the Apollo environment, when it comes out, but that’s what developers do. Just give them some time and space.
The upshot of all this is we are likely to see a bevy of new applications in the next few years developed with Apollo. Needless to say email applications will be one of the more popular Apollo apps. Maybe a few of them will come up with some improvements on the current crop standard email apps and we’ll see an evolution of those into a few apps that really hit a home run with features and usability.