June 30th, 2009

Dealing With PNG Transparency and Microsoft

By Helium Developer

If there is one thing more frustrating than Internet Exporer’s CSS quirks, it’s the way the ubiquitous browser handles PNGs. The image format, short for “Portable Network Graphics”, has a combination of features that make it an ideal web format for images, yet the handling of the format by IE has made it difficult to deal with for many developers.

Benefits of the Format

PNG has a few different versions which allow it to replace both JPEG and GIF images in nearly all situations on the web. The PNG-8 format uses 8 bits per pixel, and has an indexed color pallet, much like GIF. You can get extremely small PNG images this way if the color pallet is small enough, and for many images in templates around the web, PNG-8 is more than adequate.

For those situations where you need full color, you can instead use the PNG-24 format, which has the same color range as JPEG. Unlike JPEG however, PNG-24 will not artifact your image, and will still keep the image relatively small in size.

The real benefit of PNG however comes in the PNG-32 format, which is full-color like JPEG but offers something call “alpha transparency”. GIFs can be transparent, but the transparency is an all or nothing affair. A pixel is either entirely transparent, or not transparent at all. Alpha transparency however uses 255 “levels of transparency”, allowing every pixel to be partially transparent, letting you create a full-color image which blends seamlessly with any background you place behind it.

Unfortunately, IE has always had trouble implementing alpha transparency in PNG. IE6 just doesn’t support it, and developers have had to rely on Javascript and CSS hacks to modify the browser to support the format. IE 7 introduced support for PNG-32, however as any developer should be used to, it came with quirks.

Supporting Alpha Transparency in IE6

A wealth of solutions exist to help IE6 support PNG-32, and instead of elaborating, we’ll simply be linking to some solutions.

TwinHelix has a fix which tackles both the issue of PNG transparency and the background issues that arise from fixing it. The problem is that in fixing IE’s anomalous behaviour with PNGs, IE no longer allows you the use the background-position: or background-repeat: CSS properties with PNG images. Both the PNG transparency issue, and the resulting positioning issues are tackled in this fix.

DillerDesign offers another fix for your PNG woes, and while this one is slightly better documented, it does not appear to handle the resulting background image issues.

Quirks of IE Support

As with nearly any IE specific problem, PNG support in IE has additional quirks that developers need to be aware of. In all versions of IE, including IE7 and IE8, no matter what PNG fix you have installed on your site, altering the CSS opacity property on an element which uses a PNG with alpha transparency will completely break this transparency. There is no work around for this problem other than to not change or set the opacity of any elements which use PNGs in IE.

We ran into this problem with the tooltips we use for our portfolio and navigation, as our jQuery altered and set the transparency of our items as part of the animations. The solution was to create a separate animation just for IE which doe not change the opacity at all. Curiously, even if you only set the opacity of the element to 1.0 (full opacity) and never change it, IE completely breaks support for alpha transparency.

When dealing with IE, you must be careful what CSS properties you set and where.

While dealing with IE’s quirks is a headache, the browser still represents a large portion of the internet. It’s important for developers to understand the limitations that Microsoft creates for their websites, and to design around them.

June 19th, 2009

Creating A Designer-Client Relationship That Works

By Helium Designer

Portland is a city full of designers. Walking down the street, getting a cup of coffee, or even visiting the local bars, you see designers everywhere, and not all of them work as designers.

In fact, many people recognize Portland as a very design oriented city, in everything from the public works which get constructed, to the things which get debated in city hall. The problem with having so many designers is quite simply that it makes an actual designer’s job difficult: Everyone wants to give their own opinion.

This is not to say that the customer’s opinion is worthless. Quite the contrary, every design job can be simplified down to the phrase “creating a visual representation of the client’s vision”. However, often someone coming to a designer, particularly a web designer, recognizes that they don’t possess the knowledge or expertise to get their project done. That’s why they find a designer in the first place.

Often it’s difficult for a designer to explain this gently to customer. Many clients will feel marginalized or attacked if you explain that you’re the one with the design experience, and so we’ve compiled a few general guidelines to help clients, and designers, understand the unique relationship that exists between them, made even more unique by the city we live in.

Your Designer Is Trying To Prevent You From Making Mistakes

If there’s one thing that most clients seem to forget more than anything, it’s that designers make recommendations because they want your site to succeed. When you ask to have a picture of your dog made into the logo, the designer tells you that’s not a good idea because it will probably reduce the quality of the site, and give off the wrong impression, not because they are rejecting your ideas as being your ideas.

