meteoracle

I was just in the midst of building a site with a rather large background that spills well outside of the 960 grid the site is built on (2000px of rather large to be exact).

It looked great on the large monitors in the office with this bit of CSS displaying this huge background nicely:

 #sitebg {
  background-image: url(../img/sitebg.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  left: 50%;
  margin-left: -1000px;
  min-height: 1200px;
  position: fixed;
  width: 2000px; } 

As the particular image I was working with had a central piece of text that a number of absolutely positioned divs relate to in positioning, the iPad pulled a lovely trick on me by automatically resizing the background image to fit the width of the screen.

All of a sudden my absolutely positioned divs looked like they were all over the shop due to the resizing of the background image. After a bit of digging, it turns out you need to tell the iPad the specific size of the background like this:

-webkit-background-size: 2000px 1200px;

Adding this to the CSS rule sorts the issue and everything displays at the correct size.

\o/

Validate your code.

Why?

Well, the W3C can tell you why you should validate your code, and they do a much better job of telling you what you need to know than I would. But I will list the basic reasons if you can’t be bothered to click the link:

• Validation used as a debugging tool
• Future-proof quality checking
• Helps teach good practices
• Gives a sign of professionalism

How?

There’s a great little Firefox add-on called HTML Tidy. In conjunction with viewing the source of a page, you can easily track down invalid code to set it back on the straight and narrow.

You can also use the online W3c HTML Validation Service and the online W3c CSS Validation Service if you develop using other browsers.

Treat IE6 better than CSS3 supporting browsers.

I’ve seen a large number of tweets and blog postings say how great CSS3 is, and how to use it. Hell, I’ve used it myself. The thing is, only the newest browsers support what is still (in the majority) a working draft of the CSS3 specification.

According to the damned lies statistics (November 2009 browser stats from ars technica), IE6 is still the most used individual version of all browsers (with IE still with over 60% share in total). Don’t forget those poor users still subjected to old browsers.

If you do want to use CSS3, please make sure you apply graceful degradation for those browsers that other people are stuck with.

^{Big thanks to @sweetL80 for the discussions (and tweet) that lead to me writing about this.}

Make your content readable.

Making the text on your website easier on the eye is just one line of CSS away, so there should be no excuse for you not to do this.

p { line-height: 1.5em }

I find that this line height is usually optimal for the main text content on a page.

Design using a grid system.

It doesn’t matter which CSS framework you end up building the final site with, or if you write your CSS from scratch, the idea is to have a well structured layout.

A set amount of spacing between sections of content throughout will bring uniformity and an organised feel to the site, even in a ‘non-standard’ layout.