5 Pet Peeves Designers Have With Developers (and How to Avoid Them)

Cats and dogs. Cain and Abel. Designers and developers. These are just a few of the great historical face-offs.

Designers and developers often seem to come from different planets and have completely different brains.

Developers want a website to work right, designers want it to look right.

While these goals have a lot of overlap (and, of course, I’m stereotyping here a bit), the differences often come down to the designer and developer’s expectations of success.

Managing expectations is a matter of communication: making points clearly to the other side, finding common ground, and agreeing on goals.

Okay, so maybe it’s not that easy, but it is important for both sides to at least try to understand each other.

In an effort to promote goodwill between designers and developers, I will share some pet peeves I have encountered and explore the issues that lead to them and their solutions.

Peeve #1: Why can’t the developer just make it look like the comp?

You create a great-looking design and hand off the comp to your developer, but when you get the site back, it looks like a patchwork quilt of what you designed.

Issue
Comps are not Web pages; they are not a mixture of HTML, CSS, and JavaScript code. Photoshop, Fireworks, and Illustrator can do a lot of things that are impossible (or at least wildly impractical) on the Web, which often means that developers will have to scale down the design.

Solution
Talk to your developer while you are designing, not just afterward. Ask them whether an effect you are using will be easy to accomplish or whether a better alternative exists. Also, as you learn more about Web development, you’ll be able to better tell the difference between when your design is impractical and when the developer is just slacking off.

Peeve #2: The colors are all wrong!

You don’t choose colors arbitrarily, but developers seem to think that “close is close enough.”

Issue
I don’t know whether this is true of all developers, but I once worked with a developer who was red-green color-blind (he was a huge fan of our content manager, who sent all of her emails in pink text on a lime-green background). However, being color-blind didn’t stop him from being a kick-ass developer.

Solution
If you want the colors to be right, then spell out all of the color values on the page. Don’t rely on your developer to eyeball the color values or to sample the colors in Photoshop.

You also need to consider that the problem may not be with the developer but with you. Colors look different on a Mac and in CMYK (if you happen to accidentally enable that color space). Make sure that your document color mode and proofs are set to generic RGB by default.

Peeve #3: Do developers even know what ‘white space’ means?

You’ve left plenty of breathing room around elements to create a fluid eye path and improve readability, but the developer crams everything together, telling you, “It’s the only way it will all fit.”

Issue
I once complained to a developer that he left no space between the border of a module and its content, making it really difficult for most people to read. He replied, “I don’t care about other people. I can read it.” While most developers are not quite so callous, they have not been trained in the fine art of mixing positive and negative spaces to guide the visitor’s eye around the design.

Solution
If you really want your designs to be as precise as possible, don’t just give the designer a comp and expect them to figure out the spacing. Specify the exact widths, heights, and lengths in a design specifications document. This serves as a blueprint that you and the developer agree on for how things should be spaced.

At the very least, define general rules for margins and padding. For example, “All modules must have a minimum of 10 pixels of padding between the content and the border.”

Peeve #4: The developer can never get my designs to look the same in different browsers.

You look at the site in Firefox and it looks fine, but when you switch to Internet Explorer it falls to pieces.

Issue
You have to be sympathetic to the plight of developers when it comes to making designs look consistent across browsers. Each browser has its own quirks with spacing. Things are getting better (especially with the slow death of Internet Explorer 6), but getting them all to completely play nice with each other is still hard.

Solution
I generally allow a few pixels of wiggle room in my designs to accommodate cross-browser issues, but it helps to know what these issues are while you’re designing, so that you can help the developer avoid them.

Don’t be afraid to point out cross-browser problems to the developer and expect them to be fixed. But resolving some of them may require that you tweak your design.

Peeve #5: This will take how long?

Nothing is more depressing than burning the midnight oil on double-time to get your part of a project done on schedule, only to get back a development LOE (Level of Effort) that puts the project release date back a month from the end of eternity.

Issue
In a classic episode of Star Trek: The Next Generation, Scotty explains the facts of engineering life to Geordi La Forge: “You didn’t tell him [Captain Picard] how long it would really take, did you? Oh, laddie. You’ve got a lot to learn if you want people to think of you as a miracle worker.” Some developers think of designers in the same way that Scotty thinks of Starfleet Captains.

Solution
Developers know they will encounter unforeseen problems and so tend to grossly pad their estimates. This also makes them look really good if they get their end done a lot earlier than estimated. Haggle with the developer down to a reasonable timeline and then hold them to it. As you get to know a developer, you will hopefully find your own way to be a “miracle worker”.

Special Bonus Peeve: Developers just don’t understand designers.

Or worse:
“The developer thinks they’re a designer!”
It’s bad enough when developers seem to simply refuse to see the designer’s point of view, but that difference of opinion can usually be mediated (usually by a good project manager). However, when the developer thinks they know more about design than the designer, tempers can flare.

Issue
I’ve had to deal with more than one developer who read an article by Jakob Nielson and then wanted to lecture me about good design practice in the middle of a meeting. This not only shows disrespect for the designer but slows down the project as debate ensues.

