SlideShare a Scribd company logo
RESS:
An Evolution of Responsive Web Design


Dave Olsen, @dmolsen
WVU University Relations - Web
Refresh Pittsburgh, May 15 2012
slideshare.net/dmolsenwvu
programmer
9 years at wvu
wvu has 30,000 students
What I’ll Talk About
 •The Responsive Age
 •What is RESS
 •Two Server-side Solutions
We’ve entered...
The Responsive Age
http://www.alistapart.com/articles/responsive-web-design/
http://flic.kr/p/9UmsCJ
TABLET WEB   DESKTOP WEB
                           It’s All One Web




MOBILE WEB
http://modernizr.com
http://flic.kr/p/9Qp3A
The client is now in charge
Why Be Responsive




One...


            http://flic.kr/p/5pGcyx
Why Be Responsive




One...
URL.
Why Be Responsive




    One...
Set of Mark-up.
Why Be Responsive




  One...
Deployment.
futurefriend.ly
Time to Party...




                   balloons




                              http://flic.kr/p/h6McT
“Not so fast, my friends...”




                               http://flic.kr/p/8x6b8X
RWD Challenges




  Media...
Images & Video
RWD Challenges




3rd Party Content...
  Ads & Social Widgets
RWD Challenges




One Set of Mark-up...
  Double-edged Sword
Learned the hard way...

                          http://happyholidays.wvu.edu
Standards Process




Standards Process is Evolving
                           http://www.w3.org/community/respimg/
Bridging the Gap




Mind the Gap




                     http://flic.kr/p/638wPy
Existing Solutions




adaptive images website




   http://adaptive-images.com/
Take a New Path




image of a path for showing RESS as a way forward




                                       http://flic.kr/p/7cGN8g
What is RESS?
Responsive Web Design +
  Server Side Components
(I have no idea what becomes of the W, D, or C)
“
In a nutshell, RESS combines adaptive
layouts with server side component
(not full page) optimization. So a
single set of page templates define an
entire Web site for all devices but key
components within that site have
device-class specific implementations
that are rendered server side.
                        - Luke Wroblewski
                          @lukew

      http://www.lukew.com/ff/entry.asp?1392
“
...browser-detection can be used
to help inform an overall responsive
design as opposed to being the be-all-
end-all for templating.
                       - Dave Olsen
                         @dmolsen



          http://bit.ly/wW91Ie
RESS is Good if...




“   •If you want layout adjustments
     across devices.
    •And optimization at the component
     level to increase performance or tune
     user experience.
    •You trust server-side device detection
     with sensible defaults.
                             - Luke Wroblewski
                               @lukew

          http://www.lukew.com/ff/entry.asp?1509
Simple Example:
Swapping a Header & Footer




 Mobile View                Desktop View

    http://www.lukew.com/ff/entry.asp?1392
Simple Example:
Swapping a Header & Footer



       <body>
            {{>header}}
                 [...document content...]
            {{>footer}}
       </body>




   http://www.lukew.com/ff/entry.asp?1392
Simple Example:
Swapping a Header & Footer



       <body>
            {{>header}}
                 [...document content...]
            {{>footer}}
       </body>




   http://www.lukew.com/ff/entry.asp?1392
Simple Example:
Swapping a Header & Footer



           index.html
           header.html
           mobile_header.html
           footer.html
           mobile_footer.html


   http://www.lukew.com/ff/entry.asp?1392
Simple Example:
Swapping a Header & Footer



           index.html
           header.html
           mobile_header.html
           footer.html
           mobile_footer.html


   http://www.lukew.com/ff/entry.asp?1392
M-ADVANCED     DESKTOP WEB
                             ress.dmolsen.com




MOBILE BASIC
RESS is in Its Infancy...




Infancy




                http://flic.kr/p/7B7uyp
Untested




                                   ...and untested.
http://flic.kr/p/nNZRV
U. of Notre Dame Example




ND data




    http://weedygarden.net/2012/05/a-case-for-ress/
Large Screen:
                             136 requests @ 2.7MB



                     ND data




Small Screen:
23 requests @ 291K
                         http://weedygarden.net/2012/05/a-case-for-ress/
bridge




                         We Still Need to Bridge the Gap
http://flic.kr/p/7FyCB2
Designers + Developers?




            developers and designers




                                       http://flic.kr/p/7Ma9n
How Do We Implement RESS?




So how would we implement?




                             http://flic.kr/p/5ATc7g
Skipping RWD




Responsive Web Design is “easy”




                                  http://flic.kr/p/4YM8
