SlideShare a Scribd company logo
Progressive Enhancement Building accessible web pages  or What is a Turducken? Bruce Morrison Brisbane Web Design - 17 June 2010
How things used to be done.
Graceful Degradation
Complex Simple

Recommended for you

Front-End Tooling
Front-End ToolingFront-End Tooling
Front-End Tooling

This document discusses various front-end tooling that can help developers work smarter and more efficiently. It recommends embracing tools like terminal shells and customizing browsers with developer tools. Popular tools are also mentioned like Sublime Text, which can be extended with plugins, packages and themes. Automating workflows with build tools like Grunt and package managers like Bower is also recommended to avoid tedious and repetitive tasks. Overall the document promotes maximizing productivity by leveraging the power of front-end tools.

gruntnodetools
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE

This document provides an overview of a webinar that teaches absolute beginners how to build their own website. The webinar will use a free HTML5 Bootstrap template and customize it with images, text, and icons to create a responsive website that can be viewed on all devices. Attendees will learn basic HTML and CSS and how to host their finished website online for free using a Bitballoon account, but the webinar will not provide a full tutorial on building a site entirely from scratch or teaching the languages in depth.

haikudeck
CV
CVCV
CV

This document contains information about Michael Peteichuk, a front-end developer born in 1989 from Uzhgorod, Ukraine. He has over 3 years of experience in IT and over 2 years experience with HTML, CSS, and JavaScript. His skills include technologies like HTML5, CSS3, Bootstrap, JavaScript, jQuery, Angular and tools like Git, Grunt and Gulp. He has worked as a junior front-end developer at BoostSolutions since 2016 and as a freelancer from 2015-2016.

 
Progressive Enhancement
Simple Complex
(x)HTML Content

Recommended for you

Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design

A brief introduction to responsive web design presented to Biomedical Communications (MScBMC) students on March 15, 2013.

responsive web design
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise

Some Practices and Principles to help get enterprises on the right track building modern web applications.

html5javascript
How to optimize and speed-up your website. The complete guide.
How to optimize and speed-up your website. The complete guide.How to optimize and speed-up your website. The complete guide.
How to optimize and speed-up your website. The complete guide.

We believe that in world of web design speed is strength. Faster the website is the better the overall user experience. Here is the guide for optimizing your website prepared by FROGRIOT digital studio. Years of experience in single presentation. Enjoy it!

webdesignjs
Presentation CSS
Behavior JavaScript
Turducken! Yum!
Core Principles

Recommended for you

Hello world web
Hello world webHello world web
Hello world web

This document provides an introduction to web development. It discusses what web applications are and why they are used. It then explains how the request-response cycle works in web development. The document outlines the different aspects of back-end web development and provides suggestions on how to get started in the field, including possible career options and paths. It compares online and offline approaches to learning web development.

Dynamic website
Dynamic websiteDynamic website
Dynamic website

The document summarizes a student's web development project where they built a dynamic website using HTML, CSS, jQuery, PHP, and SQL. It outlines the technologies used including the laptop specifications, development tools, hosting, and databases. It also details the estimated time spent on various aspects of the project, challenges encountered, technologies learned, and future goals to implement original proposed ideas for the site.

CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control

This document discusses the differences between CSS and JavaScript and when each is most appropriate to use. It argues that CSS is often underestimated in favor of JavaScript solutions. CSS has advanced significantly with features like calc(), media queries, animations/transitions, flexbox, grid, variables and more. These powerful features allow many tasks to be accomplished with CSS alone without needing JavaScript. The document encourages embracing the "squishiness" of the web and considering CSS more when building interfaces.

gotoamsjavascriptcss
Basic  content  should be accessible to all browsers
Basic  functionality  should be accessible to all browsers
Sparse, semantic markup contains all content
Enhanced layout is provided by externally linked CSS

Recommended for you

The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed

The document discusses ways to improve website performance by reducing page load times. It identifies several factors that affect performance like request size, response size, number of components, and bandwidth. It then provides recommendations to shrink the response size through compression and optimization, reduce the number of requests by merging files, and minimize third-party scripts when possible. Specific techniques mentioned include minifying assets, using content delivery networks, browser caching, and tools for testing and monitoring performance.

