• 20 Different and Beautiful Icon Sets
• 30 Color Tools for Designers
• 350 Grunge Textures
• 8 Design Utilities

Programming

• Google Fade
• Under jQuerys Bonnet
• How to Test Your Javascript Code with qUnit
• How to Make a Css Sprite Powered Menu

Want your links to appear here?  Send us an email at info [at] displayblockcreative.com with your blog, and we’ll add you to our list of sources we read.

• jSnow
• MooTools Class Creation Tips II
• Create Custom Option Panels with Wordpress 2.9
• Encapsulation in JavaScript

Design:

• 8 Design Utilities
• Image To Icon: 5 Ways to Easily Convert Images To Icon Files
• 100+ Photoshop Brushes for Web Designers
• Create a simple layout for architecture or real estate

In order to understand how to maneuver your way around the interaction of javascript and HTML, we have to look at how the “model” of this interaction is set up: DOM, or document object model. This model is the basis for how we access the HTML in javascript. In essence, when you see:

window.location.href = 'http://www.displayblockcreative.com';

You are accessing the DOM object window. On the left you’ll see a break down of the DOM hierarchy.

One interesting thing that you’ll come across is while the document object sits inside of the window object, and is accessible through

window.document.getElementById('foo');

it is also available independently through

document.getElementById('foo');

The latter is actually the preferred method of getting the document object because of fewer characters (Programmers type too much already).

We’ll be going into more ways of accessing each individual object, but to whet your eyes a little here’s a few ways of accessing DOM objects in javascript:

window['location'].href = 'http://www.displayblockcreative.com';
document.getElementById('fooForm')[0].input[0].style.backgroundColor = '#fff';
document.forms[0].input[0].innerHTML = 'hello world';

• How to speed up your block loading time
• 14 days of jQuery and the new API broswer
• Encapsulation in Javascript
• jQuery Animations: A 7-Step Program
• CSS3 animations and their jQuery equivalents

Design:

• Web Icon Search Engines
• 20 basic Illustrator tutorials every beginner should see
• Design a light Wordpress theme in Photoshop
• Iconic: A Set Of 84 Stylish & Vector Icons
• Create a Fashion Web Layout (PSD Template) Using Photoshop

Other:

• 53 Promotional Websites To Gain Traffic Quick And Easy

The conversations
“But that’s not what I see in Internet Explorer; your code is broken.”
“Nope, I can’t do that. You’re gonna have to make this more boxy.”
“Wait- where’s that rounded corner?”
“It’d take way too long to align all that on one line. Days.”

Hmmmm. Each of those can be a perfectly valid point, by any given person, in some circumstance. A designer may not understand why having an unrepeated background fused together to form a great collage can’t work when it looks perfectly fine in Photoshop (or Fireworks for those of you out there). A developer may not understand why it makes any difference in the world why the font needs to be Lucida Grande, not Arial. After all, no one’s going to notice, right? And of course there’s the client who just inevitably wants a little more ’swoosh’ in each site. But that’s another topic altogether.

The solution? That we finally come to terms that it is unrealistic to get the same functionality and effects on all browsers, at least at right now. One one side, we have the “modern browsers”:

Modern browsers at this time

• Firefox 3.5
• Safari 4
• Google Chrome
• IE8
• Opera 10

And on the other hand we have…

Deprecated browsers

• IE6
• IE7

Now you may be aghast at seeing IE7 on this list, and to be honest Internet Explorer 7 is leaps and bounds better than Internet Explorer 6. But does it support all the functionality of CSS3, or at least many of the working specs? The answer is no. And while it might be surprising- Internet Explorer 8 doesn’t, either. Want to test it? Take your  browser over to CSS3.info’s selector test suite and see what happens. Now try it in any of the other browsers. You’ll see how lacking Internet Explorer 8 is, at least for now. And while it doesn’t support many of the selectors in this suite, it’s put in the ‘modern browsers’ category in this post because it has fewer headaches with the box model than its predecessors.

Picking your design/coding battles

We’re going to use this site itself as a test-run of the way browsers render differently. Take a look at the various screenshots, and figure out if you see the differences.

IE6

Yep, it looks awful, doesn’t it? And it’s meant to, by design. If coders and designers keep building for this antiquated browser, all that’s being done is that we as a web community are enabling its usage while holding ourselves back from HTML5 and CSS3. But the site is actually still functional, and it’s only the glaring visual miscues that are in place, with a ‘friendly’ notice telling people to upgrade to a better browser.