Two Possible Solutions



          Server-side
          Solutions
                         http://flic.kr/p/9jatna
#1 Browser Detection
Been Around a While




                         Old dog




http://flic.kr/p/bWQicm
Used Quite a Bit




“        82% of the Alexa 100 top sites use some
         form of server-side mobile device
         detection to serve content on their main
         website entry point.
                                                 - Ronan Cremin
                                                   @xbs



http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
Lots of Solutions




WURFL
  51Degrees.mobi
     OpenDDR
         DeviceAtlas
Personal Fav*: ua-parser

              node.js, Python, PHP, & Ruby libraries
                 built upon a standard YAML file




* - I help maintain the project ;)          https://github.com/tobie/ua-parser/
Arms Race?




             http://flic.kr/p/6RVLY2
Server-side Feature
#2 Detection
Also in Its Infancy...




Infancy




                     http://flic.kr/p/7B7uyp
Untested




                                   ...and untested.
http://flic.kr/p/nNZRV
Can be Simple or Complex




 Taking a Cue from Front-End Dev
Server-side Future Friendly?
Server-side Breakpoints




320px



        640px




                    960px
Server-side Breakpoints


Simple Example:
Setting a file path based
on window.innerWidth
<script type="text/javascript">

     function writeCookie(name, value) { //cookie code }

     // store the innerWidth of the window in a cookie
     writeCookie("RESS", window.innerWidth);

</script>




            http://www.netmagazine.com/tutorials/getting-started-ress
Simple Example:
Setting a file path based
on window.innerWidth
<?php

     // grab the cookie value
     $screenWidth = $_COOKIE[‘RESS’];

     // set the img path var
     if ($screenWidth <= 320) {
        $imgPath = “320”;
     } else if ($screenWidth < 960) {
        $imgPath = “640”;
     } else {
        $imgPath = “960”;
     }

     // print out our image link
     print “<img src=‘/rwd/images/”.$imgPath.”/car.jpg’ alt=‘Car’ />”;

?>


            http://www.netmagazine.com/tutorials/getting-started-ress
Robust Feature Detection




         http://detector.dmolsen.com
Robust Feature Detection

Simple Example:
Inserting a video link
<?php

     // require Detector to identify browser & populate $ua
     require("lib/Detector/Detector.php");

     $html5Embed = "<iframe {...} ></iframe>";
     $simpleLink = "Your browser doesn't appear to support HTML5. {...}";

     // use the $ua properties to switch
     if ($ua->video->h264 || $ua->video->webm) {
!       print $html5Embed;
     } else {
!       print $simpleLink;
!    }

?>


                   http://detector.dmolsen.com/demo/ytembed/
Robust Feature Detection

Complicated Example:
Templates Using Detector & Mustache




        http://ress.dmolsen.com & click “Learn more...”
RESS Challenges




RESS isn’t a silver bullet.
    (anymore than RWD is)
RESS Challenges




Server-side feature detection
      can be spoofed.
RESS Challenges




Requires server-side languages.
RESS Challenges




   Data needs to be
separated from layout.
RESS Challenges




“   It is not only the design of the web site
    and the layout of content that needs to
    be adapted or enhanced; the idea of
    being responsive, adaptive and
    enhancing, must be implemented in
    the whole value chain.
                             - Jon Arnes Sæterås
                               @jonarnes


    http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
The


The evolution of web development continues...

                         of Web
                         Development
                         Continues
                                     http://flic.kr/p/3Q4To4
Questions or comments?
On Twitter @dmolsen...
Or at dmolsen.com...
Thank You

More Related Content

What's hot

State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
jeresig
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
Steven Cahill
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
Aaron Gustafson
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
jameswillweb
 
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
Aaron Gustafson
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
Aaron Gustafson
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Web Development
Web DevelopmentWeb Development
Web Development
Aditya Raman
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
Stephen Hay
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
Jonas Päckos
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPress
Joseph Dolson
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
Clarissa Peterson
 
Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
Steve Souders
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
gravityworksdd
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
btopro
 
Top 100 wordpress plugins
Top 100 wordpress pluginsTop 100 wordpress plugins
Top 100 wordpress plugins
guz393
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
freshlybakedpixels
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
Sara Cannon
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @Cygnismedia
Clark Davidson
 

What's hot (20)

State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Web Standards And Protocols
Web Standards And ProtocolsWeb Standards And Protocols
Web Standards And Protocols
 
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]There Are No “Buts” in Progressive Enhancement [Øredev 2015]
There Are No “Buts” in Progressive Enhancement [Øredev 2015]
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]Beyond Responsive [18F 2015]
Beyond Responsive [18F 2015]
 
Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]Planning Adaptive Interfaces [RWD Summit 2016]
Planning Adaptive Interfaces [RWD Summit 2016]
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)Style Guides Are The New Photoshop (Fronteers 2012)
Style Guides Are The New Photoshop (Fronteers 2012)
 
