• Save
Responsive Design - WordUp Edinburgh 2011
Upcoming SlideShare
Loading in...5
×
 

Responsive Design - WordUp Edinburgh 2011

on

  • 1,365 views

A video recording of this presentation is now available on YouTube:

A video recording of this presentation is now available on YouTube:

http://www.youtube.com/watch?v=pe0BEhngbb4

Statistics

Views

Total Views
1,365
Views on SlideShare
1,291
Embed Views
74

Actions

Likes
1
Downloads
0
Comments
0

2 Embeds 74

http://wordup.wpscotland.org 73
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • Context & examples\nHow to be responsive\nWordPress\n
  • Why responsive?\n
  • \n
  • \n
  • WP-Touch and OnSwipe\nNot always appropriate, e.g. restaurant vs cinema\n\nHow to make sites responsive?\n
  • CSS2 media support\n
  • Media queries are well-supported\n
  • Older desktop and mobile browsers may not support well - your defaults should be sensible\nTEST ON DEVICES\nrespond.js for IE\nCSS is not alchemy - JavaScript is.\n\n
  • Floats are great but can be confusing\n
  • iPhone introduced- default 978px\nContent zooming\n
  • Include a variety of things to help you:\n– grid systems\n- preset content sizes\n- helper scripts like Modernizr and respond.js for compatibility\n
  • \n
  • Missing ubiquitous jQuery content slider\nHow should this look on mobile?\nWhat should be dynamically loaded?\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • Navigation may need to be moved or change format. Is it finger-friendly? 18mm / 44px\nNot just images - any content that typically has fixed width\nPlugins and widgets may make assumptions - check carefully!\n\n
  • \n

Responsive Design - WordUp Edinburgh 2011 Responsive Design - WordUp Edinburgh 2011 Presentation Transcript

  • Responsive Design Ian Mackay / @maniacyak WordUp Edinburgh 2011
  • Responsive or Adaptive?Fills viewport Fixed width + marginFluid content Defined blockspercent & em pixelsLess predictable More predictableMore compatible Less compatible
  • Examples
  • context( not screen size )
  • @media all {http://www.flickr.com/photos/chrismrichards/1566459108/
  • The Secret Sauce@media only screen and (min-width: 479px) and (device-orientation: landscape) { /* your CSS here */}
  • Mobile First & ProgressiveEnhancement
  • #leaf { float: left; }http://www.flickr.com/photos/45325473@N04/5457714789/
  • <meta name="viewport" - width="device-width" /> http://www.flickr.com/photos/oldpatterns/5939149758/
  • CSS Frameworks
  • What aboutWordpress?
  • HeaderLogo Navigation Wid–Image get Content Sidebar Wid– getWidget Footer Widget
  • Navigation
  • Navigation Images
  • Navigation Imagesimg { max-width: 100%; }
  • Navigation Imagesimg { max-width: 100%; }Plugins & Widgets
  • Further ReadingEthan Marcotte’s original article and subsequent book: www.alistapart.com/articles/responsive-web-design/ www.bookapart.com/products/responsive-web-design/Mobile First by Luke Wroblewski: www.lukew.com/ff/entry.asp?933An excellent responsive design case study by Yiibu: www.slideshare.net/yiibu/pragmatic-responsive-designPeter-Paul Koch’s extensive articles on mobile browsers: www.quirksmode.org/mobile/A showcase of sites using responsive design: mediaqueri.es