SlideShare a Scribd company logo
1 of 16
Download to read offline
Responsive
                       Web
                       Design        RWD
                      ...and the user...



                                    John Arne Sæterås
                                    Twitter: @jonarnes
                                    Blog: mpulp.mobi
fredag 20. april 12
RWD, as defined, does not
                             really solve any problems
                             for the mobile end users.
                                                 You can turn RWD into a religion, and still, end users does not care.

             End
                      use
                            rs d
                                                                       hing
                                 oes
                                     not                  It’s a dev t
                                         car
                                             e




fredag 20. april 12
BBC




                      http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html


fredag 20. april 12
BBC




                      http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html


fredag 20. april 12
What the end users care about is the




                      Content    and how it is presented




fredag 20. april 12
RWD != Mobile Friendly                                        ...fun to resize browser window on the laptop, tho...




                                                                                   In some cases, RWD is
     http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/   bad for the end user...
                                                                  10 Got Lucky                    compared to other approaches
                                          A Bit Smaller            (BG Image,
                                              11%                   Fonts, …)




                                                   Much
                                                  Smaller
                                                    3%
  Same Size
    86 %



                                                                  1 Responsive
                                    source: Akamai                   Images

fredag 20. april 12
Current state of RWD



                                                                       RWD




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




                 Speed? Data download? 3rd party content? Device bugs?
                       Context awareness? Retina images? Source order?
                                        Processing power? Bandwidth?

fredag 20. april 12
Snappy
                                    Relevant
                              Available
                                                  Cheap




                      http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/

fredag 20. april 12
Snappy
                                        Relevant
                                  Available
                                                      Cheap


          Make the user come back
                          http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/

fredag 20. april 12
Make RWD matter for
                       the end user!
                            http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/

fredag 20. april 12
Make the entire value chain “responsive”
                                   Make the     Serve only
      Producing content                                         Relieved,
                                   content       what the
          useful for                                           Happy and
                                  intelligent   user-agent
      different contexts                                        Snappy
                                                   need




                             Imagine if content could “hint” upstream how it
                                    is best consumed in different contexts...
                      Meta data

fredag 20. april 12
Make the entire value chain “responsive”
                                    Make the     Serve only
      Producing content                                          Relieved,
                                    content       what the
          useful for                                            Happy and
                                   intelligent   user-agent
      different contexts                                         Snappy
                                                    need




              Educated            I ntelligent   Smart




                             Imagine if content could “hint” upstream how it
                                    is best consumed in different contexts...
                      Meta data

fredag 20. april 12
End users still does not care about
                                                            RWD
                                                        mDot
                      Device Experiences




                          http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/

fredag 20. april 12
End users still does not care about
                                                                          RWD
                                                                      mDot
                                  Device Experiences

                      ...as long as the site is
                                                                    Snappy
                                                                Relevant
                                                               Available
                                                                          Cheap
                                        http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/

fredag 20. april 12
For RWD to make a difference for the user,
            you have to do stuff server side too!
                                                                 S
                                                           s RES
                                                  Kn own a


               Don’t forget the rest of the value chain!
                     Has to be “responsive” too!
                         Including content!
                                                      al
                                         U ltimate go


fredag 20. april 12
THX!



                       John Arne Sæterås
                      Twitter: @jonarnes
                      Blog: mpulp.mobi
fredag 20. april 12

More Related Content

Viewers also liked

Search on Mobile - Mobile Copenhagen 2012
Search on Mobile - Mobile Copenhagen 2012Search on Mobile - Mobile Copenhagen 2012
Search on Mobile - Mobile Copenhagen 2012Jon Arne Sæterås
 
Velocity EU: Give Responsive Design a Mobile Performance Boost
Velocity EU: Give Responsive Design a Mobile Performance BoostVelocity EU: Give Responsive Design a Mobile Performance Boost
Velocity EU: Give Responsive Design a Mobile Performance BoostJon Arne Sæterås
 
Lasinversiones
LasinversionesLasinversiones
LasinversionesAramir14
 
Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1Aramir14
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Jon Arne Sæterås
 
Presentacion 16 3
Presentacion 16 3Presentacion 16 3
Presentacion 16 3Aramir14
 
Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1Aramir14
 
