Dra Studio - Blog - Design & Illustration

After Sitepoint showed us all how easy it is to add custom references to the “Books” section of Coda (using their excellent HTML and CSS references as examples), I began my search for even more handy code guides with which to fill out that big empty gray space at Command+6.

Jon Hicks had some good stuff to say, as did the Coda Google Group, but what really got me moving was when I found Ray Brown’s Coda Book Cover Template PSD file. I pretty much went to town, compiling together eight custom “Books” and making each a custom icon. Have fun, use ‘em wisely and enjoy the Coda love!

The story continues, click to read more...

I am a little late to the game on this, but recently I was creating an iPhone screen optimized version of a site for my personal usage and thought I would share some of my findings.

The Initial

Though Apple recommends through the expansive information in its iPhone Developer Connection to implement CSS3 conditional statements to effectively achieve alternate style-sheets for personal computers and for the iPhone, I wasn’t satisfied with the resulting functionality. Yes, it did allow me to provide a 480px wide version of my design to the iPhone, but strictly using Apple’s sample code left me without a style-sheet for older browsers to fall back on.

Apparently, the “recommended” conditional statements of CSS3 do not degrade to older browsers that don’t support them yet. Sure that is not a major issue, but if I still wanted to provide any kind of design for users of IE 6, I would have had to segment out my CSS rules into 3 separate style-sheets. One would be attached to the page using the traditional link tag (for the older browsers) and the other two (to be loaded using the previously mentioned conditional statements) would have to be comprised mainly of descendant selectors to cascade over the previous stylesheet’s presentation changes. Not to difficult to initiate, but I felt it would be a big pain to continue to maintain … especially for the needs of this particular “project”. Ehem. Moving on …

The Desired

What I found extremely helpful, in the way of an alternate approach, was this article over at Jeremy Flint’s blog, which properly demonstrated how to utilize PHP to “sniff” the User Agent of the browser and once determined whether it was an iPhone or not, provide the appropriate style-sheet.

While Apple does technically suggest not using a sniffing Agent to provide the presentation aspects of your website, I kinda feel their non-backwards-compatible recommendation has a much larger hole in it than the one I am creating by reading the User Agent. And frankly, the fact that I can switch my User Agent on the fly (using the ‘Develop’ menu item in Safari 3.0, this is the method I am going to stick with for now.

Any thoughts or other findings you want to share? I’m all ears. Well … an iPhone too.

I think it is interesting that there are two versions of the Vote for Change website; a more generic one (left) and an Obama-specific version (right) and that the right one is where most people will end up, as it is the Google sponsored link that appears first when searching for the query “vote for change”. Hmm …

Either way, it is probably important that you go and make sure you are ready to vote. Carebears everywhere will thank you.

With the recent release of the new and updated Twitter, the majority of tweak-able profile design settings were lost and the twitterpated among us have been relegated to only changing the following:

• Background image
• Background color
• Link color
• Text color
• Sidebar color
• Sidebar line color

That isn’t much to work with, so I decided that with the recent re-styling of my Twitter page, I would share the Photoshop template I used and (hopefully) simplify some of the tedious process of creating the desired background graphic, as well as choosing complimentary colors.

You’ll need Adobe’s Photoshop CS3, but that is all. With this template, you can easily try out background images and test out color combinations, without having to continually reload and re-save your Twitter profile. Enjoy.

Click here to download the PSD template