{"id":3715,"date":"2016-07-05T14:02:22","date_gmt":"2016-07-05T12:02:22","guid":{"rendered":"https:\/\/wolkenhart.com\/webdesignblog\/?p=3715"},"modified":"2016-07-05T14:08:44","modified_gmt":"2016-07-05T12:08:44","slug":"responsive-design-woche","status":"publish","type":"post","link":"https:\/\/wolkenhart.com\/webdesignblog\/responsive-design-woche","title":{"rendered":"Responsive Design Woche"},"content":{"rendered":"

Jetzt muss ich mit einem Lachen anfangen \ud83d\ude42 . Als ich 2013 mit dem Bloggen anfing hatte ich mehr Zeit und keine Freunde \ud83d\ude42 Also was macht ein guter Nerd? Er schreibt \u00fcber das was er am liebsten macht. Bei mir war es Webdesign und so ein Zeug. Schon nach kurzer Zeit habe ich t\u00e4glich geschrieben und gepostet und war gl\u00fccklich in meiner Welt. Meine Webdesign Agentur<\/a> entwickelte sich weiter, Projekte wurden immer mehr und ich entdeckte tats\u00e4chlich das es auch drau\u00dfen, in der komischen Welt, verschiedenes gibt was auch Spa\u00df macht. Nichtsdestotrotz wollte ich im November 2013 eine Responsive Design Woche machen und hatte Artikel geschrieben die ich nie ver\u00f6ffentlicht habe. Jetzt bin ich \u00fcber diese gestolpert und dachte mir warum nicht nachholen? Lustig und spannend ist es allemal sich diese anzusehen und mit den Erkenntnissen von heute zu vergleichen und habe diese in einem Artikel zusammengefasst. Viel Spa\u00df dabei.<\/p>\n

\"Responsive<\/p>\n

Informationen und Tricks rund um das Thema Responsive Design<\/h2>\n

Der Editor in Chief und Co-Founder des Smashing Magazines, Vitaly Friedemann, hat auf der Plattform SlideShare eine Pr\u00e4sentation rund ums Thema Responsive Design eingestellt. Dabei geht es haupts\u00e4chlich um die Herausforderungen, welche von Responsive Design an die Web-Designer gestellt wird.<\/p>\n

Vitaly Friedmann ist der Meinung, dass Web-Designer dringend neue Gedankeng\u00e4nge etablieren sollten, um ihre gestalteten Prozesse an die Programmierung anzupassen. Hauptbestandteil ist dabei die Weiterentwicklung der eigenen F\u00e4higkeiten. Ein Beispiel daf\u00fcr ist der Begriff Content Choreographie, dieser wurde vom Web-Designer Jordan Moore etabliert und beinhaltet die M\u00f6glichkeit via Media Queries , Contant proportional zu der vorhandenen Bildschirmgr\u00f6\u00dfe auszurichten.<\/p>\n

Auch Trent Walton hat im Jahre 2012 die gleichen Erfahrungen gemacht und schrieb auf seiner Website: „The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past“<\/a><\/p>\n

Wer heutzutage im Bereich des Webdesigns seine Positionierung von Boxen flexibel gestalten m\u00f6chte, nutzt dazu oft Flexbox. Ein Vorteil daran ist vor allem, dass die Box-Layout-Module von Google Chrome und FF unterst\u00fctzt wird.<\/p>\n

Jedoch stellen die zum Teil sehr hohen Display-Aufl\u00f6sungen die Designer vor Problemen, sodass diese immer noch in unterschiedlichen Aufl\u00f6sungen zu sehen sind.
\nZusammenfassend kann man durchaus sagen, dass sich JavaScript, CSS3 sowie die HTML5 zuk\u00fcnftig mehr anstrengen m\u00fcssen, um nicht Opfer der Weiterentwicklung zu werden.<\/p>\n

Habt ihr noch Fragen oder Interesse an dem Thema, so findet sich auf dem Kanal von Vitaly Friedemann auf 170 Seiten<\/a> noch mehr interessantes zum Thema Responsive Design. Wir geben daf\u00fcr eine klare Leseempfehlung ab!<\/p>\n

Die Typografie im Bereich des Responsive Webdesign<\/h3>\n

L\u00f6sungen und Anwendungen der Schrift<\/strong><\/p>\n

Auch heutzutage ist der Hauptbestandteil aller Websites der Text. Doch mittlerweile werden diese Texte in der Schriftart der Wahl angezeigt, m\u00f6glich macht es die Verwendung von Webfonts.<\/p>\n

Allerdings bringt dies auch einige Nachteile mit sich, welche besonders mobile Endger\u00e4te betreffen. M\u00f6gliche L\u00f6sungen und Tipps f\u00fcr das Problem bei der Verwendung der Schriftarten im Bereich des Responsive Webdesign wurden auf der MobileTech Conference 2013 von Sven Wolfermann erl\u00e4utert. Ebenfalls veranschaulicht er v\u00f6llig neue M\u00f6glichkeiten in CSS3.<\/p>\n

Sven Wolfermann selbst lebt in Berlin und arbeitet als freier Webentwickler, dessen Schwerpunkt bei der Fronted-Entwidcklung liegt. 2005 gr\u00fcndete er seine eigene Firma, welche den Namen maddesigns tr\u00e4gt. Des Weiteren ist Sven Wolfermann seit dem Jahre 2009 anerkannter TYPO3-Integrator und besch\u00e4ftigt sich genauestens mit dem Bereichen Responsive Design sowie CSS3.<\/p>\n

Wer interessiert an Sven Wolfermans Arbeit ist, sollte sich einmal seine webinale hands-on anschauen. Und vom zweiten bis zum dritten Dezember geht es in diesen hand-ons um die Bereiche Code und Design bzw. Visuals. Im bekannten Rilano Hotel in M\u00fcnchen haben alle Teilnehmer die M\u00f6glichkeit, praxisorientiert zu lernen und sehen, wie man Aspekte wie: Typografie, Design, Konzeption und Kreativit\u00e4t mit bestens entwickeltem Code und handwerklichem Geschick vereint, um vollkommen neue Web-Projekte zu entwickeln.<\/p>\n

Sven Wolferman ist auf der webinale hands-on sogar gleich zwei Mal vertreten. Zum einen mit dem Inspirational Talk, welcher sich Responsive Enhancement nennt und in dem er erkl\u00e4rt, aus welchem Grund man die Prinzipien von Progressive Enhancement auch auf das Responsive Webdesign anwenden sollte. Denn warum nur f\u00fcr alle gleichen Devices den selben Quelltext laden? Das ist nicht l\u00e4nger notwendig. Man kann zwar immer noch die selben Informationen laden, dennoch muss die riesige Slideshow nicht mehr l\u00e4nger auf dem Featurephone laufen.<\/p>\n

In einem weiteren Workshop mit dem Titel „Den Responsive-Workflow leben<\/a>„, zeigt Sven Wolferman noch, dass der damals oft angewandte Workflow Befehl „Auftrag bekommen > Recherche > Design erstellen > Abnahme > Design umsetzen“ in der Form nicht weiter funktioniert. Nun m\u00fcssen alle Beteiligten eines Workshops im Responsive-Webdesign-Prozess von Anfang an eng zusammenarbeiten. Ebenso m\u00fcssen auch fr\u00fche und h\u00e4ufige Testphasen sowie Implementierungsstrategien gefunden werden. Wie genau dies funktioniert und wie man allgemein den gesamten Prozess angeht, zeigt Sven Wolferman in diesem Workshop.<\/p>\n

Bessere mobile Webseiten durch Googles 25 Regeln<\/h4>\n

Der Suchmaschinenkonzern Google hat eine Studie zum Thema \u201eMobiles Webdesign\u201c durchgef\u00fchrt. Herauskamen 119 Stunden an Feedback der User und daraus stellte das Unternehmen 25 Regeln zusammen.<\/p>\n

So sehen gute mobile Webseiten aus<\/strong><\/p>\n

Viele mobile Webseiten sind, obwohl angepasst an die kleinen Bildschirme der Smartphones, noch immer gr\u00f6\u00dftenteils unbrauchbar. Andere Webseiten bieten dagegen ihren Nutzern genau das, was sie gerade ben\u00f6tigen. Um endlich herausfinden zu k\u00f6nnen, was \u00fcber den Erfolg oder Misserfolg einer Webseite entscheidet, haben sich Forscher von AnswerLab und Google Testpersonen gesucht. Diese Personen wurden dazu beauftragt, 100 der beliebtesten mobilen Internetseiten zu benutzen. Die Testpersonen mussten auf den Seiten bestimmte Aufgabe erf\u00fcllen und gleichzeitig laut \u00fcber ihre Erfahrung bei der Nutzung sprechen. Danach wurden die Webseiten einzeln bewertet.<\/p>\n

Nachdem die Ergebnisse ausgewertet waren, konnten die Forscher von AnswerLab und Google 25 Regeln f\u00fcr gute mobile Webseiten ableiten. Viele der Regeln sind im Nachhinein wenig \u00fcberraschend. Doch man sollte jedem empfehlen, einen Blick auf Googles Whitepaper zu werfen. Du findest es am Ende dieses Artikels.<\/p>\n

Vorher kannst du dir noch die vier wichtigsten Feststellungen der Studie ansehen:<\/strong><\/p>\n

1.) Mobile Webseiten sollten \u00fcber eine gut sichtbare Such-Funktion verf\u00fcgen<\/strong><\/p>\n

Google hat in seiner Studie festgestellt, dass die Testpersonen sehr gut auf schnell sichtbare Suchmasken reagierten. Keiner m\u00f6chte erst umst\u00e4ndlich die ganze Internetseite absuchen, um die Angebote und Informationen zu finden, die er sucht. Daher sollte die Such-Funktion m\u00f6glichst weit oben platziert werden. Au\u00dferdem sollten die ersten Such-Ergebnisse direkt hilfreich sein, da die Nutzer weitere Ergebnisse kaum ansehen. Auch Filter helfen den Nutzern die Suchergebnisse schnell eingrenzen zu k\u00f6nnen.<\/p>\n

2.) Lange und umfangreiche Formulare sollten in kleine Brocken aufgeteilt werden<\/strong><\/p>\n