barcampstroudweb performance
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website

The document discusses the evolution of web browsers and their impact on the advancement of the World Wide Web. It outlines the development of early browsers, the "Browser Wars" between Internet Explorer and Netscape Navigator that drove innovation, a period of stagnation for Internet Explorer 6, and a second "Browser War" between Internet Explorer, Firefox, Chrome and other browsers. It also provides details on building a dynamic website using HTML, CSS, JavaScript, jQuery, PHP and SQL.

Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl

Using a Joostrap template, Philip will be explaining & demoing how you wire frame a website right in your browser and why it will save you load's of time. There are no fancy plugins here! This is wire framing for your client, built directly in your browser & saving you untold hours messing around in other software. It is so hard sometimes, trying to get across to a client with a few drawings how the functionality of something could work. Wire framing directly in the browser gives your client a working wireframe/prototype where they can interact with links, pages & concepts. Not only that, but after client approval, you just have to style your working wireframe/prototype or switch to the template that is using the same module positions... It's a win win situation!

wirefdramejoomlabootstrap
Enhanced behavior is provided by unobtrusive, externally linked JavaScript
End user browser preferences are respected
Pros
Greater accessibility Better SEO  Usable site on more browsers and devices 

Recommended for you

Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript Soup

The document discusses Angular, a web application framework that aims to address issues with traditional JavaScript development such as messy code, difficulty testing, and poor maintainability. It notes common problems that arise in complex web apps and introduces Angular as a solution. The core concepts of Angular are described as declarative UI, extensions to HTML through directives, heavy data binding, and imperative app logic written in JavaScript with dependency injection. Demonstrations are provided and achievements of Angular are listed as simple markup without JavaScript, easy to test logic components, and automated testing support. Key takeaways cover data binding, filters, unit testing, mocking HTTP calls, routing, and services.

Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers

The document discusses various web developer tools including: - Firebug for inspecting and editing HTML, CSS, debugging JavaScript, and monitoring network activity. - YSlow for optimizing web page performance by reducing HTTP requests, compressing components, optimizing caching, and minimizing payload size. - Page Speed by Google for optimizing caching, minimizing round trips, reducing request overhead and payload size, and optimizing browser rendering. - Web Developer extension for adding developer tools to Firefox and Chrome browsers. It also mentions validators for HTML, CSS, and JavaScript and the importance of performance optimization like minimizing HTTP requests to reduce page load time.

browsersusabilityhtml5
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor

C# do backend ao frontend com Blazor. This document discusses using C# and the Blazor framework for both front-end and back-end development. It introduces the basic architectures of Blazor WebAssembly and Blazor Server Side models, including their use of DOM, Razor Components, .NET Core, and SignalR. Advantages and disadvantages of each Blazor model are also presented. Resources provided include links to documentation on Blazor architecture and a demo project.

blazorweb assemblyc#8
Cons
Requires upfront planning Can be difficult to execute
Example
<a href=&quot;http://www.external.site.com/&quot;      class=&quot;external&quot; > An external site </a> Content

Recommended for you

Having Fun with Local WordPress Development
Having Fun with Local WordPress DevelopmentHaving Fun with Local WordPress Development
Having Fun with Local WordPress Development

The document discusses the benefits and challenges of local WordPress development. Some key advantages of local development are that it allows testing changes without risking breaking the live site and is generally faster than making edits directly to the live site. Potential downsides include transferring large databases and files to the local environment and clients not being able to see work in progress. It provides tips for setting up a local development environment using software like XAMPP or MAMP and migrating an existing live site to local development.

east bay wordpress meetupwordpressmamp
My Top 10 Secret Weapons for Frontend Development
My Top 10 Secret Weapons for Frontend DevelopmentMy Top 10 Secret Weapons for Frontend Development
My Top 10 Secret Weapons for Frontend Development

The document is a presentation by Geoffrey Plitt about his 10 secret weapons for frontend development. It introduces Plitt as a former Google engineer and current CTO who will discuss tools like Slim for better HTML, SASS for better CSS, CoffeeScript for better JavaScript, and CodeKit for putting it all together. The presentation promotes additional tools like Knockout for better MVC, HeadJS for better JavaScript loading, Proxino for JavaScript error handling, and PubNub for better fan-out capabilities. It concludes by thanking the audience and encouraging them to follow Plitt online.

