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

Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
lizamodels9
 
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Dipal Arora
 
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 Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
amitlee9823
 
Mifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pills
Mifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pillsMifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pills
Mifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pills
Abortion pills in Kuwait Cytotec pills in Kuwait
 

Recently uploaded (20)

M.C Lodges -- Guest House in Jhang.
M.C Lodges --  Guest House in Jhang.M.C Lodges --  Guest House in Jhang.
M.C Lodges -- Guest House in Jhang.
 
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
 
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
Russian Call Girls In Gurgaon ❤️8448577510 ⊹Best Escorts Service In 24/7 Delh...
 
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRLMONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
 
Grateful 7 speech thanking everyone that has helped.pdf
Grateful 7 speech thanking everyone that has helped.pdfGrateful 7 speech thanking everyone that has helped.pdf
Grateful 7 speech thanking everyone that has helped.pdf
 
The Coffee Bean & Tea Leaf(CBTL), Business strategy case study
The Coffee Bean & Tea Leaf(CBTL), Business strategy case studyThe Coffee Bean & Tea Leaf(CBTL), Business strategy case study
The Coffee Bean & Tea Leaf(CBTL), Business strategy case study
 
Dr. Admir Softic_ presentation_Green Club_ENG.pdf
Dr. Admir Softic_ presentation_Green Club_ENG.pdfDr. Admir Softic_ presentation_Green Club_ENG.pdf
Dr. Admir Softic_ presentation_Green Club_ENG.pdf
 
Best VIP Call Girls Noida Sector 40 Call Me: 8448380779
Best VIP Call Girls Noida Sector 40 Call Me: 8448380779Best VIP Call Girls Noida Sector 40 Call Me: 8448380779
Best VIP Call Girls Noida Sector 40 Call Me: 8448380779
 
Call Girls in Gomti Nagar - 7388211116 - With room Service
Call Girls in Gomti Nagar - 7388211116  - With room ServiceCall Girls in Gomti Nagar - 7388211116  - With room Service
Call Girls in Gomti Nagar - 7388211116 - With room Service
 
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
Call Girls Navi Mumbai Just Call 9907093804 Top Class Call Girl Service Avail...
 
Call Girls In Panjim North Goa 9971646499 Genuine Service
Call Girls In Panjim North Goa 9971646499 Genuine ServiceCall Girls In Panjim North Goa 9971646499 Genuine Service
Call Girls In Panjim North Goa 9971646499 Genuine Service
 
Monthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptxMonthly Social Media Update April 2024 pptx.pptx
Monthly Social Media Update April 2024 pptx.pptx
 
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
 
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
 
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...
 
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
 
Pharma Works Profile of Karan Communications
Pharma Works Profile of Karan CommunicationsPharma Works Profile of Karan Communications
Pharma Works Profile of Karan Communications
 
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
Call Girls Electronic City Just Call 👗 7737669865 👗 Top Class Call Girl Servi...
 
HONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael HawkinsHONOR Veterans Event Keynote by Michael Hawkins
HONOR Veterans Event Keynote by Michael Hawkins
 
Mifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pills
Mifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pillsMifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pills
Mifty kit IN Salmiya (+918133066128) Abortion pills IN Salmiyah Cytotec pills
 

Responsive Design Techniques, Tools and Design Strategies with Paul Trani