SlideShare a Scribd company logo
Clarissa Peterson 
@clarissa 
Designing Responsive Websites
http://www.oliverharvey.co.uk/
http://www.oliverharvey.co.uk/
http://www.linksture.com/
http://www.linksture.com/
http://skinnyties.com/
http://skinnyties.com/
Flexible 
https://flic.kr/p/jXxfeF
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
#content { 
width: 90%; 
}
Adjustable 
https://flic.kr/p/j9KrpA
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
http://www.unitedpixelworkers.com/
article { width: 92%; } 
@media only screen and (min-width:40em) { 
article { width: 70%; float: left; 
}
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
https://flic.kr/p/ca1kU
https://flic.kr/p/cfQwL7
Design Process 
https://flic.kr/p/bSHvgv
https://flic.kr/p/35Ahx
Design Develop
Design 
Develop
https://flic.kr/p/rZVTg
“It's not like our industry nailed web 
design before we started doing 
responsive design. It's still a work in 
progress.” 
- Dan Willis 
@uxcrank
Content 
https://flic.kr/p/4qc5EB
http://teamtreehouse.com
http://teamtreehouse.com
http://teamtreehouse.com
http://teamtreehouse.com
Small Screen First 
https://flic.kr/p/abN4Q4
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Wireframes
http://flic.kr/p/cJJdzm
http://foundation.zurb.com/
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/docs/forms.php
http://foundation.zurb.com/docs/typography.php
http://www.hotgloo.com/
Typography 
https://flic.kr/p/4r1D8w
http://www.trentwalton.com
http://www.trentwalton.com
http://www.trentwalton.com
http://www.trentwalton.com
https://flic.kr/p/eYEFGY 
Ems & Rems
Designing Responsive Websites
1em = default
2em = twice as big 
1em = default
2em = twice as big 
1em = default 
.5em = half as big
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; }
h1 { font-size: 3em; } 
h2 { font-size: 2em; } 
h3 { font-size: 1.5em; }
body { font-size: 100%; }
https://flic.kr/p/8iNCNU
Scale 
https://flic.kr/p/dhufQk
Line Length (Measure) 
http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
Designing Responsive Websites
Designing Responsive Websites
45-75 Characters
max-width 
https://flic.kr/p/7nCGk3
article { max-width: 28em; }
article { max-width: 28em; }
Designing Responsive Websites
Designing Responsive Websites
@media only screen and (min-width:48em) { 
article { font-size: 1.1em; } 
article p { line-height: 1.4; 
margin: 1.4em auto; } 
}
@media only screen and (min-width:48em) { 
article { font-size: 1.1em; } 
article p { line-height: 1.4; 
margin: 1.4em auto; } 
}
http://wearyoubelong.com/
http://wearyoubelong.com/
#intro { 
font-size: 1em; 
font-family: Helvetica, sans-serif; 
}
#intro { 
font-size: 1em; 
font-family: Helvetica, sans-serif; 
} 
@media only screen and (min-width:30em) { 
#intro { 
font-size: 1.2em; 
font-family: Populaire, sans-serif; 
} 
}
Mobile 
https://flic.kr/p/d5DEjS
https://flic.kr/p/jRnhnU
https://flic.kr/p/nNu7sP
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
Designing Responsive Websites
<a href=”tel:202-123-4567”>202-123-4567</a>
Performance
https://flic.kr/p/23xNNg
“You can't mock up performance in 
Photoshop.” 
- Brad Frost 
@brad_frost
Performance Budget 
https://flic.kr/p/hT9yw7
https://flic.kr/p/5R51o3
Designing Responsive Websites
https://flic.kr/p/7NFTF6
Testing 
https://flic.kr/p/bPZzeM
http://www.browserstack.com/
Device Labs
https://flic.kr/p/cdVB9h 
Clarissa Peterson 
Peterson/Kandy 
clarissapeterson.com 
@clarissa

More Related Content

What's hot

Gmail tutorials
Gmail tutorialsGmail tutorials
Gmail tutorials
albert ndicho
 
JavaScript & Animation
JavaScript & AnimationJavaScript & Animation
JavaScript & Animation
Caesar Chi
 
