SlideShare a Scribd company logo
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

HTML5
HTML5HTML5
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
Jeanie Arnoco
 
Css box model
Css  box modelCss  box model
Css box model
Nicha Jutasirivongse
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
Derin Dolen
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
Ashwin Shiv
 
Front end development session1
Front end development session1Front end development session1
Front end development session1
marwa Ayad Mohamed
 
Tailwind CSS.11.pptx
Tailwind CSS.11.pptxTailwind CSS.11.pptx
Tailwind CSS.11.pptx
Harish Verma
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
Zoe Gillenwater
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
palhaftab
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
Mind IT Systems
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
Traversy Media
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Lanh Le
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
Jacob Nelson
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
EPAM Systems
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
Sukrit Gupta
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 

What's hot (20)

HTML5
HTML5HTML5
HTML5
 
Introduction to BOOTSTRAP
Introduction to BOOTSTRAPIntroduction to BOOTSTRAP
Introduction to BOOTSTRAP
 
Css box model
Css  box modelCss  box model
Css box model
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
HTML CSS JS in Nut shell
HTML  CSS JS in Nut shellHTML  CSS JS in Nut shell
HTML CSS JS in Nut shell
 
Front end development session1
Front end development session1Front end development session1
Front end development session1
 
Tailwind CSS.11.pptx
Tailwind CSS.11.pptxTailwind CSS.11.pptx
Tailwind CSS.11.pptx
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
An introduction to bootstrap
An introduction to bootstrapAn introduction to bootstrap
An introduction to bootstrap
 
Web Development In 2018
Web Development In 2018Web Development In 2018
Web Development In 2018
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Html5 and-css3-overview
Html5 and-css3-overviewHtml5 and-css3-overview
Html5 and-css3-overview
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 

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 Techniques
Vitaly Friedman
 
Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
Clarissa Peterson
 
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
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
Sara Cannon
 
Responsive Web Design Workshop
Responsive Web Design WorkshopResponsive Web Design Workshop
Responsive Web Design Workshop
Stewart Curry
 
Bootstrap grid system
Bootstrap grid systemBootstrap grid system
Bootstrap grid system
Amr 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 Susy
James 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 Source
Baki 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 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
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson
 
Bootstrap Fundamentals
Bootstrap FundamentalsBootstrap Fundamentals
Bootstrap Fundamentals
Joseph Labrecque
 
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
 
"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 Websites
Clarissa 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.Key
scottjehl
 
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 CC
Joseph Labrecque
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Christian Glover Wilson
 

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.2
Clarissa 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-25
Frédéric Harper
 
Design
DesignDesign
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 Essentials
Clarissa 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-Designers
Nina Miller
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
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 Design
Frédéric Harper
 
Core CSS3
Core CSS3Core CSS3
Core CSS3
Rachel Andrew
 
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
Kaelig 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 1
Heather 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 Design
Justin Avery
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real World
Clarissa 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 & Resources
Clarissa 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
 
Design
DesignDesign
Design
 
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...
 
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
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
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

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

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

The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)
Kal-el Shows
 
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
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
Pieter van Langen
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
chandadutta02102
 
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
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
Kal-el Shows
 
Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
Kal-el Shows
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
Edit Bank Statement
 
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
 
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
 
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
 
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
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
ssuserdee4d8
 
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
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
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
 

Recently uploaded (20)

The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)The Wise Way (Slideshow by: Kal-el Marcus)
The Wise Way (Slideshow by: Kal-el Marcus)
 
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
 
Design Impulse: Boost the power of design
Design Impulse: Boost the power of designDesign Impulse: Boost the power of design
Design Impulse: Boost the power of design
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
 
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...
 
Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)Fear and Faith (Slideshow by: Kal-el Go)
Fear and Faith (Slideshow by: Kal-el Go)
 
Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
 
Professional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement EditingProfessional Document Editing Services / Bank Statement Editing
Professional Document Editing Services / Bank Statement Editing
 
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
 
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
 
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
 
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
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
 
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...
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
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...
 

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