Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2015-01-29T09:30:20Z t3n Redaktion http://t3n.de/tag/responsive-webdesign HTML5 Days 2015: Sechs Workshops von Responsive Webdesign bis asynchrones JavaScript [Sponsored Post] http://t3n.de/news/html5-days-2015-sechs-workshops-590325/ 2015-01-29T09:30:20Z
Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten …

Vom 4. bis 6. März 2015 präsentieren das Entwickler Magazin und die Entwickler Akademie die HTML5 Days in München. Das Trainingsevent bietet sechs Workshops mit fünf der bekanntesten deutschsprachigen HTML5-Experten. Im Interview erzählt Christian Wetz was für ihn die spannendsten Entwicklungen im Bereich HTML5 und JavaScript sind.Jens Grochtdreis, Peter Kröner, Thorsten Rinne, Sebastian Springer und Christian Wenz leiten die Workshops. Zusammen mit den parallel laufenden JavaScript Days und AngularJS Days können Teilnehmer aus insgesamt 24 Workshops auswählen.

Themen der HTML5 Days sind Responsive Webdesign, Modulare Webentwicklung mit SAAS, asynchrones JavaScript, Modernisierung von Legacy Applikationen auf HTML5 sowie Kommunikations-APIs von JavaScript und HTML5. Alle Infos finden Interessenten auf www.html5-days.de.

Christian Wenz auf den HTML5 Days 2105

wenz_christian_html5-days-2015-(2)Christian Wenz ist Berater, Trainer und Autor zu Webthemen. Er ist Autor und Koautor von über 100 Büchern (unter anderem "JavaScript: Das umfassende Handbuch"), in zehn Sprachen übersetzt, ASP.NET MVP und ASPInsiders-Mitglied sowie Inhaber verschiedener Microsoft-Zertifizierungen. Er unterstützt seit vielen Jahren Mittelständler und Groβkonzerne in den Bereichen Web-Performance, Web-Security und mobiles Web.

Thomas Wießeckel: Christian, die Kommunikation mit JavaScript war in der Vergangenheit arg eingeschränkt - seit HTML5 sich immer weiter verbreitet, gibt es jedoch Licht am Ende des Tunnels. Was hat sich in den letzten Jahren getan?

Christian Wenz: Eine ganze Menge. JavaScript wurde ja bekannterweise in sehr kurzer Zeit erstellt und so ist es verwunderlich, dass es überhaupt ein Sicherheitskonzept gibt. Für heutige Webanwendungen ist dieses Modell allerdings immer wieder ein Hindernis. Glücklicherweise gibt es alte und neue Workarounds. In Sachen Kommunikation gab es in JavaScript lange Zeit wenig – und das, was es gab, war kaum bekannt. Mit der Einführung von XMLHttpRequest hat sich hier etwas getan, in Verbindung mit den Sicherheitseinschränkungen konnte man viel machen, aber eben nicht alles. Neue Protokolle und Standards und auch performantere Kommunikationsmöglichkeiten sind Aspekte, die viele Web-Applikationen bereichern können. Darum geht es auch bei den HTML5 Days.

Thomas Wießeckel: Einige der von dir genannten Features sind nicht neu - und dennoch nicht sonderlich verbreitet. Woher kommt das deiner Meinung nach?

Wenz: Die am häufigsten eingesetzte Kommunikationstechnologie ist wohl XMLHttpRequest und die reicht in vielen Fällen auch aus. Außerdem gibt es immer mehr Frameworks, die selber zwischen Client und Server die beste Kommunikationstechnologie aushandeln, so dass man nicht mehr notwendigerweise einen Einblick braucht, was im Hintergrund passiert. Das finde ich schade und auch bedenklich, erklärt aber auch, wieso einige der Lösungen einen geringeren Bekanntheitsgrad haben. Das will ich im Workshop auf den HTML5 Days ändern.

Thomas Wießeckel: Nun gibt es für viele Probleme entweder die "richtige" aber mächtige Lösung - und einige Workarounds, zum Beispiel die Nutzung von Local Storage als Kommunikationsmöglichkeit über Tabs hinweg. Welche weiteren spannenden Beispiele kennst du noch?

Wenz: Die Messaging-API von JavaScript ist meiner Meinung nach eines der am meisten unterschätzten Features der Sprache – auch wenn die Schnittstelle selber auch für Webworker Pate stand. Die Verwendung von Web-Storage ist auch ein gutes Mittel für Datenaustausch und -persistenz, weil Cookies für Single-Page-Applications meist nicht der optimale Weg sind.

Thomas Wießeckel: Wie schätzt du diesen Forscherdrang der Entwickler ein - ist das der Schub, den die Browserhersteller benötigen, um alle (offenen) Features endlich umzusetzen?

Wenz: Das ist ein typisches Henne-Ei-Problem. Unterstützt man offene Features zu einem frühen Zeitpunkt, mag das gut fürs Ego sein, aber schlecht für die Browserunterstützung der Anwendung. Andersherum haben Browserhersteller möglicherweise weniger Motivation, Features zu implementieren, die bei der Konkurrenz nur wenig Anwender finden. Ich denke dass heutzutage vieles Framework-getrieben ist – bei aktuellen Browsern wird auf die neuesten Features gesetzt, für ältere Systeme gibt es Polyfills. Das entbindet Entwickler nicht von der Pflicht, sich mit den dahinter liegenden Techniken zu beschäftigen, aber es verbreitert die Zielgruppe der Anwendung.

Thomas Wießeckel: Welches der bestehenden und vielleicht noch kommenden APIs findest du am spannendsten?

Wenz: Spannend finde ich WebRTC, aber bis das wirklich überall funktioniert, wird das noch ein wenig dauern. Ansonsten stelle ich bei Kunden immer wieder fest, dass ein Framework, das standardmäßig WebSockets verwendet und als Fallback-Lösung XMLHttpRequest implementiert, in vielen Anwendungsfällen der beste Ansatz ist.

Thomas Wießeckel: Auf den HTML5 Days hältst du einen Workshop zu den Kommunikations-APIs von JavaScript und HTML5. Was erwartet die Teilnehmer darin?