Many clients seem to feel that designers will reject any suggestions they make simply because the designer only wants to include their own ideas. This is, for most designers, absolutely not true. Many designers have been working their craft for years, and they know what will grab people’s attention and what will turn them away. The difference between a sale and a click on the back button.

If your designer rejects an idea of yours, ask them why and listen to their reasons. Do not ask why simply so that you can try and argue. Look at it as an opportunity for you to learn something new. By giving you advice the designer is teaching you a small part of what they know about design. Don’t take that for granted.

Clients Want A Design That Works

An opposite mistake sometimes made is when a designer creates something very splashy or elaborate for no reason. Designers, do not do this. Every single thing you place on a website should have a reason to be there. If it doesn’t then it needs to go. How can you justify your work to your client if you can’t even justify it to yourself? What’s the point in making a beautiful site if it results in no sales for the client?

For this reason, you should avoid using flashy elements, like jQuery, unless you have a reason to do so. On this site, we used jQuery for two purposes: to reduce clutter which kept a clean design that we were aiming for, and to enhance the user experience by drawing attention to certain elements. The slideshow on the front page allows us to use several graphics without making the page very long, and the tooltips help us provide a wealth of information without cluttering the sidebar.

If you are a client dealing with a designer, don’t ask them to justify everything they do, it will only frustrate them. But when you see something that you don’t understand, or you don’t see a reason for, tell them that, and then listen to their reasons. If they cannot explain the change to you, but still insist on keeping it, perhaps you need to look for a new designer.

Talk In Goals And Generalities

When discussing the project with your designer, try to talk about your goals, your customers, and the general facts of your site. If possible, avoid speaking in specifics (unless they ask for them).

Instead of telling your designer “I want a website with a logo here, and a sidebar on the left, and then a little information bar on the right”, tell them “My customers will be looking for lots of information and I want it to be well organized.” Instead of telling your designer “I want to use brown, white and red on my site”, tell them “I want it to have a bright, but earthy feel to it.” (You of course should tell your designer about specific colors if you are matching a corporate logo scheme or other, similar requirement.)

The point is that you are paying a designer for their creativity, and you want to restrict that creativity as little as possible. Give them the boundaries of what you want, then let them create something they think meets those requirements. You should know fairly quickly if they are the right designer for you.

Don’t Discuss Development Work With A Designer

Unless the design crosses over very much with the development, (in which case you should be talking to a team or individual that can deliver both), do not present development questions to your designer. Tell them that you want a login box, but don’t ask them how it works, or mention specifics about the back-end. A good rule of thumb is to keep the things you discuss with your developer to data-less presentation. If you are discussing the content of the site, instead of the way the content looks, you are having a development conversation with your designer.

Similarly, designers should avoid, at all costs, discussing development with their clients. It creates several problems, some of which the client will have and some of which the developer will have. Many designers know enough about development to get by, and some are quite proficient, but unfailingly if a designer allows them self to discuss development with a client, they create expectations that the developer must later manage. You don’t want to give your clients bad information, and that’s very easy to do when discussing the portion of a project you are not working on.

Make Sure You Understand What You Are Paying For

No one likes to work for free, but unfortunately many clients expect both developers and designers to do so. Stop expecting it. The people who will work for free are ALWAYS going to give you a product that you become unsatisfied with, and you will end up paying someone to do it correctly in the future.

When discussing with a designer a price point, understand what their quotes mean. Are they quoting you a project price, or an hourly rate? Does this include simply the art assets, or does it also include templating? Does their price include any redesign work, or is it simply for the initial proof?

Many clients become frustrated because they expect to pay one price for an unlimited number of alterations. Many designers will be accommodating, but often will reach a point where they have to tell a client that they must charge additional money for new work. Be aware of what this entails.

This happens because most clients don’t understand what exactly goes into design. For instance, they may expect to receive new button art for free as they discover the need for it from their developer. Many designers will help with this sort of situation, but every time you ask your developer to do something, ask yourself this simple question: “Would this designer be expecting this request from any of our past conversations?”

Be Punctual And Precise

One of the most frustrating things, for both developers and designers, is a client who constantly is late to a meeting or cancels meetings. Imagine if for some reason you were calling in for work then had to wait 30 minutes for your boss to get there, or got a phone call an hour after you came in to notify you that you didn’t need to. Or imagine instead that you were told you’d have to work Saturday evening and canceled a family event only to find out Friday at work that they didn’t need you after all. It’s frustrating, and if it is every avoidable, avoid it.

