SlideShare a Scribd company logo
1 of 79
Download to read offline
#rwdrules
About Me

•   Senior Technologist at Big Spaceship
•   Author of “The Responsive Web”
•   Spoke at HTML5.tx 2011
The Responsive Web
    programming for the user
4 days - 1,547 Miles
Hipster level: ~25
Hipster level: 99
A technology can
completely change in a
   year and a half.
Since then:
•   2 iPhones have been released

•   Smart phones have become the norm

•   Tablets have grown in both reach and variety

•   Responsive web design has become a near
    ubiquitous buzzword.
Work




Work

          Home
       Subway / Toilet
Creating




Creating

           Consuming
           Consuming
This is a revolutionary change.
Every revolution evaporates and
leaves behind only the slime of a
        new bureaucracy.

                       ~ Franz Kafka
Rule Number 1

 Responsive Design Doesn’t
     End With Squishy

#rwdrules
Q: When somebody tells you to
“check out this responsive site”
 what’s the first thing you do?

     A: Scale the browser
In the infancy of responsive
   design, sites weren’t as
“responsive” as much as they
       were “squishy”.
Most sites strive to be
responsive by scaling down the
  layout only, resulting in site
              bloat.
display:none only hides the content
Variations to consider

 •   Screen size and orientation
 •   Browsers (inc. mobile)

 •   Capabilities

 •   Input types
Variations to consider

 •   Libraries / Frameworks used

 •   Assets Served

 •   Forms used

 •   Button size and placement
Devices released in one month in 2012
Optimize based on capabilities
 rather than on linear scale.
Linear scale is like Metroid.
The responsive web should be like Skyrim
In Metroid you start with a simple gun
   and add new weapons, tools, and
 abilities as you progress through the
game, but ultimately the game follows
              a linear path.
Mobile site.
Desktop site.
In Skyrim you can advance your
 character in a variety of ways
  and complete quests at will.
Don’t build for this
Start with a core, then ask:
“Is anything available that I can
    use to improve the user’s
    experience on this site?”
Feature Detection
Rule Number 2

     There is no responsive
           pixie dust.

#rwdrules
I eat at restaurants way too much.
Most responses to rule number 1
include adding new things to the
    project, like deliverables
          and designs.
To avoid unnecessary over
    complication, we need a
streamlined process with new,
   streamlined deliverables.
Rapid prototypes
In the next five years, devices will be the
   name of the game and that’s not just screen
       size or browser we’re talking about.
    Interfaces will change, input will change,
     the way we use the web will change. We
   need to start gearing up for that right now.

                                                                       ~ Jonathan Smiley
                                                      “Dive Into Responsive Prototyping With Foundation”




http://alistapart.com/article/dive-into-responsive-
            prototyping-with-foundation
The temptation here is to adjust
   the project workflow to go from
                this:

Wireframe       Comp           Website
To this:

Wireframe        Prototype


   Comp         Website
This is just adding a layer of
complication to the process. It
  does little to solve our root
 problem, which is the need to
    articulate fluid layout.
Foundation
Rule Number 3

 Your workflow will change.



#rwdrules
Insanity: doing the same thing
   over and over again and
  expecting different results.

                     ~ Albert Einstien
Responsive web design requires
   meaningful deliverables.
The aim is to remove The Big
      Reveal: [...] the thing designers
     do where they squirrel away for
      a few days and then come back
     and go ‘ta da, look what I made!’.
            That’s just so risky
                                                   ~ Mark Boulton


http://www.markboulton.co.uk/journal/responsive-
              summit-workflow
Style Tiles
Style Tiles are a design
 deliverable consisting of fonts,
  colors and interface elements
that communicate the essence of
   a visual brand for the web.
                    ~ Samantha Warren
                               styletil.es
Iterate and communicate with
the client, using style tiles and
 rapid prototypes to articulate
        the end product.
Rule Number 4

     Your tools will change



#rwdrules
In my first apartment, I used one
 appliance to prepare 100% of my
               food.
