SlideShare a Scribd company logo
Responsive Design
A Brief Introduction
A DEMO
Flexible Grid Design
On the Way to Responsive Design
Responsive Design
WHAT
Flexible, Fluid, and Adaptive Web Sites
Respond to
Users’ Needs
Device Capacities
WHY
Mobile-first Strategy
Mobile Site VS. Mobile APP
Enhanced user experience for users
Less frustration for developers
HOW
3 Technical Ingredients (CSS):
Fluid grids
Flexible images
Media Queries
New Way of Thinking - UX Perspective
Technical Ingredients
New Thinkings
UX PERSPECTIVE
Content Strategy
UX PERSPECTIVE
Content Strategy
UX PERSPECTIVE
Content Strategy - Goals
Emphasize important content
Make relationships clear
Make it accessible on small screens
Content Strategy - How
Start with Contents: Content Inventory
Categorize Contents
Prioritize Contents
Start from the Smallest Screen Size: Mobile First
UX PERSPECTIVE
Content Strategy - Goals
Emphasize important content
Make relationships clear
Make it accessible on small screens
Content Strategy - How
Start with Contents: Content Inventory
Categorize Contents
Prioritize Contents
Start from the Smallest Screen Size: Mobile First
UX PERSPECTIVE
Content Strategy
Navigation Design
UX PERSPECTIVE
Content Strategy
Navigation Design
Toogle
UX PERSPECTIVE
Content Strategy
Navigation Design
Toogle Sliding
UX PERSPECTIVE
Content Strategy
Navigation Design
Toogle Sliding Footer Anchor
UX PERSPECTIVE
Content Strategy
Navigation Design
Context-specific
Touchscreen VS. Cursor-based Interaction
Geolocation API?
Number Dialing?
Instant Messaging?
UX PERSPECTIVE
Content Strategy
Navigation Design
Context-specific
Testing Responsive Design: e.g., Responsive.is, Mobitest
WHO IS DOING IT?
Starbucks
TIME
TechCrunch
ACCESSIBILITY
ACCESSIBILITY
Connection:
Flexible Site
Heavily Rely on Structured HTML and CSS
MORE INSPIRATIONS
http://www.awwwards.com/websites/responsive-design/
http://mediaqueri.es/

More Related Content

Viewers also liked

Viewers also liked (8)

Gestalt examples
Gestalt examplesGestalt examples
Gestalt examples
 
Gestalt Psychology
Gestalt PsychologyGestalt Psychology
Gestalt Psychology
 
Cgt 256 course review
Cgt 256 course reviewCgt 256 course review
Cgt 256 course review
 
Visual hierarchy examples
Visual hierarchy examplesVisual hierarchy examples
Visual hierarchy examples
 
11 info architecture-2014
11 info architecture-201411 info architecture-2014
11 info architecture-2014
 
Attention info scent recognition vs recall
Attention info scent recognition vs recallAttention info scent recognition vs recall
Attention info scent recognition vs recall
 
Grids mini lecture
Grids mini lectureGrids mini lecture
Grids mini lecture
 
Sketches wireframes mockups prototypes
Sketches wireframes mockups prototypesSketches wireframes mockups prototypes
Sketches wireframes mockups prototypes
 

Similar to Responsive Design 101

Impact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your businessImpact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your business
Amit Thakur
 
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLPImpact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Amit Thakur
 

Similar to Responsive Design 101 (20)

Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.
 
Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.Introduction | SEO Expate BD Ltd.
Introduction | SEO Expate BD Ltd.
 
Mobile Responsive ​ Website Designing.pdf
Mobile Responsive ​ Website Designing.pdfMobile Responsive ​ Website Designing.pdf
Mobile Responsive ​ Website Designing.pdf
 
Responsive Web Designs
Responsive Web DesignsResponsive Web Designs
Responsive Web Designs
 
Strategy for a Responsive UX
Strategy for a Responsive UXStrategy for a Responsive UX
Strategy for a Responsive UX
 
Functional Design Lab
Functional Design LabFunctional Design Lab
Functional Design Lab
 
G0373049057
G0373049057G0373049057
G0373049057
 
Responsive & Adaprove Design
Responsive & Adaprove DesignResponsive & Adaprove Design
Responsive & Adaprove Design
 
Rwdprocess
RwdprocessRwdprocess
Rwdprocess
 
BBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive DesignBBDO Whitepaper—Responsive & Adaptive Design
BBDO Whitepaper—Responsive & Adaptive Design
 
Java Unit 5(part 1)
Java Unit 5(part 1)Java Unit 5(part 1)
Java Unit 5(part 1)
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
The-Future-of-Web-Design-and-Development (1) (1).pdf
The-Future-of-Web-Design-and-Development (1) (1).pdfThe-Future-of-Web-Design-and-Development (1) (1).pdf
The-Future-of-Web-Design-and-Development (1) (1).pdf
 
Impact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your businessImpact_Responsive web design brings success to your business
Impact_Responsive web design brings success to your business
 
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLPImpact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
Impact_Responsive Web Design Brings Success to Your Business-AmitFBOXERLLP
 
Substance151 Best Web Practices
Substance151 Best Web PracticesSubstance151 Best Web Practices
Substance151 Best Web Practices
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersResponsive & Adaptive Design: Delivering Websites That Delight Your Users
Responsive & Adaptive Design: Delivering Websites That Delight Your Users
 
Leveraging CX / UX / UI to optimise brand experiences
Leveraging CX / UX / UI to optimise brand experiencesLeveraging CX / UX / UI to optimise brand experiences
Leveraging CX / UX / UI to optimise brand experiences
 
Create A Solid Strategy For Your Website (Higher Ed)
Create A Solid Strategy For Your Website (Higher Ed)Create A Solid Strategy For Your Website (Higher Ed)
Create A Solid Strategy For Your Website (Higher Ed)
 

Recently uploaded

Recently uploaded (20)

To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Introduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG EvaluationIntroduction to Open Source RAG and RAG Evaluation
Introduction to Open Source RAG and RAG Evaluation
 
Intelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdfIntelligent Gimbal FINAL PAPER Engineering.pdf
Intelligent Gimbal FINAL PAPER Engineering.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.Enterprise Security Monitoring, And Log Management.
Enterprise Security Monitoring, And Log Management.
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
The architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfThe architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdf
 

Responsive Design 101