Posts Tagged ‘CSS’

CSS Float Trick

Thursday, September 10th, 2009

Do you ever have a list of items (such as a ul) in which each item is floating to make them appear side-by-side (an example is the list of sites at BlizzardDigital.org)? Tired of using a non-semantic, empty div after the ul to clear the items? A useful trick is to add float: left; to the ul itself. This fits the ul’s box around its inner items. Without float specified, the ul’s box does not wrap around its items at all, making everything on the page after it scoot up behind all the list items. Very annoying. The normal fix for this would be to make the following element clear, but this isn’t always desirable. Your options are probably to have an empty div after it specifically to clear it (yuck) or make the probably unrelated following element clear it (yuck also). Just float the containing element (in my example, a ul) and set its width to 100%. The width makes sure no one squeezes in on the sides and therefore no clearing is necessary.

Clear as mud, right? :)

—Kyle Blizzard

SEO and Validation

Friday, August 28th, 2009

I was reading The Truth About Validation and I felt the need to respond. First off, Tim makes some valid points but only if the article is renamed “The Truth About Validation and SEO”. I agree, if a web developer tells you that you can’t be much of an SEO if you don’t write valid code then that developer is a clown and should be ignored. If they are just saying that you are not a valid coder then that would be true. From a coder’s point of view they could go as far as saying that you are a hack, would they be wrong? That said, there are many other reasons to write valid code.  Some of the best SEO gods, gurus, evangelists, provide detailed change requests to web designers and this is often preferred on a valid site so the SEO does not break the valid code. Maybe SEO specialists should inform the client that there is such a thing as validation and let them decide. It’s similar to an auto mechanic letting the customer decide if they want a factory replacement part or an aftermarket part, is it worth the extra money? Determining that invalid pages are ranked high for certain terms does not tell the complete story but it does tell most of the story. What if a search bot reaches a certain point on a page that is so invalid it stops parsing? At that point the rest of your content would be ignored. What if the next algo revision applies more weight to valid code or is modified so that it halts when a missing end tag is encountered (is Bing already doing this)? You would have partial page results in the index which means you have wasted copy.  More important is the fact that invalid code might not render properly on the next update to your audience’s preferred browser. At some point the invalid code will probably rear its ugly head and then you will need to pay the piper to write valid code, or at least new code, so why not let the coders get paid for what they do?

We could argue that having a shade tree mechanic use bailing wire to fix a dragging muffler will allow you to use the car again but for how long? Yes it will cost more money to order the new muffler hanger and have a muffler shop install it properly but when you hit that big speed bump at the grocery store which one do you think will hold up? At that point did it really cost more money to have it done right?

I agree if you charge someone to do SEO work and you don’t write valid code then you aren’t ripping them off. What if you are upfront and tell them, directly, I am going to make the changes using invalid code, will they care? Should they have a choice or is OK to leave them in the dark since it is to your advantage?

One point Tim implied that I disagree with is that it’s more expensive to work on valid sites. It is much easier to work on a properly designed CSS and XHTML site than a hacked, table infested, monstrosity. We charge a lot more, well actually, we usually require a complete redesign before we start working on a hacked site but this is strictly related to design work, not SEO. Let me repeat here that I agree that validation has little to do with SEO if anything. I say if anything because we don’t know if any search engines pay greater weight to valid code and there can be a case made for a parser getting stuck or stopping after a bad or missing tag. Maybe not Google but can we guarantee this won’t happen with any search engine?

I give the thumbs up to valid code because without validation then you have to set some other standard for when the code is acceptable. It would be much more difficult to create a list of what code is bad or invalid but acceptable. Why not follow the standards that are used to design every web browser?

I also read “source code validation common sense” over at SEOBook by Aaron Wall. Wow! He really goes off and I don’t blame him but I have never personally heard a good web designer that is proud of his ability and trade claim that validation is an integral part of SEO work. I say ignore those monkeys but let the design experts maintain their status of elite, or cream of the crop, by writing valid code and proving they are at the top of their game just as you are at the top of yours. Here are some of the top reasons to validate.

added: I would be considered a hack when it comes to XHTML and CSS. If I perform onpage SEO I check to see if the client site is valid. If it is then I make sure it’s valid when I finish. Often I find errors that I have caused and then I have to employ someone from our design team to fix it. I have been known to render this site invalid just by blogging :)

—David Blizzard

More Random Web Design Tips

Friday, June 5th, 2009

