SlideShare a Scribd company logo
The Past, Present and Future of Responsive Web Design
The Past
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.
Mobile Sites
Great in theory, not in practice.
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
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
The Present
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!
Write once, run anywhere.
Device divergence has rendered desktop &
mobile an obsolete design pattern
</>
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
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
#PERFMATTERS
RWD should be embraced but
implemented with care
To be truly responsive
we must adapt to the needs of the individual
Best of the RESS
Responsive Images
Appropriate formats
Progressive Enhancement
Compress and optimize
#perfmatters
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
Frameworks
are here to help
Don't reinvent the wheel
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.
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.
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
The Future
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.
#CONTEXTFIRST
RWD shouldn’t be about viewport
size, it’s more than that...
Context,
context, context.
Not mobile first, or anything first
Content and context first
Better. Brand. Experiences.
digitalsurgeons.com

More Related Content

More from Digital Surgeons

Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19
Digital Surgeons
 
SVG Animations
SVG AnimationsSVG Animations
SVG Animations
Digital Surgeons
 
CSS Grid
CSS GridCSS Grid
Machine learning
Machine learningMachine learning
Machine learning
Digital Surgeons
 
CraftCMS 3.x Deep Dive
CraftCMS 3.x Deep DiveCraftCMS 3.x Deep Dive
CraftCMS 3.x Deep Dive
Digital Surgeons
 
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Digital Surgeons
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More Customers
Digital Surgeons
 
In Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is MoreIn Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is More
Digital Surgeons
 
Unlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital TransformationUnlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital Transformation
Digital Surgeons
 
Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.
Digital Surgeons
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Digital Surgeons
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Digital Surgeons
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
Digital Surgeons
 
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered DesignBetter Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Digital Surgeons
 
How to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tvHow to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tv
Digital Surgeons
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers
Digital Surgeons
 
Creating Powerful Customer Experiences
Creating Powerful Customer ExperiencesCreating Powerful Customer Experiences
Creating Powerful Customer Experiences
Digital Surgeons
 
How to Build a Brand Voice Toolkit
How to Build a Brand Voice ToolkitHow to Build a Brand Voice Toolkit
How to Build a Brand Voice Toolkit
Digital Surgeons
 
Design Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDesign Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you think
Digital Surgeons
 
What You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable TechnologyWhat You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable Technology
Digital Surgeons
 

More from Digital Surgeons (20)

Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19Navigating Your Brand Through Covid-19
Navigating Your Brand Through Covid-19
 
SVG Animations
SVG AnimationsSVG Animations
SVG Animations
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
Machine learning
Machine learningMachine learning
Machine learning
 
CraftCMS 3.x Deep Dive
CraftCMS 3.x Deep DiveCraftCMS 3.x Deep Dive
CraftCMS 3.x Deep Dive
 
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
Creating great decks: The Origins, the "Why", and 12 Tips to Make Yours Better.
 
The Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More CustomersThe Science of Story: How Brands Can Use Storytelling To Get More Customers
The Science of Story: How Brands Can Use Storytelling To Get More Customers
 
In Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is MoreIn Content Strategy, L.E.S.S. is More
In Content Strategy, L.E.S.S. is More
 
Unlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital TransformationUnlock Your Organization Through Digital Transformation
Unlock Your Organization Through Digital Transformation
 
Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.Radical Candor: No BS, helping your team create better work.
Radical Candor: No BS, helping your team create better work.
 
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
Unlocking Creativity: How to Harness the Powers of Design, Art Direction & Cr...
 
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush PresentationsFight for Yourself: How to Sell Your Ideas and Crush Presentations
Fight for Yourself: How to Sell Your Ideas and Crush Presentations
 
Typecurious: A Typography Crash Course
Typecurious: A Typography Crash CourseTypecurious: A Typography Crash Course
Typecurious: A Typography Crash Course
 
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered DesignBetter Twitch Broadcasting through Rapid Prototyping & Human Centered Design
Better Twitch Broadcasting through Rapid Prototyping & Human Centered Design
 
How to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tvHow to Stream Video Games: A Primer on Twitch.tv
How to Stream Video Games: A Primer on Twitch.tv
 
Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers Art, Meet Copy: A Copywriting Primer for Designers
Art, Meet Copy: A Copywriting Primer for Designers
 
Creating Powerful Customer Experiences
Creating Powerful Customer ExperiencesCreating Powerful Customer Experiences
Creating Powerful Customer Experiences
 
How to Build a Brand Voice Toolkit
How to Build a Brand Voice ToolkitHow to Build a Brand Voice Toolkit
How to Build a Brand Voice Toolkit
 
Design Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you thinkDesign Thinking: The one thing that will transform the way you think
Design Thinking: The one thing that will transform the way you think
 
What You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable TechnologyWhat You Need to Know About the Future of Wearable Technology
What You Need to Know About the Future of Wearable Technology
 

Recently uploaded

(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
chetankumar9855
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
The Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdfThe Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdf
paysquare consultancy
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 

Recently uploaded (20)

(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...Amul milk launches in US: Key details of its new products ...
Amul milk launches in US: Key details of its new products ...
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
The Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdfThe Role of Technology in Payroll Statutory Compliance (1).pdf
The Role of Technology in Payroll Statutory Compliance (1).pdf
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 

The Past, Present and Future of Responsive Web Design

  • 3. 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.
  • 4. Mobile Sites Great in theory, not in practice.
  • 5. 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
  • 6. 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
  • 8. 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!
  • 9. Write once, run anywhere. Device divergence has rendered desktop & mobile an obsolete design pattern </>
  • 10. 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
  • 11. 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
  • 12. #PERFMATTERS RWD should be embraced but implemented with care
  • 13. To be truly responsive we must adapt to the needs of the individual
  • 14. Best of the RESS Responsive Images Appropriate formats Progressive Enhancement Compress and optimize #perfmatters
  • 15. 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
  • 16. Frameworks are here to help Don't reinvent the wheel
  • 17. 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.
  • 18. 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.
  • 19. 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
  • 21. 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.
  • 22. #CONTEXTFIRST RWD shouldn’t be about viewport size, it’s more than that...
  • 23. Context, context, context. Not mobile first, or anything first Content and context first