Lean And Clean! Building A Site With

  • 440 views
Uploaded on

First time: Conversion failed! 'Lean and clean! Building a site with.ppt' doesn't exist for conversion.

First time: Conversion failed! 'Lean and clean! Building a site with.ppt' doesn't exist for conversion.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
440
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Lean and clean! Building a site with web standards
    • 1. What are web standards?
        • "Web standards are intended to be a common base ... a foundation for the world wide web so that browsers and other software understand the same basic vocabulary ". Eric Meyer
      • Who sets the webstandards?
        • The World Wide Web Consortium (W3C) and other standards bodies have established technologies for creating and interpreting web-based content. These 'web standards' are carefully designed to:
        • deliver the greatest benefits to the greatest number of web users
        • ensure the long-term viability of any web document
        • simplify code and lower the cost of production
        • deliver sites that are accessible to more people and more types of Internet devices
        • continue to function correctly as traditional desktop browsers evolve, and as new Internet devices come to market
  • 2. Lean and clean! Building a site with web standards
    • 2. The web standards
        • Structural Languages
          • Extensible Hypertext Markup Language (XHTML) 1.0
          • XHTML 1.1
          • Extensible Markup Language (XML) 1.0
        • Presentation Languages
          • Cascading Style Sheets (CSS) Level 1
          • CSS Level 2
          • CSS Level 3
        • Object Models
          • Document Object Model (DOM) Level 1 (Core)
          • DOM Level 2
        • Scripting Languages
          • ECMAScript 262 (the standard version of JavaScript)
        • Additional Presentation Languages (Markup)
          • Mathematical Markup Language (MathML) 1.01
          • MathML 2.0
          • Scalable Vector Graphics (SVG) 1.0
  • 3. Lean and clean! Building a site with web standards
    • 3. What are the benefits of using web standards?
      • Benefits for you:
        • Less code means sites are easier to maintain
        • Less browser specific coding - compatible with current browsers
        • Less revisiting of old sites - compatible with future browsers
      • Benefits for your audience:
        • Less code means sites are faster downloads
        • More accessible - will work in a wider variety of user agents
  • 4. Lean and clean! Building a site with web standards
    • 4. What do standards mean to web developers?
        • Web designers and developers should be aim to build sites that use:
        • Semantic markup
        • Valid code
        • Accessible code
        • Separation of style from content
  • 5. Lean and clean! Building a site with web standards
    • 5. Semantic code
        • Semantic code uses html elements for their given purpose. Well structured HTML will have semantic meaning for a wide range of users and user agents (browsers without style sheets, text browsers, PDAs, search engines etc.)
        • In simple terms, this means:
          • for headings, use heading elements starting with H1
          • for paragraphs of text, use a paragraph element
          • for lists, use a list item element
        • You should use standard HTML elements for your markup and avoid styling HTML elements to look like other HTML elements. For example, avoid styling <div> elements to look like headings.
  • 6. Lean and clean! Building a site with web standards
    • 6. Why use valid code?
        • Valid code will render faster than code with errors.
        • Valid code will render better than invalid code.
        • Browsers are becoming more standards compliant, and it is becoming increasingly necessary to write valid and standards compliant HTML
  • 7. Lean and clean! Building a site with web standards
    • 7. How do you make your code valid?
        • Start with the right doctype
        • Be aware of doctype modes (standards compliant, quirks mode etc)
        • Use a character set
        • Close HTML elements
        • Use alt tags for images
        • Avoid HTML hacks
        • Use HTML validators regularly
        • Fix any bugs you find before you go live
        • Make validation part of your normal work process
  • 8. Lean and clean! Building a site with web standards
    • 8. What is accessible code?
        • Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired, cognitive impaired)
        • Allows your site to be accessed by wider range of devices (hand helds, screen readers, text browsers, search engines)
        • Is a requirement for Federal and State Government sites
  • 9. Lean and clean! Building a site with web standards
    • 9. How do you make your code accessible?
        • Provide text equivalent for non-text elements
        • Use accessible data tables (identify row and column headers)
        • Use accessible forms (label for, id, fieldset, legend)
        • Use markup rather than images to convey information.
        • Provide visible skip menus
        • Provide access keys
        • Use style sheets with relative units to control layout and presentation
        • Make sure documents can be read without style sheets
        • Provide metadata to add semantic information
  • 10. Lean and clean! Building a site with web standards
    • 10. Separating style from content
        • Easier to make site-wide changes - one css file rather than all pages
        • Smaller files/ faster download - less code on the page
        • Less code on the page - easier to code
        • Allows users to customise to their own needs - style switchers
        • More control over code - can deliver code in preferred order for screen readers
        • Files are more accessible to a wider variety of mediums - separate css files for other devices
  • 11. Lean and clean! Building a site with web standards
    • 11. How do you separate style from content?
        • Decide on a browser support level and code methodology
        • If full CSS is the chosen methodology, decide on a CSS positioning method
        • Place content into containing boxes
        • Use CSS positioning to control layout of containing boxes
        • Use CSS to control the visual appearance of all html elements
        • Test on a wide variety of browsers at each stage
  • 12. Lean and clean! Building a site with web standards
    • 12. Lean and clean can still be elegant
        • http://reddeyez.com
        • http://www.tinderhouse.com/
        • http://www.yellowlane.com/
        • http://www.adaptivepath.com/
        • http://www.sprintpcs.com/
        • http://www.m-four.com/
        • http://www.couloir.org/
        • http://www.e-lusion.com/
        • http://www.pga.com/seniorpga/2004/
        • http://www.kryzcom.de/
        • http://superfluousbanter.org/
        • http://www.sharkrodeo.com/
        • http://www.jewelboxing.com/index.php
        • http://www.twinsparc.com/
        • http://www.message.uk.com/
        • http://www.styrofirm.com/
        • http://www.onetruefit.com/
        • http://www.wildlysophisticated.com/ws/home/index.php
        • http://www.twothirty.com/
        • http://www.lambertin-grotegerd.de/willkommen/