Solution
Working with know-it-all developers is tricky, and the way to handle these situations depends on the size of the ego you are dealing with. Generally, I find it best to simply listen to what they have to say and then, if they have a point, acknowledge it and move on. Avoid arguing with them if possible.

Often their complaint is about a design “rule” that’s been broken. Don’t be afraid to acknowledge that you broke a rule—that’s what innovative designers do—but make sure you can justify why you broke it.

Whenever I find myself in this situation, I think back to my review days in design school, when I had to defend my work against some pretty brutal criticism. These sessions were often ego-bruising, but they taught me how to quickly defend my decisions while keeping my cool.

It may seem humiliating to have to constantly justify your decisions, but the more you show the “method in your madness,” the more you will find that your colleagues value and trust your judgment.

The front-end developers burden

What burden you might ask ? Well front-enders, are seen like jack of all trades. We sometimes do what the designer or the back-end developer don’t have time to do. Because, well, we are the middle guy, we can do all this, don’t we?

It’s not that I don’t like to do either of these. I have interests in both actually. I really like web design, even if I am not that good at it. I visit mostinspired.com 3 times a week, and I always want to learn new stuff about programmation and new cool scripts. Ajaxrain and Ajaxian are great for that.

Even in our own company, some peoples don’t really understand what we do, i can’t frikking design professionally don’t ask me too, some front-end might, i don’t! I am not a designer nor a fully experienced c# or php developer. I’m glad to help, but when you put me under pressure for these things it’ s just not fun anymore.

Most of the time we also have to integrate all the website content in the CMS. Which sometimes means 50 pages+. And I can tell you that it’s not going to make us throw big smiles of fun. Being in a small company, that often happens to me.

That is our burden.

We are the masters of XHTML/CSS, PSD slicing, website architecturing, HTML semantic, Javascript and CMS. We know what’s possible and what’s not from the start as term of design and features. We are the masters of debugging every browser, even internet explorer 6…

But we’re sometimes designers, developers and secretaries. Just don’t expect us to code a back-end application in an afternoon or to become a traductor/writer because the content guy didn’t do is job properly.

30 Web Design SEO Tips

Tip No. 1

Study and read everything possible about advanced SEO techniques right from the start of your project.

Tip No. 2

keep in mind that designs are cool, but what is equally important is the code that goes behind it.

Tip No. 3

keep the code optimized, check for W3C compliance right from the start.

Tip No. 4

the basics, titles, meta tags are still important if not ignored, so keep space for them.

Tip No. 5

Keep a horizontal directory structure, don’t go too deep with them, the search engines likes easy access to any file in the quickest time.

Tip No. 6

When you name the files and directories, keep it descriptive and simple. Keep away numbers and weird characters.

Tip No. 7

Images better be optimized for size, and quick loading. If you can’t keep away from loading that fancy graphic, mix it with the page elements. Don’t make them look blunt.

Tip No. 8

Make room for a lot of text. As you already know, search engines love text, lot of them.

Tip No. 9

Flash files are cool. And Search engines have found better ways to crawl and index them unlike old times, but that doesn’t mean you can use them extensively blocking access to relevant text info. So if you are keen on using flash, keep alternate text versions ready.

Tip No. 10

If you have dynamic content, make sure you keep it simple and split to parts. Also, make sure you have optimized static pages for your primary keywords.

Tip No. 11

Always do a bit of competition analysis. See what your competition is, if they have a minimalistic design you don’t want to have a flash design, and leaving no room for improvement. Stalk your competition.

Tip No. 12

Many web designers make the mistake of using a template through out the site and many a times this includes repeating the same title or similar page titles all over the site. Get over this, use descriptive page titles everywhere possible.

Tip No. 13

Keep the page titles to 65 characters or less in count. Nothing wrong is going over it, but you could avoid a spill over.

Tip No. 14

The meta descriptions are supposed to be mini ad-copies that should be descriptive of what the page is about. Don’t keep them the same for all pages.

Tip No. 15

Keep the JavaScript away from navigation menu. Navigation menu is a good resource for gathering information about what your site is about, and using javascript can make it less crawlable by the engines.

Tip No. 16

Use CSS based navigation if you want fancy effects. Pretty much all of the javasript stuff can be done on CSS, in a more search engines friendly way.

Tip No. 17

Use the header tags effectively. Don’t limit yourself with H1 and H2. Use H3, H4 and beyond and use it wisely on the page.

Tip No. 18

Use strong tags wisely. Don’t let them stand out like bolded text, within the content, style it down to show up as normal text within the content.

Tip No. 19

Use the footer effectively. Of course, you can use it for all your TOS/Legal stuff, but also use it to link to the important pages on your site. It helps.

Tip No. 20

Identify the most important pages on your site as seen by the search engines, and leverage them to promote other resource pages.

Tip No. 21

Link well internally, and use descriptive anchor text instead of “click here” and “check this out” like phrases.

Tip No. 22