Wenz: Im Wesentlichen die Themen, die wir bei den vorherigen Fragen schon diskutiert hatten. Der Fokus liegt ein wenig stärker auf den „Unsung Heroes“. Beispielsweise geht es auch um WebSockets, aber nicht als Hauptthema. Dafür diskutieren wir verschiedene Ansätze, die Same-Origin-Policy der Browser zu umgehen, von alten Ansätzen wie JSONP bis hin zu neueren Standards wie CORS. Auch Exoten wie etwa Server-Sent-Events kommen vor, aber prinzipiell ist natürlich alles mit unzureichendem Browser-Support für die Praxis nur wenig relevant.

Erfahre mehr über die HTML5 Days 2015

]]>
t3n Redaktion
Umfangreiches Webdesign-Tool statt einfacher Baukasten: Mit rukzuk baust du Responsive-Websites ohne Coding [Sponsored Post] http://t3n.de/news/responsive-webdesign-rukzuk-582303/ 2014-12-04T09:30:25Z
Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie Webdesigner, Freelancer, Agenturen und Unternehmen. Durch ein eigenes CMS und eine große Bandbreite an …

Das Responsive-Webdesign-Tool rukzuk richtet sich gezielt an professionelle Anwender wie , Freelancer, Agenturen und Unternehmen. Durch ein eigenes und eine große Bandbreite an Features kann man mit rukzuk ganz und gar codeless auch professionelle Webseiten gestalten.

Während die meisten Homepage-Baukästen vor allem auf simple Bedienbarkeit und überschaubare Funktionen setzen – zum Beispiel für Blogger – braucht es im professionellen Bereich schon ein sehr viel umfangreicheres Repertoire an Möglichkeiten. Für diese Zwecke hat ein junges Entwickler-Team aus Konstanz ein Webdesign-Tool auf den Markt gebracht, das in Umfang, Funktionalität, Flexibilität, Individualität und Erweiterbarkeit genau für diesen Zweck konzipiert ist. Mit rukzuk lässt sich so auch eine aufwendige Unternehmensseite ohne Code-Kenntnisse gestalten, verwalten und publizieren.

responsive webdesign 1

Maßgeschneidert und individuell

Das Besondere an der neuen Lösung ist die Kombination aus innovativem Design-Editor und einem neu entwickelten CMS. Der Design-Editor ist dabei das Herzstück: Ähnlich zu Photoshop gibt es hier viele Werkzeuge und Einstellungsmöglichkeiten. Ist man mit der Bedienung von rukzuk vertraut, kann man Websites sehr schnell und ohne Programmierkenntnisse entwickeln. Websites werden visuell im Browser gestaltet, Schriftrendering, Abstände und Funktionen wie Slider oder Animationen können dabei direkt im Editor getestet werden.

Der klassische Transformationsschritt von einer PSD-Datei in HTML/CSS/JS entfällt ganz – das spart Zeit und Geld.

Visual Responsive-Webdesign

Mit rukzuk werden zudem „echte“ Responsive-Websites erstellt. Die Website wird nicht nur, wie bei vielen klassischen Homepage-Baukästen, automatisch in eine mobile Version übersetzt. Mittels definierbarer Breakpoints wird das Verhalten der Website für jede beliebige Auflösung individuell angepasst.

resposive webdesign 2

Mit sogenannten Modulen wird per Drag & Drop ein Layout angelegt, das die Grundlage für die Seiten einer Website bildet. Derzeit stehen über 50 Module und Styles zu Verfügung. Vom Grid, das meistens als Grundlage eines Layouts dient, bis hin zur dynamischen Navigation, Slider, Lightbox, iFrame, dynamische Listen, SVG-Grafiken und vielen weiteren. Jedes Modul kann wiederum mit Styles pixelgenau gestaltet werden, hier stehen zum Beispiel Rahmen, Schatten, Animationen, Hintergründe, Google Fonts zur Verfügung. Es gibt Module für jeden erdenklichen Designwunsch und es kommen stetig neue hinzu. Derzeit arbeitet das Team unter anderem an einem Shop-Modul und einem Parallax-Modul.

Auch selbst entwickelte Module und Styles lassen sich in rukzuk integrieren. Die API-Dokumentation und Beispielmodule hat das Team auf developers.rukzuk.com und GitHub veröffentlicht.

Integriertes Content Management & Webhosting

Neben dem Design-Editor ist das selbst entwickelte CMS ein Kernbestandteil des Tools. Hier geht es vor allem darum, Websites effizient zu entwickeln und zu verwalten und dem Kunden eine einfache Pflege der Seiteninhalte zu ermöglichen. Dafür können vom Designer Bearbeitungsrechte für jedes einzelne Element einer Seite vergeben werden.

Der Vorteil für den Kunden: der Webdesigner gestaltet mit Modulen und Styles individuelle „Page Blocks“, welche CMS-Bausteine darstellen, die der Kunde auf seinen Seiten einfügen und bearbeiten kann. So wird sichergestellt, dass die Inhaltsseiten immer gestaltungskonform bleiben.

resposive webdesign 3

Mit wenigen Klicks kann die Website auf den rukzuk-Servern kostenlos veröffentlicht werden. Wer möchte, kann seine komplette Website aber auch herunterladen oder per FTP/SFTP-Upload auf externen Servern hosten. Diesen Service findet man in der Form bei keinem anderen Anbieter. Auch die Verbindung zur eignen Domain ist kein Problem.

SaaS Lösung mit individuellen Paketen

Rukzuk ist eine SaaS Lösung und wird im Abo-Modell angeboten. Zur Auswahl stehen verschiedene Pakete, vom Einzelpaket bis zur Agenturlösung mit 50 und mehr Websites. Man kann rukzuk völlig kostenlos testen. Erst wenn man Websites veröffentlichen möchte, muss man sich für ein kostenpflichtiges Paket entscheiden.

Ab dem Freelancer-Paket ist auch ein Transfer der Website direkt zum Kunden und auf dessen Rechnung möglich.

Das Tool kann kostenlos ohne zeitliche Beschränkung getestet werden.

Jetzt kostenlos testen

]]>
t3n Redaktion
Die 10 beliebtesten Artikel der Woche: Visitenkarten-Vorlagen, PayPal deaktiviert SSL 3.0 und Basics des Responsive Webdesign http://t3n.de/news/10-beliebtesten-artikel-woche-54-580448/ 2014-11-22T09:00:19Z
In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

