Responsive Web Design - WordCamp San Francisco
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design - WordCamp San Francisco

on

  • 12,627 views

Your site is about your content. With mobile devices, iPads, phones, gaming consols, etc: people can access your content many different ways and formats. How can we maintain some control over the ...

Your site is about your content. With mobile devices, iPads, phones, gaming consols, etc: people can access your content many different ways and formats. How can we maintain some control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform?

Enter Responsive Web Design. A term coined by Ethan Marcotte. Many experts aren’t leaning on one static design anymore, but on structured content that adapts to its given environment.
We are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods that you can implement to make your WordPress theme “Responsive”

Statistics

Views

Total Views
12,627
Views on SlideShare
9,336
Embed Views
3,291

Actions

Likes
37
Downloads
249
Comments
0

27 Embeds 3,291

http://sara-cannon.com 1542
http://www.ilovecolors.com.ar 486
http://www.expand2web.com 399
http://planetwordpress.planetozh.com 272
http://wpspeciali.st 234
http://maisonbisson.com 96
http://feeds.feedburner.com 83
http://experiment.street-square.com 72
http://lanyrd.com 36
http://www.basvanderlans.nl 17
http://www.ronalddijkstra.nl 14
http://ronalddijkstra.tumblr.com 11
http://twitter.com 6
http://localhost 4
http://www.linkedin.com 3
http://127.0.0.1:8795 2
http://a0.twimg.com 2
http://blog.fasoulas.com 2
http://www.zhuaxia.com 2
http://webcache.googleusercontent.com 1
http://planetewordpress.planetozh.com 1
https://twitter.com 1
http://feedproxy.google.com 1
http://posterous.com 1
http://www.onlydoo.com 1
http://us-w1.rockmelt.com 1
https://home.jolicloud.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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…
Post Comment
Edit your comment

