The Future of DOCTYPEs

CW doctypeThe Future of DOCTYPEs

In the future, as far as page rendering is concerned, DOCTYPEs are likely to take a back seat to something on the horizon called "version targeting." Internet Explorer 8 will be the first browser to implement it. Using version targeting via a <meta> tag, you'll be able to lock a web browser into displaying any given page as if it were rendering in a specific version of that browser.

For example, if you have a Web page that looks great in Internet Explorer 7, but looks bad in Internet Explorer 8 (when it comes out), you will be able to use a single line of code on your page that will tell IE8 to display the page the way IE7 would, and your rendering problem is apparently solved.

There is much controversy over version targeting. 

 

Either way, no matter what happens with DOCTYPEs and version targeting, you'll want clean code and to test your page AT LEAST in the most popular browsers of the time. At the time of this writing, those are Internet Explorer 7 and Firefox 2. If possible, test in more browsers. There's a simple rule to remember here: TETO. (Test early, test often.) It's not a good idea to build your entire page, spending hours or days on it, then test it out in a second web browser only to find out it doesn't display as you like. Each time you add something new, test your page in multiple browsers. Test early, test often.

Keep Yourself Up To Date

Staying on top of the news in Web development is important as a Web designer. As with any kind of technology, Web design is in constant flux; it's always changing and evolving. To continue to build effective Web designs, you must grow with the new technology, methods, and trends. This doesn't mean you have to start devoting lots of time to independent study and research (though if you enjoy Web design, by all means go right ahead), but it does mean you should occasionally check up on what's new in the Web design community.

A great way to stay up to date is to find Websites you like that provide the information that most pertains to you, and use their RSS feeds to keep tabs on new updates. Begin by subscribing to WPDFD's RSS feed - http://www.wpdfd.com/articles/feed/ - then you can use your favorite reader to see exactly when a new article is published.

Other popular sites to keep tabs on include A List Apart, Jeffrey Zeldman Presents, Simplebits, SEOmoz, and The Web Standards Project.

It's also a good idea to register for a few good Web design forums. You can ask questions and get feedback from other designers and often you'll find answers and have some of the most interesting conversations amongst your fellow developers. Try out the WPDFD Web Design Forums or give the DesignersTalk Forums a shot.

So There You Have It!

  1. Name CSS Classes Intelligently

Give CSS classes a name that corresponds to what element it controls, rather than what the style actually does. Then in the future if you change the color or size then you’ll still know what element of the page the class controls. For example when using CSS to control a certain box:

.green-box { background-color: green;

             padding-right: 40px; }

It would be better to call the class something like “top-box” especially as you might want to change the color of the box at a later stage:

.top-box { background-color: green;

           padding-right: 40px; }

  1. Use Shorthand Coding Techniques

If your still writing out each and every CSS declaration separately, then your probably wasting a ton of time. Not only is shorthand easier to write and edit, but it helps your pages load faster and more efficiently.

Font, Margin, Border, Padding, and many other properties can all be shortened.

Instead of writing:

p { padding-top: 20px;

    padding-right: 40px;

    padding-bottom:  30px;

    padding-left: 10px; }

You can write:

p { padding: 20px 40px 30px 10px; }

For Padding, Margin, and Border; the order of values refer to the following:

1 value = p { margin: 20px; } = All four sides

2 values = p { margin: 20px 40px; } = Top/Bottom Left/Right

3 values = p { margin: 20px 40px 30px; } = Top Left/Right Bottom

4 values = p { margin: 20px 40px 30px 10px; } = Top Right Bottom Left

A few great CSS shorthand guides:

http://www.dustindiaz.com/css-shorthand/

http://www.sitepoint.com/article/introduction-css-shorthand/

  1. Know Your Audience & Support Their Browsers

The general rule of thumb is to only support the latest browsers. Spending countless hours trying to fix/hack your coding to support older software is NEVER fun. And usually there are good reasons these outdated browsers have been updated (or ditched altogether).