How To Add A Voki to your Wordpress MU blog
How To Add A Voki to your Wordpress MU blogHow To Add A Voki to your Wordpress MU blog
How To Add A Voki to your Wordpress MU blog
John Sutton
 
P2
P2P2
WordPress for Business Sites - ConvergeSouth - October 2011
WordPress for Business Sites - ConvergeSouth - October 2011WordPress for Business Sites - ConvergeSouth - October 2011
WordPress for Business Sites - ConvergeSouth - October 2011
John Ford
 
WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...
WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...
WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...
John Ford
 
A brief history of the web
A brief history of the webA brief history of the web
A brief history of the web
Jorge Zapico
 
Cdddd
CddddCdddd
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
ladyheatherly
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
javier ramirez
 
The Wordpress Game Changer. Jenny Wong
The Wordpress Game Changer. Jenny WongThe Wordpress Game Changer. Jenny Wong
The Wordpress Game Changer. Jenny Wong
Future Insights
 
A More Perfect Union with CSS
A More Perfect Union with CSSA More Perfect Union with CSS
A More Perfect Union with CSS
Christopher Schmitt
 
Chris Bourseau, UI/UX Designer
Chris Bourseau, UI/UX DesignerChris Bourseau, UI/UX Designer
Chris Bourseau, UI/UX Designer
Christopher Bourseau
 
OK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform eraOK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform era
Teerasej Jiraphatchandej
 
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to AndroidQuick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to Android
Hervé Mischler
 
20160613 TNC TERENA
20160613 TNC TERENA20160613 TNC TERENA
20160613 TNC TERENA
University of Twente
 
Extending the Blog Beyond the Blog
Extending the Blog Beyond the BlogExtending the Blog Beyond the Blog
Extending the Blog Beyond the Blog
Dan Zarrella
 
Eg2 M1 2009 I
Eg2 M1 2009 IEg2 M1 2009 I
CSS 3 Overview
CSS 3 OverviewCSS 3 Overview
CSS 3 Overview
Owen Williams
 
Juggling
JugglingJuggling
Juggling
Ross Lawley
 

What's hot (20)

Gmail tutorials
Gmail tutorialsGmail tutorials
Gmail tutorials
 
JavaScript & Animation
JavaScript & AnimationJavaScript & Animation
JavaScript & Animation
 
How To Add A Voki to your Wordpress MU blog
How To Add A Voki to your Wordpress MU blogHow To Add A Voki to your Wordpress MU blog
How To Add A Voki to your Wordpress MU blog
 
P2
P2P2
P2
 
WordPress for Business Sites - ConvergeSouth - October 2011
WordPress for Business Sites - ConvergeSouth - October 2011WordPress for Business Sites - ConvergeSouth - October 2011
WordPress for Business Sites - ConvergeSouth - October 2011
 
WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...
WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...
WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...
 
A brief history of the web
A brief history of the webA brief history of the web
A brief history of the web
 
Cdddd
CddddCdddd
Cdddd
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
 
The Wordpress Game Changer. Jenny Wong
The Wordpress Game Changer. Jenny WongThe Wordpress Game Changer. Jenny Wong
The Wordpress Game Changer. Jenny Wong
 
A More Perfect Union with CSS
A More Perfect Union with CSSA More Perfect Union with CSS
A More Perfect Union with CSS
 
Chris Bourseau, UI/UX Designer
Chris Bourseau, UI/UX DesignerChris Bourseau, UI/UX Designer
Chris Bourseau, UI/UX Designer
 
OK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform eraOK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform era
 
Quick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to AndroidQuick tips for porting your iOS designs to Android
Quick tips for porting your iOS designs to Android
 
20160613 TNC TERENA
20160613 TNC TERENA20160613 TNC TERENA
20160613 TNC TERENA
 
Extending the Blog Beyond the Blog
Extending the Blog Beyond the BlogExtending the Blog Beyond the Blog
Extending the Blog Beyond the Blog
 
Eg2 M1 2009 I
Eg2 M1 2009 IEg2 M1 2009 I
Eg2 M1 2009 I
 
CSS 3 Overview
CSS 3 OverviewCSS 3 Overview
CSS 3 Overview
 
Juggling
JugglingJuggling
Juggling
 

Viewers also liked

