Your SlideShare is downloading. ×
Desktops, Tablets, and Mobiles Oh My!: Adaptive and Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

1,262
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 …

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,262
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Desktops, Tablets, and Mobiles Oh My!: Adaptive and Responsive Web Design Christopher Cochran WebDevStudios @tweetsfromchrisSunday, November 6, 11
  • 2. What is Responsive Design? iPad 8:35 PMSunday, November 6, 11
  • 3. Touch Keyboard Mind RemoteSunday, November 6, 11
  • 4. The Web Is Not A Fixed MediumSunday, November 6, 11
  • 5. Flexible Foundation Fluid Grid Media Queries Adaptive Images Adaptive MediaSunday, November 6, 11
  • 6. Progressive Enhancement Mobile 1st Accessible Lean, Clean, Lightweight Graceful Degradation Feature Full FallbacksSunday, November 6, 11
  • 7. (Sorry) MATH ems target / context = result 28px / 16px = 1.75em Percentages section / site = result 100(645px / 960px) = 67.1875Sunday, November 6, 11
  • 8. 960px HEADER 100% CONTENT SIDEBAR 67.1875% 31.1875% (645px) 1.635% (300px) (15px)Sunday, November 6, 11
  • 9. Less Framework http://lessframework.com/ 320 and UP http://stuffandnonsense.co.uk/projects/320andup/Sunday, November 6, 11
  • 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. Adaptive Media & Images http://adaptive-images.com/ http://jquerymobile.com/Sunday, November 6, 11
  • 12. Simon Collision http://colly.com/ iPad 8:35 PMSunday, November 6, 11
  • 13. The Boston Globe http://www.bostonglobe.com/ iPad 8:35 PMSunday, November 6, 11
  • 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