In unserem wöchentlichem Best-of der t3n-Artikel präsentieren wir euch einen bunten Mix aus häufig geklickten und nutzwertigen Beiträgen.

1. Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Unser Artikel: Die Basics des Responsive Webdesign in 9 schicken GIFs

2. 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

Visitenkarten haben auch und vielleicht gerade im Zeitalter der Sozialen Netzwerke noch ihren Platz. Ganz besonders, wenn es sich um solche Kunstwerke handelt, wie die PSD-Templates, die wir euch in diesem Artikel vorstellen.

Unser Artikel: 20 wunderschöne Visitenkarten-Vorlagen für Photoshop

3. Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

Nicht nur Google-Nutzer hinterlassen einige Daten im Netz – um die soll es hier aber gehen: Wir kuratieren sechs Links, die euren digitalen Fußabdruck aufzeigen.

Unser Artikel: Digitaler Fußabdruck: 6 Links, die zeigen wie Google dich sieht

4. Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

Mit einer Kladde, die aus analogen Papierskizzen digitale Vektorgrafiken macht, will der italienische Notizbuchanbieter Moleskine die Designer-Herzen höher schlagen lassen. Was sie kann, was sie kostet und ob's sie noch rechtzeitig vor Weihnachten gibt, erfahrt im Artikel.

Unser Artikel: Smarte Kladde für Designer: Moleskine macht aus Papierskizzen fertige Vektorgrafiken

5. PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

PayPal im Einsatz? Dann sind vielleicht Updates nötig, um den Dienst auch nach dem 3. Dezember anbieten zu können. Definitiv betroffen sind Oxid, xt:Commerce und Prestashop. Alle Information und die notwendigen Maßnahmen in der Übersicht.

Unser Artikel: PayPal deaktiviert SSL 3.0: Diese Shopsysteme müssen jetzt aktualisiert werden [Update]

6. Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

Die Macher von Startup Edition – einem wöchentlichen Newsletter mit hilfreichen Artikeln für Gründer – haben ein kostenloses E-Book veröffentlicht. Mit dem Buch wollen sie eine umfangreiche Wissenssammlung für die Startup-Szene abliefern.

Unser Artikel: Startup Edition: Gesammeltes Wissen von Gründern, Hackern und Designern in einem kostenlosen E-Book

7. Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

Trennung nach zehn Jahren: Anstatt die Partnerschaft mit dem Suchmaschinenriesen zu verlängern, schließt der Browser-Anbieter in den USA einen Fünf-Jahresvertrag mit Yahoo ab. In anderen Ländern bleibt Google noch erhalten.

Unser Artikel: Goodbye Google: Firefox integriert Yahoo als neue Standard-Suchmaschine

8. Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

Google zeigt ab sofort in den Suchergebnissen an, ob eine Website für mobile Nutzer optimiert ist. In Zukunft könnte die „Mobile Friendliness“ sogar zum Ranking-Faktor avancieren.

Unser Artikel: Google-Suche zeigt ab sofort an, ob eine Seite für Mobile optimiert ist

9. Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

Was kommt nach dem Smartphone? Diese Frage hat Nokia auf dem Slush-Festival in Helsinki beantwortet und das neueste Produkt des finnischen Konzerns präsentiert.

