The Past, Present and Future of Responsive Web Design

  • 2,006 views
Uploaded on

The Past, Present and Future of Responsive Web Design …

The Past, Present and Future of Responsive Web Design

The humble beginnings of the Mobile.

The Birth - It all started with WAP and frustrated developers providing WML powered sites to even more frustrated users.

The Toddler Years - Palm, Blackberry. Although with severely limited browsers, recognizable devices are starting to get hooked up.

Growing Up - iPhone and many other powerful devices accessing the web with pretty darn good browsers.

Mobile Sites -Great in theory, not in practice.

Advantages of mobile "optimized" websites

Improved UX -Nobody wants to browse a desktop website on their phone. Pinch, zoom and scroll is not the best way to consume!

Better Performance -Remove the fluff and provide the user with what they want, when they want it. Optimized images and asset management can provide huge performance gains.

Engagement & Context -Provide your users with mobile optimized features. Click to call, geolocation, mapping, your mobile users are ready and waiting.


Disadvantages of mobile "optimized" websites - Double the code
By definition you have two separate, although somewhat related, code bases to maintain. Double the work, double the aggravation.

Redirecting
Redirecting your users is a real strain on perceived performance. Before the client can even begin to download your page they must be redirected to the mobile site.

Inconsistent links
Inconsistent links only worsen this problem. If I share a url from the mobile site and my buddy opens it on a desktop machine, there's another load of unrequired redirects.

The Present Oh Hai Responsive Web Design.

Term coined by Ethan Marcotte coined the term responsive web design in a May 2010 article in A List Apart, this is where it all began.

Fluid grids - Responsive grid systems are built based on percentage widths relative to the viewport, as opposed to fixed pixel values.

Media Queries: Introduced in CSS3, media queries allow us to target device classes as well as the physical characteristics of the device rendering of the page. Max width, min width, resolution, orientation. Media Queries = Happy Developers!

Write once, run anywhere. Device divergence has rendered desktop & mobile an obsolete design pattern

Advantages of RWD - Single codebase Having a single codebase that molds to each client makes maintaining your application 100 times easier and makes development way more efficient.

All devices are equal You have a single application served up to all clients, only the CSS changes. No longer are mobile users punished for being mobile users, they get your app in all it's glory.

Better SEO -Your one application has one sitemap and one set of urls. One set of urls for users to share and one set of urls for you to optimize and Google to crawl all over.

Disadvantages of RWD - Massive Images

