SlideShare ist ein Scribd-Unternehmen logo
1 von 178
Downloaden Sie, um offline zu lesen
Introduction to
Responsive Web Design
      version 2.0


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


September 11, 2012
1. What is responsive web design
2. Where it came from
3. Example sites
4. Hands-on demonstration
5. Other things you should know
6. Q&A
Responsive Web Design
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
HTML
Markup Language
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
Designing for one canvas.
Brendan Gates via Creative Commons http://flic.kr/p/dvX1J
Curtis Palmer via Creative Commons http://flic.kr/p/wyPiC
Designing for unlimited canvases?
Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
The web is free from the physical
    restraints of the canvas
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 http://www.abookapart.com/products/responsive-web-design/
Responsive Architecture
Tristan Sterk via Creative Commons http://commons.wikimedia.org/wiki/File:ResponsiveEnvelope1.jpg
It’s easy to build a house
on flat land with four walls.
© Clarissa Peterson
Work around the environment.
© Clarissa Peterson
Think about design differently.
© Clarissa Peterson
A website with a responsive
 design is no longer just a
   picture on a canvas.
A Few Examples
of Responsive Design
Smashing Magazine
http://www.smashingmagazine.com


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


        United Pixelworkers
http://www.unitedpixelworkers.com/
World Wildlife Fund
     http://worldwildlife.org/


         Stuff & Nonsense
http://www.stuffandnonsense.co.uk/


        Emeril’s Restaurants
http://www.emerilsrestaurants.com/
Andersson-Wise Architects
   http://www.anderssonwise.com


   Federal Government: AIDS.gov
           http://aids.gov


  WordPress Theme: Twenty Twelve
http://twentytwelvedemo.wordpress.com/
Two Approaches
1. Start from scratch


2. Make an existing design
    more responsive
download files for hands-on exercise here:
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:

  Some of this won’t work in older
browsers, so you’ll need to do some
    extra stuff to make it work.


        (read the book....)
1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries
Columns provide structure.
http://www.bostonglobe.com/
target ÷ context = result
target ÷ context = result
___px ÷ 1280px = __%
(but you don’t actually need
 to remember the formula)
<div class="site">
! ...
</div>




Example 1 in style.css
.site {
! width: 1280px;
}




Example 1 in style.css
.site {
! width: 100%;
}




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




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




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




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




Example 3 in style.css
#promowrapper {
! margin: 0 auto;
! width: 960px;
}




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




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




Example 4 in style.css
#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 id=”content”>
  <div class="contentbox">
    <h2>Who We Are</h2>

     ...

  </div>

  ...

</div>

Example 4 in style.css
.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
#footercontent {
! width: 960px;
! margin: auto;
! color: #fff;
}




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




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

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



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




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




Example 3 in style.css
Don’t set the width and height
   attributes of the image
Also:
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; }
}
@media screen {
! ...
}
@media screen and (min-width: 1024px) {
! ...
}
@media screen and (min-width: 768px) and
(max-width: 1024px) {
! ...
}
min-device-width: 00px
 max-device-width: 00px

 orientation: landscape
 orientation: portrait

device-aspect-ratio: 16/9

  min-color-index: 256

 min-resolution: 300dpi
@media screen and (max-width: 1100px) {
! #navbox {
! !
! !
! !
! }
}



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



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



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
@media screen and (max-width: 500px) {
! .nav li {
! !
! !
! !
! }
}



Example 7 on style.css
@media screen and (max-width: 500px) {
! .nav li {
! ! display: block;
! !
! !
! }
}



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



