Point studios
Web Standards Overview
Abdelrahman Osama
Point studios Founder & Director
Press right arrow or space to run the presentation
Web Standards Overview
- Web history
- Web standards benefits
- How is that ???
- Beauty of CSS
- Web standards conquer the world
- What's next
1- Web history
- 1987: 10,000 Internet hosts
- 1989: Tim Berners-Lee Begins work on his World Wide Web Project
- 1989: 100,000 Internet hosts
- 1991: First draft of Hyper Text Markup Language (HTML) Released on the net
- 1992: 1,000,000 Internet hosts
- 1994: Netscape releases its first version of a graphical web browser
- 1995: Microsoft releases Internet Explorer
1- Web history
- 1995: 10,000,000 Internet hosts
- 1996: Cascading Style Sheets (CSS) becomes a W3C Recommendation
- 1997: Version 4 of both Navigator and Internet Explorer released
- 2000: 75,000,000 Internet hosts
1- Web history
Web hosts increases dramatically
1- Web history
Tim Berners-Lee put three great aspects While working on the World Wide Web project
- Simplicity
- Universality
- Degradability
1- Web history
Commercial browsers breaks W3C Aspects
- Early browsers was simply text-based.
- While W3C was focusing research on how to add advanced stylistic to the web.
- Netscape added
<img>, <embed>, <applet>, <object> & <font> tags which make it the most popular web browser overnight in 1994.
- More tags added like
<background>, <frame> & <blink>, Microsoft added <marquee>, <iframe> & <bgsound>
1- Web history
- If things kept up the way they were going, Netscape and Microsoft would eventually have two completely versions of HTML.
- W3C begin to find common ground among the popular browsers, and then to extend the specification in a way every one could agree upon.
- HTML 3.2 and the subsequent HTML 4.0 are successful examples of this strategy.
2- Web standards Benefits
Standards compliant Web sites Advantages
- Compatible
- Loads fast
- Save bandwidth
- Accessible
- Search optimized
- Easier to modify
2- Web standards Benefits | Compatibility
Compatibility
- Backward compatibility: Render properly on old devices, browsers etc...
- Forward compatibility: Will render properly on future devices, browsers, etc...
- Render properly on all Platforms: IBM, Linux, Apple ...
- browsers: Internet Explorer, Netscape, FireFox, Safari, Opera ...
- Devices: PDA's, mobile phones ...
2- Web standards Benefits | Compatibility
MCIT Web site when rendered on Internet Explorer
2- Web standards Benefits | Compatibility
MCIT Web site when rendered on FireFox or Safari
2- Web standards Benefits | Compatibility
What is the solution ?
- Set a browser detection script and serve a different file for every browser. Which requires Designing a different page that renders properly on every browser.
- Use Standards compliant pages with a proper Doctype.
2- Web standards Benefits | Loads fast
Loads fast
- Standards compliant web site is more than half file size
- Therefor it loads twice as fast
- And save more than half the bandwidth
2- Web standards Benefits | Loads fast
Al Ahram Web site (non-compliant)
2- Web standards Benefits | Loads fast
Wired news Web site (Compliant)
2- Web standards Benefits | Loads fast
Al Ahram Web site
- About 700 lines of code
- home page file size 50 KB (not including images)
- Loads in about 45 seconds
- About 40 lines of Actual Text content
Wired news Web site
- About 450 lines of code
- home page file size 35 KB (not including images)
- Loads in about 20 seconds
- About 150 lines of Actual Text content
2- Web standards Benefits | Save bandwidth
Save bandwidth
- Due to smaller files sizes
- Standards compliant web sites save bandwidth
- Bandwidth: The amount of data downloaded from a server.
- Hosting companies charge a specific fee for every GB downloaded from there server.
2- Web standards Benefits | Save bandwidth
With Over 10 Million Visitors a day, ESPN has re-designed to comply Standards in 2003
2- Web standards Benefits | Save bandwidth
ESPN Savings
- Page reduction: 50 KB / Page (More than half)
- Page views: 40 million / day
- Projected bandwidth savings:
- 2 Tetrabytes / day
- 61 Tetrabytes / month
- 730 Tetrabytes = 747,520 GB / year
1 Tetrabyte = 1024 GB
2- Web standards Benefits | Accessible
Accessible
- Allows your site to be accessible to a larger audience (vision impaired, motor skill impaired)
- Accessibility is the law in the UK and in the US All federal organizations web sites should meet section 508 Accessibility guidelines
2- Web standards Benefits | Accessible
Wired news with Text zooming enabled for People with low vision abilities
2- Web standards Benefits | Accessible
Point studios with Zoom layout
2- Web standards Benefits | Accessible
Accessible for blind persons
- Blind persons use screen readers to read a web page for them.
- Accessible web pages is read properly with screen readers un-like non-accessible web sites that is completely confusing to blind people using screen readers.
- Screen readers use
alt attribute to read information about any image.
2- Web standards Benefits | Accessible
Accessible for motor skill impaired
- Motor skill impaired Persons may find difficulties pointing with a mouse on a button or clicking on spaces in a form to fill them.
- Accessible web sites have
Accesskey for navigation links.
- And a logical tab index for navigating buttons and filling forms.
2- Web standards Benefits | Search optimized
Higher in search engine rankings
2- Web standards Benefits | Easier to modify
Due to Semantic markup, Standards compliant web sites are very easy to modify
- Modifying semantic Markup is very easy.
- Modifying one CSS file effects thousands of files that link to it.
2- Web standards Benefits | Extra features
Extra features
One Markup serve all
- Rather than making a printable version of every page, you could specify a CSS for printing that will be used when printing a web page
- See Point studios when printed.
2- Web standards Benefits | Extra features
Really Simple Syndication (RSS)
- RSS a lightweight XML format designed for sharing headlines.
- See RSS in action
- RSS is supported by most of Browsers but not Internet Explorer 6, the good news is it will be supported by IE 7 if you have a web site it's time to add RSS feed.
2- Web standards Benefits | Extra features
liquid layouts
Let your web site fill all the browser
How is that ???
How is that ???
How is that ???
How is that ???
Markup
- Every web page should contain a "Doctype", Doctype (short for "document type declaration") informs the browser which version of (X)HTML you're using.
How is that ???
Some doctypes
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
How is that ???
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
How is that ???
Point studios web site is XHTML 1.0 Strict
How is that ???
Doctype benefits
- Web browsers render a web page according to it's Doctype.
- Standards compliant web sites should render the same on all browsers, Un-like a web page that doesn't contain a doctype it's rendered differently on every browser.
How is that ???
One more tip
- W3C stated that Tables shouldn't be used for forming web site layouts, it should only be used for data table, calendar, etc...
- A standards compliant web site shouldn't use table based layouts, it should use Pure CSS layouts instead.
How is that ???
How do I know if my site complies the standards or not ???
How is that ???
W3C Markup Validator
- To make sure that your Markup complies the Standards your web pages should pass the W3C Markup validator.
- http://validator.w3.org/
How is that ???
W3C CSS Validator
How is that ???
Valid Semantic Markup is understood properly by All browsers even old browsers that doesn't support CSS, Mobile phones that will ignore CSS and read the Markup only, Screen readers And a lot more.
How is that ???
Conclusion:
There is more of web design than just design.
Or as
Douglas Bowman said
Beauty in design is not only about that which can be seen, but also that which can't be seen.
Beauty of CSS
Dive into the beauty of CSS
Web standards conquer the world
A lot of companies and organizations has re-designed their web sites to comply standards, let's see some of the well known switchers
Web standards conquer the world
Web standards conquer the world
And we have already mentioned
Web standards conquer the world
About Point
Point studios is internationally known as the first web design firm in the Middle East to specialize in standards based web design & consultancy.
Web standards conquer the world
Web standards conquer the world
Web standards conquer the world
What's next ?
If you own a web site for your business
- Hire point to re-design your site to comply web standards, and get use of all the benefits we have just discussed.
- Hire point to review usability and accessibility issues in your site and how could it be fixed.
What's next ?
If you don't own a web site for your business
- Hire point to design your web site.
What's next ?
If you want to learn Web design
Start it right, book now for "Web design basics" Course for 400 L.E.
Course content:
- Structure (HTML) Basics
- Presentation (CSS) Basics
- Introduction to Web standards
What's next ?
If you are a web designer
It's time to learn how to design with standards, book now for "Web standards approach" Course for 3000 L.E.
Course content:
- World wide web history
- Web standards benefits
- Structure | (X)HTML
- Presentation | CSS
- Separating structure and presentation
- Table-less layouts
- Complicated CSS layouts
- Browsers hacks