SlideShare a Scribd company logo
1 of 75
Download to read offline
Proactive
Responsive
  Design
  Dallas Society of Visual Communications
       Wednesday — October 24, 2012



  http://flickr.com/photos/63631877@N00/3937964101
We work as designers/devs at




Nathan Smith              Mark Sims                  Mike Townson
Principal UI Architect       UI Developer              UX Designer




                         http://www.projekt202.com
Relax, don’t stress out
taking notes. You can
get the slides here…

http://j.mp/pro-rwd
Front-end development is like playing midfield. It’s the
“glue” that connects visual design with the server-side.
The term “Responsive Web Design”
was coined by Ethan Marcotte, in an
an article published by A List Apart.

Loosely defined, it means adapting
to various screen sizes, using a fluid
grid and @media queries in CSS.
Proactive Responsive Design
Ethan also wrote a book…




 http://www.abookapart.com/products/responsive-web-design
When should you use RWD™?


Responsive web design using @media queries (with one
codebase for all devices) typically works best for web
“sites” (not apps). Apps work best when tailored to one
particular interaction paradigm. For instance, mobile
Gmail is a different experience than on the desktop.


As a general rule of thumb, if your content can be read
via RSS (such as Google Reader) and still make sense, it
might be worth considering a responsive approach.
State of mobile in 2007 — The year the iPhone was introduced




                   http://flickr.com/photos/djwudi/382030798
The state of mobile in 2012 — Touch screens reign supreme
The one thing all these phones have
in common (besides Angry Birds) is
they all have decent web browsers.

          http://paulirish.com/2010/high-res-browser-icons
Each day, on planet Earth…



1,450,000
mobile devices activated


  317,124
  newborns begin life
       http://lukew.com/ff/entry.asp?1506
http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile
“Obama orders agencies to optimize Web content for mobile”




                 http://flickr.com/photos/whitehouse/7161178504
Essentially, “responsive” has
broken into the mainstream.
It ain’t just for designer blogs
anymore. Some pretty big
name sites are adapting…
Microsoft.com — Home page is responsive
Grammy.com — Most of the site is responsive
Time.com — Entire site is responsive
Disney.com — Entire site is responsive




There is one Flash ad, which disappears if the browser is at “mobile” width.

Note: Most mobile devices have little/no support for Flash, Silverlight, etc.
Disney.com — Menu adapts, based on screen size
Pepsi Innovation — Entire site is responsive




             http://innovation.capturaonline.com
Pepsi Innovation — Entire site is responsive




             http://innovation.capturaonline.com
Proactive Responsive Design
Like accessibility, RWD works best with advanced planning…




#FAIL
Proactive Responsive Design
// For good browsers...

@import base

@media (min-width:320px)
  @import 320-up

@media (min-width:480px)
  @import 480-up

@media (min-width:780px)
  @import 780-up

@media (min-width:960px)
  @import 960-up

@media (min-width:1100px)
  @import 1100-up
// For older IE...

@import   base
@import   320-up
@import   480-up
@import   780-up
@import   960-up



<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/css/style.css">
<!--<![endif]-->

<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->
CSS                    Sass                             Compass
      http://sonspring.com/journal/sass-for-designers
Neatly organized *.sass                                      CSS served to browser




 http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
http://compass-style.org
Compass makes vendor prefixes easy...
Compass brings sanity to gradients...
Handlebbbars
demo of Handlebars.js
and the Dribbble API



         http://host.sonspring.com/handlebbbars
Sweet, responsive Handlebbbars action




           http://host.sonspring.com/handlebbbars
@media (min-width: 880px) {
  /* line 198, ../sass/_site.sass */
  body {
    width: 880px;
    margin: 0 auto;
  }

    /* line 202, ../sass/_site.sass */
    #list li {
      float: left;
      width: 400px;
      height: 36em;
    }
}

@media (min-width: 1320px) {
  /* line 208, ../sass/_site.sass */
  body {
    width: 1320px;
  }
}
Proactive Responsive Design
@media queries
aren’t just for width.
Also works well for
“retina” detection…
Proactive Responsive Design
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (        min-device-pixel-ratio: 2) {

    span.location {
      background-image: url(location@2x.png);
      background-size: 16px 14px;
    }

    span.success {
      background-image: url(success@2x.png);
      background-size: 13px 14px;
    }

    a.delete {
      background: url(delete@2x.png) no-repeat 0 -100px;
    }

    .content a.fav-link {
      background-image: url(favorite@2x.png);
      background-size: 11px 13px;
    }
}
Proactive Responsive Design
The biggest problem facing
responsive design is <img>
and potential file size.

