Responsive Web Design - Breaking Points
-
Upload
susan-price -
Category
Documents
-
view
3.327 -
download
5
description
Transcript of Responsive Web Design - Breaking Points
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