. .

Tables vs. CSS, Do-it-Yourself vs. Framework, YAML vs. The Rest

If you want to understand why you should even bother to use YAML, this page is for you. We discovered that many web designers didn't see the evil of table based layouts. For those web designers we assembled the 10+ Reasons for CSS-Layouts. For those web designers that have seen the light but chose to use a DIY approach instead of using the power of a framework, we assembled the 5 Reasons for a CSS-Framework. And lastly, the choice of framework is nothing but trivial so we summarized our research at the bottom.

10+ Reasons for CSS-Layouts

  1. SEO (Search Engine Optimization) work better with CSS Layouts
  2. Design flexibility - you are more flexible to introduce changes in a layer based design than with tables
  3. Clean code and structure - your HTML is much easier to edit, because it's so lean and clean. Plus, table-layouts are usually a mess of tables-in-tables-in-tables. Another bonus: better separation of concerns, when working in teams.
  4. Cross-browser - once you understand how to user layers, it becomes easy to establish the same look accros browsers
  5. iPhone - ever wanted to optimize for a mobile device and found it hard or impossible with tables? Guess what, it is impossible! With a clean CSS-layout it's much easier!
  6. Animation and effects - creating visually appealing websites is easier when using layers, say with jQuery
  7. Accessibility - yes, most of our customers are not disabled - or at least noch much so. In many countries and industries (like government related sites in Switzerland) you are required to create websites according to accessibility standards. Also, think about "how does my website work without JavaScript"?
  8. Usability - you may think that things that look alike, are alike. Think again. For example, printer-friendly websites. We also recommend useit for reading. 
  9. Web Standards matter - Some very smart people thought all the issues through and determined that table layouts are a problem. If you disagree, I would recommend researching it some more. 
  10. Future proof - if you're old enough to have experienced the Dot Com Bust, you also know what browser generations mean - rewriting every page, again and again. Working with the official standards will save you that unproductive work.
  11. Professionality - you might be able to get away with this, since your customers often don't know the difference. But won't your customers hate you, when they find out a year later that you made their layout using something that violates the standards? How will you justify yourself when your customer gets sued for not adhering to accessibility regulations or loses customers because Google doesn't rank his site well?

More similar stuff: CSS vs. Tables, 13 Reasons or Top 10 Reasons why CSS is better than HTML tables

Why use a CSS-Framework?

CSS-layouts are the only way to go, for technical, design and usability reasons. Yet creating and maintaining such designs is difficult because of the many browser bugs. CSS-frameworks take care of most compatibility issues and utilize a best-of-breed aproach for typical scenarious. So the main benefit is that it allows you to create cross-browser CSS based layouts quickly and correctly. They also usually contain templates and/or code snippets saving even more time.


Advantages of CSS-Frameworks:

  • more efficiency
  • avoid common mistakes
  • standardized code base
  • team workflow
  • packaged know-how (the tool does much for you)
  • cross-browser

Disadvantages of CSS-Frameworks:

  • learning them requires time
  • because the tool does much of the work, you end up trusting the framework, not your own CSS-know how
  • some overhead because the framework also solves problems you might not have

Top 5 Reasons for Using a Framework when Working with CSS

  1. Higher productivity - you are more productive because the framework does much of the work for you - for example clean separation of concerns, printability, etc.
  2. Less mistakes and easier debugging - as the framework solves many issues like browser specific bugs it saves you much time (=money)
  3. Knowledge in the box - yes, you should understand what you do, but in 90% of the cases you'll be glad it works without you having to know exactly why this bug didn't appear
  4. Adhering to best practices - don't re-invent the wheel, use tested and proven methods
  5. Community - when you're using the same tools as a large group of motivated individuals, you will find it easier to find exact instructions to solve a specific issue and it's easier to ask for help

Why YAML?

Before you start with YAML, you should know why to use a CSS-Frameworks and know its advantages and disadvantages, as described in the sections above.