So what’s going on here? First off, the png’s aren’t transparent. Is it easy to fix? Sure, it could be if there weren’t any css sprites being used, which they are, on the navigation. So if we did the Microsoft AlphaImageLoader Filter or even a small Javascript solution like Supersleight to fix the issue, the navigation wouldn’t be able to change background position as it is utilized and separate graphics would have to be created in order just for IE6. Is it worth increasing bandwidth (not to mention creating oh-so-fun slices!) for a browser that came out in 2001? No.

However, there ARE about 8 lines of CSS served up just for IE6 so that the navigation doesn’t show up at the bottom ( because of IE’s broken box model ), and a few other glaring errors. Why? Because it’s a fine balance of whether the site should still be usable for those on IE6, if not aesthetically pleasing.

IE7

This one doesn’t seem as bad, and it’s definitely usable. Ironically, IE7 was served up about 12 lines of code as of this writing to hack its look, partially because some of the glaring visual miscues that are allowed in IE6 shouldn’t be allowed in IE7 because it is a newer browser. Of course ideally we, as web-folk would like to imagine that everyone upgrades their browser as soon as an update is available (nightly builds, anyone?), but the reality is that this isn’t feasible.

IE8

Only one screenshot was included here for Internet Explorer 8, and that was just to illustrate that it looked about the same as IE7, except without having to do any extraneous hacking at all which already shows progress.

So what’s missing?

These may look absolutely fine to most people, but designers are all about the details. The final touches; the cherry on top. And using CSS3 we finally have a way to implement some gee-whiz effects without extra graphics, extraneous markup, and sans-hackery. So let’s take a look at what that looks like.

Safari 4

Did you notice any differences? If not, look a teensy bit closer:

1. On the side bar, there is now a shadow underneath each heading
2. On the search button, there’s the same shadow
3. On the thoughts page and on each blog entry, there is a soft rounded corner at the edge of each headine
4. On each link, the background has the same rounded corner

Granted, this is just an example of two properties of a vast variety that can be used- box-shadow and border-radius, but it’s a start. Does the site still function in Internet Explorer and look moderately good? Sure. But it has a bit more panache/flair with the standards-compliant browsers.

You may also notice that the text just looks smoother. Unfortunately, that has to do with the rendering on the OS itself. The Safari example is taken on OSX, whereas the IE examples were taken on XP. For those who would like to extol the virtues of Windows 7, it should be noted that firing up this site in Win7 has the same look as on WinXP. But that is another consideration to be taken into account: that there is no such thing as pixel perfect, and that there is no such thing as making a design comp looking exactly the same on all browsers, whether through aliasing issues or otherwise. It’s all about finding a happy balance.

So what now?

Is the point of this post to bash on Internet Explorer while building up Safari / Firefox 3.5 / Chrome? No. Of course not. It is instead to point the immense opportunities web developers are starting to have, and how much flexibility designers too can now employ easily. If anything the point is that designers and developers need to work together to figure out what aspects of a design are possible while still having graceful degradation or progressive enhancement as the backbone of their workflow.

*Update: This post also has another CSS3 selector now added: attribute contains. On standards-compliant browsers, if the anchor tag has an attribute that starts with “lightbox”, the background png is not shown.  On older browsers, it is.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

:focus { outline: 0; }

ins { text-decoration: none; }
del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

• 10 Wordpress Dashboard hacks
• Chained combobox for jQuery
• A beginner’s guide to mod-rewrite
• 15 jQuery plugins you will find useful in 2010
• Best open-source Dreamweaver alternatives

Design:

• Inspiration 13 creative video advertisements of December
• Showcase of modern navigation design trends
• 40 stunning and inspiring website and blog footers
• 40 excellent gimp tutorials for designers

• Client: Haute House PR
• Release Date: August 2009
• Website: hautehousepr [dot] com
• Info:Combining their unique yet complementary skills into a true force to be reckoned with, Kelly and Jordan’s mission is simple: to provide brands with the best of both worlds through the launch their firm, Haute House PR & Marketing in the summer of 2009. The dynamic collaboration of their experience alone makes them experts in every niche of the industry. Their skill set combined with the heart and soul both partners bring to the table sets Haute House PR & Marketing apart from typical LA and NYC agencies. The firm features a boutique sense of attention to detail, but at the same time brands reap the benefits of being represented by a full-service media agency. Haute House PR’s main focus is streamlined and effective, focusing on giving clients service that goes above and beyond to produce unrivaled results.

• Client:Mike Lanes Jeans
• Release Date:August 2009
• Website:mikelanesjeans [dot] com
• Info:

• Client:Uber.com
• Release Date:August 2007
• Website:N/A
• Info:Uber is a good way to organize your multimedia life online. For designers working in many mediums, it’s also the perfect way to showcase your portfolio, since photos, video, audio, text, blogs and links can coexist peacefully within Uber’s.