SlideShare a Scribd company logo
1 of 16
Download to read offline
Responsive Design Techniques,
Tools and Design Strategies
Piotr Walczyszyn | outof.me | @outof_me
@outof_me
Facts
0,5
1
1,5
2
2009 2010 2011 2012 2013 2014 2015
Bilionsofusers
Mobile Desktop
Source: ComScore survey 2012
@outof_me
Fakty
3.5 BILION
INTERNET CONNECTED DEVICES
@outof_me
Responsive Web Design
@outof_me
Responsive Web Design
Ethan
Marcotte
@outof_me
May 2010 June 2011
Responsive Web Design
@outof_me
Responsive Web Design
Flexible & Fluid
Grid
Flexible
Images &
Media
Media Queries
@outof_me
Examples
@outof_me
Techniques
@outof_me
Techniques
Desktop Down vs. Mobile First
@outof_me
Techniques
Design First vs. Common Breakpoints
@outof_me
Techniques
PX Media Queries vs. EM Media Queries
@outof_me
Techniques
Horizontal & Vertical Media Queries
@outof_me
Tools
@outof_me
Edge Reflow
Adobe Edge Reflow
@outof_me
Resources
‣Tools
‣Reflow - http://html.adobe.com/edge/reflow/
‣Responsive Inspector - http://outof.me/responsive-inspector/
‣RWD Frameworks:
‣Bootstrap http://twitter.github.io/bootstrap/
‣Frameless http://framelessgrid.com/
‣Responsive Grid System http://responsive.gs/
‣Responsive Grid System http://www.responsivegridsystem.com/
‣Skeleton http://www.getskeleton.com/
‣Unsemantic http://unsemantic.com/
‣Image libraries:
‣hisrc https://github.com/teleject/hisrc
‣Responsive Enhance https://github.com/joshje/Responsive-Enhance
‣Spriteme http://spriteme.org

More Related Content

Viewers also liked

Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675
FITC
 
Process
ProcessProcess
Process
FITC
 

Viewers also liked (15)

Experimenting with Creative Process with Qanta Shimizu
Experimenting with Creative Process with Qanta ShimizuExperimenting with Creative Process with Qanta Shimizu
Experimenting with Creative Process with Qanta Shimizu
 
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos UlloaDeveloping Interactive 3D Experiences in HTML5 with Carlos Ulloa
Developing Interactive 3D Experiences in HTML5 with Carlos Ulloa
 
It’s Not Enough To Be Brilliant – You Have To Be Convincing, Too. with Lanny...
 It’s Not Enough To Be Brilliant – You Have To Be Convincing, Too. with Lanny... It’s Not Enough To Be Brilliant – You Have To Be Convincing, Too. with Lanny...
It’s Not Enough To Be Brilliant – You Have To Be Convincing, Too. with Lanny...
 
HelloRun: A Hypnotic 3D Runner Music Game
HelloRun: A Hypnotic 3D Runner Music GameHelloRun: A Hypnotic 3D Runner Music Game
HelloRun: A Hypnotic 3D Runner Music Game
 
Rik
RikRik
Rik
 
Make Something Ugly: An Experimental Creative Process with Myron Campbell
Make Something Ugly: An Experimental Creative Process with Myron CampbellMake Something Ugly: An Experimental Creative Process with Myron Campbell
Make Something Ugly: An Experimental Creative Process with Myron Campbell
 
Hacking the Creative Brain
Hacking the Creative Brain Hacking the Creative Brain
Hacking the Creative Brain
 
Meet MILL+ with Carl Addy
Meet MILL+ with Carl AddyMeet MILL+ with Carl Addy
Meet MILL+ with Carl Addy
 
Fitc presentation
Fitc presentationFitc presentation
Fitc presentation
 
Backyard Brains: Bringing the Body’s Electrical Signals Out of the Body
Backyard Brains: Bringing the Body’s Electrical Signals Out of the BodyBackyard Brains: Bringing the Body’s Electrical Signals Out of the Body
Backyard Brains: Bringing the Body’s Electrical Signals Out of the Body
 
Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675Charity apprentice logo-blue-6675
Charity apprentice logo-blue-6675
 
The Sum Is Greater Than The Parts
 The Sum Is Greater Than The Parts The Sum Is Greater Than The Parts
The Sum Is Greater Than The Parts
 
Unity: From Indie Game Start-Up to International Real-Time 3D Tool of Choice
Unity: From Indie Game Start-Up to International Real-Time 3D Tool of ChoiceUnity: From Indie Game Start-Up to International Real-Time 3D Tool of Choice
Unity: From Indie Game Start-Up to International Real-Time 3D Tool of Choice
 
Process
ProcessProcess
Process
 
UX Design at the Speed of Thought
UX Design at the Speed of ThoughtUX Design at the Speed of Thought
UX Design at the Speed of Thought
 

Similar to Responsive Design Techniques, Tools and Design Strategies with Paul Trani

Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to Market
Tony Hillerson
 