Use al tags, Title tags on images and use descriptive filenames. They help search engines find more information about them.

Tip No. 23

Use a SEO friendly layout, at least one that does not block or hinder the crawling of crucial areas on your site.

Tip No. 24

Find out the important areas on your website, like the content rich area in the center and keep them above the fold. Not only helps the engines but the user as well.

Tip No. 25

When designing dynamic pages, try to stick to pages with descriptive URLs and not the one with session ids and other parameters. Google can still get it’s head around them, but its good if you can stick to SE friendly, descriptive ones.

Tip No. 26

When dealing with CMS’s there might be instances where you have to keep the page URL the default way with the extra parameters. Use URL rewrite mod to re write the most important pages URL’s to SE friendly form.

Tip No. 27

When using AJAX, load the modules in parts split across pages and not in one single page. Although this defeats the purpose of using AJAX in the first place, you might be able to provide more information to the search engines using other on site SEO parameters.

Tip No. 28

If you want to block any particular area on your site from the reach of Google spiders, use either Robots.txt commands, or else set up a login access. This is the safest way to block crawlers from spidering vital information.

Tip No. 29

Keep the meta descriptions descriptive and precise to about 150 characters.

Tip No.30
Use an SEO simulator to test your design through out the process. And make sure no part of the design blocks/hinders any part of information being accessible to the search engines.

So essentially, web designers got to ensure that while their designs are unique and eye-catchy, making sure that there is enough information available in the form of text is always recommended, and leveraging this information by using all the possible SEO metrics in a healthy and balanced way to cater to the search engines is the right way of designing a search engine friendly web design.

10 Best CSS Practices to Improve Your Code

It’s really easy to find yourself wondering how your CSS got to be such a mess.

Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.

Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.

Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache.

1. Stay Organized

Just like anything else, it pays to keep yourself organized. Rather than haphazardly dropping in id’s and classes in the order in which they come to mind, use a coherent structure.

It will help you keep the cascading part of CSS in mind and sets your style sheet up to take advantage of style inheritance.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a structure that works best for you while keeping future edits and other developers in mind.

• Resets and overrides
• Links and type
• Main layout
• Secondary layout structures
• Form elements
• Miscellaneous

2. Title, Date and Sign

Let others know who wrote your CSS, when it was written and who to contact if they have questions about it. This is especially useful when designing templates or themes.

Wait a minute… what’s that bit about swatch colors? Over the years, I’ve found that adding a simple list of common colors used in my style sheets is extremely helpful during initial development and when making edits later on.

This saves you from having to open up Photoshop to sample a color from the design, or look up colors in the site’s style guide (if it has one). When you need the HTML code for that specific blue, just scroll up and copy it.

3. Keep a Template Library

Once you’ve settled on a structure to use, strip out everything that isn’t generic and save the file as a CSS template for later use.

You can save multiple versions for multiple uses: a two-column layout, a blog layout, print, mobile and so on. Coda (the editor for OSX) has an awesome Clips feature that lets you do this easily. Many other editors have a similar feature, but even a simple batch of text files will work nicely.

It’s insane to re-write each and every one of your style sheets from scratch, especially when you’re using the same conventions and methodologies in each.

4. Use Useful Naming Conventions

You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.

Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.

Sure, you could just reposition that left column to the right and keep the id as #col-left, but how confusing is that? If the id says left, one should expect that it will always be on the left. This doesn’t leave you much room to move things around later on.

One of the major advantages of CSS is the ability to separate styles from content. You can totally redesign your site by just modifying the CSS without ever touching the HTML. So don’t muck up your CSS by using limiting names. Use more versatile naming conventions and stay consistent.

Leave position or style specific words out of your styles and id’s. A class of .link-blue will either make more work for you, or make your style sheet really messy when your client later asks you to change those blue links to orange.

Name your elements based on what they are, not what they look like. For example, .comment-blue is much less versatile than .comment-beta, and .post-largefont is more limiting than .post-title.

5. Hyphens Instead of Underscores

Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead. Use #col-alpha rather than #col_alpha.

6. Don’t Repeat Yourself

Re-use attributes whenever possible by grouping elements instead of declaring the styles again. If your h1 and h2 elements both use the same font size, color and margins, group them using a comma.

This:

You should also make use of shortcuts whenever possible. Always be on the lookout for opportunities to group elements and use declaration shortcuts.

You can accomplish all of this:

with only this:

It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.

Also, if your top and bottom, or left and right attributes are the same, you only need to use two:

This sets the top and bottom margins to 1em, and the left and right margins to 0.

7. Optimize for Lightweight Style Sheets

Using the above tips, you can really cut down the size of your style sheets. Smaller loads faster, and smaller is easier to maintain and update.

Cut out what you don’t need and consolidate wherever possible by grouping. Use caution when using canned CSS frameworks as well. You’re likely to inherit lots of bulk that won’t be used.

Another quick tip for slim CSS: you don’t need to specify a unit of measure when using zero. If a margin is set to 0, you don’t need to say 0px or 0em. Zero is zero regardless of the unit of measure, and CSS understands this.