Unser Artikel: Comeback mit dem Nokia N1 – Highend-Tablet für 249 Dollar vorgestellt [#slush14]

10. Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

Seit Steve Jobs verstorben ist, fragen sich viele Menschen, wer aus dem großen Schatten des iBoss heraustritt und zur symbolischen Führungsfigur des Silicon Valleys wird. Unser US-Korrespondent Andreas Weck hat da einen klaren Favoriten: Elon Musk.

Unser Artikel: Silicon-Valley-Führungsfigur: Elon Musk ist der wahre Nachfolger von Steve Jobs

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Andreas Weck
Die Basics des Responsive Webdesign in 9 schicken GIFs http://t3n.de/news/basics-responsive-webdesign-9-578560/ 2014-11-15T07:50:06Z
Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Wir zeigen euch die wichtigsten Prinzipien des – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont.

Responsive Webdesign: Früher war alles leichter

Früher war alles einfacher: Webdesigner konnten sich an festen Größen und Standards orientieren und ihre Projekte entweder auf die Desktop-Ansicht oder das mobile Internet ausrichten. Diese Zeit ist vorbei – wer möchte, dass Nutzer egal an welchem Ort und egal, welches Endgerät sie nutzen, sorgenfrei die eigenen Inhalte konsumieren können, muss sich mit Responsive Webdesign auseinandersetzen. Und das ist manchmal gar nicht so einfach.

Sandijs Ruluks von Froont. (Bild: Twitter)
Sandijs Ruluks von Froont. (Bild: Twitter)

Sandijs Ruluks kennt das: Der Grafikdesigner aus Riga bezeichnet sich selbst als „Designer, der aus der Print-Welt in die Welt des Webs gekommen ist.“ Auch er hat sich die neuen Denk- und Gestaltungsmuster zunächst hart erarbeiten müssen. Zusammen mit Freunden hat er vor Kurzem Froont gegründet, eine Design-Plattform, auf der Webdesigner direkt im Browser arbeiten und mit anderen Designern kollaborieren können. Auf dem Froont-Blog findet sich auch das gemeinsam verfasste „Open Web Design Manifesto“.

Für alle, die ebenfalls manchmal Schwierigkeiten damit haben, das Responsive-Design-Konzept zu verstehen, hat Ruluks neun GIFs erstellt, die die wesentlichen Prinzipien einfach und schnell veranschaulichen. Freundlicherweise hat er sie uns zur Verfügung gestellt.

1. „Responsive Webdesign“ versus „Adaptive Webdesign“

Responsive und Adaptive Design sind ähnlich, aber eben doch nicht gleich. „Die beiden Ansätze ergänzen sich, daher gibt es hier kein ‚richtig oder falsch‘“, schreibt Ruluks. Die Unterschiede verdeutlicht das erste GIF:

 

responsive_webdesign_adaptive_webdesign

2. Der Flow

Je schmaler der Bildschirm des Endgerätes ist, auf dem der Content ausgespielt wird, desto mehr Elemente werden untereinander statt nebeneinander angeordnet. Alle späteren Inhalte rutschen entsprechend noch weiter nach unten. Das nennt man den Flow.

 

04_flow-vs-static-2

 

3. Relative Einheiten

Wenn die Größe des Bildschirms, auf der Inhalte angezeigt werden können, variiert, ist auch die Pixeldichte der angezeigten Fläche nicht mehr in Stein gemeißelt. Für Webdesigner macht es also Sinn, von festen Pixelvorgaben abzurücken und stattdessen relative Größeneinheiten zu definieren – wie etwa „50 Prozent des Screens“ oder „100 Prozent des Screens“. Diese passen sich dann an das jeweils genutzte Ausgabeformat an, wie das nächste GIF zeigt:

 

 

responsive_webdesign_prinzip_relative_einheiten

4. Breakpoints

Breakpoints definieren, an welchen Stellen das Layout einer Seite umbrechen darf. Auf diese Weise können Webdesigner sicherstellen, dass ein Umbruch im Design, etwa wenn sich die Seite verschmälert, nicht zu einem inhaltlichen Bruch führt. „Aber nutzt Breakpoints mit Umsicht“, warnt Ruluks, „wenn es schwierig ist zu verstehen, welche Inhaltselemente voneinander abhängen, können Breakpoints schnell für Chaos sorgen“.

 

03_with-breakpoints-vs-without-breakpoints-1

 

5. Maximal- und Mindestwerte

Dieses Prinzip verhindert, dass Inhalte auf dem Smartphone oder dem Tablet zu klein dargestellt werden – oder auf größeren Bildschirmen zu sehr in die Breite gehen. Einfach einen Pixelwert für die maximale Breite definieren und der Verzerrungs-Effekt bleibt aus.

 

07_max-width-vx-no-max-width-1

 

6. Verschachtelte Objekte

Hier werden mehrere inhaltliche Elemente innerhalb eines Containers gruppiert und können somit gemeinsam bewegt werden. Dies macht die Arbeit für Webdesigner oftmals einfacher, da sie nicht so viele Elemente einzeln bearbeiten müssen. Das folgende GIF veranschaulicht das Container-Prinzip:

 

05_nested-vs-not-nested-1

 

7. „Mobile First“ und „Desktop First“

Diese beiden Leitprinzipien des Responsive Webdesign geben an, welcher Startpunkt für das Design einer Webseite gesetzt wird: Beginne ich auf dem kleinen Screen und passe das Design für größere Auflösungen an – oder starte ich mit der Desktop-Version und arbeite mich zu den kleineren Smartphone-Größen vor? „Technisch gesehen gibt es keine großen Unterschiede. Leg los und schau, welcher Ansatz besser für dich funktioniert“, so Ruluks.

 

08_desktop-first-vs-mobile-first-3

8. Webfonts und Systemschriften

Die Wahl der eingebetteten Schriften kann einen Einfluss auf die Ladezeiten der Webseite haben. Während es Webfonts zwar in viel mehr Varianten gibt und sie eine Seite sehr schön individualisieren können, werden die in den Betriebssystemen der Nutzer vorinstallierten „System Fonts“, so Ruluks, „schnell wie der Blitz“ angezeigt – sofern die gewählte Systemschrift auch im Geräte-Setup des Nutzers angelegt ist.

 

06_system-fonts-vs-webfonts-1

 

9. Bitmaps und Vektoren

Wenn Logos und Grafiken eine kleine Dateigröße haben und dennoch gut skalieren sollen, ist es ratsam, auf Vektoren, zum Beispiel SVG-Dateien oder Icon Fonts, zurückzugreifen. Bilder im JPG-, PNG- oder GIF-Format müssen in der Regel optimiert werden und sind wesentlich größer. Doch können sie Details oder Effekte besser abbilden als Vektoren und nicht alle Browser unterstützen SVG-Formate. „Wählt also mit Bedacht“, so das Resümee von Sandijs Ruluks.

 

09_vectors-vs-images-1

Hier geht's zum Original-Beitrag „Nine Basic Principles of Responsive Webdesign“ von Sandijs Ruluk auf dem Froont-Blog. Hilfreich für euch ist vielleicht auch unsere Artikelreihe zum Einstieg in flexible Projekte mit Responsive Webdesign.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Lea Weitekamp
„Offline First“: Mein Highlight der beyond tellerrand http://t3n.de/news/offline-first-john-allsopp-576928/ 2014-11-06T13:19:53Z
John Allsopp, der „Großvater des Responsive Webdesign“, war eines der Highlights der „beyond tellerrand“ in Berlin. In seinem unterhaltsamen Vortrag erklärte er den Zuschauern, warum sie …

John Allsopp, der „Großvater des Responsive Webdesign“, war eines der Highlights der „beyond tellerrand“ in Berlin. In seinem unterhaltsamen Vortrag erklärte er den Zuschauern, warum sie sich mit dem Design-Prinzip „Offline First“ beschäftigen sollten, und welche Optionen es gibt.

„The Web's future is offline“

Wer heute Software konzipiert, muss sich darüber im Klaren sein, dass Nutzer nicht immer eine Stromversorgung haben – oder durchgehenden Internetempfang. Mit seinem Vortrag „The Web's future is offline“ auf der beyond-tellerrand-Konferenz hat John Allsopp, der „Großvater des Responsive Webdesign“, gezeigt, wie Entwickler diese Hürde umgehen und ihren Nutzern dennoch ein nahtloses Surf-Erlebnis bieten. Auf praktische Art und Weise erklärte er den Zuschauern die Idee des Offline-First-Prinzips sowie die Umsetzung mit HTML5 und JavaScript.

Wir leben in einer batteriebetriebenen Welt ohne ständige Internetverbindung, aber die Technologie und die darauf laufende Software sind Überbleibsel aus einer ständig vernetzten und stromversorgten Vergangenheit. Die Geräte von Nutzern werden nicht durchgehend mit Strom oder Internet versorgt. Das heißt, die Daten müssen zwischengespeichert werden, damit die Apps trotz Ausfall von Strom- oder Internetverbindung benutzbar bleiben. Die Antwort: Zwischenspeichern mit HTML5 und „Offline First“.

beyond-tellerrand
Offline-First war auch dieses Mal ein Thema bei der beyond tellerrand.

Offline First: Die Zukunft verlangt nach gutem Zwischenspeicher

Zugegeben, die praktische Umsetzung, gerade wenn es um localStorage beziehungsweise „webstorage“ und „Application Cache“ geht, ist sehr trocken zu präsentieren.

„Don't listen to naysayers.“

Trotzdem konnte John Allsopp neue Einblicke in Technologien geben, die zwar bekannt sind, aber noch nicht flächendeckend eingesetzt werden. Sein Rat: „Don't listen to naysayers“. Recht hat er. Und das hat er in seinem Vortrag auch bewiesen, indem er die Zuschauer durch die einzelnen Möglichkeiten, aber auch – und was viel wichtiger war – durch die verschiedenen Tücken der eingesetzten Technologien geführt hat.

Spätestens nach dem humorvollen Exkurs zum A-List-Apart-Artikel von Jake Archibalds mit dem bezeichnenden Titel: „Application Cache is a Douchebag“, hat John Allsopp glaubhaft klar gemacht, dass der Application Cache maximal ein Idiot ist – und sicher kein „Douchebag“ – und dass jede der genannten Technologien für „Offline first“ eingesetzt werden kann.

Fazit

John Allsopp hat Motivation, Nutzwert und Zukunftsvision eines Prinzips der Webentwicklung in einem Vortag vereint – im Gegensatz zu anderen Vorträgen auf der Konferenz, die mich nicht uneingeschränkt überzeugt haben. Er hat die hohen Erwartungen, die ich in ihn gesetzt habe, ganz klar erfüllt – mein Highlight der „beyond tellerrand // BERLIN“.

Wer sich weiter über das Prinzip „Offline First“ informieren möchte, kann dies auf der Website der Offline-First-Initiative tun.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
beyond tellerrand: Fail again, fail better – gelebt in CSS http://t3n.de/news/beyond-tellerrand-fail-better-576668/ 2014-11-05T15:15:18Z
Zoe Mickley Gillenwater ist UX-Designerin und Buchautorin rund um Responsive Webdesign und CSS3. Auf der „beyond tellerrand // BERLIN“ hat sie darüber gesprochen, wie sie scheitert und aus …

Zoe Mickley Gillenwater ist UX-Designerin und Buchautorin rund um und . Auf der „beyond tellerrand // BERLIN“ hat sie darüber gesprochen, wie sie scheitert und aus Fehlern lernt.

Kreative Menschen sind nicht anders als unkreative, sie experimentieren einfach mehr und sind dadurch erfolgreich, allerdings machen sie dabei auch mehr Fehler aus denen sie lernen könnenZoe Mickley Gillenwater

Learning by doing. Zoe hat auf der „beyond tellerrand // BERLIN“ ihre Erfahrungen geteilt – darüber wie sie mit dem Scheitern umgeht, anhand der Flexbox in . Dabei gab sie Schritt-für-Schritt Einblicke und half den Zuschauern jeden einzelnen Gedanken anhand von Code-Zeilen zu verstehen. Aber allen voran: Sie zeigte, wie Entwickler CSS schreiben, aber nicht sollten.

beyond-gillenwater
beyond Tellerrand // BERLIN: Gillenwater über Scheitern und Code.

Gillenwater bringt es auf den Punkt: Entwickler müssen verstehen welche Befehle sie nutzen und wie die eingesetzten Properties funktionieren. Code-Zeilen zu kopieren, ohne zu verstehen, was sie bedeuten: „Das ist keine Schande, denn nur so lernt man“, sagt Zoe.

Zoe Mickley Gillenwater lebt die amerikanische „Kultur des Scheiterns“ als Entwickler vor und gibt offen zu, dass sie in ihren Projekten „mal schnell“ von Demos und Tutorials zusammenkopierten Code verwendet. Dass diese an sich falsche Vorgehensweise trotzdem zum Lernprozess beiträgt, verdankt sie ihrer Kreativität und Bereitschaft Neues auszuprobieren. Dabei ist sie dankbar, dass sie Fehler macht, denn „hätte der Code gleich beim ersten Mal funktioniert, hätte ich Flexbox nie verstanden“.

Ein „dünner Vortrag“ mit erstaunlichen Erkenntnissen

Der Vortrag, der in Berlin stattfindenden beyond tellerrand, „fühlte“ sich für mich etwas dünn an. Letztendlich hat jeder einmal so angefangen: Code kopieren, verstehen und verbessern. Ich war erstaunt, dass eine versierte Entwicklern wie Zoe Mickley Gillenwater immer noch nach diesem „Quick-n'-Dirty-Prinzip“ arbeitet und erst beim Auftreten eines Problems versucht, die jeweilige Property zu verstehen. Genau das machte sie nämlich anhand eines realen Beispiels rund um die perspective-Property klar.

Persönlich war ich von ihrem Vortrag enttäuscht. Die Kernaussage: „Versteht den Code, den ihr schreibt“, hätte sie auch kürzer fassen können.

Ich hätte mir gewünscht, dass sie mehr darauf eingegangen wäre, wo Entwickler gute Ressourcen beziehen können, um nicht die Dokumentation lesen zu müssen. Klar, ich wusste durch die Beschreibung des Vortrags was mich erwartet – und trotzdem: Auf einer Konferenz wie der und von einer Entwicklerin dieses Kalibers, habe ich mir deutlich mehr Nutzwert erwartet. Die einzige Erkenntnis bleibt: „Ich habe Code kopiert, das hat nicht funktioniert. Ich habe ihn gelesen und verstanden, jetzt funktioniert der Code.“ Na ja, und „ihr seid alle super, weil ihr Fehler macht“.

Der Vortrag fühlte sich wie streckenweise langatmiges Infotainment an: Viel Emotion und Motivation, wenig Nutzwert. Dass Entwickler verstehen müssen, was Code macht, bevor sie ihn verwenden, wird schließlich schon seit Jahren gepredigt.

Lest ihr vor dem Anwenden einer CSS-Eigenschaft die dazugehörige Dokumentation?

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Mario Janschitz
WieWoWas? t3n-Leser fragten nach: Hootsuite-Alternativen, MRM-Tools, Responsive Webdesign, HTML5 und Google Analytics http://t3n.de/news/wiewowas-t3n-leser-fragten-nach-574816/ 2014-10-28T13:24:17Z
Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen …

Für alle Fragen rund um die digitale Welt findet ihr auf t3n.de den Fragen-Bereich. Dort könnt ihr nach Lust und Laune alles aufs Tapet bringen, was euch ein Rätsel ist. Jeden Dienstag erscheinen dann die interessantesten und brisantesten Fragen und Antworten der t3n-Community zusammengefasst in einem Artikel.In den Fragen dieser Woche geht es um Hootsuite- und Wunderlist-Alternativen, Responsive Webdesign, HTML5, Google Analytics und mehr.

1. Social-Media-Management-Tools

Hootsuite ist eines der beliebtesten Social-Media-Management-Tools. Gibt es auch gute Alternativen? Welche nutzt ihr und warum?

Zur Frage: Was ist die beste Hootsuite Alternative?

2. Bezahlbares MRM-Tool

Wir befinden uns gerade in der Gründungsphase eines E-Commerce-Projektes und arbeiten bereits mit einigen Tools. Was uns fehlt: Ein (bezahlbares) Marketing-Resource-Management-Tool, das uns eine zentrale Planung (Timetables, etc.) und Evaluierung (über KPIs, etc.) unserer Marketingaktivitäten ermöglicht. Gerne auch aus dem Bereich SaaS.

Was empfehlt ihr?

Zur Frage: Gibt es ein (bezahlbares) MRM-Tool für Start-ups? 

3. Responsive Webdesign-Einstieg

Ich habe mich in den letzten Tagen etwas näher mit Responsive Webdesign auseinandergesetzt und bin immer wieder über den Ansatz „Mobile First” gestolpert. Was würdet ihr empfehlen? Mit der Version für mobile Geräte zu beginnen und sich hochzuarbeiten oder andersrum anfangen?

Zur Frage: Responsive Webdesign-Einstieg: "Mobile First" oder "Desktop First"?

4. HTML5-Tags

HTML5 ist ja noch kein verabschiedeter Standard, sondern noch in der Entwicklung. Kann man die Tags trotzdem schon bedenkenlos einsetzen?

Zur Frage: Kann/sollte man HTML5-Tags schon heute einsetzen?

5. Google Analytics in WordPress integrieren

Ich habe eine WordPress-Installation und würde da gerne Google Analytics einbinden. Als Theme nutze ich Twenty Thirteen. Wie mache ich das am besten?

Zur Frage: Wie kann ich Google Analytics in WordPress integrieren?

6. Wunderlist-Alternative

Welche alternativen ToDo-Listen nutzt ihr? Setzt ihr auf kostenpflichtige oder kennt ihr gute Freeware?

Zur Frage: Was ist die beste Wunderlist-Alternative?

 

Tausch dich mit der Community aus: Stell deine Frage, oder lass die Anderen von deinem Wissen profitieren – auf t3n.de/fragen

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Melanie Petersen
40 kostenlose WordPress-Themes für Responsive Design http://t3n.de/news/kostenlose-wordpress-themes-responsive-webdesign-376838/ 2014-10-14T16:30:24Z
Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich.

Das Angebot an kostenlosen für die eigene Website wächst stetig. Auch die Auswahl an , die unterstützen, ist inzwischen beachtlich. Zur besseren Übersicht hier eine Auswahl von 40 kostenlosen und responsiven WordPress-Themes.

Responsive Design bei WordPress-Themes

Immer mehr Nutzer surfen über mobile Endgeräte im Internet. Ob unterwegs mit dem Smartphone oder auf der Couch mit dem Tablet: Neue Nutzungsgewohnheiten verändern die Anforderungen an Websites jedweder Machart. Mit einem responsiven WordPress-Theme verbessert ihr die Usability und Lesbarkeit eurer jetzigen und eurer zukünftigen Besucher.

Schon jetzt haben Notebooks und Smartphones den Desktop als beliebtesten Zugangsweg ins Internet hinter sich gelassen, wie die ARD/ZDF-Onlinestudie 2014 zeigt. Und auch der Anteil der Nutzer, die Internetinhalte über das Tablet abrufen, hat sich von 16 Prozent im Jahr 2013 auf 28 Prozent im Jahr 2014 gesteigert.

Vieles spricht daher für ein WordPress-Theme, das auch für mobile Endgeräte optimiert wurde.

40 WordPress-Themes für Responsive Design

Die folgenden WordPress-Themes sind durch Responsive Webdesign für alle Endgeräte optimiert. Wer auf eigene Faust eine responsive Website erstellen will, sollte sich stattdessen in die Einzelteile der folgenden Artikelserie einlesen:

  1. Responsive Webdesign, Teil 1: Layout- und Textdarstellung
  2. Responsive Webdesign, Teil 2: Das Navigationsmenü
  3. Responsive Webdesign, Teil 3: Darstellung von Galerien und Videos

1. Twenty Fourteen von WordPress

Responsive WordPress-Theme: Twenty Fourteen.
Twenty Fourteen, das diesjährige Default-Theme von WordPress, ist vollständig für responsive Websites ausgelegt. (Screenshot: Twenty Fourteen)

2. Twenty Thirteen von WordPress

Responsive WordPress-Theme: Twenty Thirteen.
Auch das 2013er WordPress-Theme Twenty Thirteen wartet mit responsiven Funktionalitäten auf. (Screenshot: Twenty Thirteen)

3. Codium Extend von CodeReduction

Responsive WordPress-Theme: Codium Extend. (Screenshot: Codium Extend)

4. Live Wire von Theme Hybrid

Responsive WordPress-Theme: Live Wire.
Das responsive WordPress-Theme Live Wire ist unter der Maßgabe Mobile First entwickelt worden. (Screenshot: Live Wire)

5. Pinboard von One Designs

Hinweis: Standardmäßig ist hier Infinite Scroll aktiviert, was mit einem Footer natürlich etwas unglücklich ist. Das kann in den Theme-Optionen umgestellt werden.

Responsive WordPress-Theme: Pinboard.
Responsive WordPress-Theme: Pinboard. (Screenshot: Pinboard)

6. Match von DoveThemes

Responsive WordPress-Theme: Match.
Schön für persönliche Webseiten: Das responsive WordPress-Theme Match. (Screenshot: Match)

7. Fictive von Automattic

Responsive WordPress-Theme: Fictive.
Das WordPress-Theme Fictive legt Wert auf Personalisierung – etwa durch Einbindung der Social Networks. (Screenshot: Fictive)

8. RestImpo von Tomas Toman

Responsive WordPress-Theme: RestImpo.
Das Theme RestImpo bietet unter anderem sechs vorgefertigte Farbschemata, 220 Schriftarten und Unterstützung für viele populäre Plugins. (Screenshot: RestImpo)

9. Superhero von Automattic

Responsive WordPress-Theme: Superhero. (Screenshot: Superhero)
Große Bilder und farbliche Akzente: Das kostenlose WordPress-Theme Superhero. (Screenshot: Superhero)

10. Spacious von ThemeGrill

Responsive WordPress-Theme: Spacious. (Screenshot: Spacious)
Spacious gehört zu den WordPress-Themes, die besonders aufgeräumt daher kommen. (Screenshot: Spacious)

11. Times von Rohit Tripathi

Responsive WordPress-Theme: Times. (Screenshot: Times)
Viele Content-News auf einen Blick: Das responsive Theme Times. (Screenshot: Times)

12. Radiate von ThemeGrill

Responsive WordPress-Theme: Radiate. (Screenshot: Radiate)
Mit Radiate holt ihr euch ein modernes WordPress-Theme im klaren Look ins Haus. (Screenshot: Radiate)

13. Perfetta von GavickPro

Responsive WordPress-Theme: Perfetta. (Screenshot: Perfetta)
Das Theme Perfetta wurde speziell für Gastronomen und Food-Blogger entwickelt. (Screenshot: Perfetta)

14. Influence von SiteOrigin

Responsive WordPress-Theme: Influence. (Screenshot: Influence)
Das Theme Influence bietet einen gewissen Hipster-Charme. (Screenshot: Influence)

15. Hemingway von Anders Norén

Responsive WordPress-Theme: Hemingway. (Screenshot: Hemingway)
Das responsive WordPress-Theme Hemingway kommt mit Vollbild-Header-Image und Parallax Scrolling. Fun Fact: Auch eine schwedische Übersetzung ist verfügbar. (Screenshot: Hemingway)

16. Baskerville von Anders Norén

Responsive WordPress-Theme: Baskerville. (Screenshot: Baskerville)
Baskerville kommt mit Widgets für Videos, Flickr und Dribbble. (Screenshot: Baskerville)

17. Wilson von Anders Norén

Responsive WordPress-Theme: Wilson. (Screenshot: Wilson)
Ein WordPress-Theme für Webworker: Wilson. (Screenshot: Wilson)

18. Lingonberry von Anders Norén

Responsive WordPress-Theme: Lingonberry. (Screenshot: Lingonberry)
Ein Hauch von Retina: Das WordPress-Theme Lingonberry bedient eure künstlerischen Ansprüche. (Screenshot: Lingonberry)

19. Pho von ThematoSoup

Responsive WordPress-Theme: Pho. (Screenshot: Pho)
Die Macher von Pho versprechen ein „leanes“ und schnelles responsives WordPress-Theme. (Screenshot: Pho)

20. Dice von Jens Törnell

Responsive WordPress-Theme: Dice. (Screenshot: Dice)
Responsive WordPress-Theme: Dice. (Screenshot: Dice)

21. Kubrick 2014 von John Wilson

Responsive WordPress-Theme: Kubrick 2014. (Screenshot: Kubrick 2014)
John Wilson hat einem Klassiker der WordPress-Themes ein responsives Update verpasst. (Screenshot: Kubrick 2014)

22. Adaption von Automattic

Responsive WordPress-Theme: Adaption. (Screenshot: Adaption)
Noch mehr responsive WordPress-Themes von Automattic – hier: Adaption. (Screenshot: Adaption)

23. Isola von Automattic

Responsive WordPress-Theme: Isola. (Screenshot: Isola)
Das WordPress-Theme Isola besticht durch seine Einfachheit. (Screenshot: Isola)

24. Bosco von Automattic

Responsive WordPress-Theme: Bosco. (Screenshot: Bosco)
Bei diesem responsiven Theme hat Automattic Wert auf außergewöhnliche Typographie gelegt. (Screenshot: Bosco)

25. Radar von wphigh

Responsive WordPress-Theme: Radar. (Screenshot: Radar)
Ein responsives WordPress-Theme im Flat-Desing-Stil: Radar. (Screenshot: Radar)

26. Forefront von Thomas Usborne (Child-Theme für GeneratePress)

Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)
Responsive WordPress-Theme: Forefront. (Screenshot: Forefront)

