It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.
Charles Darwin

DER Trend 2013

Der Trend im Vergleich

Was ist Responsive Webdesign?

Eine neue Art des Internetnutzens vornehmlich über mobile Devices mit sehr kleinen Displays erfordert eine neue Art des Webdesigns. Mit dynamischem grafischem Aufbau von Webseiten, reagiert responsive Webdesign auf die verschiedenen Displaygrößen der mobilen Devices. Wesentliche Voraussetzung sind Media Queries, welche Art und Eigenschaften des betrachtenden Gerätes abfragen und somit die Webseite auf einem großen Display anders darstellen, als auf einem Tablet-Computer/Tablet-PC oder Smartphone. (t3n)

alistapart.com

But what’s next?
An iPad website? An N90 website?

www.colly.com

philiphousenyc.com

mashable.com

us.illyissimo.com

commerzfinanz.com

apple.com

HTML ist responsive. Von Natur aus.

Print-Design attacked the web!

Progressive enhancement and graceful degradation

One web

And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.
Tim Berners-Lee

Pro Responsive

Write once – run anywhere

Usability: Content und Navigation

Um allerdings wirklich alle Unterschiede berücksichtigen zu können, muss man wieder zum Ausgangspunkt zurück: zu zwei separaten Webdesigns.
Jakob Nielson

Ladezeit

Responsive Images

<picture>
    <source media="(min-width: 40em)"
            srcset="big.jpg 1x, big-hd.jpg 2x">
    <source srcset="small.jpg 1x, small-hd.jpg 2x">
    <img src="fallback.jpg" alt="">
</picture>

Responsive to change

Wie, Du kannst auch Responsive?

/* Smartphone im Portrait Mode */
@media (max-width: 767px) and (orientation:portrait) {
    header h1 {
        font-size: 24px;
    }
}

/* Smartphone und Retina Display */
@media only screen and (max-width: 767px)
    and (-webkit-min-device-pixel-ratio: 2) {
    section#adorsys {
        background-image: url(../images/adorsys_smartphone@2x.png);
    }
}

Der Entwicklungsaufwand

div.tarif input, button, select, textarea {
    border: 1px solid blue !important;
}

Fragen

Fallback

time.com

skinnyties.com