Responsive Web Design - WordCamp San Francisco Responsive Web Design - WordCamp San Francisco Presentation Transcript

  • RESPONSIVE WEB DESIGNsara cannon / sara-cannon.com / follow @saracannon WORDCAMP SAN FRANCISCO 2011
  • ABOUT ME SARA CANNON Birmingham, AL @saracannon slideshare.net/saracannon sara-cannon.com make.wordpress.org/ui WORDCAMP SAN FRANCISCO
  • IN THE BEGINNING... WORDCAMP SAN FRANCISCO
  • OVER TIME... WORDCAMP SAN FRANCISCO
  • AWESOMER & AWESOMER... WORDCAMP SAN FRANCISCO
  • SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  • SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  • SO MANY DEVICES AHHHH! WORDCAMP SAN FRANCISCO
  • RESPONSIVE WEB DESIGNCONTENT. WORDCAMP SAN FRANCISCO
  • RESPONSIVE WEB DESIGN WHAT DO WE DO? WORDCAMP SAN FRANCISCO
  • BE RESPONSIVE! We can design for an optimal viewing“ experience, but embed standards-based technologies into our designs to make them not only more exible, but more adaptive to the media that renders them. - Ethan Marcotte alistapart.com/articles/responsive-web-design
  • RESPONSIVE WEB DESIGN come on. be a smart little website.
  • BE RESPONSIVE! Responsive Design is the“ most exciting design idea on the web since the separation of presentation and content. - Ian Stewart
  • BE RESPONSIVE!twentyelevendemo.wordpress.com
  • BE RESPONSIVE! Responsive Design has to do with“ being as canvas agnostic as possible, while offering a consistent and attractive experience on different devices and screen sizes. e web- canvas conforms the design, and, since the proportions and visual balances you set are only going to change, it makes sense to help them change with grace. - Matías Ventura
  • BE RESPONSIVE!twentyelevendemo.wordpress.com
  • BE RESPONSIVE!hicksdesign.co.uk
  • BE RESPONSIVE! foodsense.is
  • BE RESPONSIVE!morehazards.com
  • BE RESPONSIVE! HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images 2. media queries 3. lots of nagling and crying 4. ??????? 5. pro t WORDCAMP SAN FRANCISCO
  • ADAPTIVE GRID SYSTEMS & IMAGES responsive (responsible?) design
  • CSS GRIDS | BE RESPONSIVE!960.gs blueprintcss.org WORDCAMP SAN FRANCISCO
  • CSS GRIDS | BE RESPONSIVE!
  • CSS GRIDS | BE RESPONSIVE!
  • CSS GRIDS | BE RESPONSIVE! exible gridsalistapart.com/articles/ uidgrids WORDCAMP SAN FRANCISCO
  • CSS GRIDS | BE RESPONSIVE! cssgrid.net
  • CSS GRIDS | BE RESPONSIVE!
  • CSS GRIDS | BE RESPONSIVE! lessframework.com
  • CSS GRIDS | BE RESPONSIVE! % WORDCAMP SAN FRANCISCO
  • CSS GRIDS | BE RESPONSIVE!target ÷ context = result 940 100% 720 220 76.5957447% 23.40425535%
  • CSS GRIDS | BE RESPONSIVE! responsivetwentyten.com
  • CSS GRIDS | BE RESPONSIVE!
  • BE RESPONSIVE!twentyelevendemo.wordpress.com
  • BE RESPONSIVE!exible images WORDCAMP SAN FRANCISCO
  • BE RESPONSIVE! e toughest challenge in“ implementing the responsive bits was uid media. A lot of trial and error went into nding the right CSS solution, but whats cool is weve been able to apply it to many more themes that we maintain on wordpress.com. - Lance Willett
  • BE RESPONSIVE! WORDCAMP SAN FRANCISCO
  • BE RESPONSIVE! exible medianetmagazine.com/tutorials/create- uid-width-videos by Chris Coyier WORDCAMP SAN FRANCISCO
  • THEMING AND MOBILE WORDCAMP SAN FRANCISCO
  • BE RESPONSIVE! HOW DO WE BECOME RESPONSIVE?1. adaptive grid systems & images 2. media queries 3. lots of nagling and crying 4. ??????? 5. pro t WORDCAMP SAN FRANCISCO
  • MEDIA QUERIES whoa, this is css?
  • MEDIA QUERIESIT’S KIND OF LIKE CONDITIONAL COMMENTS... ...BUT WITHIN CSS! WORDCAMP SAN FRANCISCO
  • MEDIA QUERIES @MEDIA WORDCAMP SAN FRANCISCO
  • MEDIA QUERIES
  • MEDIA QUERIES CSS3-MEDIAQUERIES.JScode.google.com/p/css3-mediaqueries-jscss3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ andSafari 2 transparently parse, test and apply CSS3 Media Queries WORDCAMP SAN FRANCISCO
  • MEDIA QUERIESRESOURCES ON MEDIA QUERIESw3.org/TR/css3-mediaqueriessmashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-websitecss-tricks.com/css-media-queries WORDCAMP SAN FRANCISCO
  • BE RESPONSIVE! RESPONSIVE WEB DESIGNmust see articles/resources WORDCAMP SAN FRANCISCO
  • BE RESPONSIVE!books.alistapart.com/products/responsive-web-design
  • BE RESPONSIVE!alistapart.com/articles/responsive-web-design
  • BE RESPONSIVE!alistapart.com/articles/ uidgrids
  • BE RESPONSIVE!smashingmagazine.com/2011/01/12/guidelines-for- responsive-web-design
  • BE RESPONSIVE!unstoppablerobotninja.com/entry/ uid-images/
  • BE RESPONSIVE!smashingmagazine.com/2011/07/22/responsive-web- design-techniques-tools-and-design-strategies
  • BE RESPONSIVE! mediaqueri.es
  • BE RESPONSIVE!BUT I WANT TO BE RESPONSIVE right now!!! WORDCAMP SAN FRANCISCO
  • RESPONSIVE WORDPRESS THEMES I CAN HAS RESPONSIVE SITE NOW?!!
  • RESPONSIVE WORDPRESS THEMEStwentyelevendemo.wordpress.com
  • RESPONSIVE WORDPRESS THEMES chateaudemo.wordpress.com
  • RESPONSIVE WORDPRESS THEMES quintusdemo.wordpress.com
  • RESPONSIVE WORDPRESS THEMES reactdemo.wordpress.com
  • RESPONSIVE WORDPRESS THEMES basicmathsdemo.wordpress.com
  • RESPONSIVE WORDPRESS THEMES shelfdemo.wordpress.com
  • TYPOGRAPHY ON THE WEBCheck All Browsers Always. WORDCAMP SAN FRANCISCO
  • Check Your Devices
  • THEMING AND MOBILECONTENT. WORDCAMP SAN FRANCISCO
  • RESPONSIVE WEB DESIGN ank You! slideshare.net/saracannonsara cannon / sara-cannon.com / @saracannon