27. Solon von aThemes

Responsive WordPress-Theme: Solon. (Screenshot: Solon)
Mit Solon nutzt ihr ein responsives WordPress-Theme, das persönlichen Blogs einen modernen Anstrich verleiht. (Screenshot: Solon)

28. Hudson von Michael Burrows

Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)
Responsive WordPress-Theme: Hudson. (Screenshot: Hudson)

29. Eighties von Justin Kopepasah

Responsive WordPress-Theme: Eighties. (Screenshot: Eighties)
The Eighties are back! In Form eines Responsive-Themes für WordPress. (Screenshot: Eighties)

30. Editor von Array

Responsive WordPress-Theme: Editor. (Screenshot: Editor)
Ein besonders elegantes und minimalistisches WordPress-Theme findet ihr in Editor. (Screenshot: Editor)

31. Pictorico von Automattic

Responsive WordPress-Theme: Pictorico. (Screenshot: Pictorico)
Wer besonders viel mit Bildern arbeitet, sollte sich das responsive Theme Pictorico anschauen. (Screenshot: Pictorico)

32. Independent Publisher von Raam Dev

Responsive WordPress-Theme: Independent Publisher. (Screenshot: Independent Publisher)
Das Theme Independent Publisher erlaubt es euren Lesern, sich voll und ganz auf eure Texte zu konzentrieren. (Screenshot: Independent Publisher)

