responsive web design - breaking points
DESCRIPTION
Bob Hotard and Adam Thielman present information on Responsive Web Design at Firecat Studio's Firecat First Friday coworking and brownbag, after they were inspired at An Event Apart.TRANSCRIPT
Breakingoi t
Breakingoi t
Bob HotardSports – Music – Corporate Web Design@BobHWebDesign
Adam Thielman User Experience Strategist
@adamthielman
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
• 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?
Defining Responsive
VitaminT: http://www.vitamintalent.com/extra/infographics-viewer/web-standards.htm
Vitamin T Infographic: A brief history of Web standards
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin
ContentFirst
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
Jeffrey Zeldman: Content First!, AnEvenApart 2012-Austin
Jason Santa Maria: On Web Typography, AnEvenApart 2012-Austin
Kristina Halvorson: Brain Traffic, AnEvenApart 2012-Austin
MobileFirst
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
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Breakpoints
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
Luke Wroblewski: Mobile to the future, AnEvenApart 2012-Austin
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/
“Media Queries”
Techy Term of the Day
“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) { … }
“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
“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
“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
“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
“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
Usability Interface Engineering
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Jared Spool: The Curious Properties of Intuitive Web Pages, AnEvenApart 2012-Austin
Case Studies
Professional Coach
Life Coach
Case Studies
Professional Coach
Life Coach
Firecat Studios?
Greene & Associates
Soul Nourishing
Thank You