SlideShare a Scribd company logo
1 of 152
Download to read offline
Introduction to
Responsive Web Design


                 Clarissa Peterson
                          @clarissa
a workshop for the
 DC Web Women
 Code(Her) Series


 August 14, 2012
Responsive Web Design:
Responsive Web Design:

A collection of techniques that allow your
website to respond to the device that it is
being viewed on.
Responsive Web Design:

A collection of techniques that allow your
website to respond to the device that it is
being viewed on.


This allows all users to have an optimal experience
without creating separate sites for different devices.
http://www.bostonglobe.com/
http://www.bostonglobe.com/
http://www.bostonglobe.com/
http://www.bostonglobe.com/
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
HTML
The first website. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
<p>...</p>

   <h1>...</h1>

<a href=””>...</a>
<hp1>...</hp1>


 (highlighting)
<blink>...</blink>
Control:


HTML tables
 spacer gifs
Cascading Style Sheets (CSS)
HTML   Content
 CSS   Presentation
John Kannenberg via Creative Commons http://flic.kr/p/9E7tqh
Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Paulo Fierro via Creative Commons http://flic.kr/p/ae8Nnr
Responsive web design offers us a way
forward, finally allowing us to “design for
the ebb and flow of things.”

                                                            - Ethan Marcotte



http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Design, 2011 http://www.abookapart.com/products/responsive-web-design/
Responsive Architecture
Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
Fallingwater © Clarissa Peterson
Fallingwater © Clarissa Peterson
Fallingwater © Clarissa Peterson
A Few Example Sites
Andersson-Wise Architects
http://www.anderssonwise.com


    People (mobile site)
    http://m.people.com


         Grey Goose
 http://www.greygoose.com
Smashing Magazine
http://www.smashingmagazine.com


              Tattly
        http://tattly.com


            AIDS.gov
         http://aids.gov
Two Approaches
1. Start from scratch


2. Make an existing design
    more responsive
1. Start from scratch


2. Make an existing design
    more responsive
1. Start from scratch


2. Make an existing design
    more responsive
download files for hands-on exercise here:
 http://clarissapeterson.com/files/dcww/




open in your text editor: style.css
open in your browser: demo.html
If you’re doing this at home, please note that each
section of code is marked at the bottom of the slide with
an example number that you can look for in your
style.css file.

Example 1 in style.css      like this
Older Browsers:


  You need to do some extra stuff
to make all this work and we won’t
    have time to get to it today.


     (but make sure you learn it later)
Live site http://www.dcwebwomen.org
Demo site with streamlined code (so it’s easier to see what you’re doing)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
Introduction to Responsive Web Design
Flexible Typesetting
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio,
video {
! margin: 0;
! padding: 0;
! border: 0;
! font-size: 100%;
! font: inherit;
! vertical-align: baseline;
}




http://meyerweb.com/eric/tools/css/reset/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd,
ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio,
video {
! margin: 0;
! padding: 0;
! border: 0;
! font-size: 100%;
! font: inherit;
! vertical-align: baseline;
}




http://meyerweb.com/eric/tools/css/reset/
target ÷ context = result
.nav li a:link {
! color: #2b737a;
! text-decoration:none;
! font-size: 22px;
! font-weight:100;
}




Example 1 in style.css
target ÷ context = result
22px ÷ 16px = 1.375em
.nav li a:link {
! color: #2b737a;
! text-decoration:none;
! font-size: 1.375em;
! font-weight:100;
}




Example 1 in style.css
.nav li a:link {
! color: #2b737a;
! text-decoration:none;
! font-size: 1.375em; !
! ! ! ! ! ! ! /* 22px / 16px */
! font-weight:100;
}




Example 1 in style.css
h2       24px ÷ 16px = 1.5em
h3       20px ÷ 16px = 1.25em
p        14px ÷ 16px = .875em




Example 2 in style.css
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
target ÷ context = result
___px ÷ 1280px = __%
<div class="site">
! ...
</div>




Example 3 in style.css
Introduction to Responsive Web Design
.site {
! width: 1280px;
}




Example 3 in style.css
.site {
! width: 100%;
      /* 1280px / 1280px */
}




Example 3 in style.css
<div id="heading">
! ...
</div>




Example 3 in style.css
Introduction to Responsive Web Design
#heading {
! background-color: #fff;
! width: 960px;
! margin: 1.5em auto;
! text-align:right;
}