33. Ignite von Compete Themes

Responsive WordPress-Theme: Ignite. (Screenshot: Ignite)
Die Nutzer des WordPress-Themes Ignite loben vor allem den guten Support. (Screenshot: Ignite)

34. Drop von Compete Themes

Responsive WordPress-Theme: Drop. (Screenshot: Drop)
Responsive WordPress-Theme: Drop. (Screenshot: Drop)

35. Esperanza Lite von Qlue Themes

Responsive WordPress-Theme: Esperanza. (Screenshot: Esperanza)
Mit ihrem responsiven Theme wollen die Macher von Esperanza eine einfache, nahtlose Arbeitsumgebung für Blogger bieten. (Screenshot: Esperanza)

36. Hexa von Automattic

Responsive WordPress-Theme: Hexa. (Screenshot: Hexa)
Ein Hauch von Retro-Charme: Das responsive WordPress-Theme Hexa. (Screenshot: Hexa)

37. Ex Astris von Sarah Gooding (Child-Theme für Stargazer)

Responsive WordPress-Theme: Ex Astris. (Screenshot: Ex Astris)
Das responsive WordPress-Theme Ex Astris ist speziell für die Nutzer des Themes Stargazer entwickelt worden. (Screenshot: Ex Astris)

38. Zweig von Simon Vandereecken