But, there’s a neat solution
for JPG images, at least…
Proactive Responsive Design
A non-exhaustive
list of potentially
helpful responsive
CSS frameworks…
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Elements that rely only on mousemove,
mouseover, mouseout or the CSS pseudo-
class :hover may not always behave as
expected on a touch-screen device such
as iPad or iPhone. — Apple Reference Library



     http://trentwalton.com/2010/07/05/non-hover
http://www.flickr.com/photos/sigalakos/4516917297/
Be concise, for people on-the-go (mobile)…




http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
Resist the temptation of information overload…




http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
INNOVATION PORTAL
     Extended Designs
Proactive Responsive Design
SIDE BY SIDE
The differences of Mobile vs. Desktop
HOME
HOME
MOBILE DESIGN
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
DESKTOP DESIGN
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
Proactive Responsive Design
DEMO TIME! :)
Also, don’t forget you can
download the slides here…

   http://j.mp/pro-rwd

More Related Content

Viewers also liked

95 Theses - The Cluetrain Manifesto
95 Theses - The Cluetrain Manifesto95 Theses - The Cluetrain Manifesto
95 Theses - The Cluetrain ManifestoJennifer Angiwot
 
Basics of GnuPG (gpg) command in linux
Basics of GnuPG (gpg) command in linuxBasics of GnuPG (gpg) command in linux
Basics of GnuPG (gpg) command in linuxSanjeev Kumar Jaiswal
 
Coinlove helping children sweeden
Coinlove helping children sweedenCoinlove helping children sweeden
Coinlove helping children sweedenmariogomezprieto
 
Error Reports
Error ReportsError Reports
Error Reportsaurora444
 
VietRees_Newsletter_35_Week2_Month06_Year08
VietRees_Newsletter_35_Week2_Month06_Year08VietRees_Newsletter_35_Week2_Month06_Year08
VietRees_Newsletter_35_Week2_Month06_Year08internationalvr
 
Virunga Mountain Gorillas
Virunga Mountain GorillasVirunga Mountain Gorillas
Virunga Mountain GorillasLiz Weaver
 
Summary of Digital Archive Package Tools Research and Development Project
Summary of Digital Archive Package Tools Research and Development ProjectSummary of Digital Archive Package Tools Research and Development Project
Summary of Digital Archive Package Tools Research and Development ProjectRachabodin Suwannakanthi
 
eCMO Conference 2013 - E-Commerce with the Integration of Social Media
eCMO Conference 2013 - E-Commerce with the Integration of Social MediaeCMO Conference 2013 - E-Commerce with the Integration of Social Media
eCMO Conference 2013 - E-Commerce with the Integration of Social MediaHKAIM
 
Your First Home By The Book Seminar Us Jim Gatos
Your First Home By The Book Seminar Us Jim GatosYour First Home By The Book Seminar Us Jim Gatos
Your First Home By The Book Seminar Us Jim GatosJim Gatos
 
3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...
3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...
3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...Rachabodin Suwannakanthi
 
Marifet İltifata Tabidir
Marifet İltifata TabidirMarifet İltifata Tabidir
Marifet İltifata Tabidirilker KALDI
 
United Nations Tom Nies Keynote
United Nations Tom Nies KeynoteUnited Nations Tom Nies Keynote
United Nations Tom Nies KeynoteDale Wolf
 

Viewers also liked (20)

R&D in Technology for Botanical Garden
R&D in Technology for Botanical GardenR&D in Technology for Botanical Garden
R&D in Technology for Botanical Garden
 
Forcesfor good
Forcesfor goodForcesfor good
Forcesfor good
 
95 Theses - The Cluetrain Manifesto
95 Theses - The Cluetrain Manifesto95 Theses - The Cluetrain Manifesto
95 Theses - The Cluetrain Manifesto
 
Proyectosolidario.pptx
Proyectosolidario.pptxProyectosolidario.pptx
Proyectosolidario.pptx
 
Basics of GnuPG (gpg) command in linux
Basics of GnuPG (gpg) command in linuxBasics of GnuPG (gpg) command in linux
Basics of GnuPG (gpg) command in linux
 
Coinlove helping children sweeden
Coinlove helping children sweedenCoinlove helping children sweeden
Coinlove helping children sweeden
 
RubyCocoa
RubyCocoaRubyCocoa
RubyCocoa
 
Error Reports
Error ReportsError Reports
Error Reports
 
Final Project
Final ProjectFinal Project
Final Project
 
Rdmap Security
Rdmap  SecurityRdmap  Security
Rdmap Security
 
VietRees_Newsletter_35_Week2_Month06_Year08
VietRees_Newsletter_35_Week2_Month06_Year08VietRees_Newsletter_35_Week2_Month06_Year08
VietRees_Newsletter_35_Week2_Month06_Year08
 