coffeescriptsassknockout
Presentazione del centro
Presentazione del centroPresentazione del centro
Presentazione del centro
Presentation a.external  {    background:transparent      url(../images/external-link.png)      no-repeat scroll right center;    padding-right:17px; }
Behavior $(document).ready(function(){    $(&quot; a.external &quot;).click(function() {      window.open(this.href);      return false;    }); });
Links Wikipedia  http://en.wikipedia.org/wiki/Progressive_enhancement A List Apart http://www.alistapart.com/articles/understandingprogressiveenhancement/ Smashing Magazine http://www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/ Dev.Opera http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/
@brucemorrison

Recommended for you

Id corsi univirtual
Id corsi univirtualId corsi univirtual
Id corsi univirtual

The document introduces the four-leaf clover taxonomy instructional design model used by Univirtual for online courses. The model includes four stages: 1) information, 2) laboratory, 3) check, and 4) customization. Each stage includes specific learning activities and educational functions to maximize effectiveness and promote the social construction of knowledge. The model aims to provide a structured yet flexible approach to online course design and delivery.

Final business plan
Final business planFinal business plan
Final business plan

This document outlines a 3D animator's business plan to work as a freelancer in the UK or Singapore, establishing a strong reputation through networking and an online portfolio on sites like Blogspot, CGSociety, and DeviantArt, as well as social media. The animator has skills in modeling, texturing, rigging, lighting, and composition in software like Maya, Photoshop, After Effects, and Premiere Pro. Their goals are to deliver high quality services professionally, gain experience, and become an animation supervisor within 5 years by targeting the TV/film, gaming, advertising, and commercial industries.

Gourab Framework
Gourab FrameworkGourab Framework
Gourab Framework

The document discusses thoughtless acts and their implications for design. It presents a methodology for understanding thoughtless acts by examining how they relate to human cognition, emotion, memory, culture, trends, ability, habit, personality, and environment. The goal is to enable designers to realize these connections viscerally so they can better inform the design of proportions, form, space, sound, color, texture, vibrations, smell, touch, and temperature.

More Related Content

What's hot

10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
Chris Love
 