8. Write Your Base for Gecko, Then Tweak for Webkit and IE

Save yourself troubleshooting headaches and write CSS first for Gecko browsers (Firefox, Mozilla, Netscape, Flock, Camino). If your CSS works properly with Gecko, it’s much more likely to be problem free in Webkit (Safari, Chrome) and Internet Explorer.

9. Validate

Make use of W3C’s free CSS validator. If you’re stuck and your layout isn’t doing what you want it to do, the CSS validator will be a big help in pointing out errors.

10. Keep a tidy house

Separate browser-specific CSS to its own individual style sheet, and include as needed with Javascript, server-side code or conditional comments. Use this method to avoid dirty CSS hacks in your main style sheets. This will keep your base CSS clean and manageable.

Simple Page Peel Effect with jQuery & CSS

You have probably seen these forms of advertisings where you can peel a corner of a website and see a message underneath. It seems most are flash driven, but I decided to try it out using some simple lines of jQuery.

1. HTML - Page Peel Wireframe

The “pageflip” div will act as the container, mainly used to establish the relative positioning. Then nest the image and the span class of “msg_block” wrapped in an tag. Note - If you don’t have any conflicting absolute/relative positioning properties, you technically don’t need the “pageflip” container at all.

2. CSS - Page Peel Styles

Set the image property to a smaller size (50px by 50px) by default and set the absolute positioning to be in the top right corner. The image will be used similar to the “masking” technique in Photoshop or Flash, where it will be placed on top of the hidden message, so only a portion of the message will be shown. Check out the image below for a visual:

The actual message behind the “peeling” effect, is all within the “msg_block” class. By default, it will start at 50px by 50px, positioned on the top right corner of the page. The text-indent will shoot the text off of the page for anyone with CSS enabled.

Code

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(subscribe.png) no-repeat right top;
text-indent: -9999px;
}

Note that the “msg_block” height is off by 2px compared to the image property - this is taking in consideration of the drop shadow that the image has.

3. jQuery - Animating Page Peel

All we are doing here is expanding the image and msg_block on hover, then retracting to its default size on hover out.

Code