Now you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and DevelopmentNow you see me... Adaptive Web Design and Development
Now you see me... Adaptive Web Design and Development
 
Accessibility with WordPress
Accessibility with WordPressAccessibility with WordPress
Accessibility with WordPress
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 
Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
 
Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
 
ClassicPress / WordPress
ClassicPress / WordPressClassicPress / WordPress
ClassicPress / WordPress
 
Top 100 wordpress plugins
Top 100 wordpress pluginsTop 100 wordpress plugins
Top 100 wordpress plugins
 
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using BootstrapStop reinventing the wheel: Build Responsive Websites Using Bootstrap
Stop reinventing the wheel: Build Responsive Websites Using Bootstrap
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @Cygnismedia
 

Viewers also liked

Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
arborwebsolutions
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive Age
Pon Kattera
 
Character creator
Character creatorCharacter creator
Character creator
Dana Chisnell
 
Service Design: Beyond Customer Journey Mapping
Service Design: Beyond Customer Journey MappingService Design: Beyond Customer Journey Mapping
Service Design: Beyond Customer Journey Mapping
GfK User Centric
 
Sio 2009 Eq5 L13 Tra Gold Cap11 Int
Sio 2009 Eq5 L13 Tra Gold Cap11 IntSio 2009 Eq5 L13 Tra Gold Cap11 Int
Sio 2009 Eq5 L13 Tra Gold Cap11 Int
Carlos Cano
 
Cloud and Grids
Cloud and GridsCloud and Grids
Cloud and Grids
Ruben S. Montero
 
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
arborwebsolutions
 
Grids in Web Design
Grids in Web DesignGrids in Web Design
Grids in Web Design
Bernardo Raposo
 
Deconstructing delight
Deconstructing delightDeconstructing delight
Deconstructing delight
Dana Chisnell
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
Equinet Academy
 
Grid system introduction
Grid system introductionGrid system introduction
Grid system introduction
ananda gunadharma
 
Structuring Content, Restructuring Organizations - CS Forum 2012
Structuring Content, Restructuring Organizations - CS Forum 2012Structuring Content, Restructuring Organizations - CS Forum 2012
Structuring Content, Restructuring Organizations - CS Forum 2012
Sara Wachter-Boettcher
 
To Boldly Go… From Information to Understanding
To Boldly Go… From Information to UnderstandingTo Boldly Go… From Information to Understanding
To Boldly Go… From Information to Understanding
Stephen Anderson
 
Accessible Responsive Web Design
Accessible Responsive Web DesignAccessible Responsive Web Design
Accessible Responsive Web Design
Interactive Accessibility
 
Web Design Trends for 2014
Web Design Trends for 2014Web Design Trends for 2014
Web Design Trends for 2014
Accrinet Corporation
 
Managing the Content Process
Managing the Content ProcessManaging the Content Process
Managing the Content Process
Sara Wachter-Boettcher
 
Meet the grids - Web design using Grids
Meet the grids - Web design using GridsMeet the grids - Web design using Grids
Meet the grids - Web design using Grids
Ramses Cabello
 
Grid Based Layout
Grid Based LayoutGrid Based Layout
Grid Based Layout
gordonbrander
 
Grid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User ExperienceGrid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User Experience
Dustin DiTommaso
 
Grids In Modern Web Design
Grids In Modern Web DesignGrids In Modern Web Design
Grids In Modern Web Design
Kyle Meyer
 

Viewers also liked (20)

Beyond Responsive Web Design
Beyond Responsive Web DesignBeyond Responsive Web Design
Beyond Responsive Web Design
 
Design Process in the Responsive Age
Design Process in the Responsive AgeDesign Process in the Responsive Age
Design Process in the Responsive Age
 
Character creator
Character creatorCharacter creator
Character creator
 
Service Design: Beyond Customer Journey Mapping
Service Design: Beyond Customer Journey MappingService Design: Beyond Customer Journey Mapping
Service Design: Beyond Customer Journey Mapping
 