UX Deliverable Dictionary Survey Results
UX Deliverable Dictionary Survey ResultsUX Deliverable Dictionary Survey Results
UX Deliverable Dictionary Survey Results
evansjx
 
Getting started with infographics
Getting started with infographicsGetting started with infographics
Getting started with infographics
Lorena Swetnam
 

Similar to Responsive Design Techniques, Tools and Design Strategies with Paul Trani (20)

Reporting in Project Online and Project Professional - Oleksiy Prosnitskyy
Reporting in Project Online and Project Professional - Oleksiy ProsnitskyyReporting in Project Online and Project Professional - Oleksiy Prosnitskyy
Reporting in Project Online and Project Professional - Oleksiy Prosnitskyy
 
Reporting In Project Professional and Project Online
Reporting In Project Professional and Project OnlineReporting In Project Professional and Project Online
Reporting In Project Professional and Project Online
 
2017UXify-TheDetailsMatter
2017UXify-TheDetailsMatter2017UXify-TheDetailsMatter
2017UXify-TheDetailsMatter
 
SharePoint Mobility Strategy and Design SharePoint Saturday Virginia Beach
SharePoint Mobility Strategy and Design SharePoint Saturday Virginia BeachSharePoint Mobility Strategy and Design SharePoint Saturday Virginia Beach
SharePoint Mobility Strategy and Design SharePoint Saturday Virginia Beach
 
Designing an App: From Idea to Market
Designing an App: From Idea to MarketDesigning an App: From Idea to Market
Designing an App: From Idea to Market
 
Designing an Android App: From Idea to Market
Designing an Android App: From Idea to MarketDesigning an Android App: From Idea to Market
Designing an Android App: From Idea to Market
 
Designing an Android App from Idea to Market
Designing an Android App from Idea to MarketDesigning an Android App from Idea to Market
Designing an Android App from Idea to Market
 
The UX Process Behind Compelling User Experiences
The UX Process Behind Compelling User ExperiencesThe UX Process Behind Compelling User Experiences
The UX Process Behind Compelling User Experiences
 
SPCA2013 - SharePoint Mobile Strategy and Design
SPCA2013 - SharePoint Mobile Strategy and DesignSPCA2013 - SharePoint Mobile Strategy and Design
SPCA2013 - SharePoint Mobile Strategy and Design
 
UX Deliverable Dictionary Survey Results
UX Deliverable Dictionary Survey ResultsUX Deliverable Dictionary Survey Results
UX Deliverable Dictionary Survey Results
 
SharePoint 2013 Mobile Strategy and Responsive Web Design
SharePoint 2013 Mobile Strategy and Responsive Web DesignSharePoint 2013 Mobile Strategy and Responsive Web Design
SharePoint 2013 Mobile Strategy and Responsive Web Design
 
2014 SharePoint Enterprise Mobile Strategy
2014 SharePoint Enterprise Mobile Strategy2014 SharePoint Enterprise Mobile Strategy
2014 SharePoint Enterprise Mobile Strategy
 
Launching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to LaunchLaunching a Mobile App from Concept to Launch
Launching a Mobile App from Concept to Launch
 
SharePoint 2013 Enterprise Mobile Strategy - London - Joel Oleson
SharePoint 2013 Enterprise Mobile Strategy - London - Joel OlesonSharePoint 2013 Enterprise Mobile Strategy - London - Joel Oleson
SharePoint 2013 Enterprise Mobile Strategy - London - Joel Oleson
 
The Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePointThe Design Dilemma of Mobile and SharePoint
The Design Dilemma of Mobile and SharePoint
 
ATLUG Tack-It-On Modern Notes:Modern Domino
ATLUG Tack-It-On Modern Notes:Modern DominoATLUG Tack-It-On Modern Notes:Modern Domino
ATLUG Tack-It-On Modern Notes:Modern Domino
 
How to Develop Your Mobile Strategy
How to Develop Your Mobile StrategyHow to Develop Your Mobile Strategy
How to Develop Your Mobile Strategy
 
Build once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platformBuild once deploy everywhere using the telerik platform
Build once deploy everywhere using the telerik platform
 
Getting started with infographics
Getting started with infographicsGetting started with infographics
Getting started with infographics
 
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in StockholmEnterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
Enterprise Mobile Strategy for SharePoint Server 2013 at SEF2014 in Stockholm
 

More from FITC

Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
FITC
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
FITC
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
FITC
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
FITC
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
FITC
 

More from FITC (20)

Cut it up
Cut it upCut it up
Cut it up
 
Designing for Digital Health
Designing for Digital HealthDesigning for Digital Health
Designing for Digital Health
 
Profiling JavaScript Performance
Profiling JavaScript PerformanceProfiling JavaScript Performance
Profiling JavaScript Performance
 
Surviving Your Tech Stack
Surviving Your Tech StackSurviving Your Tech Stack
Surviving Your Tech Stack
 
How to Pitch Your First AR Project
How to Pitch Your First AR ProjectHow to Pitch Your First AR Project
How to Pitch Your First AR Project
 
