Wednesday, December 30, 2009

Sorry, IDWIMIE








Sorry, IDWIMIE


You might expect Internet Explorer to be the best browser, but, despite its current dominance, that is far from true. Frequently in this book, I mention a CCS feature and tell you IDWIMIEIt Doesn't Work In Microsoft Internet Explorer. Internet Explorer is frozen in a non-standards past and, as a consequence, is losing market share rapidly. For some of Internet Explorer's shortcomings, there are workarounds known as hacksthe non-standard use of CSS to fool particular browsers into seeing or ignoring certain styles. It's tedious and time-consuming to create hacks; Internet Explorer must get with the program or continue to lose ground to its more compliant fellow browsers.


For us Web site designers and the visitors to the sites we create, Web standards offer the prospect of sites displaying and behaving consistently in every browser, on every platform. We're not there yet, but the days of every browser supporting a different feature set, with all the resultant technical inconsistencies that can make cross-browser/cross-platform Web development slow and frustrating, are it seems, almost over.


So, following the rules of Web standards, Stylin' shows you how to publish content by defining its structure with XHTML and then defining its presentation with CSS.


  1. Content is the collective term for all the text, images, videos, sounds, animations, and files (such as PDF documents) that you want to deliver to your audience.

  2. XHTML (eXtensible HyperText Markup Language) enables you to define what each element of your content is. Is it a heading or a paragraph? Is it a list of items, a hyperlink, or an image? You determine this by adding XHTML markup to your content. Markup comprises tags (the tag name is enclosed in angle brackets < >) that identify each element of your content. You create an XHTML element (hereafter just called an element) by either surrounding a piece of content with an opening and a closing tag like this

    Remember, XHTML defines a document's structure while CSS defines a documents presentation.



    <p>This text content is defined by the tag as a paragraph</p>

    or, for content that is not text (an image, in this example), by using a single tag


    <img src="images/fido.gif" alt="a picture of my dog" />

    This chapter focuses on XHTML and how to use it, but the most important thing to know right now is this:

    XHTML defines a document's structure.

  3. CSS (Cascading Style Sheets) enable you to define how each marked-up element of your content is presented on the page. Is that paragraph's typeface Helvetica or Times, is it bold or italicized? Is it indented or flush with the edge of the page? CSS controls the formatting and positioning of each of the content ele-ments. To format the size of the text in a paragraph, I might write


    p {font-size: 12px;}

    which would make it 12 pixels high. Almost this entire book is dedicated to teaching you CSS, but the most important thing to know right now is this:

    CSS defines a document's presentation.


Providing a means of separating a document's structure from its presentation was the core objective in the development of Web standards, and it is key to development of content that is both portable (can be displayed on multiple devices) and durable (ready for the future).



The Top 10 Benefits of Standards-Based Coding


You may be wondering "Why should I bother to change the way I have been marking up pages for years?" Here are ten great reasons to adopt standards-based coding practices.



  1. Deliver to multiple user agents.
    The same piece of marked-up content is readily deliverable in a wide variety of browsers and other devices (or user agents, to use the official term), such as browsers, personal digital assistants (PDAs), cell phones, and devices that read text for the sight impaired. Just create a different style sheet for each use.


  2. Improve performance.
    Pages are much lighter (smaller in size) and therefore download faster, because your content only needs minimal structural markup. We can now replace all of the presentational markup we used to load onto the tags in every page of a site with a single style sheet. As you will see, a single style sheet can define the presentation of an entire site and the user only needs to download it once.


  3. Serve all browsers.
    With a little effort, you can have your pages degrade nicely in older browsers, so all users get the best experience possible with their available technology.


  4. Separate content and presentation.
    You can modify, or entirely change, either the content or the presentation (read: design) of your site without affecting the other.


  5. Build fluid pages.
    It's easier to code for varying quantities of dynamic content within your pages. For example, it's much easier to create pages that can accommodate however many items appear in a given listing or menu of your e-commerce store.


  6. Confirm your code is good.
    Validation services for XHTML and CSS can be used during development to report instantly on errors in your coding. This provides faster debugging, and the assurance that a page is truly completed when it both displays correctly on screen and passes validation.


  7. Streamline production.
    Production is more efficient. It's too easy for you (the designer) to be side-tracked into content management, because you are the only person who knows where the content goes in the mass of presentational markup, and so you end up being the one to add ita tedious job and probably not what you were hired to do. By adopting standards-based practices, you can provide simple markup rules to the content team and work in parallel on the presentational aspects, knowing their content and your design will marry seamlessly down the line.


  8. Distribute content more easily.
    Distributing your content for third-party use is much easier because the content is separate from any specific presentation rules, and in many cases, simply not feasible otherwise.


  9. Make it accessible.
    It's easier to make your site accessible and meet legal requirements such as the Americans with Disabilities Act, Section 506, known colloquially as ADA 506.


  10. Do less work.
    You write less code and it's a whole lot quicker and easier to get the results you want and modify your work over time.









    No comments: