Interview with CSSMania Founder Gabriel Segura

Over the past year I’ve had several sites listed on a variety of CSS galleries. CSS Mania has always provided the most traffic and comments/votes and I thought it would be interesting to chat with the founder, Gabriel Segura. Gabriel was kind enough to answer our questions and the transcript is below.

Allen: Can we start with a brief overview of yourself?
Gabriel: My name is Gabriel Segura. I was born in 1975. I am a telecomunications engineer (working at Ericsson during the day), flash designer, front-end web developer and CSS Mania’s father (at night). Married with a beautiful woman, Susana, and father of a “real” daughter Claudia (3 years old). We also have a Himalayan Persian cat at home called “Yuna” (Final Fantasy X). God gave me a wife that loves to play PS3/Xbox/Wii more than me.

Allen: What is CSS Mania?
Gabriel: We believe that CSS Mania is the largest CSS showcase in the world.

Allen: Why did you start CSS Mania and when did it launch?
Gabriel: CSS Mania was born in March 2004 as a section on my personal blog as I loafed around the few CSS Showcases that existed during that time. In 2005, before our admired Paul Scrivens sold CSSVault to Jacob Gower, we realized that other CSS Showcases sites, except ours, weren’t updating very regularly. We know that updates are what make a difference to readers.

We aren’t interested in the geek insights or trivial discussions common on other similar sites. We are interested in learning what any CSS afficionado or professional might want to learn.

Common CSS Issue Resolution

NetTuts has a good look into 5 common css issues and how to resolve them easily and quickly. The five css issues are:

  • Why are my styles not effective?
  • The difference between relative and absolute positioning
  • Internet Explorer 6 double margin issue
  • Specific selector issues
  • Testing your site in multiple browsers

As always, if you run into trouble, post your questions in our CSS help forum.

Applying CSS

Style Sheets in External Files

Link
To define an external Style Sheet to be used to format your HTML you use place a Link element in the Head area of the HTML file.

The basic tag would be:

<LINK REL=stylesheet href="mystyle.css" mce_href="mystyle.css">

HREF specifies the location and file name and REL indicates the file is a Style Sheet.

Additional Declarations include:

Media

Media is used to define the application of the CSS to its end use. If more than one external style sheet is defined with the link element the Media type would set the proper file to be used for the proper use of the page. The Media definition is not implemented in IE4 or NS4.

<LINK REL=stylesheet MEDIA=”screen” href=”mystyle.css” mce_href=”mystyle.css” TYPE=”text/css”>

You can also define more than one profile with comas between the values.

Media=Print,Screen,Aural

PRINT – For documents viewed on screen in print preview mode.

SCREEN – a continuous presentation for computer screens.

PROJECTION – paged presentation for projected presentations.

BRAILLE – for Braille tactile feedback devices.

AURAL – aural presentation, e.g. for a speech synthesizer.

ALL – the default value, the style sheet applies to all output devices.


Title

The Title Attribute can be used to define the type of style sheet. Not using the TITLE tag makes your file persistent. This means the Selectors in a file without a title will always be applied to the document.

TITLE=”default”

If you define more than one Style Sheet to be applied to your document you can use the title attribute to group them.

<LINK REL=”alternate stylesheet” TITLE=”bluepage” href=”b-paragraph.css” mce_href=”b-paragraph.css”>

<LINK REL=”alternate stylesheet” TITLE=”bluepage” href=”b-tables.css” mce_href=”b-tables.css”>

<LINK href=”largefont.css” mce_href=”largefont.css”>
TYPE can be used to describe the file type of the Style Sheet.

<LINK href=”mystyle.css” mce_href=”mystyle.css” TYPE=”text/css”>


Meta Tag

The Meta element can be used on your page to identify to the Enduser’s client that your page includes CSS information.

<META HTTP-EQUIV=”Content-Style-Type” CONTENT=”text/css”>


Style Sheet use by the Enduser

If the Enduser would like to construct their own style sheet they would follow the same method as an author that is constructing an external style sheet. However because the enduser will not be able to prepare style selectors that will override all the possible ID and Class Element Declarations the enduser’s User Agent should be able to ignore server side Style Sheets.

Internet Explorer agents define the client side Style Sheet in the Internet Options – General Tab Under the Accessibility area.

Making Money with CSS

Although CSS layouts have been around for years, they haven’t become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) – nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at The Counter).

So, why should you convert your website from its current table-based layout to a CSS layout? It’ll make you money. Simple really. And here’s four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It’s not unusual to see reductions of 50% or more in file size when switching from CSS to tables. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user’s computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu for more on this.

A higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

  • The code is cleaner and therefore more accessible to search engines
  • Important content can be placed at the top of the HTML document
  • There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson).

CSS downloads faster than tables because:

  • Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content
  • Tables appear on the screen all in one go – no part of the table will appear until the entire table is downloaded and rendered
  • Tables encourage the use of spacer images to aid with positioning
  • CSS generally requires less code than cumbersome tables
  • All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user’s computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
  • With CSS you can control the order items download on to the screen – make the content appear before slow-loading images and your site users will definitely appreciate it

Increase in reach

The more people you can reach, the more visitors you’ll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don’t underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: eTForecast) and one third of the world’s population will own a wireless device (source: ClickZ).

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn’t possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at usability testing and knows an awful lot about accessible CSS web design.