How to Measure, Improve and Maintain Your WordPress Website Performance [Word...
How to Measure, Improve and Maintain Your WordPress Website Performance [Word...How to Measure, Improve and Maintain Your WordPress Website Performance [Word...
How to Measure, Improve and Maintain Your WordPress Website Performance [Word...
Sabrina Zeidan
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
Ny Fanilo Andrianjafy, B.Eng.
 
Front-End Tooling
Front-End ToolingFront-End Tooling
Front-End Tooling
Houssem Yahiaoui
 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
Iskender Piyale-Sheard
 
CV
CVCV
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
Melanie Burger
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Chris Love
 
How to optimize and speed-up your website. The complete guide.
How to optimize and speed-up your website. The complete guide.How to optimize and speed-up your website. The complete guide.
How to optimize and speed-up your website. The complete guide.
Adam Mucha
 
Hello world web
Hello world webHello world web
Hello world web
Mosaab Ehab
 
Dynamic website
Dynamic websiteDynamic website
Dynamic website
Ryan Scheel
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
Andy Davies
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website
Ryan Scheel
 
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Philip Locke
 
Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript Soup
Graeme Foster
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
Wojciech Bednarski
 
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor
Gustavo Bellini Bigardi
 
Having Fun with Local WordPress Development
Having Fun with Local WordPress DevelopmentHaving Fun with Local WordPress Development
Having Fun with Local WordPress Development
East Bay WordPress Meetup
 
My Top 10 Secret Weapons for Frontend Development
My Top 10 Secret Weapons for Frontend DevelopmentMy Top 10 Secret Weapons for Frontend Development
My Top 10 Secret Weapons for Frontend Development
Geoffrey Plitt
 

What's hot (20)

10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
How to Measure, Improve and Maintain Your WordPress Website Performance [Word...
How to Measure, Improve and Maintain Your WordPress Website Performance [Word...How to Measure, Improve and Maintain Your WordPress Website Performance [Word...
How to Measure, Improve and Maintain Your WordPress Website Performance [Word...
 
Web components. Compose the web.
Web components. Compose the web.Web components. Compose the web.
Web components. Compose the web.
 
Front-End Tooling
Front-End ToolingFront-End Tooling
Front-End Tooling
 
BUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITEBUILD YOUR OWN WEBSITE
BUILD YOUR OWN WEBSITE
 
CV
CVCV
CV
 
Introduction to Responsive Web Design
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web Design
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the EnterpriseDoing Modern Web, aka JavaScript and HTML5 in the Enterprise
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
 
How to optimize and speed-up your website. The complete guide.
How to optimize and speed-up your website. The complete guide.How to optimize and speed-up your website. The complete guide.
How to optimize and speed-up your website. The complete guide.
 
Hello world web
Hello world webHello world web
Hello world web
 
Dynamic website
Dynamic websiteDynamic website
Dynamic website
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
The Need For Speed
The Need For SpeedThe Need For Speed
The Need For Speed
 
Dynamic Website
Dynamic WebsiteDynamic Website
Dynamic Website
 
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nlJoomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
Joomla wireframing Template - Joomladay Netherlands 2014 #jd14nl
 
Angular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript SoupAngular – Say Goodbye to Javascript Soup
Angular – Say Goodbye to Javascript Soup
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor
 
Having Fun with Local WordPress Development
Having Fun with Local WordPress DevelopmentHaving Fun with Local WordPress Development
Having Fun with Local WordPress Development
 
My Top 10 Secret Weapons for Frontend Development
My Top 10 Secret Weapons for Frontend DevelopmentMy Top 10 Secret Weapons for Frontend Development
My Top 10 Secret Weapons for Frontend Development
 

Viewers also liked

Presentazione del centro
Presentazione del centroPresentazione del centro
Presentazione del centro
Univirtual
 
Id corsi univirtual
Id corsi univirtualId corsi univirtual
Id corsi univirtual
Univirtual
 
Final business plan
Final business planFinal business plan
Final business plan
Meng Eu
 
Gourab Framework
Gourab FrameworkGourab Framework
Gourab Framework
northavorange
 
Cyberbullyslides2010 100413153744-phpapp02
Cyberbullyslides2010 100413153744-phpapp02Cyberbullyslides2010 100413153744-phpapp02
Cyberbullyslides2010 100413153744-phpapp02
Alex Yankov
 
AFSCME’s Use of Social Networking
AFSCME’s Use of Social NetworkingAFSCME’s Use of Social Networking
AFSCME’s Use of Social Networking
AFSCME
 
Slideshow proof1
Slideshow proof1Slideshow proof1
Slideshow proof1
Mark Oliver
 
2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche
2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche
2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche
Univirtual
 

Viewers also liked (8)

Presentazione del centro
Presentazione del centroPresentazione del centro
Presentazione del centro
 
Id corsi univirtual
Id corsi univirtualId corsi univirtual
Id corsi univirtual
 
Final business plan
Final business planFinal business plan
Final business plan
 
Gourab Framework
Gourab FrameworkGourab Framework
Gourab Framework
 
Cyberbullyslides2010 100413153744-phpapp02
Cyberbullyslides2010 100413153744-phpapp02Cyberbullyslides2010 100413153744-phpapp02
Cyberbullyslides2010 100413153744-phpapp02
 
AFSCME’s Use of Social Networking
AFSCME’s Use of Social NetworkingAFSCME’s Use of Social Networking
AFSCME’s Use of Social Networking
 
Slideshow proof1
Slideshow proof1Slideshow proof1
Slideshow proof1
 
2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche
2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche
2011 06-24 venezia ambienti per lo sviluppo digitale delle autonomie scolastiche
 

Similar to Progressive Enhancement

Seo and analytics basics
Seo and analytics basicsSeo and analytics basics
Seo and analytics basics
Sreekanth Narayanan
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe Dolson
Joseph Dolson
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
Dennis Slade Jr.
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbbas
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 
Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17 Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17
Thinkful
 
Technial SEO
Technial SEOTechnial SEO
Technial SEO
Bartosz Stankiewicz
 
Progressive Enhancement - Umit Naimian
Progressive Enhancement - Umit NaimianProgressive Enhancement - Umit Naimian
Progressive Enhancement - Umit Naimian
Visuality
 
Website Development Guidelines
Website Development GuidelinesWebsite Development Guidelines
Website Development Guidelines
Amit Kute
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
Getting More Traffic From Search Advanced Seo For Developers Presentation
Getting More Traffic From Search  Advanced Seo For Developers PresentationGetting More Traffic From Search  Advanced Seo For Developers Presentation
Getting More Traffic From Search Advanced Seo For Developers Presentation
Seo Indonesia
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
Jeff Wisniewski
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
Parham
 
Advanced SEO for Web Developers
Advanced SEO for Web DevelopersAdvanced SEO for Web Developers
Advanced SEO for Web Developers
Nathan Buggia
 
Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More
Boundify
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
Kanwal Khipple
 
Implementation of gui framework part2
Implementation of gui framework part2Implementation of gui framework part2
Implementation of gui framework part2
masahiroookubo
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
BrightonSEO
BrightonSEOBrightonSEO
BrightonSEO
Richard Falconer
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
Khoa Quach
 

Similar to Progressive Enhancement (20)

Seo and analytics basics
Seo and analytics basicsSeo and analytics basics
Seo and analytics basics
 
SES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe DolsonSES Toronto 2008; Joe Dolson
SES Toronto 2008; Joe Dolson
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17 Fecc cg-cb-11.14.17
Fecc cg-cb-11.14.17
 
Technial SEO
Technial SEOTechnial SEO
Technial SEO
 
Progressive Enhancement - Umit Naimian
Progressive Enhancement - Umit NaimianProgressive Enhancement - Umit Naimian
Progressive Enhancement - Umit Naimian
 
Website Development Guidelines
Website Development GuidelinesWebsite Development Guidelines
Website Development Guidelines
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Getting More Traffic From Search Advanced Seo For Developers Presentation
Getting More Traffic From Search  Advanced Seo For Developers PresentationGetting More Traffic From Search  Advanced Seo For Developers Presentation
Getting More Traffic From Search Advanced Seo For Developers Presentation
 
Fast and Easy Website Tuneups
Fast and Easy Website TuneupsFast and Easy Website Tuneups
Fast and Easy Website Tuneups
 
High Performance Websites
High Performance WebsitesHigh Performance Websites
High Performance Websites
 
Advanced SEO for Web Developers
Advanced SEO for Web DevelopersAdvanced SEO for Web Developers
Advanced SEO for Web Developers
 
Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More Website Optimization How to Increase Page Performance and More
Website Optimization How to Increase Page Performance and More
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
 
Implementation of gui framework part2
Implementation of gui framework part2Implementation of gui framework part2
Implementation of gui framework part2
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
BrightonSEO
BrightonSEOBrightonSEO
BrightonSEO
 
Branding share point 2013
Branding share point 2013Branding share point 2013
Branding share point 2013
 

Recently uploaded

Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 

Recently uploaded (20)

Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 

Progressive Enhancement

Editor's Notes

  1. Who has Heard of progressive enhancement? Heard of graceful degradation? Remembers the browsers wars and building for IE first and then making it look ok on other browsers? Knows what a turducken is?
  2. First a look at how things used to be done.
  3. Sounds kind of nice but believe it is wasn&apos;t! Build your site to work in the most popular browser (IE) then make it work in other browsers 
  4. Created a finished product then retro fit to work in other browsers
  5. Ask users to upgrage their browser Best viewed in IE5 Text only alternative site
  6. The term Progressive enhancement was coined Steven Champeon in 2003  Attempts to create websites that &amp;quot;work&amp;quot; on the widest number of browser platforms older browsers mobile devices
  7. Reverse of GD Start simple and add complexity
  8. Content is marked up with  good semantic (x)HTML
  9. Add presentation with CSS
  10. Add behavior with JavaScript
  11. The base layer is the xHTML (chicken) Add the presentation using CSS (duck) Add and behaviors/interaction using JavaScript (turkey)
  12. There are 6 core principles of PE
  13. End user browser preferences are respected
  14. Say we want external links to be indicated as such and open in a new window when clicked.
  15. Linked into the HTML There are CSS selectors now that 
  16. Linked into the HTML
  17. Linked into the HTML