To be truly responsive we must adapt to the needs of the individual

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,006
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
2
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Past
  • 2. Web The humble beginnings of the Mobile The Birth It all started with WAP and frustrated developers providing WML powered sites to even more frustrated users. The Toddler Years Palm, Blackberry. Although with severely limited browsers, recognizable devices are starting to get hooked up. Growing Up iPhone and many other powerful devices accessing the web with pretty darn good browsers.
  • 3. Mobile Sites Great in theory, not in practice.
  • 4. Improved UX Nobody wants to browse a desktop website on their phone. Pinch, zoom and scroll is not the best way to consume! Better Performance Remove the fluff and provide the user with what they want, when they want it. Optimized images and asset management can provide huge performance gains. Engagement & Context Provide your users with mobile optimized features. Click to call, geolocation, mapping, your mobile users are ready and waiting. Advantages of mobile "optimized" websites
  • 5. Double the code By definition you have two separate, although somewhat related, code bases to maintain. Double the work, double the aggravation. Redirecting Redirecting your users is a real strain on perceived performance. Before the client can even begin to download your page they must be redirected to the mobile site. Inconsistent links Inconsistent links only worsen this problem. If I share a url from the mobile site and my buddy opens it on a desktop machine, there's another load of unrequired redirects. Disadvantages of mobile "optimized" websites
  • 6. The Present
  • 7. Oh Hai, Responsive Web Design. Term coined Ethan Marcotte coined the term responsive web design in a May 2010 article in A List Apart, this is where it all began. Fluid grids Responsive grid systems are built based on percentage widths relative to the viewport, as opposed to fixed pixel values. Media Queries Introduced in CSS3, media queries allow us to target device classes as well as the physical characteristics of the device rendering of the page. Max width, min width, resolution, orientation. Media Queries = Happy Developers!
  • 8. Write once, run anywhere. Device divergence has rendered desktop & mobile an obsolete design pattern </>
  • 9. Single codebase Having a single codebase that molds to each client makes maintaining your application 100 times easier and makes development way more efficient. All devices are equal You have a single application served up to all clients, only the CSS changes. No longer are mobile users punished for being mobile users, they get your app in all it's glory. Better SEO Your one application has one sitemap and one set of urls. One set of urls for users to share and one set of urls for you to optimize and Google to crawl all over. Advantages of RWD
  • 10. Massive Images Unfortunately some developers think that RWD means you can throw the same assets at every client. Your poor mobile users, viewing your app on a 3G connection, are now stuck downloading (and often paying for) your ridiculous 1400x800 px pngs. Load + Shrink This is one of the great RWD sins and is known as the dreaded "load + shrink". You make your users load those assets and then shrink them with CSS to half the size. Load + Hide Another of the great RWD sins is to load + hide. Again, wasting your users bandwidth (and often money) on unnecessary bytes. Disadvantages of RWD
  • 11. #PERFMATTERS RWD should be embraced but implemented with care
  • 12. To be truly responsive we must adapt to the needs of the individual
  • 13. Best of the RESS Responsive Images Appropriate formats Progressive Enhancement Compress and optimize #perfmatters
  • 14. Best of the RESS Responsive Images Appropriate formats Progressive Enhancement Compress and optimize #perfmatters Responsive design + server side components Don't load & shrink, serve appropriate files jpg, png, gif, svg, webp, data URI, canvas... Not graceful degradation, start small Compress, gzip, dynamically load Understatement of the year, slow < pinch, zoom, scroll
  • 15. Frameworks are here to help Don't reinvent the wheel
  • 16. The ultimate tool in providing truly responsive applications. Modernizr detects a clients HTML/CSS feature support so you can provide the most interactive experience possible for the individual. Asynchronous module definition is the future of loosely coupled JavaScript in the browser. RequireJS makes dynamically loading HTML, CSS and JS straightforward. No developer is complete without Chrome dev tools, features like the network inspector and the awesome tracing tool are essential in creating bandwidth aware apps.
  • 17. This provides a server side solution to Gumby’s responsive images module. Visitor’s screen sizes are detected and appropriate images created, cached and delivered. Large JavaScript libraries are becoming too bloated for mobile. The release of jQuery 2.0 (which loses a lot of polyfil and functionality redundant to mobile) and lightweight CSS based libraries like Zepto are a major improvement. A JavaScript library enabling easy control of multi touch gestures. Tap, swipe, pinch are all made easy with Hammer.
  • 18. Gumby's Little Helpers Responsive Images This module allows you to specify different inline/background images to load based on media queries and feature support. Shuffle the Dom Don't use CSS to load + hide dom fragments with media queries, use this module to shuffle the dom around with media queries. Responsive Text Based on fittext.js, let your copy expand to fill the available space, making titles as impactful as possible all the time. Check out Gumby Framework
  • 19. The Future
  • 20. To Infinity & Beyond! Better APIs Look forward to network and battery APIs, the Shadow DOM, components, HTML templates/imports and formats like Google's awesome webp and webm. Moar CSS! We'll get new media queries based on attached pointer devices, hover capabilities, luminosity and more, as well as responsive grids going native to CSS. Device convergence Device divergence brought the need for rwd, now the way we interact with those devices is converging, point, click, tap, swipe, multi input is the future.
  • 21. #CONTEXTFIRST RWD shouldn’t be about viewport size, it’s more than that...
  • 22. Context, context, context. Not mobile first, or anything first Content and context first
  • 23. Better. Brand. Experiences. digitalsurgeons.com