Building a website in 40 hours, Part 4

So far in this series, we’ve talked about the importance of planning (even for Give Camp projects), the idea of “thinking with tools” to make the design process richer, and the general importance of using source control (specifically, TFS) when working on any size team to maximize productivity. Now it’s time to get in to some coding.

Best Practices for Building Site CSS Templates

If there is one thing that every modern website needs, it’s a good CSS foundation. Cascading Style Sheets are the core layout and styling tool for standards-based web development, and when used correctly, they not only help improve performance, they also help improve accessibility and SEO.

Don’t Use Tables for Layout. Embrace the (more) semantic web.

If you’re still using tables for overall site layout, stop. This is an outdated practice, riddled with problems, and the valid excuses from a few years ago that CSS is too hard no longer hold weight. A high quality website should aim to use semantic HTML whenever possible, especially when doing general site layout.

What is “semantic” HTML? Put simply, it means you use HTML that describes the content it contains.

For example, an ordered list (ol) tag should be used for lists of items. An image tag should be used for images. A div tag should be used for “dividing” areas of the screen. A table should be used for…tabluar data. When applied properly, almost every element on a page can be rendered semantically and then styled with CSS. A menu or tabstrip, for instance, should be an order list of items (not a bunch of divs). And if you use the RadControls, you’re already there…can’t help myself.

Why does all of this matter? Isn’t it simply a “religious” debate? No. There are practical reasons to follow this guidance

Continue reading CSS Template Best Practices

1. Semantic HTML is typically more concise than HTML that is used for layout, meaning smaller, faster loading pages. Faster loading because there are fewer bytes to download and fewer HTML elements for the browser to process as it renders the page (the more important factor with modern bandwidth).
2. Since semantic HTML often “offloads” all styling and layout information to external CSS sheets, performance is further boosted by the cachability of external CSS.
3. Semantic HTML is indexed better by search engines. Since the semantic usage of HTML conveys meaning about its contents, search engines can better understand which parts of your page are less important. Content, for example, should be given greater index value over navigation. It’s not “web 3.0’s” vision of a giant semantic web, but it is a valuable step.
4. Along the same lines, semantic HTML is easier for screen readers to parse, thus making its usage more accessible.

Guidelines Are Not Commandments. Bend the rules when you need to.

Sometimes a quick table for laying-out a form is easier to use than CSS. It’s true. With today’s CSS standards, lining-up columns can be tricky. Can it be done with CSS? Absolutely. Is it still easier with a table. Generally, yes.

The goal of CSS-based web design and semantic rendering is to make those situations where HTML is used for layout the rare exception and not the rule.

Save time with CSS frameworks

Programming with JavaScript today almost always starts with a framework. Whether it’s jQuery or Microsoft Ajax, very, very few people continue to write “raw” JavaScript. Why?

1. Browser’s process JavaScript differently. Frameworks abstract those differences.
2. JavaScript doesn’t provide a lot of “high level” helpers. Frameworks do and save you time.

The same is absolutely true for CSS. Browsers are notorious for processing CSS differently, and that is how CSS has earned such a painful reputation. Fortunately, CSS is being made fun again with easy to use frameworks that abstract the browsers and make CSS layouts easy. Popular options include:

1. YUI Grids (by Yahoo!)
   My personal favorite and the CSS framework of choice for Telerik at WAM Weekend. YUI is deployed on thousands of websites, so it’s tested and reliable. It makes it super easy to design your site’s layout with CSS and then extend that layout with pre-defined CSS rules. I think of it as my “blank slate” for CSS design. As a bonus, YUI Grids has a convenient visual grids builder, a well documented cheat sheet, and CDN hosted scripts.
2. Blueprint
   Another very popular CSS framework deployed on many sites. Unlike YUI Grids, which is based on special CSS classes that help you divide DIVs in to areas, Blueprint prides a CSS “grid” of columns and rows. Positioning content is a matter of simply using the Blueprint CSS rules to position your content in the right column/row. Blueprint also includes typography and form styles, so you get a bit more than layout if you want it.
3. YAML
   If you prefer a commercial solution, YAML is one of the few CSS templates that is also available with a commercial license and support. There is a free version, but it requires the display of links to YAML in your site template. Otherwise, it’s another robust framework with a visual tool for configuring CSS layouts.

With a good framework, CSS is easy and your site template can be constructed- cross-browser ready- in minutes.

From Concept to Production Ready Template (in hours)

Whether you’re doing a 2-day Give Camp or consulting project, you don’t have hours (days?) to waste on troubleshooting cross-browser CSS. Here’s how Team Telerik managed to go from concept to functional, cross-browser CSS site template in a few hours:

1. Whiteboard – sketch ideas and start conceptualizing the site’s layout
2. Mock-up – This is a bit optional for a 40-hour Give Camp, but a must for any other project. Convert those whiteboard ideas in to a collection of mockups. This process forces you to think critically think about your site and always uncovers additional requirements. Balsamiq Mockups is currently my favorite tool for this job.
3. Create at least 2 design concepts – Pop open Photoshop or (if you have a Mac) Pixelmator and come-up with a couple distinct design ideas. Don’t stop with your first idea even if you think it’s great. The process of working through two designs ensures your final design will be stronger. If you get stuck, browse the web for inspiration. TemplateBox and TemplateMonster are good inspiration starting points.
4. Build CSS layout with framework – Here I would use YUI Grids to build my basic CSS layout. That process will spit out the starting HTML and CSS that my site will need.
5. Build your site MasterPage – Now add that HTML and CSS to your “base” MasterPage (nested MasterPages are your friend).
6. Start customizing CSS – Now that your base CSS and HTML are set and your site layout is ready to work cross browser, you can start customizing with your colors, fonts, and images. Start chopping-up your Photoshop designs to get the CSS background images you need. And don’t forget to create CSS sprites when you can for maximum optimization.
7. Perfect CSS with Firefox and Firebug – One of the best tools for rapidly testing changes to CSS is Firebug. You can quickly dial-in your CSS design to perfection. And if it looks right in Firefox, it will mostly look good in Safari, Chrome, Opera, and IE7+. That just leaves IE6 for some special testing if you have to support it (and you really shouldn’t these days).

And that’s it. While it looks like a lot of steps, the most time consuming will be all of the steps before CSS. The CSS will be fast and easy and you’ll wonder why you were ever afraid of it.

CSS and the standards-based web are not hard. Stop letting people tell you that they are. They were. But so was JavaScript before jQuery. With a good CSS framework and this simple workflow, you’ll be successful getting your site template ready- 4 hours or 40 hours.