Th writing-grammar-mistakes-140501125825-phpapp01
Th writing-grammar-mistakes-140501125825-phpapp01Th writing-grammar-mistakes-140501125825-phpapp01
Th writing-grammar-mistakes-140501125825-phpapp01
Bipin Kujur
 
Learning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & CustomizationLearning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & Customization
Zac Gordon
 
Bootstrap 4 n00bz
Bootstrap 4 n00bzBootstrap 4 n00bz
Bootstrap 4 n00bz
Laurence Bradford
 
Student Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and MoreStudent Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and More
Cindy Pao
 
Learn how to Responsive web desing
Learn how to Responsive web desing Learn how to Responsive web desing
Learn how to Responsive web desing
DHARA
 
Web Design And Development With Open Source
Web Design And Development With Open SourceWeb Design And Development With Open Source
Web Design And Development With Open Source
Baki Goxhaj
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
Cristina Chumillas
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
Joseph Labrecque
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
SUGCON
 
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
Edward Fox
 
Cross browser testing using BrowserStack
Cross browser testing using BrowserStack Cross browser testing using BrowserStack
Cross browser testing using BrowserStack
RapidValue
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CC
Joseph Labrecque
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Christian Glover Wilson
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
Rudy Rigot
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Adrian Alonso Vega
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Joseph Labrecque
 
Intro to modern web technology
Intro to modern web technologyIntro to modern web technology
Intro to modern web technology
Chris Love
 
Responsive Web Design Basics
Responsive Web Design BasicsResponsive Web Design Basics
Responsive Web Design Basics
Austin Walker
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Clarissa Peterson
 

Viewers also liked (20)

Th writing-grammar-mistakes-140501125825-phpapp01
Th writing-grammar-mistakes-140501125825-phpapp01Th writing-grammar-mistakes-140501125825-phpapp01
Th writing-grammar-mistakes-140501125825-phpapp01
 
Learning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & CustomizationLearning the Niche of Theme Setup & Customization
Learning the Niche of Theme Setup & Customization
 
Bootstrap 4 n00bz
Bootstrap 4 n00bzBootstrap 4 n00bz
Bootstrap 4 n00bz
 
Student Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and MoreStudent Mentoring Programs: The Why's, How's, and More
Student Mentoring Programs: The Why's, How's, and More
 
Learn how to Responsive web desing
Learn how to Responsive web desing Learn how to Responsive web desing
Learn how to Responsive web desing
 
Web Design And Development With Open Source
Web Design And Development With Open SourceWeb Design And Development With Open Source
Web Design And Development With Open Source
 
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
Brian Beckham - Atomic Design - Modularity Matters: Bringing Atomic Design to...
 
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
 
Cross browser testing using BrowserStack
Cross browser testing using BrowserStack Cross browser testing using BrowserStack
Cross browser testing using BrowserStack
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CC
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design - but for real!
Responsive Web Design - but for real!Responsive Web Design - but for real!
Responsive Web Design - but for real!
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Intro to modern web technology
Intro to modern web technologyIntro to modern web technology
Intro to modern web technology
 
Responsive Web Design Basics
Responsive Web Design BasicsResponsive Web Design Basics
Responsive Web Design Basics
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
 

Similar to Designing Responsive Websites

Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
Rachel Andrew
 
Core CSS3
Core CSS3Core CSS3
Core CSS3
Rachel Andrew
 
pub
pubpub
pub
pubpub
More than 1600 backlinks to Frontware.com
More than 1600 backlinks to Frontware.comMore than 1600 backlinks to Frontware.com
More than 1600 backlinks to Frontware.com
Frontware International
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Estelle Weyl
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and Tricks
Brad Williams
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
Lisa Adkins
 
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
Sreejith Nair
 
The DiSo Project and the Open Web
The DiSo Project and the Open WebThe DiSo Project and the Open Web
The DiSo Project and the Open Web
Chris Messina
 
Doctype html publi
Doctype html publiDoctype html publi
Doctype html publi
Eddy_TKJ
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Rachel Andrew
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
areyouok
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
topgeek
 
Angular js活用事例:filydoc
Angular js活用事例:filydocAngular js活用事例:filydoc
Angular js活用事例:filydoc
Keiichi Kobayashi
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
Christopher Schmitt
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
Rachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel Andrew
 