Sio 2009 Eq5 L13 Tra Gold Cap11 Int
Sio 2009 Eq5 L13 Tra Gold Cap11 IntSio 2009 Eq5 L13 Tra Gold Cap11 Int
Sio 2009 Eq5 L13 Tra Gold Cap11 Int
 
Cloud and Grids
Cloud and GridsCloud and Grids
Cloud and Grids
 
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
(Practical) Beyond Responsive Web Design (WordCamp Miami 2011)
 
Grids in Web Design
Grids in Web DesignGrids in Web Design
Grids in Web Design
 
Deconstructing delight
Deconstructing delightDeconstructing delight
Deconstructing delight
 
40 web design trends in 2015
40 web design trends in 201540 web design trends in 2015
40 web design trends in 2015
 
Grid system introduction
Grid system introductionGrid system introduction
Grid system introduction
 
Structuring Content, Restructuring Organizations - CS Forum 2012
Structuring Content, Restructuring Organizations - CS Forum 2012Structuring Content, Restructuring Organizations - CS Forum 2012
Structuring Content, Restructuring Organizations - CS Forum 2012
 
To Boldly Go… From Information to Understanding
To Boldly Go… From Information to UnderstandingTo Boldly Go… From Information to Understanding
To Boldly Go… From Information to Understanding
 
Accessible Responsive Web Design
Accessible Responsive Web DesignAccessible Responsive Web Design
Accessible Responsive Web Design
 
Web Design Trends for 2014
Web Design Trends for 2014Web Design Trends for 2014
Web Design Trends for 2014
 
Managing the Content Process
Managing the Content ProcessManaging the Content Process
Managing the Content Process
 
Meet the grids - Web design using Grids
Meet the grids - Web design using GridsMeet the grids - Web design using Grids
Meet the grids - Web design using Grids
 
Grid Based Layout
Grid Based LayoutGrid Based Layout
Grid Based Layout
 
Grid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User ExperienceGrid Systems: Building Blocks to a Better User Experience
Grid Systems: Building Blocks to a Better User Experience
 
Grids In Modern Web Design
Grids In Modern Web DesignGrids In Modern Web Design
Grids In Modern Web Design
 

Similar to RESS: An Evolution of Responsive Web Design

Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
Dave Olsen
 
3d web
3d web3d web
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
Timothy Oxley
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
MeetMagentoNY2014
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
Dave Olsen
 
Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
Anna Migas
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
Nathan Smith
 
DiUS Computing Lca Rails Final
DiUS  Computing Lca Rails FinalDiUS  Computing Lca Rails Final
DiUS Computing Lca Rails Final
Robert Postill
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
resume_2016_low_rez
resume_2016_low_rezresume_2016_low_rez
resume_2016_low_rez
James Gray
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
Evan Mullins
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
Dave Olsen
 
LA RubyConf 2009 Waves And Resource-Oriented Architecture
LA RubyConf 2009 Waves And Resource-Oriented ArchitectureLA RubyConf 2009 Waves And Resource-Oriented Architecture
LA RubyConf 2009 Waves And Resource-Oriented Architecture
Dan Yoder
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
Michael Ahearn
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
Sadaaki HIRAI
 
Put a little Backbone in your WordPress vs. 3
Put a little Backbone in your WordPress vs. 3Put a little Backbone in your WordPress vs. 3
Put a little Backbone in your WordPress vs. 3
adamsilverstein
 

Similar to RESS: An Evolution of Responsive Web Design (20)

Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
 
3d web
3d web3d web
3d web
 
Testable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascriptTestable client side_mvc_apps_in_javascript
Testable client side_mvc_apps_in_javascript
 
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
Two approaches to RWD: Pure & Hybrid. Brendan Falkowski
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb EditionMeasuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
 
Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
DiUS Computing Lca Rails Final
DiUS  Computing Lca Rails FinalDiUS  Computing Lca Rails Final
DiUS Computing Lca Rails Final
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
resume_2016_low_rez
resume_2016_low_rezresume_2016_low_rez
resume_2016_low_rez
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
 
Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
 
LA RubyConf 2009 Waves And Resource-Oriented Architecture
LA RubyConf 2009 Waves And Resource-Oriented ArchitectureLA RubyConf 2009 Waves And Resource-Oriented Architecture
LA RubyConf 2009 Waves And Resource-Oriented Architecture
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint WorkshopIntroduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Put a little Backbone in your WordPress vs. 3
Put a little Backbone in your WordPress vs. 3Put a little Backbone in your WordPress vs. 3
Put a little Backbone in your WordPress vs. 3
 

More from Dave Olsen

Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"
Dave Olsen
 
