SlideShare a Scribd company logo
1 of 249
Download to read offline
d

BEYONDOFSQUISHY
THE PRINCIPLES ADAPTIVE DESIGN
           #ADAPTIVE
GENERIC TM
NEW AND SHINY
They argued about the term “AJAX” until
they were blue in the face. But in the
end, no one would argue that “AJAX”
wasn’t a good thing for our industry.
-Jeff Croft
        http://jeffcroft.com/blog/2010/aug/02/term-html5/
RESPONSIVE WEB DESIGN
http://alistapart.com/article/responsive-web-design




                                                        RCE
                                                         OU
                                                      RES
http://www.abookapart.com/products/responsive-web-design




                                                             RCE
                                                              OU
                                                           RES
RESPONSIVE WEB DESIGN: THE MOVIE
            WINTER 2013
FLUID GRIDS   FLEXIBLE MEDIA   MEDIA QUERIES
RESPONSIVE WEB DESIGN




                RESI
                IMPR       ZE H
                       ESS
                         YOUR
                                FR
                                   ERE!
                                 IEND
                                     S!
RAISED EYEBROW IS RAISED
THIS IS JUST THE TIP OF THE ICEBERG.
THIS IS JUST THE TIP OF THE ICEBERG.
THIS IS JUST THE TIP OF THE ICEBERG.
RWD
PRINCIPLES OF
ADAPTIVE DESIGN
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
B-SIDE
         THIS IS NOT
          THE WEB.
WEB

      WEB
Diversity is not a bug, it’s an opportunity.
-Stephanie Rieger


          http://stephanierieger.com/diversity-is-not-a-bug/
“...Alternately, we
suggest checking out
the site from your tablet
if you have one...”
Mobile users will do anything and
everything desktop users will do,
provided it’s presented in a usable way.
ONE WEB.
ONE WEB.
THEMATIC CONSISTENCY.
ONE WEB.
THEMATIC CONSISTENCY.
GIVE PEOPLE WHAT THEY WANT.
CONTENT PARITY
CONTENT PARITY TRUMPS ALL?
BUT WHAT ABOUT
MOBILE CONTEXT?
WHAT EXACTLY IS “MOBILE CONTEXT”?
“ON THE GO” IS STILL TRUE...
BUT LOTS OF OTHER
USE CASES EXIST TOO
76%
   ACCESS MOBILE WHILE WAITING IN LINE
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
86%
ACCESS MOBILE DEVICES WHILE WATCHING TV
 http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
80%
ACCESS MOBILE DURING GENERAL DOWNTIME
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
69%
        ACCESS MOBILE IN RETAIL STORES
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
39%
                        WHILE #POOPIN
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience
QUANTITATIVE QUALITATIVE
๏ Screen size           ๏ User goals
๏ Connectivity          ๏ User environment
๏ Device capabilities   ๏ User attention
๏ Processing power      ๏ User capabilities
๏ Input methods
Just make quality, relevant content with
appropriate tasks, and offer all of these to
all users...then make it easy for the user
to decide what it is they want to do.
-Stephen Hay
   http://www.the-haystack.com/2012/07/09/great-works-of-fiction-presents-the-mobile-context/
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
320PX.
320PX.
480PX.
320PX.
480PX.
768PX.
320PX.
480PX.
768PX.
1024PX.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
320PX.
480PX.
768PX.
1024PX.
THE FOLD.
OH GOD THE FOLD.
scha·den·freu·de ˈshä-dən-ˌfrȯi-də n.
enjoyment obtained from the troubles of others
The control which designers know in the print medium,
and often desire in the web medium, is simply a
function of the limitation of the printed page. We
should embrace the fact that the web doesn’t have the
same constraints, and design for this flexibility. But
first, we must “accept the ebb and flow of things”.
-John Allsopp

                 http://alistapart.com/article/dao
http://static.lukew.com/unified_device_design.png




                                                        E
                                                      RC
                                                       OU
                                                    RES
http://bradfrostweb.com/demo/ish/




                                        E
                                      RC
                                       OU
                                    RES
http://bradfrostweb.com/demo/ish/




                                        E
                                      RC
                                       OU
                                    RES
EMBRACE THE SQUISHINESS.
                       TM
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
71%
    MOBILE USERS EXPECTING MOBILE SITES TO LOAD
     AS FAST IF NOT FASTER THAN DESKTOP SITES