Example 3 in style.css
#heading {
! background-color: #fff;
! width: 75%;
! margin: 1.5em auto;
! text-align:right;
}




Example 3 in style.css
<div id="promowrapper">
  <img src="promoimage.jpg" alt="Attend
  seminars, networking events, and
  more." />
</div>




Example 4 in style.css
Introduction to Responsive Web Design
#promowrapper {
! margin: 0 auto;
! width: 960px;
}




Example 4 in style.css
#promowrapper {
! margin: 0 auto;
! width: 75%;
}




Example 4 in style.css
<div id="content">
  ...
</div>




Example 4 in style.css
Introduction to Responsive Web Design
#content {
! background-color: #fff;
! width: 960px;
! margin: auto;
}




Example 4 in style.css
#content {
! background-color: #fff;
! width: 75%;
! margin: auto;
}




Example 4 in style.css
<div class="contentbox">
  <h2>Who We Are</h2>

  ...

</div>




Example 4 in style.css
Introduction to Responsive Web Design
.contentbox {
! width: 300px;
! float:left;
! padding: 2em 30px 2em 0;
}




Example 4 in style.css
.contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 30px 2em 0;
}




Example 4 in style.css
.contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 30px 2em 0;
}




Example 4 in style.css
.contentbox {
! width: 31.25%;
! float:left;
! padding: 2em 3.125% 2em 0;
}




Example 4 in style.css
<div id="footercontent">
  ...
</div>




Example 5 in style.css
Introduction to Responsive Web Design
#footercontent {
! width: 960px;
! margin: auto;
! color: #fff;
}




Example 5 in style.css
#footercontent {
! width: 75%;
! margin: auto;
! color: #fff;
}




Example 5 in style.css
Introduction to Responsive Web Design
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
Introduction to Responsive Web Design
<div id="promowrapper">
<img src="promoimage.jpg" alt="..." />
</div>

#promowrapper {
! margin: 0 auto;
! width: 75%;
}



Example 4 in style.css
#promo img {
! margin: 2em 0;
}




Example 4 in style.css
#promo img {
! margin: 2em 0;
! max-width: 100%;
}




