Mobile First Responsive Design

Jordi Tost ValBerlin, 29. August 2013

think moto Sommercamp am Wannsee

Was ist für euch Responsive Design?

1. Fluid Grids2. Flexible Media3. Media Queries

Die 3 Grundlagen:

Responsive Design ist viel mehr!

KONTEXT

Was können wir über das “Web des Users” sagen?

ALTER KONTEXT

NEUER KONTEXT

PERFORMANCE

der Benutzer erwarten, dass Mobile-Webseiten so schnell (oder schneller) wie Desktop-Webseiten laden

Wir haben nur

of responsive sites weigh the same in both their small screen view and large screen view

Mobile First is a philosophy that highlights the need to prioritize the mobile context when creating UX.

1. Allows websites to reach more people.

1. Allows websites to reach more people.

2. Forces designers to focus on core content and functionality (einfach bleiben!).

1. Allows websites to reach more people.

2. Forces designers to focus on core content and functionality (einfach bleiben!).

3. Lets designers innovate and take advantage of new technologies (geolocation, touch events, etc).

Wie machen wir ein Mobile-First-Responsive-Design?

1. Content First

- Content Strategy- Information Architecture

- Hierarchie / Prioritäten- 2-3 Ebenen

2. Mit Mobile anfangen

2. Mit Mobile anfangen

DER PROZESS

Der übliche Prozess

“It's impossible to predict all the

complications of a responsive

design up front. We need a more

fluid workflow!”

Andy Clarke (@Marlarkey)

Warum sollen wir überhaupt

unseren Prozess ändern?

- Bessere Leistung

- Bessere Webseiten gestalten

“RWD comes under criticism for notbeing commercially viable. It’s because it’s trying to be shoe-horned into an existing, fixed-canvas, inflexible process.”

Mark Boulton, on responsive worklflow

Der Responsive Prozess

VIELEN DANK!