CSS Preprocessors
     SCSS, SASS, or LESS
Preprocessors can be used to
streamline and organize CSS.
SMACSS
Scalable and Modular
 Architecture for CSS
Building scalable and efficient
CSS is crucial to optimizing and
 maintaining responsive sites.
Rule Number 5

  The web is responsive by
          default.

#rwdrules
[The web] should be accessible
         from any kind of hardware that
           can connect to the internet:
           stationary or mobile, small
                 screen or large.
                                                         ~ Sir Tim Berners-Lee



http://www.scientificamerican.com/article.cfm?id=long-
                     live-the-web
In the responsive web, what you
   say trumps how you say it.
Having an API has allowed us at
    NPR.org to be highly efficient at
building new platforms such as iPhone,
Android, iPad and Chrome app because
we only have to build the presentation
logic – the ‘data’ is already ready to go.
             ~ Zach Brand, Sr. Director of Technology at NPR


http://blog.programmableweb.com/2011/04/18/what-we-
      did-wrong-npr-improves-its-api-architecture/
Smartphone use by teenagers
            has tripled in 2 years.
             - Consumer Reports

      In five years, most Africans will
              have smartphones
                ~ TechCrunch
http://news.consumerreports.org/electronics/2011/07/
 teenage-smart-phone-use-triples-in-two-years.html
http://techcrunch.com/2012/06/09/feature-phones-are-
                    not-the-future/
Expensive




Expensive

            Affordable
             Affordable
Creating




Creating

           Consuming
           Consuming
Luxury




Luxury

         Entertainment
           Emergency
Determine what you have to say,
  and the format will become
            obvious.
As the web matures, we should
     acknowledge and embrace its
    constraints—and the aesthetic
    those constraints can produce.
    When we do, we might discover
    that the true web aesthetic is
          hardly visual at all.
                                                  ~ Paul Robert Lloyd

http://alistapart.com/article/the-web-aesthetic
Rule Number 6


   Embrace unpredictability.


#rwdrules
“The Responsive Web”
    manning.com/carver
37% off with this code: 13rw37
     @Matthew_Carver
     matthewcarver.com

More Related Content

What's hot

Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Fwdays
 
Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript FasterSteve Souders
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Stephen Hay
 
Advanced workflows for mobile web design and development
Advanced workflows for mobile web design and developmentAdvanced workflows for mobile web design and development
Advanced workflows for mobile web design and developmentbrucebowman
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Aaron Gustafson
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerWalter Ebert
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furiousAnna Migas
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
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
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web DevelopmentRachel Andrew
 
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Dan Mall
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
Plugins at WordCamp Phoenix
Plugins at WordCamp PhoenixPlugins at WordCamp Phoenix
Plugins at WordCamp PhoenixAndrew Ryno
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
Going Fast on the Mobile Web
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile WebJason Grigsby
 
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 #jd14nlPhilip Locke
 

What's hot (20)

Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"Stefan Judis "Did we(b development) lose the right direction?"
Stefan Judis "Did we(b development) lose the right direction?"
 
Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
 
Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Advanced workflows for mobile web design and development
Advanced workflows for mobile web design and developmentAdvanced workflows for mobile web design and development
Advanced workflows for mobile web design and development
 
Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]Progressive Enhancement & Mobile [Funka 2012]
Progressive Enhancement & Mobile [Funka 2012]
 
Responsive Videos, mehr oder weniger
Responsive Videos, mehr oder wenigerResponsive Videos, mehr oder weniger
Responsive Videos, mehr oder weniger
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
Ashoka-Profile
Ashoka-ProfileAshoka-Profile
Ashoka-Profile
 
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
Responsive Design is Hard/Easy! Be Afraid/Don't Worry!
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
Plugins at WordCamp Phoenix
Plugins at WordCamp PhoenixPlugins at WordCamp Phoenix
Plugins at WordCamp Phoenix
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
Going Fast on the Mobile Web
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile Web
 
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
 

