Responsive Web Design - Breaking Points
-
Upload
susan-price -
Category
Documents
-
view
3.327 -
download
5
description
Transcript of Responsive Web Design - Breaking Points
![Page 1: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/1.jpg)
Breakingoi t
![Page 2: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/2.jpg)
Breakingoi t
Bob HotardSports – Music – Corporate Web Design@BobHWebDesign
Adam Thielman User Experience Strategist
@adamthielman
![Page 3: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/3.jpg)
Responsive Web Design
• Introduction Bob and Adam
• Outline of Presentation
• What is Responsive Web Design
• Content Concepts that Stick
• Breakpoints
• Examples
• Rolling Up Our Responsive Sleeves just like Ethan
• Techy Term of the Day
• Usability
• Case Studies
![Page 4: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/4.jpg)
• Should I have an app for my business?
• Who does apps?
• Do I need to design just for an iPad?
• What about mobile devices?
• Android and iPhone?
• Windows phone?
• Blackberry?
![Page 5: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/5.jpg)
Defining Responsive
![Page 6: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/6.jpg)
VitaminT: http://www.vitamintalent.com/extra/infographics-viewer/web-standards.htm
Vitamin T Infographic: A brief history of Web standards
![Page 7: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/7.jpg)
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 8: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/8.jpg)
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 9: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/9.jpg)
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
![Page 10: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/10.jpg)
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
![Page 11: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/11.jpg)
ContentFirst
![Page 12: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/12.jpg)
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
![Page 13: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/13.jpg)
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
![Page 14: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/14.jpg)
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
![Page 15: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/15.jpg)
Jason Santa Maria: On Web Typography, AnEvenApart 2012-Austin
![Page 16: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/16.jpg)
Kristina Halvorson: Brain Traffic, AnEvenApart 2012-Austin
![Page 17: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/17.jpg)
MobileFirst
![Page 18: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/18.jpg)
PC installed base reached 100MM in 1993, cellphone / Internet users reached 1B in 2002 / 2005 respectively;25 Source: ITU, Mark Lipacis, Morgan Stanley Research.
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 19: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/20.jpg)
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 21: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/21.jpg)
Breakpoints
![Page 22: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/22.jpg)
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 23: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/23.jpg)
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 24: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/24.jpg)
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
![Page 25: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/25.jpg)
Real World Examples of Responsive Content
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://aarronwalter.com/speaker/realme/
http://www.lukew.com/ff/entry.asp?1585
http://bostonglobe.com/
![Page 26: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/26.jpg)
“Media Queries”
Techy Term of the Day
![Page 27: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/27.jpg)
“Media Queries”
/* MINOR ADJUSTMENTS FOR SMALLER SCREENS */@media screen and (min-width: 1024px)and (max-width: 1140px) { … }@media screen and (max-width: 1023px) { … }@media screen and (min-width: 768px)and (max-width: 1024px) { … }@media screen and (max-width: 767px) { … }
![Page 28: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/28.jpg)
“Media Queries”Search A List Apart (www.alistapart.com)for an article by Ethan Marcotte posted May 10, 2010!
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
![Page 29: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/29.jpg)
“Media Queries”
“A media query allows us to target
not only certain device classes, but
to actually inspect the physical
characteristics of the device
rendering our work.” -- Ethan Marcotte
![Page 30: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/30.jpg)
“Media Queries”
How to incorporate a query into a linked style sheet’s media attribute:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
The query contains two components:1. a media type (screen), and2. the actual query enclosed within parentheses, containing a
particular media feature (max-device-width) to inspect, followed by the target value (480px).
Nerd alert!!!
Ethan Marcotte: Responsive Web Design, May 25, 2010 A List Apart
![Page 31: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/31.jpg)
“Media Queries”
“In plain English, we’re asking the device if its horizontal
resolution (max-device-width) is equal to or less than
480px. If the test passes—in other words, if we’re
viewing our work on a small-screen device like the
iPhone—then the device will load shetland.css.
Otherwise, the link is ignored altogether.” -- Ethan
Marcotte
![Page 32: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/32.jpg)
“Media Queries”
“But a responsive design isn’t limited to layout changes. Media queries allow
us to practice some incredibly precise fine-tuning as our pages reshape
themselves: we can increase the target area on links for smaller screens,
better complying with Fitts’ Law on touch devices; selectively show or hide
elements that might enhance a page’s navigation; we can even practice
responsive typesetting to gradually alter the size and leading of our text,
optimizing the reading experience for the display providing it.”
-- Ethan Marcotte
![Page 33: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/33.jpg)
Usability Interface Engineering
![Page 34: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/34.jpg)
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
![Page 35: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/35.jpg)
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
![Page 36: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/36.jpg)
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
![Page 37: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/37.jpg)
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
![Page 38: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/38.jpg)
Case Studies
Professional Coach
Life Coach
![Page 39: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/39.jpg)
Case Studies
Professional Coach
Life Coach
Firecat Studios?
![Page 40: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/40.jpg)
Greene & Associates
![Page 41: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/41.jpg)
![Page 42: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/42.jpg)
![Page 43: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/44.jpg)
Soul Nourishing
![Page 45: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/45.jpg)
![Page 46: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/46.jpg)
![Page 47: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/47.jpg)
![Page 48: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/48.jpg)
![Page 49: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/49.jpg)
Thank You
![Page 50: Responsive Web Design - Breaking Points](https://reader036.fdocuments.in/reader036/viewer/2022062702/554baff6b4c905b8618b591d/html5/thumbnails/50.jpg)