Tag Archives: css

When Should You Use a CSS Framework?

Jan 13, 2009 by Matt | Posted in Design One Comment

The web has been abuzz lately about CSS frameworks, such as 960gs and Blueprint. There have been tutorials springing up right and left, and articles discussing the merits and problems with them.

What is a CSS framework? Wikipedia defines it as:

A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks (usually packaged as external .css sheets inserted into the header) package a number of ready-made options for designing and outlaying a webpage.

There is plenty of debate over whether it’s a good idea to use frameworks or not. Many complain that they aren’t semantically correct, since they often work by using predefined classes, such as “grid_12,” to create the visual page structure. I admit to having been skeptical of them until recently, but I’m starting to see cases where they may be useful.

Continue reading →

jQuery Color Fade Menu

Nov 19, 2008 by Matt | Posted in Coding No Comments

Have you ever seen one of those Flash navigational menus where the hover color fades in and out? You know, the ones where you point to an item and it doesn’t just change color abruptly, but fades into the other color?

Well, it’s possible to create that effect without Flash, using straight JavaScript. Using the jQuery framework it’s not too hard at all.

CSS-Tricks.com has a great tutorial up, teaching how to do just that. Color Fading Menu with jQuery.

It’s a neat effect, and though it’s not entirely necessary, it can make your navigation a little more interesting without detracting from it usability or SEO-wise.

10 Cool and Useful CSS Tutorials

Nov 16, 2008 by Matt | Posted in Design One Comment

If you work with CSS much at all, these ten tutorials are must-reads. They range from sprites to print stylesheets, speech bubbles to sliding doors. The sorts of things that are nice to have in your CSS toolbox for future use, when you’ll undoubtedly need them.

Continue reading →

CSS Tip: Remove Link and Form Field Outlines

Nov 11, 2008 by Matt | Posted in Design 3 Comments

In most browsers, a dotted outline appears around links when they are clicked.

In some cases, this is annoying, such as with a JavaScript tabbed box or a graphical navigation menu. While it’s a minor issue, it still doesn’t look quite right…

Then you have Macs. In Apple’s Safari web browser, or any browser running under Mac OS X, when you click inside a form field to start typing, a glowing blue outline appears around it.

While it’s a nice touch, it doesn’t always look quite right. If you style the form field with custom borders and background images, then it can look really odd.

Continue reading →

Only 4.13% of the Web is Standards Compliant?

Oct 20, 2008 by Matt | Posted in General 5 Comments

Browser maker Opera has conducted a recent study to see how much of the web is standards compliant. Using a specialized web crawler, dubbed “MAMA” for “Metadata Analysis and Mining Application,” that searches around 3.5 million pages, the company has determined that a mere 4.13% of the web is standards compliant.

Of course, one wonders about the accuracy of this study. There are certainly more than 3.5 million pages on the internet. Perhaps they were only searching a portion of the web that had less valid pages? And does a site with 100 non-compliant pages count as 100 invalid pages? How many of those sites are invalid because they try to comply to Microsoft’s bogus standard (a.k.a the “does it look alright in IE?” standard) at the same time?

I can understand the small figure, and maybe it is realistic. After all, many a website almost validates, such as Reddit.com, which has one lone (and minor) error stopping it from validating. And heck, Google and Amazon are validity-challenged. Amazon has “1445 Errors, 135 warning(s)” on it’s front page.

Many monolithic sites that you’d think would validate don’t, though they look fine in most browsers anyway. This brings up an interesting question: Does it matter whether you meet the standard to the letter, or is it okay if it looks fine in all of the standards-compliant browsers? What’s your opinion?

News article: Opera study: only 4.13% of the web is standards-compliant

Interesting Reddit Discussion: http://www.reddit.com/r/programming/comments/77grk/

CSS Tip: Reset Browser Defaults

Aug 18, 2008 by Matt | Posted in Design One Comment

If you were to create a bare minimum XHTML document, with no CSS applied, and fill it with various elements (a few paragraphs, a heading or two, etc), you’ll notice that web browsers have default formatting for everything. Paragraphs have a certain amount of space between them, the body tag has default padding, etc.