Similar to Designing Responsive Websites (20)

Into the Weeds of CSS Layout
Into the Weeds of CSS LayoutInto the Weeds of CSS Layout
Into the Weeds of CSS Layout
 
Core CSS3
Core CSS3Core CSS3
Core CSS3
 
pub
pubpub
pub
 
pub
pubpub
pub
 
More than 1600 backlinks to Frontware.com
More than 1600 backlinks to Frontware.comMore than 1600 backlinks to Frontware.com
More than 1600 backlinks to Frontware.com
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and Tricks
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 
Basics of html5, data_storage, css3
Basics of html5, data_storage, css3Basics of html5, data_storage, css3
Basics of html5, data_storage, css3
 
The DiSo Project and the Open Web
The DiSo Project and the Open WebThe DiSo Project and the Open Web
The DiSo Project and the Open Web
 
Doctype html publi
Doctype html publiDoctype html publi
Doctype html publi
 
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web designClass 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站腾讯大讲堂09 如何建设高性能网站
腾讯大讲堂09 如何建设高性能网站
 
Angular js活用事例:filydoc
Angular js活用事例:filydocAngular js活用事例:filydoc
Angular js活用事例:filydoc
 
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design[HEWEBAR 2012] Adaptive Images in Responsive Web Design
[HEWEBAR 2012] Adaptive Images in Responsive Web Design
 
SmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid LayoutSmashingConf SF: Unlocking the Power of CSS Grid Layout
SmashingConf SF: Unlocking the Power of CSS Grid Layout
 
Unlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid LayoutUnlocking the Power of CSS Grid Layout
Unlocking the Power of CSS Grid Layout
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 

More from Clarissa Peterson

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
Clarissa Peterson
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
Clarissa Peterson
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
Clarissa Peterson
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
Clarissa Peterson
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
Clarissa Peterson
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
Clarissa Peterson
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
Clarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
Clarissa Peterson
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
Clarissa Peterson
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
Clarissa Peterson
 

More from Clarissa Peterson (12)

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
 
Designing for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User Experience
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive Design
Responsive Design Responsive Design
Responsive Design
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 

Recently uploaded

Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Mostafa Abd Elrahman
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Mostafa Abd Elrahman
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
Magdiel70
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
ssusere235001
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
rightchoicelandscapi
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
divathisis
 
Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024
alifia97
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
philipjuuu
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
monikaservice00
 
bedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptxbedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptx
gameransh001
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
Kal-el Shows
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
TeeFusion
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
illuminz
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
Mostafa Abd Elrahman
 

Recently uploaded (20)

Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdfPreserving-the-Essence-A-Journey-in-Visual-Identity.pdf
Preserving-the-Essence-A-Journey-in-Visual-Identity.pdf
 
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdfZaha-Hadids-Influence-on-Modern-Architecture.pdf
Zaha-Hadids-Influence-on-Modern-Architecture.pdf
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 
Arch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural PortfolioArch.Bob _ 005 _ Architectural Portfolio
Arch.Bob _ 005 _ Architectural Portfolio
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...Right Choice Landscaping offers exceptional villa landscape maintenance servi...
Right Choice Landscaping offers exceptional villa landscape maintenance servi...
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
This is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdfThis is Diva abaya look book portfolio .pdf
This is Diva abaya look book portfolio .pdf
 
Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024Maria Reginalda Alifia's Creative Portfolio 2024
Maria Reginalda Alifia's Creative Portfolio 2024
 
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
Google UX Design Certificate - Portfolio Project 1 - Case study slide deck -T...
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
 
bedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptxbedsores20-9-14-150627122143-lva1-app6892.pptx
bedsores20-9-14-150627122143-lva1-app6892.pptx
 
The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)The Stone (Slideshow by: Kal-el Marcus Renne Go)
The Stone (Slideshow by: Kal-el Marcus Renne Go)
 
With Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent ShirtWith Fear For Our Democracy I Dissent Shirt
With Fear For Our Democracy I Dissent Shirt
 
The Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for EntrepreneursThe Ultimate Logo Design Checklist for Entrepreneurs
The Ultimate Logo Design Checklist for Entrepreneurs
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 
A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
 

Designing Responsive Websites