Body Element Classes

One thing I’ve started doing somewhat recently is adding a unique class name to the body element of each page. This allows me to write page-specific CSS as necessary without creating an extra stylesheet. Ideally, there should be styles for common elements that make up the site, rather than style for each page, but this can’t always be avoided. One case could be that a particular page needs to have a slightly different layout than the rest of the site. Body element class to the rescue!

Internet Explorer 6

We all know Internet Explorer 6 is a regular pain in the neck, right? Fortunately, it’s easy to add IE6-specific style with this selector:
* html [additional selectors...]

For example, the style * html p { font-weight: bold; } makes all paragraphs bold only in Internet Explorer 6.  It’s valid, but no other major browser will apply it. This is useful because sometimes the style needed to make things in IE6 look one way is drastically different than what is needed to make it look the same in all the other browsers. A simpler solution, though, is to tell your client to upgrade his 8-year-old browser. :)

“Navbars”

A site typically has a “bar” of navigational links. Vertically laid out navigation is easy to create and append additional links later. Horizontal navigation is sometimes desired instead, but it’s not always as trivial to append and can be a little trickier to achieve.

This tip will be focused on horizontal navigation. First, you should most definitely use unordered lists (the ul element) to organize your navigation links whether you’re using vertical, horizontal, upside-down, or anything-else-you-can-think of navigation. (See the W3’s excellent webmaster tips for more on unordered lists and their uses.) Once you’ve marked up your navigational links, jump over to the stylesheet and add a display: inline; line to your navigation’s li elements. Now take a step back and behold your now-horizontal navigational links!

If you find you need to set the width and height of your links, just set the display type of the a elements to inline-block, which I was surprised to find out was actually supported in Internet Explorer 6! Once you’ve set that, your links will behave like block-level elements as far as styling goes, but they will remain positioned inline. Sweet!

Well, that’s all for now. Make sure to check back occasionally for more random web tips from your Uncle Kyle!

—Kyle Blizzard

Web Standards Again

Thursday, April 9th, 2009

Greetings! Many times we have clients that have trouble understanding the role of web standards and why they are important. So I created this high level explanation that I hope will suffice. It is, by its very nature, simplified and incomplete, so don’t stone me to death. Here goes…

The World Wide Web Consortium (www.w3.org) is the standards body for the internet. They define the standard “language” or markup that web pages are written in. All of our documents are written in the strict flavor of XHTML (eXtensible Hypertext Markup Language) 1.0 which is very intolerant of errors. Conforming to these standards has several practical benefits. First, the site is easier to update since all of the content is easy to read and logically organized. This reduces cost for updates to the site. The W3 provides a validator to check pages against the XHTML standard and report any errors that it finds.

Secondly, strict XHTML mandates that the graphical presentation of the page (how it looks) be separated from the actual content of the page. So there is a separate file we create called a “stylesheet” that determines how the page will look. All of the graphics, colors, and layout are determined by this stylesheet. This is a benefit because it makes for smaller, faster loading pages which can rank higher in search engines than bloated pages that are slow to load. It also makes it easier to update how the site looks. For example, as autumn approaches you could change the entire look of the site by changing the colors in the stylesheet to fall colors. This is much more efficient than redesigning a site in the old days when each individual page had to be changed at great expense.

Lastly, search engines look for unique, relevant content that is organized well. By keeping all of the content in a separate file, the content can be organized so that the most important information is close to the top of the document while repetitive elements such as the navigation links are closer to the footer.

There is a great FAQ on web standards and their importance at:

http://www.webstandards.org/learn/faq/

Good Luck!

—Alan

The img Element Vs. the CSS background-image Property

Friday, February 13th, 2009

Don’t know when to use the img element or when to use the CSS background-image property? Don’t fret; there is hope. Read further and all shall be revealed.

The img element is best used for pictures that are completely unrelated to the stylesheet. That is, pictures that would need to display no matter how much the look of the site changes. These would be pictures related to a news article or photos in a gallery.

The CSS background-image property is for images that make up the appearance of the stylesheet. These pictures on one stylesheet would be different or just completely absent on another stylesheet. They don’t add to the content of the page in any way and are only there to give the page its “look”. These image files would be stored in the stylesheet’s images folder. (See my last post for more on this.)

Just another tip from your uncle Kyle!

—Kyle Blizzard

Organizing Your CSS Files

Friday, February 13th, 2009