This, of course, introduces cross-browser issues. Each browser has it’s own default styling, and they’re all different. So in order to make your CSS work well in more than one browser, it’s generally best to unset the default styles witth a browser reset stylesheet, or section in an existing stylesheet.

Rather than write one here and tell you to copy and paste it, since not all resets are equal, I’ll instead offer you a selection of links where you can find CSS reset styles. Choose one that fits your needs.

Getting Around IE’s Lack of Min-Width Support

Aug 11, 2008 by Matt | Posted in Design 3 Comments

Min-width is a useful CSS property that, as it’s name suggests, sets the minimum width of an element to a specific pixel width (or em or whatever). It’s very useful.

The problem? Microsoft. Internet Exploder doesn’t support the property. Instead of ranting about Microsoft’s pathetic browser, I’ll skip to the solution…

First, make sure you have an IE-specific stylesheet to put all you IE hacks in. It makes it easier to manage things, and it makes sure hacks like this don’t stop your CSS from validating. (Believe me, this one will.) Include it in your page head like so:

<!--[if IE]><link rel="stylesheet" href="ieislame.css" type="text/css" media="all" /><![endif]-->

Next, add something along the lines of this to the file:

#mydiv { width:expression(document.body.clientWidth < 850? "850px": "auto" ); }

Just replace both instances of “850” with the minimum width you prefer.

Not too hard, but it shouldn’t be necessary.

CSS and JavaScript: More Files or Less?

Jul 3, 2008 by Matt | Posted in Design 4 Comments

If you do much reading about web optimization, you will have heard people say that you should cram all your CSS into a single large file, and all the JavaScript into another, in order to save on loading times.

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. (Yahoo Developer Network)

In other places, you will be told that you should separate your CSS into multiple files to make it easier to manage. One for layout, one for typography, one for colors…

Which do you think is a better idea? Personally, I prefer quick loading times. Your users will thank you for faster pages; they don’t care if it’s easy to edit parts of your site or not. Generally I prefer to put all of the main CSS into one file, but on pages that require a large amount of unique styles, I include a separate file with the page-specific styles.

Firefox 3.0 Testing

Jun 22, 2008 by Matt | Posted in Design No Comments

Firefox 3.0 is out now. If you’re a Firefox user, then chances are you’ve already downloaded and installed it, maybe played with some of the new features a bit. However, there’s serious work to be done, albeit quick work.

Whether you’re a regular Firefox user, or an advocate of another browser, if you run website you need to test it thoroughly in the new version of Firefox.

Changes were made to the rendering engine in Firefox 3, improving standards support by far (I believe it passes the ACID2 test?). Those changes, of course, will affect how pages are rendered. So go through your sites and make sure they look alright.

Need an example? Take a look at MVH Media. Here’s a screenshot from Firefox 2:

MVH Media Header (Firefox 2)

After installing Firefox 3, it looks more like this:

MVH Media Header (Firefox 3)

By the time you’re reading this, I’ll probably have fixed it. But it just goes to show that you should keep up with changes to major browsers. I’m glad I caught it early.

Fixed vs. Liquid Layouts

May 21, 2008 by Matt | Posted in Design 10 Comments

This is yet another web-related topic that gets people arguing. Not quite as bad as “Mac vs. PC,” it really gets some people going. Which is better, a fixed-width layout, or a fluid one that resizes to fit the browser window. Unlike some people, I say that it depends on the project, and that there isn’t a one-size-fits-all solution (though I do lean slightly toward fixed-width layouts). Besides, if we all agreed on standards for everything, we wouldn’t have anything to argue about..

Both sides of the argument have their pluses and minuses, and generally I would say “go with what best suits the instance.” If you want a certain look, which will require vertical tile images, and other images of specific width, you may need to go with a fixed-width layout. If you want as much control as you can get over the look of your design, or if you need your content area to be a specific size, go with a fixed layout.

Continue reading →