Introduction to Responsive Design v.2
Upcoming SlideShare
Loading in...5
×
 

Introduction to Responsive Design v.2

on

  • 2,281 views

This is the same workshop from August, but about 40 new slides, mostly at the end.

This is the same workshop from August, but about 40 new slides, mostly at the end.

A hands-on workshop for DC Web Women on September 11, 2012.

Statistics

Views

Total Views
2,281
Views on SlideShare
1,986
Embed Views
295

Actions

Likes
1
Downloads
39
Comments
1

3 Embeds 295

http://paperplanes.s1dev.ru 292
https://twitter.com 2
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • wow amazing how, thanks all
    http://giaunhanh.mobi
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to Responsive Design v.2 Introduction to Responsive Design v.2 Presentation Transcript

  • Introduction toResponsive Web Design version 2.0 Clarissa Peterson @clarissa
  • a workshop for the DC Web Women Code(Her) SeriesSeptember 11, 2012
  • 1. What is responsive web design2. Where it came from3. Example sites4. Hands-on demonstration5. Other things you should know6. Q&A View slide
  • Responsive Web Design View slide
  • Responsive Web Design
  • Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.
  • Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being viewed on.This allows all users to have an optimal experiencewithout 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 layout2. Flexible images and media3. 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 wayforward, finally allowing us to “design forthe ebb and flow of things.” - Ethan Marcottehttp://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 houseon 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 Examplesof Responsive Design
  • Smashing Magazinehttp://www.smashingmagazine.com People (mobile site) http://m.people.com United Pixelworkershttp://www.unitedpixelworkers.com/
  • World Wildlife Fund http://worldwildlife.org/ Stuff & Nonsensehttp://www.stuffandnonsense.co.uk/ Emeril’s Restaurantshttp://www.emerilsrestaurants.com/
  • Andersson-Wise Architects http://www.anderssonwise.com Federal Government: AIDS.gov http://aids.gov WordPress Theme: Twenty Twelvehttp://twentytwelvedemo.wordpress.com/
  • Two Approaches
  • 1. Start from scratch2. Make an existing design more responsive
  • download files for hands-on exercise here:clarissapeterson.com/files/dcww/open in your text editor: style.cssopen in your browser: demo.html
  • If you’re doing this at home, please note that eachsection of code is marked at the bottom of the slide withan example number that you can look for in yourstyle.css file.Example 1 in style.css like this
  • Older Browsers: Some of this won’t work in olderbrowsers, so you’ll need to do some extra stuff to make it work. (read the book....)
  • 1. A flexible, grid-based layout2. Flexible images and media3. 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 layout2. Flexible images and media3. 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:embedobjectvideo
  • 1. A flexible, grid-based layout2. Flexible images and media3. 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: portraitdevice-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 WidthMobile phones (portrait) 320pxMobile phones (landscape) 480px7” tablets (portrait) 600px10” tablets (portrait) 768px10” tablets (landscape), Monitors 1024pxWider monitors 1280px
  • But what happens whenthere 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 SiteNative Mobile App
  • Options: Ignore Mobile?Separate Mobile SiteNative Mobile App Responsive Design
  • Your boss saying you need a mobile app is not a goodreason to make a mobile app.
  • Mobile First
  • Start from the smallest screen,determine which parts of the designare truly necessary, and make those the basis of your design.
  • Mobile first = better userexperience 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.comquirktools.com/screenfly/
  • Use a Mobile Emulator such as:mobilephoneemulator.com
  • SmartphonesFeature Phones Tablets
  • Touch Interaction
  • Desktop BrowsersMobile Browsers
  • Device Lab DCdevicelabdc.com
  • Responsive Process
  • How to explain responsivedesign to (internal/external) clients
  • The design won’t look thesame on every browser/device
  • Static comps aren’t enough
  • Style Tiles
  • Style Tilesfonts, colors, interface elements
  • Style Tiles fonts, colors, interface elementscommunicate 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 thedesigners and the stakeholders
  • Style Tiles via Creative Commons http://styletil.es/
  • Photoshop is for photosInDesign is for design & typography
  • DesignDevelop
  • Design doesn’t endwhen 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
  • BooksEthan MarcotteResponsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/Luke WroblewskiMobile First (2011)http://www.abookapart.com/products/mobile-first
  • ArticlesResponsive 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-designDesign Process In The Responsive Age - Drew Clemens (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/Making of: People Magazines Responsive Mobile Website (July 2012)http://globalmoxie.com/blog/making-of-people-mobile.shtml3 Types of Solutions To Work With Responsive Images - Steven Bradley (July 2012)http://www.vanseodesign.com/web-design/responsive-images/
  • More ArticlesThe 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-themPresidential 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 MiscellaneousSomeone asked how I measure things on the screen:MeasureIt (Firefox add-on)https://addons.mozilla.org/en-US/firefox/addon/measureit/
  • Websites@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWDFuture Friendlymaking things that are future-friendlyhttp://futurefriend.ly/Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/
  • Other InformationDC Web WomenA 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 AwesomeBe a role model: why there should be more female speakers at tech conferences. Resources oncreating 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 Petersonclarissapeterson.comcp@clarissapeterson.com @clarissa