http://www.compuware.com/d/release/592528/new-study-reveals-the-mobile-web-disappoints-global-consumers
74%
     MOBILE VISITORS WHO WILL ABANDON A SITE
     IF IT TAKES LONGER THAN 5 SECONDS TO LOAD
http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
YOU HAVE 5 SECONDS OF SOMEONE’S TIME.
1.3MB
AVERAGE PAGE SIZE
  http://httparchive.org/
86%
    RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW
      WEIGHS AS MUCH AS THE LARGE SCREEN VIEW
http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
REQUESTS: 136
PAGE WEIGHT: 5.9MB
LOAD TIME: 2M 46S
http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
REQUESTS: 388
PAGE WEIGHT: 24.29MB
LOAD TIME: 2M 01S

    http://www.flickr.com/photos/philhawksworth/7562460356/sizes/l/in/photostream/
If your website is 15MB it’s not HTML5,
it’s stupid.
-Christian Heilmann

HTTPS://HACKS.MOZILLA.ORG/2012/10/BROKEN-PROMISES-OF-HTML5-AND-WHATS-NEXT-A-PRESENTATION-AT-HTML5DEVCONF/
http://bradfrostweb.com/blog/post/performance-as-design/
http://bradfrostweb.com/blog/post/performance-as-design/
http://mobitest.akamai.com




                                 E
                               RC
                                OU
                             RES
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
RESPONSIVE DESIGN != ONE SIZE FITS ALL
PROGRESSIVE ENHANCEMENT
MOBILE-LAST (DEGRADED, SHOE-HORNED, SHORT-SIGHTED, CRAPPY)




MOBILE-FIRST (PROGRESSIVELY-ENHANCED, FUTURE-FRIENDLY, AWESOME)
Progressive enhancement isn’t
about designing for the lowest
common denominator. It’s just
about starting there.
-Jeremy Keith
 http://bradfrostweb.com/blog/post/the-spirit-of-the-web-jeremy-keith-at-smashing-conference/
A BRIEF WORD ABOUT
 MOBILE WEB APPS
It’s 2013, nobody has Javascript disabled!
-Plenty of developers
SUPPORT IS NOT BINARY
JAVASCRIPT CAN FAIL.
JAVASCRIPT CAN WILL FAIL.
https://twitter.com/zachleat/status/151748039072157696
And the menu failed. Never even
opened. Suddenly, the site was
without navigation...at all.
-Stephanie Rieger
     HTTP://STEPHANIERIEGER.COM/A-PLEA-FOR-PROGRESSIVE-ENHANCEMENT/
WORKED               DIDN’T WORK
๏ Galaxy Nexus       ๏ iPhone 4 (iOS 4.3)
๏ iPhone 4 (iOS 5)   ๏ iPod Touch
                     ๏ Nexus One
                     ๏ Nokia Lumia 800 (WP7)
                     ๏ HTC ChaCha (Android 2.3)
                     ๏ HTC WildFire (Android 2.3)
                     ๏ Huiwei Blaze (Android 2.3.5)
                     ๏ Galaxy SII (Android 2.2.3)
                     ๏ Galaxy Mini (Android 2.2.1)
                     ๏ BlackBerry Torch (OS7)
                     ๏ BlackBerry 9300 (OS6)
                     ๏ Galaxy Tab 7” (Android 2.3)
                     ๏ Galaxy Tab 10” (Android 2.3)
                     ๏ Amazon Kindle
Not everything on the Web needs to
be a new Facebook, Google Reader
or Google Mail.
-Christian Heilmann
      HTTP://CHRISTIANHEILMANN.COM/2011/12/28/ON-SINGLE-PAGE-APPS/
The bottom line is that a client-side
architecture leads to slower
performance because most of the
code is being executed on our users'
machines rather than our own.
-Twitter Engineering Team
     http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
THIS IS FOUNDATIONAL WORK.
THERE IS A DIFFERENCE BETWEEN
  SUPPORT AND OPTIMIZATION.
MAN, THIS BLU-RAY QUALITY SUCKS.
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
ACKNOWLEDGE AND EMBRACE
UNPREDICTABILITY
WEB

      WEB
WEB

      WEB
WEB

      WEB
THERE’S NO SUCH THING
  AS FUTURE-PROOF
BUT WE CAN BE FUTURE-FRIENDLY




         http://futurefriend.ly/
PEOPLE’S CAPACITY FOR BULLSHIT
   IS RAPIDLY DIMINISHING.