Example 4 in style.css
Introduction to Responsive Web Design
embed
object
video
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
<link rel="stylesheet" href="style.css"
media=”print” />
h1 { color: #f00; }
p { color: #333; }

@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}
h1 { color: #f00; }
p { color: #333; }

@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}
h1 { color: #f00; }
p { color: #333; }

@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}
h1 { color: #f00; }
p { color: #333; }

@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}
h1 { color: #f00; }
p { color: #333; }

@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}
h1 { color: #f00; }
p { color: #333; }

@media print {
! h1 { color: #0f0; }
! p { color: #099; }
}
@media screen {
! ...
}
@media screen and (min-width: 1024px) {
! ...
}
@media screen and (max-width: 1024px) {
! ...
}
@media screen and (min-width: 768px) and
(max-width: 1024px) {
! ...
}
min-device-width: 1024px
max-device-width: 1024px

 orientation: landscape
 orientation: portrait

device-aspect-ratio: 16/9

  min-color-index: 256

 min-resolution: 300dpi
Introduction to Responsive Web Design
@media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}



Example 6 in style.css
@media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}



Example 6 in style.css
Introduction to Responsive Web Design
@media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}



Example 6 in style.css
Introduction to Responsive Web Design
@media screen and (max-width: 1100px) {
! #navbox {
! ! clear: left;
! ! padding-top: 0;
! ! text-align: center;
! }
}



Example 6 in style.css
Introduction to Responsive Web Design
Introduction to Responsive Web Design
Introduction to Responsive Web Design
@media screen and (max-width: 500px) {

! ...

}




Example 7 on style.css
@media screen and (max-width: 500px) {
! .nav li {
! ! display: block;
! ! margin-left: 0em;
! ! padding-bottom: 5px;
! }
}



Example 7 on style.css
Introduction to Responsive Web Design
@media screen and (max-width: 500px) {
! .nav li {
! ! display: block;
! ! margin-left: 0em;
! ! padding-bottom: 5px;
! }
}



Example 7 on style.css
Introduction to Responsive Web Design
@media screen and (max-width: 500px) {

! ...

!   .logo {
!   ! float: none;
!   ! text-align: center;
!   }
}


Example 7 on style.css
Introduction to Responsive Web Design
Introduction to Responsive Web Design
@media screen and (max-width: 500px) {

! ...

!   .contentbox {
!   ! width: 100%;
!   ! float: none;
!   ! padding: 1.5em 0 0 0;
!   }
}

Example 7 on style.css
Introduction to Responsive Web Design
@media screen and (max-width: 500px) {

! ...

!   .contentbox {
!   ! width: 100%;
!   ! float: none;
!   ! padding: 1.5em 0 0 0;
!   }
}

Example 7 on style.css
Introduction to Responsive Web Design
Some Other Things You Should Know
          (very briefly)
Breakpoints
Standard Breakpoints


 Why to Use Them
Why Not to Use Them
Commonly-Used Breakpoints



            Device Type             Width
Mobile phones (portrait)            320px
Mobile phones (landscape)           480px
7” tablets (portrait)               600px
10” tablets (portrait)              768px
10” tablets (landscape), Monitors   1024px
Wider monitors                      1280px
What’s a Device Lab?
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Device Lab DC
http://www.devicelabdc.com/
Mobile First
If you’re thinking about mobile:


      responsive design
     isn’t the only thing
   you need to think about.
A mobile app should not
    be the default choice.


Only do it if it’s the best choice.
Responsive Workflow
Photoshop is for photos


InDesign is for design & typography
We are free of the canvas
Content First
Q&A
Resources
Books

Ethan Marcotte
Responsive Web Design (2011)
http://www.abookapart.com/products/responsive-web-design/
Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/


How to Approach a Responsive Design (The Boston Globe) - Tito Bottitta (Jan. 2012)
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/


50 Fantastic Tools for Responsive Web Design - Denise Jacobs, Peter Gasston (Apr. 2012)
http://www.netmagazine.com/features/50-fantastic-tools-responsive-web-design


Design Process In The Responsive Age - Drew Clemens (May 2012)
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/


Making of: People Magazine's Responsive Mobile Website (July 2012)
http://globalmoxie.com/blog/making-of-people-mobile.shtml


The Top Responsive Web Design Problems and How to Avoid Them - James Young (Aug. 2012)
http://www.netmagazine.com/features/top-responsive-web-design-problems-and-how-avoid-them
Websites
@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD


Future Friendly
making things that are future-friendly
http://futurefriend.ly/


Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/


Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/


Responsive Design Bookmarklet
a handy tool for responsive design testing
http://responsive.victorcoulon.fr/
Other Things You Asked About

Resources mentioned during Q&A. Thanks for all the great questions!



Kristina Halvorson
Content Strategy for the Web, Second Edition (2012)
http://contentstrategy.com/


A List Apart
http://www.alistapart.com/


PX to EM Conversion Made Simple
http://pxtoem.com/
Not RWD

DC Web Women
A professional organization of more than 3000 members located in the Washington, DC, area.
Members are professional women, students and enthusiasts who specialize in web-related fields.
http://www.dcwebwomen.org/


We Are All Awesome
Be a role model: why there should be more female speakers at tech conferences. Resources on
creating presentations, getting ideas, writing proposals, and finding conferences with open CFPs.
http://weareallaweso.me/
Mount Rainier National Park. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Thank You


 Clarissa Peterson
clarissapeterson.com
cp@clarissapeterson.com
       @clarissa

More Related Content

What's hot

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design Mindy McAdams
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design pptaccede16
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3Lanh Le
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
Responsive web design
Responsive web designResponsive web design
Responsive web designRuss Weakley
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersMelvin John
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats newSandun Perera
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPressHarshad Mane
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewResponsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewAidan Foster
 
Web Design
Web DesignWeb Design
Web DesignSpy Seat
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design PrinciplesMukesh Tekwani
 

What's hot (20)

HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Web Design Trends: 2018 Edition
Web Design Trends: 2018 EditionWeb Design Trends: 2018 Edition
Web Design Trends: 2018 Edition
 
HTML and Responsive Design
HTML and Responsive Design HTML and Responsive Design
HTML and Responsive Design
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
Responsive web design ppt
Responsive web design pptResponsive web design ppt
Responsive web design ppt
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
Bootstrap 5 whats new
Bootstrap 5   whats newBootstrap 5   whats new
Bootstrap 5 whats new
 
HTML X CSS
HTML X CSSHTML X CSS
HTML X CSS
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Responsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow OverviewResponsive Web Design - Introduction & Workflow Overview
Responsive Web Design - Introduction & Workflow Overview
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Web Design
Web DesignWeb Design
Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 

Viewers also liked

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
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 FormsClarissa Peterson
 
Responsive Design
Responsive DesignResponsive Design
Responsive DesignSara Cannon
 
Responsive Web Design Workshop
Responsive Web Design WorkshopResponsive Web Design Workshop
Responsive Web Design WorkshopStewart Curry
 
Bootstrap grid system
Bootstrap grid systemBootstrap grid system
Bootstrap grid systemAmr Salman
 
Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyBreaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
 
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 SourceBaki Goxhaj
 
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 MoreCindy 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
 
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 2016Cristina Chumillas
 
"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
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive WebsitesClarissa Peterson
 
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
 
Rich UI Design: An Access Oriented Approach Sc For Ss.Key
Rich UI Design: An Access Oriented Approach Sc For Ss.KeyRich UI Design: An Access Oriented Approach Sc For Ss.Key
Rich UI Design: An Access Oriented Approach Sc For Ss.Keyscottjehl
 
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラEdward Fox
 
Getting Familiar with Animate CC
Getting Familiar with Animate CCGetting Familiar with Animate CC
Getting Familiar with Animate CCJoseph Labrecque
 

Viewers also liked (20)

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
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
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 
Responsive Web Design Workshop
Responsive Web Design WorkshopResponsive Web Design Workshop
Responsive Web Design Workshop
 
Bootstrap grid system
Bootstrap grid systemBootstrap grid system
Bootstrap grid system
 
Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyBreaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
Breaking Free from Bootstrap: Custom Responsive Grids with Sass Susy
 
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
 
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
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
 
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
 
"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...
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
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...
 
Rich UI Design: An Access Oriented Approach Sc For Ss.Key
Rich UI Design: An Access Oriented Approach Sc For Ss.KeyRich UI Design: An Access Oriented Approach Sc For Ss.Key
Rich UI Design: An Access Oriented Approach Sc For Ss.Key
 
Atomic Designにまつわるエトセトラ
Atomic DesignにまつわるエトセトラAtomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
 
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
 

Similar to Introduction to Responsive Web Design

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Clarissa Peterson
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
 
Arizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-DesignersArizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-DesignersNina Miller
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.GaziAhsan
 
Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Andrea Robertson
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFrédéric Harper
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comKaelig Deloumeau-Prigent
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?Russ Weakley
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJustin Avery
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real WorldClarissa Peterson
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Mediacurrent
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 

Similar to Introduction to Responsive Web Design (20)

Introduction to Responsive Design v.2
Introduction to Responsive Design v.2Introduction to Responsive Design v.2
Introduction to Responsive Design v.2
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Design
DesignDesign
Design
 
Responsive Design Essentials
Responsive Design EssentialsResponsive Design Essentials
Responsive Design Essentials
 
Arizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-DesignersArizona State University Web Design for Non-Designers
Arizona State University Web Design for Non-Designers
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)Responsive Web Design in iMIS (NiUG Austin 2015)
Responsive Web Design in iMIS (NiUG Austin 2015)
 
FITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web DesignFITC - 2012-04-23 - Responsive Web Design
FITC - 2012-04-23 - Responsive Web Design
 
Core CSS3
Core CSS3Core CSS3
Core CSS3
 
Bridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.comBridging the gap between designers and developers at theguardian.com
Bridging the gap between designers and developers at theguardian.com
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 

More from 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 ExperienceClarissa Peterson
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive WebsitesClarissa Peterson
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa 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 DesignClarissa Peterson
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & HellClarissa Peterson
 

More from Clarissa Peterson (11)

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 Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 
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
 

Recently uploaded

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 

Recently uploaded (19)

How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 

Introduction to Responsive Web Design

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n
  132. \n
  133. \n
  134. \n
  135. \n
  136. \n
  137. \n
  138. \n
  139. \n
  140. \n
  141. \n
  142. \n
  143. \n
  144. \n
  145. \n
  146. \n
  147. \n
  148. \n
  149. \n
  150. \n
  151. \n
  152. \n
  153. \n