Publicidad
PublicidadPublicidad
PublicidadAramir14
 
Presentacion 16 3 calidad
Presentacion 16 3 calidadPresentacion 16 3 calidad
Presentacion 16 3 calidadAramir14
 

Viewers also liked (10)

Search on Mobile - Mobile Copenhagen 2012
Search on Mobile - Mobile Copenhagen 2012Search on Mobile - Mobile Copenhagen 2012
Search on Mobile - Mobile Copenhagen 2012
 
Velocity EU: Give Responsive Design a Mobile Performance Boost
Velocity EU: Give Responsive Design a Mobile Performance BoostVelocity EU: Give Responsive Design a Mobile Performance Boost
Velocity EU: Give Responsive Design a Mobile Performance Boost
 
Lasinversiones
LasinversionesLasinversiones
Lasinversiones
 
Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1
 
Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013Mobile is slow - Over the Air 2013
Mobile is slow - Over the Air 2013
 
Digitale Medier 2011
Digitale Medier 2011Digitale Medier 2011
Digitale Medier 2011
 
Presentacion 16 3
Presentacion 16 3Presentacion 16 3
Presentacion 16 3
 
Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1Bienvenida simulación de negocios 17 1
Bienvenida simulación de negocios 17 1
 
Publicidad
PublicidadPublicidad
Publicidad
 
Presentacion 16 3 calidad
Presentacion 16 3 calidadPresentacion 16 3 calidad
Presentacion 16 3 calidad
 

Recently uploaded

Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostZilliz
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr LapshynFwdays
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 

Recently uploaded (20)

Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage CostLeverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 

RWD and the end user. One step further

  • 1. Responsive Web Design RWD ...and the user... John Arne Sæterås Twitter: @jonarnes Blog: mpulp.mobi fredag 20. april 12
  • 2. RWD, as defined, does not really solve any problems for the mobile end users. You can turn RWD into a religion, and still, end users does not care. End use rs d hing oes not It’s a dev t car e fredag 20. april 12
  • 3. BBC http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 20. april 12
  • 4. BBC http://www.bbc.co.uk/blogs/bbcinternet/2012/03/bbc_news_mobile_site_refresh.html fredag 20. april 12
  • 5. What the end users care about is the Content and how it is presented fredag 20. april 12
  • 6. RWD != Mobile Friendly ...fun to resize browser window on the laptop, tho... In some cases, RWD is http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ bad for the end user... 10 Got Lucky compared to other approaches A Bit Smaller (BG Image, 11% Fonts, …) Much Smaller 3% Same Size 86 % 1 Responsive source: Akamai Images fredag 20. april 12
  • 7. Current state of RWD RWD http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/ Speed? Data download? 3rd party content? Device bugs? Context awareness? Retina images? Source order? Processing power? Bandwidth? fredag 20. april 12
  • 8. Snappy Relevant Available Cheap http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/ fredag 20. april 12
  • 9. Snappy Relevant Available Cheap Make the user come back http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/ fredag 20. april 12
  • 10. Make RWD matter for the end user! http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/ fredag 20. april 12
  • 11. Make the entire value chain “responsive” Make the Serve only Producing content Relieved, content what the useful for Happy and intelligent user-agent different contexts Snappy need Imagine if content could “hint” upstream how it is best consumed in different contexts... Meta data fredag 20. april 12
  • 12. Make the entire value chain “responsive” Make the Serve only Producing content Relieved, content what the useful for Happy and intelligent user-agent different contexts Snappy need Educated I ntelligent Smart Imagine if content could “hint” upstream how it is best consumed in different contexts... Meta data fredag 20. april 12
  • 13. End users still does not care about RWD mDot Device Experiences http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/ fredag 20. april 12
  • 14. End users still does not care about RWD mDot Device Experiences ...as long as the site is Snappy Relevant Available Cheap http://www.flickr.com/photos/nswlearnscope/2054017988/sizes/l/in/photostream/ fredag 20. april 12
  • 15. For RWD to make a difference for the user, you have to do stuff server side too! S s RES Kn own a Don’t forget the rest of the value chain! Has to be “responsive” too! Including content! al U ltimate go fredag 20. april 12
  • 16. THX! John Arne Sæterås Twitter: @jonarnes Blog: mpulp.mobi fredag 20. april 12