Laut der Studie wirken lange und umfangreiche Formulare eher einsch\u00fcchternd auf die Nutzer von Smartphones. Es ist daher sehr sinnvoll, l\u00e4ngere Formulare auf mehrere Webseiten aufzuteilen. Au\u00dferdem ist es f\u00fcr den Nutzer hilfreich, wenn die Eingabe der Daten direkt \u00fcberpr\u00fcft wird. Wenn der Nutzer das Formular erst mal abgeschickt hat und einige Schritte weiter feststellt, dass die Eingabe nicht funktioniert hat, wird er die Lust verlieren.<\/p>\n

3.) Nutzer sollten Webseite auch anonym besuchen k\u00f6nnen<\/strong><\/p>\n

Online-Shops sollten die Nutzer ihrer mobilen Internetseite nicht dazu zwingen, sich einzuloggen oder anzumelden. Die Anmeldung kann immer noch durchgef\u00fchrt werden, wenn sich der Nutzer zum Kauf entschieden hat. Bis dahin sollte die Seite auch ohne gr\u00f6\u00dfere Einschr\u00e4nkungen nutzbar sein.<\/p>\n

4.) Der Umstieg von Smartphone zum Rechner sollte vereinfacht werden<\/strong><\/p>\n

Laut Googles Studie, beginnen viele Nutzer ihre Recherche oder Eink\u00e4ufe auf dem Smartphone, beenden sie aber nicht selten auf dem Rechner zu Hause. W\u00e4hrend der Studie haben viele Testpersonen versucht, die URLs manuell zu kopieren. Doch auf Smartphones funktioniert das noch immer nur sehr unhandlich. Die Veranstalter der Studie empfehlen den Anbietern mobiler Internetseiten daher, einen Button auf ihrer Seite zu integrieren, mit dem sich die Nutzer zum Beispiel die URL eines Produktes selbst per E-Mail zuschicken k\u00f6nnen.<\/p>\n

Googles Whitepaper: Die 25 Regeln f\u00fcr bessere mobile Webseiten<\/a><\/p>\n

Responsive Design: Interviews<\/h5>\n

Responsive Design: Interview mit Dennis Wilson<\/strong><\/p>\n

Der Begriff Responsive Web Design ist zwar noch recht jung, doch die Bem\u00fchen und Techniken dahinter sind eigentlich fast schon so alt wie das Internet selbst. Die PHP-Magazin-Redakteurin Corinna Kern sprach mit Dennis Wilson dar\u00fcber, wo der Begriff Responsive Web Design herkommt, und wo die Reise hingehen wird.<\/p>\n\n

\n\t
\n\t\t
\n\t\t\t
<\/div>\n\t\t\t
<\/div>
<\/div>

Sie sehen gerade einen Platzhalterinhalt von YouTube<\/strong>. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfl\u00e4che unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.<\/p> Mehr Informationen<\/a> <\/div>

Inhalt entsperren<\/a> Erforderlichen Service akzeptieren und Inhalte entsperren<\/a> <\/div> <\/div> <\/div><\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n\t\n\t