The most popular CSS-Frameworks are YUI Grids (part of the Yahoo! User Interface Library) by Yahoo, Blueprint CSS, 960 Grid System and YAML (Yet Another Multicolumn Layout). They have a great deal in common, but then again they don’t. The grid-based frameworks YUI, Blueprint and 960gs are building blocks that allow you to create a good-looking layout within a specified grid quickly. The grid simulates table behavior – which makes it easy to understand, but at the same time contradicts central CSS-principles like separation of content and layout. YAML is more focused on creating individual, professional layouts based on the best practices and principles of CSS. YAML also has the best documentation and is the only CSS-Framework where you can choose between different layout types (elastic, liquid, fixed) and measurements (%, em und px). That gives you more flexibility, usability, mobile support and accessibility with YAML compared to Blueprint CSS, YUI Grids or also 960 Grid System.

 

Comparison YUI, 960, Blueprint & YAML

yaml

960 grid system

blueprint

YUI CSS

Framework Extent / Abilities large small middle middle
Ready for Simple Layouts yes / good yes / good yes / good yes / good
Ready for Complex / Fancy Layouts yes / good no / bad no / bad no / bad
Effort after Practice small small small small
Liquid Layouts yes / good no / bad
(w/ plugin)

(w/ plugin)
yes / good
Grid Layouts yes / good
(variable, %)
yes / good
(fix, 12 oder 16)
yes / good
(fix, 24)
yes / good
(variable, %)
Flexible Float Layouts yes / good fair
Layout Templates yes / good
Design Templates

(PDF, Fireworks, Photoshop, Illustrator, OmniGraffle, Visio)
yes / good
Documentation / Transparency yes / very good fair fair fair
DotNetNuke Adaption yes / good yes / good
Builder-Tool yes / very good fair yes / very good yes / very good
Print Optimizations yes / good yes / good
Content Creation Optimizations yes / very good yes / very good fair
Ready for Mobile Devices yes / very good no / bad fair no / bad
jQuery Integrated yes / very good
Accessibility-Unterstützung

(liquid / flexible Layouts, flexible font measurement,
skip-lnks, structure- and layout-dependent bugfixes...)
yes / very good fair fair fair
Auto float clearing yes / good yes / good
Open Source yes / good yes / good yes / good yes / good
License CC-A 2.0 GPL & MIT modified MIT BSD

 

Advantages of YAML:

  • Designed for accessibility
  • YAML Builder
  • Robust, flexible layout concept
  • Modular construction, user-oriented functionality
  • Complete multilingual documentation

You and DotNetNuke Benefit, when All Use the Same Frameworks

I hope all the above convinced you of

  1. The requirement to use CSS based layouts
  2. The benefits of using a CSS-Framework
  3. The advantages of prefering YAML compared to Blueprint or YUI

So why should everybody using DotNetNuke use the same framework? First of all, this is not a rule, it's a recommendation. You can use any framework you choose, just like you can opt to use Mootools instead of jQuery. Here are the top reasons why all benefit when going for a single CSS-Framework:

  • When you think about the Community, you'll see that people can help each other much better when we all use the same standard.
  • Convention over Configuration - saves you time, and saves you many problems
  • Everybody wants to make every mistake only once, and ideally the person doing the mistake is someone else, and you can learn from his experience. This is only possible if we all use the same tools
  • Compatibility - every framework needs some adaptions and testing to get all the small incompatibilities worked out. 2sic Internet Solutions will maintain this YAML Template for DotNetNuke, so that you'll always have a current working version.
  • Interoperability - getting a framework like DotNetNuke to work with a framework like YAML takes some work. Making sure it works with a standard JavaScript framework takes more work, and the more frameworks and standards appear (maybe the next one will be a Flash framework), the bigger the need for interoperability out-of-the-box. When everybody uses the same set of frameworks, this will be the case. A bit like Apple, where everything comes from one source :)
  • Collaboration - imagine different people in a team or even different agencies working together, using the same convention - what a wonderfull world! The iPhone guy, the Flash specialist, the jQuery man and the SEO pro all understand what the others did!
 

News

2013-01-24
Optimized DNN 7  YAML Template for is ready to download.


2012-10-23
Optimized YAML 4 Template for DNN > 6.1 is ready.


2011-04-29
Revised tutorial and optimized YAML template for DNN 5.x


2010-10-25
New YAML version 3.3 released and implemented in base skin --> ready to use with DotNetNuke. Release Notes


2009-12-15
Register now and we'll inform you about news! Register