Example 7 on style.css
@media screen and (max-width: 500px) {

! ...

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


Example 7 on style.css
@media screen and (max-width: 500px) {

! ...

!   .contentbox {
!   ! width: 100%;
!   !
!   !
!   }
}

Example 7 on style.css
@media screen and (max-width: 500px) {

! ...

!   .contentbox {
!   ! width: 100%;
!   ! float: none;
!   ! padding: 25px 0 0;
!   }
}

Example 7 on style.css
Breakpoints
(where the design breaks)
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
But what happens when
there are new devices?
Break when the design tells you to.
Options:
Options:
Ignore Mobile?
Options:
  Ignore Mobile?
Separate Mobile Site
Options:
  Ignore Mobile?
Separate Mobile Site
Native Mobile App
Options:
  Ignore Mobile?
Separate Mobile Site
Native Mobile App
 Responsive Design
Your boss saying you need
  a mobile app is not a good
reason to make a mobile app.
Mobile First
Start from the smallest screen,
determine which parts of the design
are truly necessary, and make those
      the basis of your design.
Mobile first = better user
experience across devices
Mobile-Only Users
Consider bandwidth
Older Browsers:

Give them default CSS that they can
           understand.
Device Testing
(if you don’t have devices)
Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Test early, test often
Test at Various Widths


     tools such as:
 resizemybrowser.com
quirktools.com/screenfly/
Use a Mobile Emulator


        such as:
mobilephoneemulator.com
Smartphones
Feature Phones
   Tablets
Touch Interaction
Desktop Browsers
Mobile Browsers
Device Lab DC
devicelabdc.com
Responsive Process
How to explain responsive
design to (internal/external) clients
The design won’t look the
same on every browser/device
Static comps aren’t enough
Style Tiles
Style Tiles
fonts, colors, interface elements
Style Tiles
  fonts, colors, interface elements
communicate the essence of a visual
       brand for the web
Style Tiles via Creative Commons http://styletil.es/
Style Tiles
  help form a common visual
    language between the
designers and the stakeholders
Style Tiles via Creative Commons http://styletil.es/
Photoshop is for photos


InDesign is for design & typography
Design


Develop
Design doesn’t end
when development begins
Content First
Users aren’t coming to your
    site because it’s pretty,
they’re coming for the content.
Responsive Design:
We are free of the canvas.
Q&A
Resources
Books
Ethan Marcotte
Responsive Web Design (2011)
http://www.abookapart.com/products/responsive-web-design/


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


How to Approach a Responsive Design (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


3 Types of Solutions To Work With Responsive Images - Steven Bradley (July 2012)
http://www.vanseodesign.com/web-design/responsive-images/
More Articles
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


Presidential Smackdown Edition: Separate Mobile Website Vs. Responsive Website - Brad Frost (Aug. 2012)
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-
smackdown/


Responsive Design Case Study (South Tees Hospitals NHS Foundation Trust) - Matt Berridge (Aug. 2012)
http://builtbyboon.com/blog/responsive-design-case-study




                                   Miscellaneous
Someone asked how I measure things on the screen:

MeasureIt (Firefox add-on)
https://addons.mozilla.org/en-US/firefox/addon/measureit/
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/
Other Information
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. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)
Thank You


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

Weitere ähnliche Inhalte

Was ist angesagt?

Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignTung Dang
 
Responsive Design in the Real World
Responsive Design in the Real WorldResponsive Design in the Real World
Responsive Design in the Real WorldClarissa 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
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive WebsitesClarissa Peterson
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesignBart De Waele
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017Christian Heilmann
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansChristian Heilmann
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes backChristian Heilmann
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
 
Why the heck isnt word press a cms
Why the heck isnt word press a cmsWhy the heck isnt word press a cms
Why the heck isnt word press a cmsJohn Eckman
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfChristian Heilmann
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBrad Frost
 
Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Christian Heilmann
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)Future Insights
 

Was ist angesagt? (20)

Responsive Design Workshop
Responsive Design WorkshopResponsive Design Workshop
Responsive Design Workshop
 
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
 
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
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Designing Responsive Websites
Designing Responsive WebsitesDesigning Responsive Websites
Designing Responsive Websites
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017The Progressive Web and its New Challenges - Confoo Montréal 2017
The Progressive Web and its New Challenges - Confoo Montréal 2017
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 
Microformats
MicroformatsMicroformats
Microformats
 
A New Hope – the web strikes back
A New Hope – the web strikes backA New Hope – the web strikes back
A New Hope – the web strikes back
 
Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Why the heck isnt word press a cms
Why the heck isnt word press a cmsWhy the heck isnt word press a cms
Why the heck isnt word press a cms
 
The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 
Beyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive DesignBeyond Squishy: The Principles of Adaptive Design
Beyond Squishy: The Principles of Adaptive Design
 
Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?
 
So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)So…What Do I Make? (Dan Mall)
So…What Do I Make? (Dan Mall)
 
Flourish2011
Flourish2011Flourish2011
Flourish2011
 

Ähnlich wie 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...Frédéric Harper
 
Responsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHResponsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHPeytz Design
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalFour Kitchens
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web DesignMike Wilcox
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
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
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the WildRich Quick
 
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
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Centurydreamwidth
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
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
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web DesignDaniel Drew Turner
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyZoe Gillenwater
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Thinkful
 

Ähnlich wie Introduction to Responsive Design v.2 (20)

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 - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPHResponsive Web Design - Drupal Camp CPH
Responsive Web Design - Drupal Camp CPH
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
RWD
RWDRWD
RWD
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
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)
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
RWD in the Wild
RWD in the WildRWD in the Wild
RWD in the Wild
 
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...
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
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
 
Module 08: Responsive Web Design
Module 08: Responsive Web DesignModule 08: Responsive Web Design
Module 08: Responsive Web Design
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Designing with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & EfficientlyDesigning with CSS3 Effectively & Efficiently
Designing with CSS3 Effectively & Efficiently
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 

Mehr von 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
 
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
 

Mehr von Clarissa Peterson (6)

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
 
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
 
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
 

Kürzlich hochgeladen

CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy ysrajece
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioAlinaLau2
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 

Kürzlich hochgeladen (20)

ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
NBA power point presentation final copy y
NBA power point presentation final copy yNBA power point presentation final copy y
NBA power point presentation final copy y
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
Imagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering PortfolioImagist3D Architectural and Interior Rendering Portfolio
Imagist3D Architectural and Interior Rendering Portfolio
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 

Introduction to Responsive Design v.2