BULLSHIT
                             BULLSHIT
                                        BULLSHIT
This is a quote. This is where you
put the quote text. BULLSHIT
                                 BULLSHIT
-Quote Author
BULLSHIT
         CONTENT
                      BULLSHIT          BULLSHIT
BULLSHIT
This is a quote. This is where you
put the quote text.
-Quote Author
This is a quote. This is where you
put the quote text.
-Quote Author
This is a quote. This is where you
put the quote text.
-Quote Author
BULLSHIT
                                                         BULLSHIT
           BULLSHIT   BULLSHIT
                                                          BULLSHIT
                      CONTENT



This is a quote. This is where you
            BULLSHIT
           BULLSHIT                                      BULLSHIT



put the quote text.
             BULLSHIT
           BULLSHIT




-Quote Author
BULLSHIT



           BULLSHIT          BULLSHIT         BULLSHIT   BULLSHIT


BULLSHIT
                                        BULLSHIT
FOCUS.
INVEST IN YOUR CONTENT.


         MAKE APIs
         NOT WAR
CONTENT LIKE WATER
GET YOUR CONTENT READY TO GO

ANYWHERE
BECAUSE IT’S GOING TO GO
EVERYWHERE
WE DON’T KNOW WHAT WILL
BE UNDERNEATH CHRISTMAS
TREES 2 YEARS FROM NOW...
BUT THAT’S WHAT WE NEED
                          TO DESIGN FOR TODAY.



      WEB         WEB
WEB         WEB
When it comes to the Web, the
more backward-compatible you
are, the more forward-compatible
you’re likely to be.
-Josh Clark
     http://globalmoxie.com/blog/making-of-people-mobile.shtml
TODAY’S LANDSCAPE IS BOOTCAMP
   FOR TOMORROW’S INSANITY.
UBIQUITY
FLEXIBILITY
PERFORMANCE
ENHANCEMENT
FUTURE FRIENDLY
DEMO
 http://bit.ly/mobilefirstrwd




   TUTORIAL
  http://bit.ly/rwdtutorial




WALKTHROUGH
  http://bit.ly/rwdanatomy
EXHIBIT A: MASTHEAD
GET TO THE MEAT.
EXHIBIT B: LOGO
Make the logo bigger!
-Every Client Ever
http://blog.netvlies.nl/design-interactie/retina-revolution/




                                                                 RCE
                                                                  OU
                                                               RES
EXHIBIT C: NAVIGATION
NAVIGATION SHOULD BE LIKE A GOOD FRIEND...
THERE WHEN YOU NEED THEM, BUT COOL ENOUGH
TO GIVE YOU YOUR SPACE
EXHIBIT D: SEARCH FORM
EXHIBIT E: PRODUCT INFO
79%
PEOPLE USING THEIR SMARTPHONES IN STORES

   http://pewinternet.org/Reports/2012/Smartphone-Update-2012/Findings.aspx
EXHIBIT F: PRODUCT IMAGES
CAROUSEL BEST PRACTICES
CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items
CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items
๏ Only load what you need
CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items
๏ Only load what you need
๏ Be explicit with navigation
INSUFFICIENT
CAROUSEL BEST PRACTICES
๏ Make sure you actually need one
๏ Cycle through like items
๏ Only load what you need
๏ Be explicit with navigation
๏ Give hints to other content
๏ Treat touch as an enhancement
EXHIBIT G: PRODUCT FORM
EXHIBIT H: SHARE BUTTONS
To load the Facebook, Twitter and
Google social media buttons takes 19
requests and 246.7KB in bandwidth.
-Zurb

  https://developers.facebook.com/blog/post/2012/02/27/helping-improve-the-mobile-web/
http://filamentgroup.com/lab/socialcount/




                                                E
                                              RC
                                               OU
                                            RES
EXHIBIT I: FIND NEARBY
OLD CONTEXT
                        CAPABLE BROWSER     FOCUSED


         LARGE SCREEN

                                                      STATIONARY
                                 EFFICIENT INPUT
    FAST CONNECTION



                                                         COMFORTABLE
POWERFUL CPU
NEW CONTEXT
http://karenmcgrane.com/2012/07/10/mobile-local/




                                                       E
                                                     RC
                                                      OU
                                                   RES
ASK QUESTIONS.
EXHIBIT J: AUXILIARY CONTENT
86%
RESPONSIVE WEBSITES WHOSE SMALL SCREEN VIEW
  WEIGHS AS MUCH AS THE LARGE SCREEN VIEW