When I create a web site, I like to organize my stylesheets and images into a specific folder structure. It keeps things tidy and separates presentation files (stylesheets and images) from content files (pages and images related to the content). It also leaves room for additional stylesheet “themes” for your site.

Here is an example of this folder structure:

/styles/
/styles/default/
/styles/default/images/

Default in this example would be the name of the “theme”. The sites I develop typically do not have multiple themes for the user to pick, so I don’t usually take the time to give them fancy names. However, if your site utilizes multiple stylesheets that the user could choose from (such as at the CSS Zen Garden), creative names would be helpful.

All stylesheets for the Default theme would be placed in the /styles/default/ folder. Likewise, images used by those stylesheets would go in the /styles/default/images/ folder.

This method keeps your styles consolidated and makes it easy to use them across multiple sites. All you need to do is copy the folder to the other site; you don’t need to pick through the images folder and figure out which ones are used by the stylesheet and which ones aren’t.

Technically, you wouldn’t even need to copy anything to another site. You could just specify the full URL in the link element or @import rule on the page, but I urge you not to do this. Your visitors may be using security software that sees cross-site references as malicious, thus blocking the stylesheet from downloading or, worse, blocking the entire page.

—Kyle Blizzard

Logical Structures and Happy Designers

Sunday, December 14th, 2008

While valid markup and CSS are necessary, they’re not the only things we web designers require to keep our sanity. One can create a valid page that is still difficult to work on. For example, using absolutely positioned elements for page layout is even worse than just using tables. When you add content to one element, the ones below it are not pushed down because they are no longer in the “flow” of the page. This causes overlap of content and makes it extremely difficult and frustrating to add anything to the page. Utilities such as Yahoo! SiteBuilder create pages like this.

A markup structure that is built to logically represent the content of the page and not to facilitate the appearance of the page is much more easily edited and future-proof than the “HTML soup” sites of old. I wistfully say “old”, but the truth of the matter seems to be that HTML soup is still the preferred meal of the majority of so-called web designers. A lot of the web sites we’ve moved to our servers are a pain to work with and rarely validate, and they were, sadly, created by professional web designers!

Another couple things that are bad practice but not invalid are the use of inline style and CSS classes with names that tie them to a particular stylesheet such as “red-text” or “left-side”. What if you change the stylesheet some day and that “red-text” is now supposed to be blue or the “left-side” spans the bottom of the page? The World Wide Web Consortium themselves discourage the naming of CSS classes like this. They also have some other useful tips that all web designers should read and keep in mind.

If you’re a fledgling web designer or perhaps someone who is just looking into having a web site created and wondering what valid code and good design practices can do for you, check out the CSS Zen Garden site, an excellent example that is logically structured and able to accept stylesheets of wildly different appearances without the need for markup changes.

—Kyle Blizzard

Valid code and happy designers

Thursday, December 11th, 2008

Writing valid XHTML and CSS takes a little extra time but can save a client money and a designer their sanity. In the relatively brief history of web design there has been a great deal of controversy concerning web standards. Designers like to make money and making money means completing projects quickly. Typically, if the client liked it and it rendered correctly then the project is done. The major browser manufacturers carry some of the blame in their efforts to have the latest and greatest features they have implemented web page design elements in their own way. Rather than engendering innovation they have had the effect of creating a Tower of Babel of incompatible tags. In the old days,  some designers used any hack necessary to get a page to display properly in the the most popular web browsers of the time. However, in the past several years, the web standards community has been increasingly vocal about incompatible code and rendering problems. This has been especially true with IE-only sites that will not render properly or at all in alternative browsers such as Firefox, Safari, Opera, and Chrome. However, a standards compliant site provides greater interoperability for the same content on different platforms.

Another additional benefit of writing valid code is that it is easier to read, edit, and redesign. Separating the presentation of a site from its content using stylesheets seems like a no brainer. Theoretically you could redesign an entire site just by editing the stylesheet and the graphics without ever touching the XHTML. We have a number of clients who move to us from other hosts and the amount of spaghetti code that we are asked to edit sometimes makes us want to pull our hair out.

The point is, you can write sloppy code if you want to. You could even use <blink> tags in a site designed entirely in tables and transparent gifs if you were so inclined. But where is the return on investment for the client? There is a high probability that you are not the last one that will ever touch their website. So have a heart and validate your XHTML and CSS. You will get faster at making lean, mean standards compliant sites that look good on any browser.

—Alan