The Google Marketing Workflow Workshop
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow Workshop
Dave Olsen
 
Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...
Dave Olsen
 
Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...
Dave Olsen
 
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Dave Olsen
 
Case Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web PresenceCase Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web Presence
Dave Olsen
 
Admissions Brain Dump
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain Dump
Dave Olsen
 
Implementing Brand Patterns
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand Patterns
Dave Olsen
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
Dave Olsen
 
Case Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & CommunicationCase Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & Communication
Dave Olsen
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
Dave Olsen
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
Dave Olsen
 
The Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC Edition
Dave Olsen
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
Dave Olsen
 
The Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
Dave Olsen
 
The Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State EditionThe Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State Edition
Dave Olsen
 
The Squishy Future of Content
The Squishy Future of ContentThe Squishy Future of Content
The Squishy Future of Content
Dave Olsen
 
Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
Dave Olsen
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & You
Dave Olsen
 
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
Dave Olsen
 

More from Dave Olsen (20)

Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"Taking Your HTML Email Communications from "Ew" to "Wow"
Taking Your HTML Email Communications from "Ew" to "Wow"
 
The Google Marketing Workflow Workshop
The Google Marketing Workflow WorkshopThe Google Marketing Workflow Workshop
The Google Marketing Workflow Workshop
 
Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...Building an Academic Program Database and API with Contentful and Amazon Web ...
Building an Academic Program Database and API with Contentful and Amazon Web ...
 
Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...Reimagining Your Website: What are prospective students looking for and how a...
Reimagining Your Website: What are prospective students looking for and how a...
 
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly EnterpriseProgressive Mobile Strategy Redux: The Future Friendly Enterprise
Progressive Mobile Strategy Redux: The Future Friendly Enterprise
 
Case Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web PresenceCase Study: Rebuilding an Admissions Web Presence
Case Study: Rebuilding an Admissions Web Presence
 
Admissions Brain Dump
Admissions Brain DumpAdmissions Brain Dump
Admissions Brain Dump
 
Implementing Brand Patterns
Implementing Brand PatternsImplementing Brand Patterns
Implementing Brand Patterns
 
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
The Death of Lorem Ipsum and Pixel-Perfect Content (MinneWebCon version)
 
Case Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & CommunicationCase Study: Automating Outage Monitoring & Communication
Case Study: Automating Outage Monitoring & Communication
 
The Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect ContentThe Death of Lorem Ipsum & Pixel Perfect Content
The Death of Lorem Ipsum & Pixel Perfect Content
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
 
The Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC EditionThe Squishy Future of Content - HEEMAC Edition
The Squishy Future of Content - HEEMAC Edition
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
 
The Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators EditionThe Squishy Future of Content - Key Communicators Edition
The Squishy Future of Content - Key Communicators Edition
 
The Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State EditionThe Squishy Future of Content - Penn State Edition
The Squishy Future of Content - Penn State Edition
 
The Squishy Future of Content
The Squishy Future of ContentThe Squishy Future of Content
The Squishy Future of Content
 
Web Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas VersionWeb Performance & You - HighEdWeb Arkansas Version
Web Performance & You - HighEdWeb Arkansas Version
 
Web Performance & You
Web Performance & YouWeb Performance & You
Web Performance & You
 
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
 

Recently uploaded

Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
Tech Guru
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Zilliz
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
isBullShit
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
Zilliz
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
FIDO Alliance
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
ZachWylie3
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
AmandaCheung15
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
DianaGray10
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
SelfMade bd
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
Michael Price
 

Recently uploaded (20)

Intel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdfIntel Unveils Core Ultra 200V Lunar chip .pdf
Intel Unveils Core Ultra 200V Lunar chip .pdf
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
 
Accelerating Migrations = Recommendations
Accelerating Migrations = RecommendationsAccelerating Migrations = Recommendations
Accelerating Migrations = Recommendations
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
 
UX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business GoalsUX Webinar Series: Aligning Authentication Experiences with Business Goals
UX Webinar Series: Aligning Authentication Experiences with Business Goals
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Camunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptxCamunda Chapter NY Meetup July 2024.pptx
Camunda Chapter NY Meetup July 2024.pptx
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1Discovery Series - Zero to Hero - Task Mining Session 1
Discovery Series - Zero to Hero - Task Mining Session 1
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdfLeadMagnet IQ Review:  Unlock the Secret to Effortless Traffic and Leads.pdf
LeadMagnet IQ Review: Unlock the Secret to Effortless Traffic and Leads.pdf
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
 

RESS: An Evolution of Responsive Web Design