Virunga Mountain Gorillas
Virunga Mountain GorillasVirunga Mountain Gorillas
Virunga Mountain Gorillas
 
Summary of Digital Archive Package Tools Research and Development Project
Summary of Digital Archive Package Tools Research and Development ProjectSummary of Digital Archive Package Tools Research and Development Project
Summary of Digital Archive Package Tools Research and Development Project
 
eCMO Conference 2013 - E-Commerce with the Integration of Social Media
eCMO Conference 2013 - E-Commerce with the Integration of Social MediaeCMO Conference 2013 - E-Commerce with the Integration of Social Media
eCMO Conference 2013 - E-Commerce with the Integration of Social Media
 
Your First Home By The Book Seminar Us Jim Gatos
Your First Home By The Book Seminar Us Jim GatosYour First Home By The Book Seminar Us Jim Gatos
Your First Home By The Book Seminar Us Jim Gatos
 
3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...
3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...
3D Objects in Wat Makutkasattriyaram's e-Museum: Progress, Experiences, and A...
 
Marifet İltifata Tabidir
Marifet İltifata TabidirMarifet İltifata Tabidir
Marifet İltifata Tabidir
 
United Nations Tom Nies Keynote
United Nations Tom Nies KeynoteUnited Nations Tom Nies Keynote
United Nations Tom Nies Keynote
 
Quantum Teleportation
Quantum TeleportationQuantum Teleportation
Quantum Teleportation
 
Beekman5 std ppt_13
Beekman5 std ppt_13Beekman5 std ppt_13
Beekman5 std ppt_13
 

Similar to Proactive Responsive Design

Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Tom Hermans
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. ToolboxWojtek Zając
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Webmikeleeme
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
 
How i made the responsive mobile version of
How i made the responsive mobile version ofHow i made the responsive mobile version of
How i made the responsive mobile version ofSayed Ahmed
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignCantina
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displaysEli McMakin
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websitesFour Kitchens
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkJohn Strott
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinRazorfish
 
Responsive website design
Responsive website designResponsive website design
Responsive website designsvaithiyalingam
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Thomas Carney
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oiljameswillweb
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal AccessKate Walser
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the WebYiannis Konstantakopoulos
 
Stc 2015 preparing legacy projects for responsive design - design issues
Stc 2015   preparing legacy projects for responsive design - design issuesStc 2015   preparing legacy projects for responsive design - design issues
Stc 2015 preparing legacy projects for responsive design - design issuesNeil Perlin
 

Similar to Proactive Responsive Design (20)

Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
 
Responsive websites. Toolbox
Responsive websites. ToolboxResponsive websites. Toolbox
Responsive websites. Toolbox
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
How i made the responsive mobile version of
How i made the responsive mobile version ofHow i made the responsive mobile version of
How i made the responsive mobile version of
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Responsive design and retina displays
Responsive design and retina displaysResponsive design and retina displays
Responsive design and retina displays
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 
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 UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Stocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible frameworkStocktwits & Responsive Web Design, social network meets flexible framework
Stocktwits & Responsive Web Design, social network meets flexible framework
 
Developing for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic WelterlinDeveloping for Responsive Design - Frederic Welterlin
Developing for Responsive Design - Frederic Welterlin
 
Responsive website design
Responsive website designResponsive website design
Responsive website design
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
Responsive Web Design for Universal Access
Responsive Web Design for Universal AccessResponsive Web Design for Universal Access
Responsive Web Design for Universal Access
 
Responsive Web Design & the state of the Web
Responsive Web Design & the state of the WebResponsive Web Design & the state of the Web
Responsive Web Design & the state of the Web
 
Stc 2015 preparing legacy projects for responsive design - design issues
Stc 2015   preparing legacy projects for responsive design - design issuesStc 2015   preparing legacy projects for responsive design - design issues
Stc 2015 preparing legacy projects for responsive design - design issues
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 

Recently uploaded

second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
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...Peter139483
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 

Recently uploaded (20)

second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
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...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 