But this is sometimes easier said than done. If you are coding for a design website whose target audience are “techies” and “geeks”; then dropping IE6 support might be easy. But if your target audience is older folks or users in less developed countries, then a majority of your visitors could still be using outdated software.

Be aware of your visitors and cater to their browser needs.

  1. CSS vs. Javascript

Trying to create something that is a bit too complex for CSS? Instead of cluttering your Style Sheet with a ton of coding that may or may not work on every browser, look into using Javascripts. Not only will your site run more efficiently, but it should take less time to code if done properly.

Even if you aren’t proficient in Javascript, check some of the following sites for some ready-made-scripts that might come in handy.

http://www.javascriptkit.com/

http://www.hotscripts.com/JavaScript/Scripts_and_Programs/index.html

  1. Use Premade CSS Templates

Still having trouble getting ideas on integrating advanced CSS features into your site? Why not use some coding that has been written and tested by others. There are a handful of great websites with CSS round-ups to aid you in your CSS needs.

http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/

http://intensivstation.ch/en/templates/

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

  1. Validate Your CSS

Whether you are still writing your coding and need to locate an error, or you have finished it altogether; validating your Style Sheet is extremely important. Not only can the W3C Validation Service help you fix errors and locate holes, but it ensures your coding is ‘web friendly’ and ready for the public.

W3C Validation Service:

http://jigsaw.w3.org/css-validator/

  1. Use The Proper Doctype

So you have finished coding your site, validated the CSS and XHMTL, and still can’t get it to look right? Maybe your doctype isn’t set properly. This is often overlooked and determines how the browser is to read your website, thus making it extremely important. Again, make sure to use the W3C Validator to your benefit.

  1. Use a CSS Compressor

Having trouble getting your Style Sheet to load and run efficiently? Try compressing it with some of the following compressors:

http://www.cssdrive.com/index.php/main/csscompressoradvanced/

http://developer.yahoo.com/yui/compressor/

http://csstidy.sourceforge.net/

  1. Remember Case Sensitive Element Names

Remember that element names in selectors are case sensitive when using CSS with XHTML. It is sometimes recommended to use only lowercase to ensure the possibility for errors is minimized. Also, values of the class and id attributes in HMTL and XHMTL are case sensitive; so make sure to keep an eye on your “caps” when coding.

  1. Download CSS Resource Guides

Whether writing your coding from scratch or using a CSS Framework; some of the following “cheat sheets” could come in handy for your CSS needs:

http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/

http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

http://www.digitart.net/blueprintcss/bluebrintcss.pdf

http://www.apple.com/downloads/dashboard/developer/csscheatsheet.html

  1. Don’t Declare Default Values

Remember not to write “obvious coding”. Any declaration that is set by default doesn’t need to be written, such as the following:

body { font-weight:normal; }

  1. Group Your Selectors

When several element types, classes, or ids share similar properties, you can group these selectors to avoid specifying the same properties over and over again. This will really help keep coding slim and efficient.

So, to specify the font family, font color, and padding for all heading elements, you can use the following:

h1,h2,h3 {

font-family:Arial,Helvetica,Lucida,Sans-Serif;

color:#000;

margin:1em 0;

}

  1. Simplify Your Coding

Last but not least, simplify your CSS. Many designers try to achieve original designs through complex solutions. Remember back in Elementary School when your teacher would say “K.I.S.S. = Keep it Simple Stupid”? Well that applies to CSS as well. By writing a CSS file that is too long, not organized, or contains too many “CSS Hacks”; you run the risk of coding a site that doesn’t display properly in the end. Not only can countless hours of wasted time be thrown away, but you could end up with a site that looks different in nearly every browser. And as the technology behind these browsers changes, your site could become worse looking as time goes on.

It is better to keep the hacks to a very minimum (if any), and use coding methods that have withstood the test of time.