Similar to New Rules of The Responsive Web

Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013Achieve Internet
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Designmartinridgway
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Jeremy Johnson
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoChristian Heilmann
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop UsabilityDoug Gapinski
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseFlashGuy13
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesDoug Gapinski
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicitymStoner, Inc.
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Christian Heilmann
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalAcquia
 
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...UX Riga
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell YouPatrick Collins
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's WebMeagan Fisher
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldmStoner, Inc.
 
A Responsive Process
A Responsive ProcessA Responsive Process
A Responsive Processdaveruse
 

Similar to New Rules of The Responsive Web (20)

Responsive Web Design_2013
Responsive Web Design_2013Responsive Web Design_2013
Responsive Web Design_2013
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Design
 
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
 
Stapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San FranciscoStapling and patching the web of now - ForwardJS3, San Francisco
Stapling and patching the web of now - ForwardJS3, San Francisco
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
Postdesktop Usability
Postdesktop UsabilityPostdesktop Usability
Postdesktop Usability
 
How to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the EnterpriseHow to Act Like an Agency within a Company: UX for the Enterprise
How to Act Like an Agency within a Company: UX for the Enterprise
 
Speed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device WebsitesSpeed and Simplicity: Design and Usability for Multi-device Websites
Speed and Simplicity: Design and Usability for Multi-device Websites
 
Speed and simplicity
Speed and simplicitySpeed and simplicity
Speed and simplicity
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Breaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with DrupalBreaking the Box: Pushing the Boundaries of UX with Drupal
Breaking the Box: Pushing the Boundaries of UX with Drupal
 
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
Context-Aware and User-Centered Design: The Lost Battle Between Desktop and M...
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 
Screen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop WorldScreen and Context: Usability in the Postdesktop World
Screen and Context: Usability in the Postdesktop World
 
A Responsive Process
A Responsive ProcessA Responsive Process
A Responsive Process
 

Recently uploaded

A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPathCommunity
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 

Recently uploaded (20)

A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
UiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to HeroUiPath Community: Communication Mining from Zero to Hero
UiPath Community: Communication Mining from Zero to Hero
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 