Proactive Responsive Design

  • 1. Proactive Responsive Design Dallas Society of Visual Communications Wednesday — October 24, 2012 http://flickr.com/photos/63631877@N00/3937964101
  • 2. We work as designers/devs at Nathan Smith Mark Sims Mike Townson Principal UI Architect UI Developer UX Designer http://www.projekt202.com
  • 3. Relax, don’t stress out taking notes. You can get the slides here… http://j.mp/pro-rwd
  • 4. Front-end development is like playing midfield. It’s the “glue” that connects visual design with the server-side.
  • 5. The term “Responsive Web Design” was coined by Ethan Marcotte, in an an article published by A List Apart. Loosely defined, it means adapting to various screen sizes, using a fluid grid and @media queries in CSS.
  • 7. Ethan also wrote a book… http://www.abookapart.com/products/responsive-web-design
  • 8. When should you use RWD™? Responsive web design using @media queries (with one codebase for all devices) typically works best for web “sites” (not apps). Apps work best when tailored to one particular interaction paradigm. For instance, mobile Gmail is a different experience than on the desktop. As a general rule of thumb, if your content can be read via RSS (such as Google Reader) and still make sense, it might be worth considering a responsive approach.
  • 9. State of mobile in 2007 — The year the iPhone was introduced http://flickr.com/photos/djwudi/382030798
  • 10. The state of mobile in 2012 — Touch screens reign supreme
  • 11. The one thing all these phones have in common (besides Angry Birds) is they all have decent web browsers. http://paulirish.com/2010/high-res-browser-icons
  • 12. Each day, on planet Earth… 1,450,000 mobile devices activated 317,124 newborns begin life http://lukew.com/ff/entry.asp?1506
  • 14. “Obama orders agencies to optimize Web content for mobile” http://flickr.com/photos/whitehouse/7161178504
  • 15. Essentially, “responsive” has broken into the mainstream. It ain’t just for designer blogs anymore. Some pretty big name sites are adapting…
  • 16. Microsoft.com — Home page is responsive
  • 17. Grammy.com — Most of the site is responsive
  • 18. Time.com — Entire site is responsive
  • 19. Disney.com — Entire site is responsive There is one Flash ad, which disappears if the browser is at “mobile” width. Note: Most mobile devices have little/no support for Flash, Silverlight, etc.
  • 20. Disney.com — Menu adapts, based on screen size
  • 21. Pepsi Innovation — Entire site is responsive http://innovation.capturaonline.com
  • 22. Pepsi Innovation — Entire site is responsive http://innovation.capturaonline.com
  • 24. Like accessibility, RWD works best with advanced planning… #FAIL
  • 26. // For good browsers... @import base @media (min-width:320px) @import 320-up @media (min-width:480px) @import 480-up @media (min-width:780px) @import 780-up @media (min-width:960px) @import 960-up @media (min-width:1100px) @import 1100-up
  • 27. // For older IE... @import base @import 320-up @import 480-up @import 780-up @import 960-up <!--[if (gt IE 8) | (IEMobile)]><!--> <link rel="stylesheet" href="/css/style.css"> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="/css/ie.css"> <![endif]-->
  • 28. CSS Sass Compass http://sonspring.com/journal/sass-for-designers
  • 29. Neatly organized *.sass CSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
  • 31. Compass makes vendor prefixes easy...
  • 32. Compass brings sanity to gradients...
  • 33. Handlebbbars demo of Handlebars.js and the Dribbble API http://host.sonspring.com/handlebbbars
  • 34. Sweet, responsive Handlebbbars action http://host.sonspring.com/handlebbbars
  • 35. @media (min-width: 880px) { /* line 198, ../sass/_site.sass */ body { width: 880px; margin: 0 auto; } /* line 202, ../sass/_site.sass */ #list li { float: left; width: 400px; height: 36em; } } @media (min-width: 1320px) { /* line 208, ../sass/_site.sass */ body { width: 1320px; } }
  • 37. @media queries aren’t just for width. Also works well for “retina” detection…
  • 39. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min-device-pixel-ratio: 2) { span.location { background-image: url(location@2x.png); background-size: 16px 14px; } span.success { background-image: url(success@2x.png); background-size: 13px 14px; } a.delete { background: url(delete@2x.png) no-repeat 0 -100px; } .content a.fav-link { background-image: url(favorite@2x.png); background-size: 11px 13px; } }
  • 41. The biggest problem facing responsive design is <img> and potential file size. But, there’s a neat solution for JPG images, at least…
  • 43. A non-exhaustive list of potentially helpful responsive CSS frameworks…
  • 48. Elements that rely only on mousemove, mouseover, mouseout or the CSS pseudo- class :hover may not always behave as expected on a touch-screen device such as iPad or iPhone. — Apple Reference Library http://trentwalton.com/2010/07/05/non-hover
  • 50. Be concise, for people on-the-go (mobile)… http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
  • 51. Resist the temptation of information overload… http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
  • 52. INNOVATION PORTAL Extended Designs
  • 54. SIDE BY SIDE The differences of Mobile vs. Desktop
  • 55. HOME
  • 56. HOME
  • 75. DEMO TIME! :) Also, don’t forget you can download the slides here… http://j.mp/pro-rwd