Responsive WordPress-Theme: Zweig. (Screenshot: Zweig)
Wer es ein bisschen extravagant mag, kann sich vielleicht für das Theme Zweig begeistern. (Screenshot: Zweig)

39. Sorbet von Automattic

Responsive WordPress-Theme: Sorbet. (Screenshot: Sorbet)
Ein WordPress-Theme, das an den Sommer erinnert: Sorbet. (Screenshot: Sorbet)

40. Highwind von jameskoster

Responsive WordPress-Theme: Highwind. (Screenshot: Highwind)
Das schwerelose Design des responsiven Themes Highwind soll den richtigen Rahmen für eure Inhalte liefern. (Screenshot: Highwind)

Wir hoffen, dass wir euch einige neue Themes zeigen konnten. Übrigens: Bei der Erstellung eigener WordPress-Themes unterstützt euch diese t3n-Artikelreihe.

Kennt ihr weitere kostenlose WordPress-Themes, die responsive sind und hier nicht fehlen dürfen?

Letztes Update des Artikels: 12. Oktober 2014. Der Originalartikel stammt von Lars Budde.

]]>
Florian Brinkmann
Responsive Webdesign für lau: Diese Website bündelt mehr als 500 Templates http://t3n.de/news/responsive-webdesign-fuer-lau-569426/ 2014-09-30T13:06:47Z
Du willst deine Website mit einem Responsive Webdesign versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose …

