Web Standards and CSS Layout

1. Web Standards and CSS Layout Web WHAT?? And how is CSS related? Kristin Conrad, NCAR Web Developer’s Group March 16, 2007 ESSL - The Earth & Sun Systems Laboratory

2. What are Web Standards & Why Needed? • The IDEAL! If you: • Type up an HTML/XHTML document • and style it with a Cascading Stylesheet (CSS) • and add interactive elements with ECMAscript (Javascript) • It Should: • Display & function the same way, no matter which browser you use • Work in alternate devices (PDAs, Screen readers, etc.) • The Reason this (usually) happens?: • The World Wide Web Consortium (W3C) has established technologies for creating and interpreting web-based content • But only IF - they are coded by recognized standards • Why the Need for Web Standards? • Mid 1990’s, many browser manufacturers released browsers that failed to uniformly support standards or were proprietary • needlessly fragmented the Web, injuring designers, developers, users, and businesses alike • $$$$$$$$ --The fractured browser market added at least 25% to the cost of developing all sites. Through lack of budget, many developers produced sites that only worked on one browser and locked out potential customers/users ESSL - The Earth & Sun Systems Laboratory

3. More about the Web Standards Project • Web Standards Project (WaSP) was formed in 1998 (http://www.webstandards.org/) • WaSP: promotes core web standards and encourages browser makers AND Web Developers to adopt and abide by standards that promote accessibility, portability, and interoperability • WaSP works in conjunction with the W3C (World Wide Web Consortium) whose similar goal focusses on the technology: • W3C: develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential • Creates ---> A web that works and is accessible for all, across the world. • Wow! ESSL - The Earth & Sun Systems Laboratory

4. Quick, important definitions • Accessibility = • The Web is for Everybody! • People across the globe should expect to load a page & see the same thing • It does not belong to a corporation or a country • (think what would happen if it did…) • People with disabilities should expect to be able to use the web via screen readers and other assistive technologies • Inexpensive to produce communications • Portability = • Ease of changing site to respond to changing needs • “Site” = (structure, presentation, & content) • Ease of maintenance and interoperability • Ability to use on alternative devices (PDAs, screen readers, etc.) • This is why the web works, and is such a powerful tool ESSL - The Earth & Sun Systems Laboratory

5. W3C/WaSP Expectations of Us - Web Developers To Maintain Accessibility & Portability via standards-based coding methods • Separate: • structure (XHTML) • from presentation (CSS) • And the Holy Grail? • Separate: • Structure (XHTML) • Presentation (CSS) • Content (Databases deliver dynamic content to page) ESSL - The Earth & Sun Systems Laboratory

6. The Document’s Structure: HTML/XHTML • HTML/XHTML describes document structure • What is document structure? • HEAD, BODY, H1, H2, H3, P, DIV, SPAN • …describes what a section of the document is (its function) • Web Dev’s need to correctly describe document structure! <h1> NCAR Web Developer’s Group </h1> • If you were blind, and your screen reader said “This is Heading 1. NCAR Web Developer’s Group” -- you would understand “semantically” (by meaning) what a sighted person understands visually --- That this is the beginning of a major section of the document and it is called, “NCAR Web Developer’s Group” • But… What if I made something that looks the same. Why does it matter? <p font-size= “+5”> <strong>NCAR Web Developer’s Group </strong></p> • If you could not SEE the “largeness” of this text, how would you know what this was. Is it really a paragraph? ESSL - The Earth & Sun Systems Laboratory

7. The Document’s Presentation -- CSS • Presentation: • Everything related to “What it looks like” or “Where it is located” on the page (layout) • Keep ALL presentation logic in the stylesheet, not in the HTML document • That means no more width, height, color, size or positioning code in the HTML document ESSL - The Earth & Sun Systems Laboratory

8. CSS (stylesheets) • Use CSS to describe what your elements look like h1 { font-size: 16pt; line-height: 18pt; font-family: verdana; color: red; } “Hey browser! Please render all h1 level headings in my entire website at 10pt using the verdana font and color it red! Thanks!” • What if you got a 60-page website done and decided the h1s looked better in blue? • Change 1 line in your CSS file and whole site is updated: color: blue; (or color: #1660c8;) NOTE: There are many ways to have different types of h1 headings for different sections. I’m keeping this example simple! ESSL - The Earth & Sun Systems Laboratory

9. CSS Layout: The Real Power of CSS • Use CSS to describe your layout (where does all this stuff go…) • DIVs are containers of related content and are positioned, via CSS code, on the page • DIVs are block elements • SPANs are inline elements that change the look of something within a block element • Example: <div id=“article_text”> <p>Some text about how <span class=“red_text”>hurricanes</span> generate over warm waters and all sorts of bad stuff happens if we don’t predict them correctly and take preparatory action.</p> </div> ESSL - The Earth & Sun Systems Laboratory

10. CSS Layout. Why better than tables? • Question: If I use CSS for everything else, why can’t I still use tables for layout? • Table-based layouts are not “accessible” or “portable” • They mix presentation with document structure • Their use is a “hack” and not the intended use for the HTML table element • CSS pages load much quicker • (caveat: this “hack” necessary in the 1990s, but not today) • You cannot build AJAX or rich internet applications if your document structure is not “described” correctly • Not covering AJAX web applications here, but this is a VERY important technique that we’ll all be using in the future, and it relies on separation of structure & presentation, among other things (material for another presentation!) • It takes FAR longer to update and maintain a table-based layout than a CSS-based one. Who has extra time on their hands (can I have some of it??) ESSL - The Earth & Sun Systems Laboratory

11. CSS Layout: The Real Power of CSS • CSS layout is based on putting related content into DIVs (think of boxes) • …and positioning those boxes, via CSS positioning code. • And why is it faster and easier to change/update than tables? • From previous slide: What if you got a 60-page website done and decided the h1s looked better in blue? Change 1 line in your CSS file and whole site is updated • Well, what if you used a vertical “lefthand navigation” and during a redesign wanted same content in a horizontal “second-level navigation”, instead? • Same answer as above - Change 1 (or just a few) line in your CSS file and whole site is updated • Think about what this would take in a table-based layout! • Powerful, fast, adaptable, changeable websites! • No more crying when someone says, “Time for a total redesign!” Whooo hooo! ESSL - The Earth & Sun Systems Laboratory

12. So, How do you Accomplish a CSS Layout? • 2 documents • XHTML • CSS • XHTML doc: Group related content into named DIVs • <div id=“main_navigation”></div> • <div id=“secondlevel_nav”></div> • <div id=“page_content_main”></div> • <div id=“page_content_related”></div> • <div id=“footer”></div> • Next, the CSS doc ---> ESSL - The Earth & Sun Systems Laboratory

13. CSS Layout • CSS doc: Describe where these divs are located and what the content in them looks like #main_navigation { position: absolute; top: 0px; left: 25px; width: 100%; height: 40px; margin-bottom: 25px; padding: 5px; } #main_navigation p { margin-left: 25px; margin-right: 25px; font-family: verdana; color: #cccccc; } ESSL - The Earth & Sun Systems Laboratory

14. The Box Model ESSL - The Earth & Sun Systems Laboratory

15. Difference between relative, static, and absolute CSS positioning CSS Box Model Block and Inline Elements z-index - DIVs can be treated like layers that can be stacked “overlapping” as well as “adjacent” Only if absolutely positioned elements, not floated elements 2 positioning techniques (can be intermixed on page): Floats Absolutely positioned Nesting DIVs within DIVs to achieve more complext layouts Semantic Web: interesting, and useful for naming conventions Potential hair-pulling? IE6 and below Why? IE6 adhered to some, but not all, CSS standards, and Misinterpreted the “Box Model” so that the width and height of elements that are padded or have margins render at slightly different sizes in IE6 than all Mozilla-based browsers Mainly catches you if trying to float DIVs next to each other and you run out of room - entire DIVs seem to disappear (they move) Kris’s favorite “hack”, next page CSS Positioning - Learn on your own ESSL - The Earth & Sun Systems Laboratory

16. The only IE “hack” Kris ever uses (until IE6 goes away) • The underscore on width, margin and padding • EXAMPLE: #page_content { width: 790px; _width: 780px; margin: 10px; _margin: 5px; padding: 10px; _padding: 4px; } Only IE6 and below see underscored items, so you can set their margins and paddings differently to compensate for inaccurate IE6 width/height calculations. IE7(and Mozilla)will ignore underscores and has fixed the problem. ESSL - The Earth & Sun Systems Laboratory

17. We’ve scratched the surface… • Favorite Resources • Books: • Designing with Web Standards by Jeffrey Zeldman (beginning-level) • Transcending CSS: The Fine Art of Web Design (advanced-level) • Websites to be inspired by CSS layout • CSS Beauty: http://www.cssbeauty.com/ • Stylegala: http://www.stylegala.com/ • CSS Vault: http://cssvault.com/ • CSS Zen Garden: http://www.csszengarden.com/ • Websites to learn CSS layout • http://www.w3schools.com/css/default.asp ESSL - The Earth & Sun Systems Laboratory

18. Again, Why Should We Care about Web Standards and CSS Layout? • Because we’re Web Professionals • Because future web browsers will not support the old ‘hacked’ layout methods • Because newer methods of Rich Internet Web Applications (interactive web pages using javascript & DOM maniputation - I.e. AJAX) only work if we code this way • Because we want to make use of new options like RSS, XML, etc. • Because microformats (web on PDAs and cellphones) can easily be customized with their own stylesheets to look better at small sizes, while not affecting your web layout • You can make separate, customizeable Print stylesheets so printouts do not include all the page navigation • Read this page over and over on a day you’re tearing your hair out when your page footer appears at the top of the page, and won’t move. Everything has a learning curve! ESSL - The Earth & Sun Systems Laboratory