Along with this comes the notion of being precise. When you give facts, figures, dates and times, make sure they are precise enough that someone can schedule or plan around them. If your budget is exactly $1,500, do not tell the designer (or developer) that it’s $1,000 or $2,000. Often this will make the product you receive less valuable, and likely cause problems that you will be inclined to blame on the designer. Just remember: though it may make you feel better, blaming the designer for bad information you provided is not helpful and does not get you a better product.

Really, dealing with designers and developers comes down to common sense and courtesy. Most are professionals who are looking to provide you with a product they can be proud of, and that is the way that clients should approach them. They should treat clients with respect as well: do not talk down to a client or belittle their ideas.

As with any field where independent contractors are commonly used, communication and acurate correspondence are absolutely vital, and following those simple guides will help you get your project out the door in a form you’re happy with. Make sure you act responsibly, both clients and designers, and you should be building good business relationships in no time.

June 12th, 2009

Working With jQuery

By Helium Developer

A lot of developers and website owners alike have been using jQuery for a while now. Yet many people are still confused as to what exactly jQuery is.

Put simply, jQuery is a collection of pre-written Javascript that allows a developer or designer to focus on what they want to do, instead of how to do it.

Javascript: A Standard

Back in the days of Netscape 4.0 or Internet Explorer 5, Javascript was a bit finicky. You might say that it’s implementation was sporadic, haphazard and worst of all: nonstandard.

But today we find ourselves in a very different world. While CSS and to a lesser extent HTML still have some large standardization problems across modern browsers, today’s average web surfer is using a fairly standard Javascript engine, and even better, the browsers are fast enough at implementing it that using it becomes practical.

While Javascript is still a bit of a black-box of mystery to many developers, jQuery is the brainchild of John Resig, a former employee of the Mozilla Foundation (makers of FireFox) and a self-proclaimed “Javascript evangelist”.

Part of the problem with Javascript, Resig discovered, was that few developers had the time or the ability to go through and learn the complex and long-winded syntax of Javascript to do anything useful. But in 2006 he released jQuery to the masses, opening up the interactive web to many.

jQuery: A Focus On The Product

jQuery provided a library of common functions that developers could use.  Want to dynamically add the “ready” class to all forms? Well that’s a simple:

$.('form').addClass('ready');

There’s (almost) nothing to it.

jQuery is used by sites big and small. From this very website to Google and NetFlix.

Using jQuery allows the developer to focus on what they want done instead of how they have to do it, which can be very useful for web UI developers.

But jQuery is really brought to life by the multitude of extensions available, and to give you an idea of just what these extensions do, below you will find links to all the jQuery extensions used on this website.

jQuery Tools
Cycle
Colorbox
Preload

jQuery: A Primer

There are two simple concepts that you need to understand to use jQuery on your site. The first is that you need to include certain files to use the jQuery tools. The second is that you need to initialize the scripts in order for them to turn on.

This is actually a lot simpler than it sounds.

To include jQuery files, whether it’s a core file or a plugin, you simply use code like so in the head tag of your page:

<script language="text/javascript" src="./js/jquery-min.js"></script>

In the above example, you simply need to replace the “src” property with the relative address of the javascript file you want to include.

After you’ve included you files, you can initialize them like so:

$(document).ready(function(){
	$.preload([ 'black_arrow_big', 'black' ], {base:'images/tooltip/',ext:'.png'});
}

This particular line is how this website preloads some of its images using the Preload plugin that was linked earlier in this post.

Generally plugin authors provide many examples of what code you need to initialize their scripts, and in some cases you may even be able to copy and paste.

While jQuery certainly isn’t the perfect solution, for most projects it provides enough functionality without cluttering up the page, and that’s nearly the definition of a good code library.

June 10th, 2009

About This Blog

By Blog Admin

This blog is both a resource and a marketing tool. The information here provides insight into the way we work, but also provides useful information about web design and development that anyone can use, and it’s the same kind of tool that your business can use too.

Every Friday a new post from the HeliumDesigns developers or designs will be posted to explore a topic near and dear to their hearts. We will strive to make the information easy to understand and useful, but remember first that this is a developer’s blog, and as such not all of the topics will be easy to understand.

If you have a topic you’d like us to cover, or you have a comment you’d like the author to read about a published article, contact us at: blog@heliumdesigns.com