$("#pageflip").hover(function() { //On hover...
$("#pageflip img , .msg_block").stop()
.animate({ //Animate and expand the image and the msg_block (Width + height)
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop() //On hover out, go back to original size 50x52
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop() //On hover out, go back to original size 50x50
.animate({
width: '50px',
height: '50px'
}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
});

Conclusion

The concept is very simple and may come in handy one day. If you have any questions or know of other techniques, please don’t hesitate to let me know~

View Demo

7 Powerful image carousels for web designers.

This post is a collection of some powerful carousels for images and text content ready to use in your web projects. It includes Agile Carousel, YUI Carousel, JCarousel, iCarousel (jQuery + MooTools) and a tutorial about how to implement a simple Flickr-like carousel using Prototype-UI.

f you want to suggest other interesting scripts about this topic, please leave a comment. Thanks!

1. Agile Carousel
Agile Carousel is a jQuery plugin that lets you create a super fexible carousel with advanced setting options. It supports text and images in each box and a navigator to display in which box you are. Take a look here to see it in action, it's absolutely my favourite!

2. Yahoo! UI Carousel Control
The YUI Carousel Control provides a widget for browsing among a set of like objects arrayed vertically or horizontally in an overloaded page region. The "carousel" metaphor derives from an analogy to slide carousels in the days of film photography; the Carousel Control can maintain fidelity to this metaphor by allowing a continuous, circular navigation through all of the content blocks.

3. jCarousel
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

4. jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.

5. Simple images carousel to create Flickr-like slideshows
This tutorial illustrates how to implement a simple images carousel to create a Flickr-like slideshow using Prototype-UI framework.

6. iCarousel
iCarousel is a powerful carousel built over MooTools v1.1 fully configurable from the user just in some steps. You can change any default option just initializating the class with an object in JSON. It's tested in Internet Explorer, Firefox, Opera and Safari.

7. Carousel.us
Carousel.us is an advanced Javascript 3D carousel which uses either MooTools framework and Reflection.js by Christophe Beyls, or Prototype.js and Script.aculo.us frameworks with Reflection.js. Take a look here to see it in action.

Don’t use @import!!!

In Chapter 5 of High Performance Web Sites, I briefly mention that @import has a negative impact on web page performance. I dug into this deeper for my talk at Web 2.0 Expo, creating several test pages and HTTP waterfall charts, all shown below. The bottomline is: use LINK instead of @import if you want style sheets to download in parallel resulting in a faster page.

LINK vs. @import

There are two ways to include a stylesheet in your web page. You can use the LINK tag:

Or you can use the @import rule:

I prefer using LINK for simplicity—you have to remember to put @import at the top of the style block or else it won’t work. It turns out that avoiding @import is better for performance, too.

@import @import

I’m going to walk through the different ways LINK and @import can be used. In these examples, there are two style sheets: a.css and b.css. Each style sheet is configured to take two seconds to download to make it easier to see the performance impact. The first example uses @import to pull in these two stylesheets. In this example, called @import @import, the HTML document contains the following style block:

If you always use @import in this way, there are no performance problems, although we’ll see below it could result in JavaScript errors due to race conditions. The two style sheets are downloaded in parallel, as shown in Figure 1. (The first tiny request is the HTML document.) The problems arise when @import is embedded in other style sheets or is used in combination with LINK.

Figure 1. always using @import is okay

LINK @import

The LINK @import example uses LINK for a.css, and @import for b.css:

In IE (tested on 6, 7, and 8), this causes the style sheets to be downloaded sequentially, as shown in Figure 2. Downloading resources in parallel is key to a faster page. As shown here, this behavior in IE causes the page to take a longer time to finish.

Figure 2. link mixed with @import breaks parallel downloads in IE

LINK with @import

In the LINK with @import example, a.css is inserted using LINK, and a.css has an @import rule to pull in b.css:

in the HTML document:

in a.css:

@import url('b.css');

This pattern also prevents the scripts from loading in parallel, but this time it happens on all browsers. When we stop and think about it, we shouldn’t be too surprised. The browser has to download a.css and parse it. At that point, the browser sees the @import rule and starts to fetch b.css.

Figure 3. using @import from within a LINKed stylesheet breaks parallel downloads in all browsers

LINK blocks @import

A slight variation on the previous example with surprising results in IE: LINK is used for a.css and for a new stylesheet called proxy.css. proxy.css is configured to return immediately; it contains an @import rule for b.css.

in the HTML document:

in proxy.css:

@import url('b.css');

The results of this example in IE, LINK blocks @import, are shown in Figure 4. The first request is the HTML document. The second request is a.css (two seconds). The third (tiny) request is proxy.css. The fourth request is b.css (two seconds). Surprisingly, IE won’t start downloading b.css until a.css finishes. In all other browsers, this blocking issue doesn’t occur, resulting in a faster page as shown in Figure 5.

Figure 4. LINK blocks @import embedded in other stylesheets in IE

Figure 5. LINK doesn't block @import embedded stylesheets in browsers other than IE

many @imports

The many @imports example shows that using @import in IE causes resources to be downloaded in a different order than specified. This example has six stylesheets (each takes two seconds to download) followed by a script (a four second download).

Looking at Figure 6, the longest bar is the four second script. Even though it was listed last, it gets downloaded first in IE. If the script contains code that depends on the styles applied from the stylesheets (a la getElementsByClassName, etc.), then unexpected results may occur because the script is loaded before the stylesheets, despite the developer listing it last.

Figure 6. @import causes resources to be downloaded out-of-order in IE

LINK LINK

It’s simpler and safer to use LINK to pull in stylesheets:

Using LINK ensures that stylesheets will be downloaded in parallel across all browsers. The LINK LINK example demonstrates this, as shown in Figure 7. Using LINK also guarantees resources are downloaded in the order specified by the developer.

Figure 7. using link ensures parallel downloads across all browsers

These issues need to be addressed in IE. It’s especially bad that resources can end up getting downloaded in a different order. All browsers should implement a small lookahead when downloading stylesheets to extract any @import rules and start those downloads immediately. Until browsers make these changes, I recommend avoiding @import and instead using LINK for inserting stylesheets.

Update: April 10, 2009 1:07 PM

Based on questions from the comments, I added two more tests: LINK with @imports and Many LINKs. Each of these insert four stylesheets into the HTML document. LINK with @imports uses LINK to load proxy.css; proxy.css then uses @import to load the four stylesheets. Many LINKs has four LINK tags in the HTML document to pull in the four stylesheets (my recommended approach). The HTTP waterfall charts are shown in Figure 8 and Figure 9.

Figure 8. LINK with @imports

Figure 9. Many LINKs

Looking at LINK with @imports, the first problem is that the four stylesheets don’t start downloading until after proxy.css returns. This happens in all browsers. On the other hand, Many LINKs starts downloading the stylesheets immediately.

The second problem is that IE changes the download order. I added a 10 second script (the really long bar) at the very bottom of the page. In all other browsers, the @import stylesheets (from proxy.css) get downloaded first, and the script is last, exactly the order specified. In IE, however, the script gets inserted before the @import stylesheets, as shown by LINK with @imports in Figure 8. This causes the stylesheets to take longer to download since the long script is using up one of only two connections available in IE 6&7. Since IE won’t render anything in the page until all stylesheets are downloaded, using @import in this way causes the page to be blank for 12 seconds. Using LINK instead of @import preserves the load order, as shown by Many LINKs in Figure 9. Thus, the page renders in 4 seconds.

The load times of these resources are exaggerated to make it easy to see what’s happening. But for people with slow connections, especially those in some of the world’s emerging markets, these response times may not be that far from reality. The takeaways are:

• Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
• Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.

11 Quick Tips For More Usable Content

According to CWsites over at Mind Eye Web Design, 95% of web users do not read 80% of your content. With these statistics already working against you, how can you improve your content to ensure that readers are getting the best user experience from your site?

1. Break It Up

When you have large chunks of text that run the risk of blending together, break them into relevant paragraphs to make it easier on the eyes. When reading on a computer, it is very rare that your user is concentrating solely on what they are reading. They usually have IM clients running, blogs to look at, children screaming, you name it. By breaking your text into paragraphs you are making it easier for them to find their place again if they have to turn away from the screen.

Breaking your content into small chunks also makes it less intimidating and will appear to consume less time.

2. Use Sub Headings

Most people scan content looking for what is relevant to them. Sub headings can be a huge blessing for people short on time. Using them allows readers to scan through and find the section that they would find most interesting and/or helpful. Make sure your sub headings are relevant to the content below them.

3. Remove Anything That You Do Not Need

Overly flowery or verbose language, though great in poetry, is not advisable for web content.
Be specific, direct and write only what is needed.

For example:

“If you would like to be granted access to our fabulous area containing supportive information and advice, we request that you gently depress the button on your external mouse device”

4. Use Stephen King’s 10% Rule

Stephen King’s book “On Writing” is a wonderful resource for anyone looking to learn about writing. One of his best tips is that your “Second Draft = First Draft - 10%“. So after you have written your content, check your word count. Now go back through and eliminate 10% of what you have written. This will make it tighter and more concise.

5. Make Sure the Most Important Material Stands Out

If there is something within your content that you feel should be emphasized, take the time to bold, italicize, or pull it out into a sidebar. Make it incredibly easy for users to pull out the information that they need, using visual cues where possible. This, along with sub headings, is the key to creating content that users can scan.

6. Make Sure Your Font is Readable

Whereas ornate font may make you stand out, if your users are unable to read your content, there is no point having it. A good sans serif, like Helvetica, is easy on the eyes and won’t make your readers strain to decipher your information. Unique fonts work well in banners or graphics, but the actual content should be simple and not tiny.

7. Summarize and Conclude

This applies mostly to articles. It’s an old school essay trick, but it’s important to introduce people to a concept and then summarize it at the end. This allows readers to make sure they have discovered the right information, and then later to be sure they got the point. When summarizing, keep it short and to the point.

8. Use Links Within Your Content to Direct Advanced Users

If you’re covering something in your content that is initially simple, but has an advanced option, use links to direct your more advanced users rather than scaring off the more basic users with too much technical information. This also keeps your content from becoming too bulky. This also works as a way to draw advanced users deeper into your site.

9. Make Sure People Know Where to Ask Questions

Sometimes you can’t cover everything in your content. Just in case your content isn’t up to scratch, make sure you provide readers with a way that they can contact you for more information or clarification. Either have a link to a valid email address, or integrate a contact form into your site. For a great free contact form, try Wufoo.

10. Update Your Content Frequently

Make a point of regularly checking through your content to ensure that it is still relevant and hasn’t become stale. If you have changed any policies or procedures, or if you have timely information that is no longer relevant, be sure to edit as needed. I would advise checking your content at least once a month, depending on the nature of your site. This also gives you the opportunity to look at it another time and check for clarity.

10 Web Typography Rules Every Designer Should Know

When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text.

No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do.

That alone should make typography, the art of arranging type, a priority for any web designer.

In this article we take a look at 10 easy rules to keep in mind when designing your next web project.

1. Read through the text yourself

With a design like JonesingFor a designer without a great grasp of the text would have struggled to put together the typography that makes this site really work. As you tackle your own typography, you probably don’t have to worry about writing a site’s text — but you do have to read it!

Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. But reading through the text provides at least a basic idea of how the text can be integrated into a website, avoiding the disconnect between the writing and the design of a website.

You can kick your typography up yet another notch, if you can read through the text once it’s in place in your design. Take special note of the space around the letters. Do you have any unusually big spaces that look odd? A little careful typography can eliminate those issues. You can also get an idea of lines that might be too long to easily read, awkward line breaks and similar issues.

2. Dump Lorem ipsum as soon as possible

Do you think you could have designed Jesus Rodriguez Velasco’s website without the actual text? The site is heavily dependent on the written word — and very specific words too. Even the body text got special attention with a drop cap and some other tweaking that just wouldn’t have been possible with Lorem ipsum.

Unless the text of your website is actually Lorem ipsum, dummy text will bear no similarity to the real thing. That means that any tweak you might make to the text — or the design surrounding it — will have to wait until you get the real thing. Asking for (and getting) text from your client as early as possible in the process will give you the ability to match your overall design and your typography.

3. Show a clear hierarchy

When you arrive at Rik Cat Industries, you know immediately where you should start reading. Even though there are a few links at the top of the page, Rik’s welcome catches your eye first. It’s much bigger, using typography to establish a clear hierarchy.

Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that hierarchy — just as Rik’s does — as long as you know your hierarchical order ahead of time. By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Your design’s hierarchy goes beyond just the typography you employ, of course, but since users almost always start with the text, it makes sense for designers to do the same.

4. Pay attention to both macro and micro typography

Relying entirely on typography for their front page, the Crowley Webb and Associate’s website was designed with two factors in mind: both macro and micro typography.

Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own.

Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn’t legible, there’s no point in proceeding. Crowley Webb and Associates addressed this question through both careful writing and spacing out those words that the site would highlight.

But macro-typography provides you with the opportunity to make your text more than well-spaced: it’s the chance to make it look appealing and a part of your whole design. The choice of typefaces and colors on this website create a viable whole. Ignoring either facet of typography is detrimental.

5. Take care with type colors

It would be so easy to lose text in the background of ArtofElan, especially the bright red on dark red combination used by the designer. When a web designer works with colored type, care is absolutely necessary, there’s no guarantee that a red on red combination, or even a yellow on red combination will be visible. After all, everyone has visited a website where the text seemed to be only one shade off from the background color and gotten a case of eye strain when they tried to read it.

The easiest fix for this situation is to make sure that the color of your type is drastically different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well: something along the lines of a dark blue on a light pink will get the job done. Reversed out text is pretty tricky… while you can work with light pink text on a dark blue background, you’re more likely to get a complaint about it.

6. Get serious about your CSS

If your CSS is solid, you can move between pages of your website seamlessly, just as the different versions of Hutchouse.com rely on different stylesheets to create some impressive effects. Even if you don’t take things as far as Hutchhouse, CSS can help eliminate amateur typography issues like changing up typefaces and sizes between pages.

CSS can provide easy consistency between your typography across the entirety of a website. If you are consistent in how you use type, however, breaking that consistency even a small amount can make whatever you wish to highlight truly stand out, just like establishing and then breaking a grid can make for an effective design. In web typography, keeping your fonts consistent can be a simple matter of CSS.

7. Ditch the centered text

Choosing an alternative to centered text can make a website design easy to read, just like DesignCanChange.org. Opting for centered text, especially on a page like this, would make for a problematic page: the jagged edges centering creates on each side make it much harder to read and there are plenty of opportunities for perfectly centered text to wind up distorting the rest of your designs on different displays.

In some circles, centered type is only one step up from using Comic Sans in a website design. You might consider it for a headline, but in general, aligning your text to the left will make your readers much more comfortable, unless they read from right to left.

8. Deal with smart quotes and other symbols

When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text.

No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do.

That alone should make typography, the art of arranging type, a priority for any web designer.

In this article we take a look at 10 easy rules to keep in mind when designing your next web project.

9. Plan for your text to get larger

When you increase the size of the text on Veerle Pieters’ website, it’s not quite as pretty than if you use the font size she picked out. However, you can still read everything, locate links and so forth, something that is true of very few websites.

That’s because, in part, many designers make sure to layout text in 10 point font or even smaller. Most people are comfortable reading such fonts, but Baby Boomers make up a huge section of the web-browsing population and a lot of those aging web surfers are going to have their browsers set to display type as large as they can. Your text, as well as your design, needs to be able to adapt to that fact.

It’s also worth taking into account the fact that browser size can vary dramatically, moving text around to unexpected locations if you aren’t careful. If bumping the size up a point creates problems, that older demographic is going to move on to the next website in a hurry. Having to scroll forever over to the side will have a similar result.

10. Show a preference for sans serif

If you look at the A List Apart’s website, pretty much every big block of text is set in a sans serif typeface, making it much easier to read. Headlines and other smaller blocks of text are laid out in serifed fonts, creating a balance between the two.

70 Expert Ideas For Better CSS Coding

CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. An easy way to minimize the complexity of the code is as useful as not-so-well-known CSS attributes and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most useful CSS tricks, tips, ideas, methods, techniques and coding solutions and listed them below. We also included some basic techniques you can probably use in every project you are developing, but which are hard to find once you need them.

And what has come out of it is an overview of over 70 expert CSS ideas which can improve your efficiency of CSS coding. You might be willing to check out the list of references and related articles in the end of this post.

We’d like to express sincere gratitude to all designers who shared their ideas, techniques, methods, knowledge and experience with their readers. Thank you, we, coders, designers, developers, information architects - you name it - really appreciate it.

You might be interested in reading our article 53 CSS-Techniques You Couldn’t Live Without, which should provide you with a basic toolbox for CSS-based techniques you might use in your next projects.

Update (29/05/2007): Brazilian-Portuguese translation of the article is also available. Thanks to Maurício Samy Silva.

1.1. Workflow: Getting Started

• After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.” [CSSing]
• Use a master stylesheet. “One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]

  master.css
  @import url("reset.css");
  @import url("global.css");
  
  @import url("flash.css");
  @import url("structure.css");
  

• Reset your CSS-styles first. “You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson]
• Keep a library of helpful CSS classes. Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names (i.e.

  ...

  ), make use of them debugging your markup. (updated) [Richard K. Miller]

  CSS:
  .width100 { width: 100%; }
  .width75 { width: 75%; }
  .width50 { width: 50%; }
  .floatLeft { float: left; }
  .floatRight { float: right; }
  .alignLeft { text-align: left; }
  .alignRight { text-align: right; }
  

• Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.

Clear And Effective Communication In Web Design

Communication is one of the foundational elements of a good website. It is essential for a positive user experience and for a successful website that truly benefits its owners. All types of websites are affected by the need for good communication in one way or another. Regardless of whether the website in question is an e-commerce website, a blog, a portfolio website, an information website for a service company, a government website or any other type of website, there is a significant need to communicate effectively with visitors.

Because of the significance of communication with visitors, it is an essential consideration for every designer and website owner and the responsibility of both. Unfortunately, communication is sometimes overlooked and takes a backseat to the visual attractiveness of a website. Ideally, the design and other elements that do the communicating work together to create a clear, unified message to visitors.

In this article, we’ll take a broad look at the subject of clear communication in Web design. We’ll start with a discussion of the primary methods of communication for websites and typical challenges that designers face. From there, we’ll move on to look at what specifically should be communicated to visitors and tips for implementing this in your own work. At the end, we’ll look at some of the goals that should be established in terms of communication when developing websites, as well as some of the results of having a website that communicates effectively.

1. Methods of Communication

Websites communicate with visitors in a number of different ways. Not all websites take the same approach, but almost every website will use at least a few common methods of communication. To get started, let’s first look at some of the basic ways that websites communicate with visitors before going into more depth on the subject.

1.1. Text

Text is, of course, the most obvious form of communication that takes place online. Whether the text is in the main body content of the page or a headline, most website visitors rely on text to understand the basic messages of a website. Depending on the type of the website, text may be extremely critical to communication, as in the case of blogs.

The approach taken with text will depend on the purpose of the website. For example, sales copy on an e-commerce or membership website will differ from article content on an informational website.

1.2. Images

We’ve all heard the saying “A picture is worth a thousand words.” Photos and images are excellent resources not only for creating an attractive and interesting design, but also for communication purposes. Images can often communicate a message faster, more clearly and more emphatically than text. The designer needs to be aware of the messages being communicated via images and ensure they work in harmony with the rest of the website’s communication.

1.3. Titles and Headers

Whether you’re examining Web design, magazine layout, newspaper design, etc., titles and headers are critical to effective communication. Human nature is to want to know something quickly, and especially when on the Web. Titles and headers help to communicate major points and ideas to visitors, and they tell visitors what to expect from the rest of the content.

1.4. Icons

One of the reasons icons are so useful in Web design is that they communicate messages without any text being used. A visitor may see a familiar icon, such as a house that represents a link to the home page, and immediately know what the item represents and what to do.

1.5. Design Styles

The style of a website’s design may also communicate a message to visitors. Certain design styles are common in particular industries, and other styles may not be an appropriate fit for a specific type of website. The style can, in these cases, indicate to visitors something about your website and how it fits their needs. For example, a website that sells skateboards would likely feature a grunge style design. This is a style that most visitors in the target market would appreciate, and by seeing this type of style, visitors in that target market will likely feel comfortable with the website and feel an association with it. In this case, the design style helps communicate to visitors that this is where they belong and that the website was created for them.

Recession Tips For Web Designers

For web designers, there are four keys to surviving bad economic times: do good work, charge a fair price, lower your overhead, and be sure you are communicating with your client. As a reader of 24 ways, you already do good work, so let’s focus on the rest.

I know something about surviving bad times, having started my agency, Happy Cog, at the dawn of the dot-com bust. Of course, the recession we’re in now may end up making the dot-com bust look like the years of bling and gravy. But the bust was rough enough at the time.

Bad times are hard on overweight companies and over-leveraged start-ups, but can be kind to freelancers and small agencies. Clients who once had money to burn and big agencies to help them burn it suddenly consider the quality of work more important than the marquee value of the business card. Fancy offices and ten people at every meeting are out. A close relationship with an individual or small team that listens is in.

Thin is in:

If you were good in client meetings when you were an employee, print business cards and pick a name for your new agency. Once some cash rolls in, see an accountant.

If the one-person entrepreneur model isn’t you, it’s no problem. Form a virtual agency with colleagues who complement your creative, technical, and business skills. Athletics is a Brooklyn-based multi-disciplinary “art and design collective.” Talk about low overhead: they don’t have a president, a payroll, or a pension plan. But that hasn’t stopped clients like adidas, Nike, MTV, HBO, Disney, DKNY, and Sundance Channel from knocking on their (virtual) doors.

Running a traditional business is like securing a political position in Chicago: it costs a fortune. That’s why bad times crush so many companies. But you are a creature of the internets. You don’t need an office to do great work. I ran Happy Cog out of my apartment for far longer than anyone realized. My clients, when they learned my secret, didn’t care.

Keep it lean: if you can budget your incoming freelance money, you don’t have to pay yourself a traditional salary. Removing the overhead associated with payroll means more of the budget stays in your pocket, enabling you to price your projects competitively, while still within industry norms. (Underpricing is uncool, and clients who knowingly choose below-market-rate vendors tend not to treat those vendors with respect.)