Desktops, Tablets, and Mobiles Oh My!: Adaptive and Responsive Web Design

1,546 views

Published on

It’s hard to go anywhere on the web without someone mentioning “Responsive Design”. It is a hot topic that is repeatedly showing up in twitter streams and Wed Design articles. With various devices that we can now uses to access the web, Mobile phones; tablets; desktops; and even TVs, it is easy to see why this topic is big as it is. Each of these devices all having their own screen sizes and resolutions and way of interacting from mouse and keypad, to touch base input, and remotes it becomes hard to cater to each.

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,546
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Desktops, Tablets, and Mobiles Oh My!: Adaptive and Responsive Web Design

  1. 1. Desktops, Tablets, and Mobiles Oh My!: Adaptive and Responsive Web Design Christopher Cochran WebDevStudios @tweetsfromchrisSunday, November 6, 11
  2. 2. What is Responsive Design? iPad 8:35 PMSunday, November 6, 11
  3. 3. Touch Keyboard Mind RemoteSunday, November 6, 11
  4. 4. The Web Is Not A Fixed MediumSunday, November 6, 11
  5. 5. Flexible Foundation Fluid Grid Media Queries Adaptive Images Adaptive MediaSunday, November 6, 11
  6. 6. Progressive Enhancement Mobile 1st Accessible Lean, Clean, Lightweight Graceful Degradation Feature Full FallbacksSunday, November 6, 11
  7. 7. (Sorry) MATH ems target / context = result 28px / 16px = 1.75em Percentages section / site = result 100(645px / 960px) = 67.1875Sunday, November 6, 11
  8. 8. 960px HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% (645px) 1.635% (300px) (15px)Sunday, November 6, 11
  9. 9. Less Framework http://lessframework.com/ 320 and UP http://stuffandnonsense.co.uk/projects/320andup/Sunday, November 6, 11
  10. 10. Media Queries <link rel="stylesheet" media="only screen and (min-width: 480px) and (max-width: 767px)" href="example.css" /> @media only screen and (min-width: 480px) and (max-width: 767px) { • @media rule body { width: 436px; } } • @import rule @import url("example.css") only screen and (min-width: 480px) and (max-width: 767px); Great tool for “the other browsers”: https://github.com/scottjehl/RespondSunday, November 6, 11
  11. 11. Adaptive Media & Images http://adaptive-images.com/ http://jquerymobile.com/Sunday, November 6, 11
  12. 12. Simon Collision http://colly.com/ iPad 8:35 PMSunday, November 6, 11
  13. 13. The Boston Globe http://www.bostonglobe.com/ iPad 8:35 PMSunday, November 6, 11
  14. 14. Resources & Other Great Reads Tools http://lessframework.com/ http://stuffandnonsense.co.uk/projects/320andup/ http://mattkersley.com/responsive/ http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ http://adaptive-images.com/ http://jquerymobile.com/ Good Reads http://www.readwriteweb.com/mobile/2011/09/how-the-boston-globe-pulled-of.php http://unstoppablerobotninja.com/ (Father of Responsive Design) http://www.alistapart.com/articles/responsive-web-design/ http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/ Insperation http://mediaqueri.es/Sunday, November 6, 11

×