Start by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the AnswerStart by Understanding the Problem, Not by Delivering the Answer
Start by Understanding the Problem, Not by Delivering the Answer
 
Cocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s StoryCocaine to Carrots: The Art of Telling Someone Else’s Story
Cocaine to Carrots: The Art of Telling Someone Else’s Story
 
Everyday Innovation
Everyday InnovationEveryday Innovation
Everyday Innovation
 
HyperLight Websites
HyperLight WebsitesHyperLight Websites
HyperLight Websites
 
Everything is Terrifying
Everything is TerrifyingEverything is Terrifying
Everything is Terrifying
 
Post-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future HumanPost-Earth Visions: Designing for Space and the Future Human
Post-Earth Visions: Designing for Space and the Future Human
 
The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)The Rise of the Creative Social Influencer (and How to Become One)
The Rise of the Creative Social Influencer (and How to Become One)
 
East of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR GameEast of the Rockies: Developing an AR Game
East of the Rockies: Developing an AR Game
 
Creating a Proactive Healthcare System
Creating a Proactive Healthcare SystemCreating a Proactive Healthcare System
Creating a Proactive Healthcare System
 
World Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product DesignWorld Transformation: The Secret Agenda of Product Design
World Transformation: The Secret Agenda of Product Design
 
The Power of Now
The Power of NowThe Power of Now
The Power of Now
 
High Performance PWAs
High Performance PWAsHigh Performance PWAs
High Performance PWAs
 
Rise of the JAMstack
Rise of the JAMstackRise of the JAMstack
Rise of the JAMstack
 
From Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self DiscoveryFrom Closed to Open: A Journey of Self Discovery
From Closed to Open: A Journey of Self Discovery
 
Projects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time ForProjects Ain’t Nobody Got Time For
Projects Ain’t Nobody Got Time For
 

Recently uploaded

Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
daisycvs
 
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
amitlee9823
 
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabiunwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
Abortion pills in Kuwait Cytotec pills in Kuwait
 
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service BangaloreCall Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
amitlee9823
 
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
dlhescort
 

Recently uploaded (20)

Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...
Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...
Call Girls Zirakpur👧 Book Now📱7837612180 📞👉Call Girl Service In Zirakpur No A...
 
RSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors DataRSA Conference Exhibitor List 2024 - Exhibitors Data
RSA Conference Exhibitor List 2024 - Exhibitors Data
 
Uneak White's Personal Brand Exploration Presentation
Uneak White's Personal Brand Exploration PresentationUneak White's Personal Brand Exploration Presentation
Uneak White's Personal Brand Exploration Presentation
 
Business Model Canvas (BMC)- A new venture concept
Business Model Canvas (BMC)-  A new venture conceptBusiness Model Canvas (BMC)-  A new venture concept
Business Model Canvas (BMC)- A new venture concept
 
Falcon Invoice Discounting: Empowering Your Business Growth
Falcon Invoice Discounting: Empowering Your Business GrowthFalcon Invoice Discounting: Empowering Your Business Growth
Falcon Invoice Discounting: Empowering Your Business Growth
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
Quick Doctor In Kuwait +2773`7758`557 Kuwait Doha Qatar Dubai Abu Dhabi Sharj...
 
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
Call Girls Service In Old Town Dubai ((0551707352)) Old Town Dubai Call Girl ...
 
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort ServiceMalegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
Malegaon Call Girls Service ☎ ️82500–77686 ☎️ Enjoy 24/7 Escort Service
 
PHX May 2024 Corporate Presentation Final
PHX May 2024 Corporate Presentation FinalPHX May 2024 Corporate Presentation Final
PHX May 2024 Corporate Presentation Final
 
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
Call Girls Kengeri Satellite Town Just Call 👗 7737669865 👗 Top Class Call Gir...
 
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabiunwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
unwanted pregnancy Kit [+918133066128] Abortion Pills IN Dubai UAE Abudhabi
 
Phases of Negotiation .pptx
 Phases of Negotiation .pptx Phases of Negotiation .pptx
Phases of Negotiation .pptx
 
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service BangaloreCall Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
Call Girls Hebbal Just Call 👗 7737669865 👗 Top Class Call Girl Service Bangalore
 
Famous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st CenturyFamous Olympic Siblings from the 21st Century
Famous Olympic Siblings from the 21st Century
 
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
The Path to Product Excellence: Avoiding Common Pitfalls and Enhancing Commun...
 
It will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 MayIt will be International Nurses' Day on 12 May
It will be International Nurses' Day on 12 May
 
Value Proposition canvas- Customer needs and pains
Value Proposition canvas- Customer needs and painsValue Proposition canvas- Customer needs and pains
Value Proposition canvas- Customer needs and pains
 
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
Call Girls In Majnu Ka Tilla 959961~3876 Shot 2000 Night 8000
 
Organizational Transformation Lead with Culture
Organizational Transformation Lead with CultureOrganizational Transformation Lead with Culture
Organizational Transformation Lead with Culture
 

Responsive Design Techniques, Tools and Design Strategies with Paul Trani