Responsive Web Design

50 %
50 %
Information about Responsive Web Design

Published on October 14, 2013

Author: thinkmoto



Responsive Web Design ist mehr als nur der Einsatz flexibler Raster und Break Points. Wir zeigen die Elemente von Responsive Web Design und erklären den Unterschied zum Adaptive Design. Wir zeigen den Responsive Design Prozess, der sich vom klassischen Designprozesses zum Beispiel durch "mobile first" und den iterativen und agilen Ablauf.

Mobile First Responsive Design think moto Sommercamp am Wannsee Jordi Tost Val Berlin, 29. August 2013

Was ist für euch Responsive Design?

Die 3 Grundlagen: 1. Fluid Grids 2. Flexible Media 3. Media Queries

Responsive Design ist viel mehr!

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




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 ü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 not being 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


Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014


Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Responsive Webdesign – Wikipedia

Der Begriff „Responsive Webdesign“ wurde erstmals von Ethan Marcotte im Mai 2010 in einem Artikel für das Magazin A List Apart verwendet, wobei er ...
Read more

Responsive web design - Wikipedia, the free encyclopedia

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading ...
Read more

A Book Apart, Responsive Web Design

foreword by Jeremy Keith | Since its groundbreaking release in 2011, Responsive Web Design remains a fundamental resource for anyone working on the web.
Read more

HTML Responsive Web Design - W3Schools

What is Responsive Web Design? Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is ...
Read more

HTML5 - Responsive Web Design -

It all started with Responsive Web Design, an article by Ethan Marcotte on A List Apart. Essentially, the article proposed addressing the ever-changing ...
Read more

Responsive Web Design: 50 Examples and Best Practices ...

Beautiful example of websites that use responsive web design. It's different version than traditional web designing, and developers must know. Being fully ...
Read more

Responsive Webdesign mit HTML5 und CSS3 - Grundlagen -

Responsive Webdesign wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen. Responsive Webdesign ...
Read more

Responsive Design – Wikipedia

Dieser Artikel beschreibt spezielle Techniken bei der Erhebung von Stichproben. Responsive Webdesign wird ebenfalls als Responsive Design bezeichnet.
Read more

Responsive Webdesign – News, Tipps und Infos auf

Eine neue Art des Internetnutzens vornehmlich über mobile Devices mit sehr kleinen Displays erfordert eine neue Art des Webdesigns. Mi…
Read more

Responsive Web Design · An A List Apart Article

Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte ...
Read more