Download - 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

Ethan Marcotte: Responsive Sleeves, AnEvenApart 2012-Austin

ContentFirst

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.


Breakpoints

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/

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

http://www.alistapart.com/

“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

http://en.wikipedia.org/wiki/Fitts'_law

http://en.wikipedia.org/wiki/Fitts'_law

http://www.alistapart.com/d/responsive-web-design/ex/ex-article.html

Usability Interface Engineering

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