http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
AGGRESSIVE ENHANCEMENT
NOT THE THING



                NOT THE THING
 THE THING

                NOT THE THING


                NOT THE THING




NOT THE THING
NOT THE THING



                       NOT THE THING
           THE THING

                       NOT THE THING


                       NOT THE THING


LINK TO FRAGMENT
LINK TO FRAGMENT
LINK TO FRAGMENT             NOT THE THING
LINK TO FRAGMENT
LINK TO FRAGMENT
SCANNABILITY

PERFORMANCE
SCROLLING
WHEN WE SCROLL ON MOBILE



GOING BACK     THROUGH         DEEP DIVE
  IN TIME    GROUPED ITEMS   INTO CONTENT
WHEN WE SCROLL ON MOBILE



GOING BACK
  IN TIME
WHEN WE SCROLL ON MOBILE



            THROUGH
          GROUPED ITEMS
WHEN WE SCROLL ON MOBILE



                       DEEP DIVE
                     INTO CONTENT
ALWAYS SCROLLING THROUGH
 A SINGULAR CONTENT TYPE
EXHIBIT J: FOOTER NAV
EXHIBIT K: CALL NUMBER
THESE THINGS ARE COMMUNICATION DEVICES
code block




<a href="tel:+18005550199">1-800-555-0199</a>




         http://bradfrostweb.com/blog/mobile/a-tel-tale-sign/
EXHIBIT C: BACK TO TOP LINK
THERE’S LOTS MORE.
THIS STUFF IS LEGITIMATELY HARD.
BUT IT’S 100% NECESSARY.
WHEN YOU’RE FINISHED CHANGING
YOU’RE FINISHED.
THIS IS FUN!
6,000,000,000


          WORLDWIDE MOBILE SUBSCRIPTIONS

http://www.itu.int/net/pressoffice/press_releases/2012/70.aspx#.UQXLOkrHen0
MOBILE   WEB
MOBILE   WEB
THANKS!
@brad_frost

More Related Content

What's hot

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
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
Steve Souders
 

What's hot (20)

Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012Responsive Design Workflow: Mobilism 2012
Responsive Design Workflow: Mobilism 2012
 
Atomic design
Atomic designAtomic design
Atomic design
 
Atomic Design con Pattern Lab
Atomic Design con Pattern LabAtomic Design con Pattern Lab
Atomic Design con Pattern Lab
 
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
 
Atomic design React Nova Presentation
Atomic design React Nova PresentationAtomic design React Nova Presentation
Atomic design React Nova Presentation
 
The Server Side of Responsive Web Design
The Server Side of Responsive Web DesignThe Server Side of Responsive Web Design
The Server Side of Responsive Web Design
 
Data science for infrastructure dev week 2022
Data science for infrastructure   dev week 2022Data science for infrastructure   dev week 2022
Data science for infrastructure dev week 2022
 
ACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best PracticesACSS: Rethinking CSS Best Practices
ACSS: Rethinking CSS Best Practices
 
Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
 
Voorhoede - Front-end architecture
Voorhoede - Front-end architectureVoorhoede - Front-end architecture
Voorhoede - Front-end architecture
 
An introduction to Emulsify
An introduction to EmulsifyAn introduction to Emulsify
An introduction to Emulsify
 
Atomic Design
Atomic Design Atomic Design
Atomic Design
 
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)
 
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
Responsive Design Workflow (Breaking Development Conference 2012 Orlando)
 
Documenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with JekyllDocumenting an Atomic Design System with Jekyll
Documenting an Atomic Design System with Jekyll
 
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)
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
The What & Why of Pattern Lab
The What & Why of Pattern LabThe What & Why of Pattern Lab
The What & Why of Pattern Lab
 
Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)Style Guides Are The New Photoshop (Smashing Conference 2012)
Style Guides Are The New Photoshop (Smashing Conference 2012)
 
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
 

Viewers also liked

Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Brad Frost
 
Wp3 refresh pgh
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pgh
MrDirby
 

Viewers also liked (20)

Beyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web DesignBeyond Media Queries: Anatomy of an Adaptive Web Design
Beyond Media Queries: Anatomy of an Adaptive Web Design
 
For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)For a Future-Friendly Web (Mobilism 2012)
For a Future-Friendly Web (Mobilism 2012)
 