Du willst deine Website mit einem versehen oder eine neue damit launchen? Dann solltest du einen Blick auf W3Layouts werfen. Die Website bündelt über 500 kostenlose Design-Vorlagen, gruppiert nach Themen und Branchen.

Responsive Webdesign: Große Sammlung mit thematischer Gruppierung

In Kategorien wie „Blogging Template“ „Interior and Furniture“ oder „Mobile App Templates“ bietet W3Layouts Zugriff auf über 500 Design-Vorlagen. Zu jeder Vorlage gibt es eine Demo, mit der man das Design vorab testen kann. Die kostenlosen stehen unter der Lizenz „Creative Commons Attribution 3.0 unported“, enthalten allerdings einen Backlink auf w3layouts.com, den man erst entfernen darf, wenn man 10 US-Dollar via PayPal spendet.

Neben vielen Responsive-Webdesign-Temples gibt es bei w3layouts.com auch einige UI-Kits.
Neben vielen Responsive-Webdesign-Temples gibt es bei w3layouts.com auch einige UI-Kits. (Quelle: w3layouts.com)

So oder so darf man die Responsive-Webdesign-Vorlagen von w3layouts für private und kommerzielle Projekte nutzen und sie bei Bedarf anpassen. Bei einigen Templates verlinkt w3layouts auch auf PSD-Dateien. Insgesamt eine sehr nützliche Sammlung für das nächste Website-Projekt, bei dem man ein Responsive Design nutzen möchte.

Responsive Webdesign für WordPress

Ist WordPress das CMS der Wahl, dann solltest Du einen Blick auf unseren Artikel zu Responsive-Webdesign-Templates für WordPress werfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
]]>
Jan Christe
Die Basics des Responsive Webdesign [Infografik] http://t3n.de/news/basics-responsive-webdesign-568195/ 2014-09-22T09:08:10Z
Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher …

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher Lösungsansatz ist – die wichtigsten Basics zeigt eine neue .

Responsive Webdesign: Grundvoraussetzung für die mobile Kommunikation

Nach den Analysten von Morgan Stanley wird die Zahl der mobilen Internetnutzer die der Desktop-Surfer noch vor Ende 2014 endgültig übersteigen. Auch in Deutschland ist der Trend eindeutig: Schon 2013 lag die Zahl der Internetnutzer, die von mobilen Endgeräten aus auf das Netz zugreifen, bei 51 Prozent – im Vergleich zu nur 37 Prozent im Vorjahr. In der Altersgruppe der 16–24-Jährigen stieg der Anteil der mobilen Internetnutzer innerhalb eines Jahres sogar von 59 auf 81 Prozent.

Wer das Internet nutzt, um seine Zielgruppen zu erreichen – und dabei nicht nur auf vorhandene Infrastrukturen wie Facebook setzt – sollte auf diese Entwicklung reagieren. Denn eine Seite, die aufgrund langer Ladezeiten und endlosem Scrolling für mobile Nutzer zur Tortur wird, konvertiert nicht – oder zumindest wesentlich schlechter als das Desktop-Pendant.

Einen Ausweg verspricht seit einiger Zeit das Responsive Webdesign, ein Gestaltungsprinzip, mit dessen Hilfe der Inhalt einer Website sich flexibel an die Gegebenheiten des jeweiligen Bildschirms beziehungsweise Endgerätes anpasst.

Infografik zeigt die Basics des Responsive Webdesign auf einen Blick

Einen Überblick darüber, wie genau Responsive Webdesign funktioniert und warum es sinnvoll ist, den eigenen Webauftritt entsprechend zu überarbeiten, liefert die folgende Infografik. Wer sich die wichtigsten Basics schnell noch einmal vor Augen rufen möchte oder einen Kunden oder Geschäftspartner vom Nutzen der Darstellungsform überzeugen muss, findet hier eine anschauliche Hilfestellung.

Zum Vergrößern der Grafik einfach auf den unten stehenden Ausschnitt klicken.

Ihr wollt selbst eine Website in Responsive Webdesign umsetzen? Dann findet ihr in unserer Artikelreihe Responsive Webdesign hilfreiche Tipps.

Responsive_Webdesign_Basics_Ausschnitt
Die Basics des Responsive Webdesign. (Grafik: Verve)

via blog.hubspot.com

]]>
Lea Weitekamp