New Rules of The Responsive Web

  • 2. About Me • Senior Technologist at Big Spaceship • Author of “The Responsive Web” • Spoke at HTML5.tx 2011
  • 3. The Responsive Web programming for the user
  • 4. 4 days - 1,547 Miles
  • 5.
  • 8. A technology can completely change in a year and a half.
  • 9. Since then: • 2 iPhones have been released • Smart phones have become the norm • Tablets have grown in both reach and variety • Responsive web design has become a near ubiquitous buzzword.
  • 10. Work Work Home Subway / Toilet
  • 11. Creating Creating Consuming Consuming
  • 12. This is a revolutionary change.
  • 13. Every revolution evaporates and leaves behind only the slime of a new bureaucracy. ~ Franz Kafka
  • 14. Rule Number 1 Responsive Design Doesn’t End With Squishy #rwdrules
  • 15. Q: When somebody tells you to “check out this responsive site” what’s the first thing you do? A: Scale the browser
  • 16. In the infancy of responsive design, sites weren’t as “responsive” as much as they were “squishy”.
  • 17. Most sites strive to be responsive by scaling down the layout only, resulting in site bloat.
  • 18. display:none only hides the content
  • 19. Variations to consider • Screen size and orientation • Browsers (inc. mobile) • Capabilities • Input types
  • 20. Variations to consider • Libraries / Frameworks used • Assets Served • Forms used • Button size and placement
  • 21. Devices released in one month in 2012
  • 22. Optimize based on capabilities rather than on linear scale.
  • 23. Linear scale is like Metroid.
  • 24. The responsive web should be like Skyrim
  • 25. In Metroid you start with a simple gun and add new weapons, tools, and abilities as you progress through the game, but ultimately the game follows a linear path.
  • 28. In Skyrim you can advance your character in a variety of ways and complete quests at will.
  • 30. Start with a core, then ask: “Is anything available that I can use to improve the user’s experience on this site?”
  • 32. Rule Number 2 There is no responsive pixie dust. #rwdrules
  • 33. I eat at restaurants way too much.
  • 34.
  • 35. Most responses to rule number 1 include adding new things to the project, like deliverables and designs.
  • 36. To avoid unnecessary over complication, we need a streamlined process with new, streamlined deliverables.
  • 38. In the next five years, devices will be the name of the game and that’s not just screen size or browser we’re talking about. Interfaces will change, input will change, the way we use the web will change. We need to start gearing up for that right now. ~ Jonathan Smiley “Dive Into Responsive Prototyping With Foundation” http://alistapart.com/article/dive-into-responsive- prototyping-with-foundation
  • 39. The temptation here is to adjust the project workflow to go from this: Wireframe Comp Website
  • 40. To this: Wireframe Prototype Comp Website
  • 41. This is just adding a layer of complication to the process. It does little to solve our root problem, which is the need to articulate fluid layout.
  • 43. Rule Number 3 Your workflow will change. #rwdrules
  • 44. Insanity: doing the same thing over and over again and expecting different results. ~ Albert Einstien
  • 45. Responsive web design requires meaningful deliverables.
  • 46. The aim is to remove The Big Reveal: [...] the thing designers do where they squirrel away for a few days and then come back and go ‘ta da, look what I made!’. That’s just so risky ~ Mark Boulton http://www.markboulton.co.uk/journal/responsive- summit-workflow
  • 47.
  • 48.
  • 50. Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. ~ Samantha Warren styletil.es
  • 51. Iterate and communicate with the client, using style tiles and rapid prototypes to articulate the end product.
  • 52. Rule Number 4 Your tools will change #rwdrules
  • 53. In my first apartment, I used one appliance to prepare 100% of my food.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58. CSS Preprocessors SCSS, SASS, or LESS
  • 59. Preprocessors can be used to streamline and organize CSS.
  • 60. SMACSS Scalable and Modular Architecture for CSS
  • 61. Building scalable and efficient CSS is crucial to optimizing and maintaining responsive sites.
  • 62. Rule Number 5 The web is responsive by default. #rwdrules
  • 63. [The web] should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large. ~ Sir Tim Berners-Lee http://www.scientificamerican.com/article.cfm?id=long- live-the-web
  • 64. In the responsive web, what you say trumps how you say it.
  • 65.
  • 66. Having an API has allowed us at NPR.org to be highly efficient at building new platforms such as iPhone, Android, iPad and Chrome app because we only have to build the presentation logic – the ‘data’ is already ready to go. ~ Zach Brand, Sr. Director of Technology at NPR http://blog.programmableweb.com/2011/04/18/what-we- did-wrong-npr-improves-its-api-architecture/
  • 67. Smartphone use by teenagers has tripled in 2 years. - Consumer Reports In five years, most Africans will have smartphones ~ TechCrunch http://news.consumerreports.org/electronics/2011/07/ teenage-smart-phone-use-triples-in-two-years.html http://techcrunch.com/2012/06/09/feature-phones-are- not-the-future/
  • 68. Expensive Expensive Affordable Affordable
  • 69. Creating Creating Consuming Consuming
  • 70.
  • 71. Luxury Luxury Entertainment Emergency
  • 72. Determine what you have to say, and the format will become obvious.
  • 73.
  • 74.
  • 75.
  • 76. As the web matures, we should acknowledge and embrace its constraints—and the aesthetic those constraints can produce. When we do, we might discover that the true web aesthetic is hardly visual at all. ~ Paul Robert Lloyd http://alistapart.com/article/the-web-aesthetic
  • 77. Rule Number 6 Embrace unpredictability. #rwdrules
  • 78.
  • 79. “The Responsive Web” manning.com/carver 37% off with this code: 13rw37 @Matthew_Carver matthewcarver.com