For a Future-Friendly Web
For a Future-Friendly WebFor a Future-Friendly Web
For a Future-Friendly Web
 
For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)For a Future-Friendly Web (WebVisions Chicago 2012)
For a Future-Friendly Web (WebVisions Chicago 2012)
 
Looking for a place to hang my helmet
Looking for a place to hang my helmetLooking for a place to hang my helmet
Looking for a place to hang my helmet
 
Selling The Mobile Web
Selling The Mobile WebSelling The Mobile Web
Selling The Mobile Web
 
Style Guide Best Practices
Style Guide Best PracticesStyle Guide Best Practices
Style Guide Best Practices
 
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown EditionResponsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition
 
Reset the Web
Reset the WebReset the Web
Reset the Web
 
Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
Why I Don't Use The GPL
Why I Don't Use The GPLWhy I Don't Use The GPL
Why I Don't Use The GPL
 
Death To Bullshit
Death To BullshitDeath To Bullshit
Death To Bullshit
 
Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!Death To Bullshit: Now With 80% More Bullshit!
Death To Bullshit: Now With 80% More Bullshit!
 
Codemotion 2014 - Hackathones - de 0 a produccion en 24 horas
Codemotion 2014 - Hackathones - de 0 a produccion en 24 horasCodemotion 2014 - Hackathones - de 0 a produccion en 24 horas
Codemotion 2014 - Hackathones - de 0 a produccion en 24 horas
 
Mejora tus retrospectivas (codemotion 2014)
Mejora tus retrospectivas (codemotion 2014)Mejora tus retrospectivas (codemotion 2014)
Mejora tus retrospectivas (codemotion 2014)
 
Joseph Levy MedicReS World Congress 2013 - 1
Joseph Levy MedicReS World Congress 2013 - 1 Joseph Levy MedicReS World Congress 2013 - 1
Joseph Levy MedicReS World Congress 2013 - 1
 
Stateless token-based authentication for pure front-end applications
Stateless token-based authentication for pure front-end applicationsStateless token-based authentication for pure front-end applications
Stateless token-based authentication for pure front-end applications
 
Web Design Process vs. Philadelphia
Web Design Process vs. PhiladelphiaWeb Design Process vs. Philadelphia
Web Design Process vs. Philadelphia
 
Helping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered ProcessHelping Your Company Adopt a User-Centered Process
Helping Your Company Adopt a User-Centered Process
 
Wp3 refresh pgh
Wp3 refresh pghWp3 refresh pgh
Wp3 refresh pgh
 

Similar to Beyond Squishy: The Principles of Adaptive Design

Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
Four Kitchens
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
Matt Carver
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
Jason Grigsby
 
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
Acquia
 
Pantalk: Responsive Web Design
Pantalk: Responsive Web DesignPantalk: Responsive Web Design
Pantalk: Responsive Web Design
Screen Concept
 

Similar to Beyond Squishy: The Principles of Adaptive Design (20)

Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]Responsive Design & Beyond [Code & Creativity Workshop]
Responsive Design & Beyond [Code & Creativity Workshop]
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsivedesign slides2-120507173812-phpapp01
Responsivedesign slides2-120507173812-phpapp01Responsivedesign slides2-120507173812-phpapp01
Responsivedesign slides2-120507173812-phpapp01
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
Part 2: Intermediate Designing for Multiple Devices - GA London, 31 Jul 2013
 
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
 
Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?
 
New Rules of The Responsive Web
New Rules of The Responsive WebNew Rules of The Responsive Web
New Rules of The Responsive Web
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
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
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Beyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategyBeyond being responsive, a mobile first strategy
Beyond being responsive, a mobile first strategy
 
Pantalk: Responsive Web Design
Pantalk: Responsive Web DesignPantalk: Responsive Web Design
Pantalk: Responsive Web Design
 
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
FFWD.PRO - It's not you, It's me (or how to avoid being coupled with a Javasc...
 
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
 
Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.Adaptive, Responsive, Mobile. A liquid web.
Adaptive, Responsive, Mobile. A liquid web.
 
Prototyping: Helping to take away the suck
Prototyping: Helping to take away the suckPrototyping: Helping to take away the suck
Prototyping: Helping to take away the suck
 

Recently uploaded

Recently uploaded (20)

Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Top 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development CompaniesTop 10 CodeIgniter Development Companies
Top 10 CodeIgniter Development Companies
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 

Beyond Squishy: The Principles of Adaptive Design