Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2015-03-12T09:49:57Z t3n Redaktion http://t3n.de/tag/responsive-webdesign Mobile Menüs für den Desktop: Wie Responsive Design die Navigation beeinflusst http://t3n.de/magazin/mobile-menues-fuer-den-desktop-237266/ 2015-03-12T09:49:57Z
Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die Entwicklung von gut nutzbaren Websites. Mit dem Einzug von Responsive Webdesign erblickten viele …

Die Navigation ist der wichtigste Bestandteil einer Webseite. Ihre Gestaltung ist grundlegend für die von gut nutzbaren Websites. Mit dem Einzug von erblickten viele neue Navigationsmuster das Licht der Welt und lösten alte Grundsätze und Standards für die Gestaltung ab. Diese Entwicklung beschränkt sich nicht nur auf , sondern findet sich auch zunehmend auf dem Desktop wieder. Ein Blick auf Navigations-Patterns im mobilen Zeitalter und ihren Einfluss auf Desktop-Websites.

Mit dem Einzug von Mobile und Responsive Webdesign wurden Webworker vor neue Herausforderungen bezüglich der Gestaltung ihrer Websites gestellt. Die Navigation blieb davon nicht unberührt. Daraus resultierten einige spannende Ansätze für die Gestaltung mobiler Navigationen, die wir uns im Folgenden genauer anschauen.

Dropdown mit OS-Picker – Weil einfach einfach einfach ist

Ein Dropdown-Menü in der Kopfzeile einer mobilen Site bietet ausreichend Platz, um Seiten oder Kategorien unterzubringen. Hierbei greift man in der Regel auf ein Select-Element zurück. Der Vorteil bei dieser Methode ist, dass kein Styling für den Inhalt des Dropdowns vorgenommen werden muss, da bei der Auswahl das Betriebssystem die Ausgabe des Dropdowns steuert. Auch kommt diese Lösung mit minimalem JavaScript aus. Viele Einträge können die Auswahl aber schnell unübersichtlich und frustrierend machen.

Toggled Navigation – Der Klassiker

Die Toggled Navigation ist die wohl am meisten verwendete Navigationsart auf mobilen Webseiten. Dafür wird meistens eine Leiste im oberen Bereich der Websites positioniert. Diese ist mit einem Button-Element ausgestattet, das bei Betätigung die Navigation ausfahren lässt. Hierbei wird anders als bei klassischen Dropdown-Menüs keine neue Ebene über den eigentlichen Inhalt gelegt, sondern die komplette Webseite um die Länge der Navigation verlängert. Das Bootstrap-Framework beispielsweise hält eine solche Navigationslösung parat.

Multi-Toggle – Für komplexe Menüstrukturen

Das Multi-Toggle-Menü ist oberflächlich betrachtet eine Ansammlung von verschachtelten Akkordeons. Der Benutzer tippt auf die Hauptkategorie und öffnet so die enthaltenen Unterkategorien. Mit Multi-Toggle Menüs können höchst komplexe Navigationen auf kleinstem Raum untergebracht werden. Durch die Kategorisierung können Benutzer schneller ans Ziel kommen. Sobald ausreichend Nutzfläche für die Darstellung der Webseite zur Verfügung steht, kann dieses Pattern zum klassischen Multi-Level-Dropdown-Menü ausgebaut werden. Technisch gesehen sind unbeschränkt viele Ebenen möglich. So kann allerdings schnell eine unüberschaubare Navigationsstruktur entstehen, die statt zum Surfen einzuladen eher frustrierend wirkt.

Slide Navigation – Schick aber aufwendig

Navigationselemente müssen nicht zwingend untereinander angeordnet sein. Kategorien können auf mehrere Ebenen aufgesplittet und durch zusätzliche Bedienelemente oder einen Swipe durchgeblättert werden, um so Unterpunkte der Navigation darstellen zu können. Dieses Pattern bietet eine gewisse Übersichtlichkeit bei einer weiterhin hohen Detailtiefe, ist technisch jedoch etwas aufwändiger umzusetzen.

Mobile Menues für den Desktop 1
Diesel weckt auf dem Desktop die Neugier mit weichgezeichneten Hintergrundbildern, die sich erst beim Mouse-Over zu erkennen geben. Solche Effekte lassen sich leider nicht auf Mobilgeräten wiedergeben, da hier die Maus fehlt. (Screenshot: diesel.com)

Ein minimalistisches Beispiel hierfür liefert Apple mit seinem kürzlich eingeführten Navigations-Balken, der bei kleineren Screens nicht komplett sichtbar ist, aber mit einem Swipe bewegt werden kann. Eine Slide-Navigation muss sich dabei nicht nur auf einen kleinen Balken beschränken und könnte die volle Bildschirmgröße einnehmen, um Inhalte besser in Szene zu setzen.

Mega Dropdown – Schick aber Platzeinnehmend

Das Mega-Dropdown ist eine aufbereitete Abwandlung der Toggled-Navigation, bei der neben einfachen Textlinks auch mit Icons, Bildern oder einer Kombination aus beidem gearbeitet werden kann. Durch die Größe der einzelnen Elemente lassen sich zwar weniger Links auf der sichtbaren Fläche unterbringen als bei einer einfachen Toggled-Navigation, die optische Verbesserung kann diesen Nachteil aber durchaus ausgleichen.

Off-Canvas Flyout – Viel Platz bei einfacher Orientierung

Beim Off-Canvas-Pattern wird die Navigation außerhalb des sichtbaren Bereichs des Displays untergebracht und durch einen Tap auf einen entsprechenden Button ausgefahren. Dabei schiebt sich die Navigation entweder über den eigentlichen Content oder verschiebt diesen bis an den Rand des Bildschirms, sodass die Orientierung in der Webseite weiterhin möglich ist.

Das Off-Canvas-Flyout stellt Designern viel Raum zur Platzierung von Elementen zur Verfügung und bietet so große Gestaltungsfreiheit.

]]>
Ilja Zaglov
Responsive Webdesign: Welche Potenziale immer noch verschenkt werden [Interview] http://t3n.de/news/responsive-webdesign-potenzial-lobacher-597408/ 2015-03-05T12:45:19Z
Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und …

Smartphones, Tablets und Co. haben unsere Surf-Gewohnheiten im Web radikal verändert. Immer mehr Endgeräte mit den unterschiedlichsten Display- und Browser-Formaten strömen auf den Markt – und stellen die Darstellungstechniken von Websites vor komplett neue Herausforderungen. Die Zeiten, in denen Websites mit statischen Inhalten für eine fixe Anzeige optimiert wurden, sind längst vorbei. Die Lösung: Responsive Webdesign. Doch was verbirgt sich genau hinter dem viel gebrauchten Hype-Wort der letzten Jahre? Reine Technik oder doch eher ein Prozess?

Patrick Lobacher, Geschäftsführer der +Pluswerk AG
Patrick Lobacher, Geschäftsführer der +Pluswerk AG

Patrick Lobacher dürfte genau darauf Antworten haben. Der Geschäftsführer der +Pluswerk AG, einem der führenden Agenturnetzwerke Deutschlands, ist Autor zahlreicher Fachbücher zu dem Thema und erfahren im Management von Responsive-Webdesign-Projekten. anders und sehr hat den Experten um eine Einschätzung des Themas gebeten.

Redaktion: Vielen Dank, dass du dir Zeit für ein Gespräch genommen hast. Responsive Webdesign – ein geradezu schillernder Begriff. Was ist die Grundidee dahinter?

Patrick Lobacher: Die Grundidee dahinter ist, dass eine Website in allen möglichen Zugangsgeräten (Desktop, Tablet, Mobile, ...) eine hochwertige Benutzererfahrung (User Experience) bietet – heute und in der Zukunft. Dazu muss sich die Website dem Gerät und der Umgebung, in der das Gerät verwendet wird, anpassen. Das wird als „responsive“ bezeichnet. Dabei wird unter dem Begriff deutlich mehr verstanden als die klassische Definition von Ethan Marcotte aus dem Jahr 2010.

Redaktion: Warum sollten Unternehmen heutzutage auf Responsive Webdesign setzen?

Patrick Lobacher: Einerseits ist nur so sichergestellt, dass ein Webangebot auf allen Zugangsgeräten optimal angesehen und genutzt werden kann. Andererseits sorgt ein Vorgehen gemäß Responsive Design für einen besseren Content, bessere Usability und letztlich auch bessere Performance (sofern die Umsetzung gut gemacht ist). Die Conversion steigert sich erheblich und auch Google honoriert Responsive-Webdesign-Auftritte mit einem höheren Ranking.

Redaktion: Was hat es mit dem Content-First-Prinzip auf sich?

Patrick Lobacher: Um einen Webauftritt optimal für alle Zugangsgeräte zu konzipieren, wird man schnell feststellen, dass man sinnvollerweise beim Kleinstmöglichen anfängt und sich dann langsam auf immer größere Geräte steigert. Dabei kann man – je nach Gerät und Geräteklasse – die Funktionalitäten und natürlich auch den Content selbst anreichern.

Man nennt dieses Vorgehen Progressive Enhancement. Geht man so vor, heißt der Startpunkt auch Mobile First. Hier hat man wenig Platz, daher muss dem Content ein besonderes Augenmerk zuteil werden. Somit konzentriert man sich am Anfang eines Responsive-Webdesign-Prozesses immer auf Content First – also auf den Inhalt der kleinstmöglichen Geräteklasse.

Responsive Webdesign: Eine Mischung aus Strategie und Technik. (Screenshot: andersundsehr.com)
Responsive Webdesign: Eine Mischung aus Strategie und Technik. (Screenshot: andersundsehr.com)

Redaktion: Kann man Responsive Webdesign nicht auch später noch nachrüsten?

Patrick Lobacher: Nein, dies ist aus diversen Gründen nicht möglich, beziehungsweise auch nicht sinnvoll. Natürlich kann man eine Website optimieren, sodass diese auf Tablets und Smartphones sichtbar und bedienbar ist – das würde ich persönlich aber nicht als „responsive“ bezeichnen, sondern eben nur als „optimiert“.

So ist klassischer Content eben auf die Betrachtung auf einem Desktop angelegt – sowohl von der Informationstiefe als auch von der Informationsmenge her. Menüs (und andere Navigationselemente) werden meist inflationär verwendet, da „ja genug Platz ist“. Will man zudem die Performance optimal gestalten, muss auch der Quellcode schon initial mit dem Fokus darauf erstellt werden.

Redaktion: Wie verändert sich der Workflow durch Responsive Webdesign?

Patrick Lobacher: Der Workflow muss sich grundsätzlich vom linearen Vorgehen zu einem iterativen, inkrementellen ändern. Früher hat man zuerst ein Design entwickelt und dies mit dem Kunden abgestimmt. Dann hat der Frontend-Entwickler dieses in HTML/CSS umgesetzt und getestet. Nach der Integration in ein CMS hat der Kunde begonnen, den Content einzupflegen.

Das funktioniert aufgrund der Gerätevielfalt und der sich daraus ergebenden Freiheitsgrade nicht mehr. Der Responsive-Design-Workflow enthält daher folgende Schritte: Content-Strategie, Content-Wireframe, Content-Erstellung, Content-Testing, Atomic Design, Linear Design, Prototyping, Device-Testing. Dieser Workflow wird in kleinen Iterationen gegangen und anschließend für die nächsten Elemente erneut durchlaufen, bis das Ergebnis zufriedenstellend ist.

Workflow Responsive Webdesign (Screenshot: andersundsehr.com)
Workflow Responsive Webdesign (Screenshot: andersundsehr.com)

Redaktion: Welche technischen Mittel stehen aktuell zur Verfügung?

Patrick Lobacher: Grundsätzlich gibt es zahlreiche Hilfsmittel, um den Prozess bestmöglich zu begleiten. Angefangen von Tools zum Wireframing (wie Axure, Balsamiq), über Formate zur Content-Erstellung (wie Markdown, AsciiDoc, ...) und Tools zur automatischen Umwandlung in HTML (Pandoc, Jekyll, Dexy, ...) gibt es Hilfsmittel zur Erstellung des Atomic Designs (Patternlab) und zum Testen. Weiterhin existieren vorgefertigte Frameworks, um ein Basis-Grid hinter Responsive Webdesign zu erstellen (Singularity, Foundation, Bootstrap, ...) und auch Anbieter wie Adobe haben die Zeichen der Zeit erkannt und mit Edge Reflow ein leistungsfähiges Tool für den Bereich Responsive Webdesign auf den Markt gebracht.

Redaktion: Ist Photoshop nicht mehr zeitgemäß für Responsive-Webdesign-Projekte?

Patrick Lobacher: Photoshop und ähnliche Tools haben einen entscheidenden Nachteil: Sie erstellen statische Layouts in einem Medium, welches nicht zur Betrachtung im Web vorgesehen ist. Früher war zumindest das Zielformat und das Format des Layouts nahezu identisch – so wurde lange Zeit auf 960 Pixel Breite gestaltet.

Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen – hierfür kann man nicht mehr ernsthaft designen. Zumal auch der Content selbst den Unterschied machen kann – beispielsweise hat eine reale Überschrift verschiedene Längen, sie ist vielleicht sogar zweizeilig, wenn das Display nur klein genug ist.

„Heute hat man theoretisch alle Breiten zwischen 200 und 5000 Pixel zu bedienen.“

 Dann muss entschieden werden, was mit dem Design genau an dieser Stelle passieren soll.

Das alles ist durch statisches Design längst nicht mehr abbildbar. Daher geht man hier – aus Sicht des Designs – einen anderen Weg: Man erstellt ein atomares Design – also zuerst einzelne Elemente, Farben, Schriften und Grundelemente. Diese werden dann sofort im Zielformat – also HTML/CSS/JavaScript umgesetzt und getestet. Erst in diesem Zustand – auch Prototyping genannt – wird das Layout langsam immer kompletter und es funktioniert vor allem. Form follows function ist hier wichtiger denn je.

Redaktion: Welche Testverfahren gibt es und wie werden sie praktisch umgesetzt?

Patrick Lobacher: Grundsätzlich sollte man auf richtigen Geräten testen, da diese oft Bugs besitzen, die man nicht simulieren kann. Da das aber meist sehr aufwändig ist, kann man Tools wie Adobe Edge Inspect verwenden, das es ermöglicht, dass die Website oder die Interaktion auf der Website automatisch an alle angeschlossenen Geräte gesendet wird. Somit hat man eine Vielzahl von Geräten im Überblick.

Ein weiteres Verfahren sind automatisierte Frontend-Tests über zum Beispiel Selenium – hier werden bestimmte User-Journeys (z.B. Menü ausklappen und Seite anwählen, Button klicken, Formular ausfüllen, ...) vordefiniert und dann bei jeder Veränderung des Quellcodes der Website automatisiert getestet. Sobald in einem der Geräte und/oder Browser eine Fehlermeldung aufgetreten ist, wird diese sofort gemeldet. Solche Testverfahren sind natürlich auch im laufenden Betrieb einer Website oder eines Webshops sinnvoll.

Redaktion: Welche Auswirkung haben Responsive-Webdesign-Projekte auf die Gestaltung von Vertragsmodellen?

Patrick Lobacher: Die Vertragsgrundlage muss sich natürlich auch ändern, da in klassischen Verträgen oft als Referenz entweder ein Pflichtenheft und/oder ein Photoshop-Design herangezogen wird, um das „Werk“ (Werksvertrag) ordentlich zu spezifizieren.

„Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden.“

Das kann im Responsive Webdesign natürlich nicht gemacht werden. Man muss also ein Vertragswerk finden, das einerseits den iterativen/inkrementellen Weg abbilden kann und andererseits für beide Vertragspartner ein minimales Risiko festschreibt. Man verwendet hierfür den sogenannten agilen Festpreisvertrag und passt diesen entsprechend dem Projekt an.

Redaktion: Wie viele Breakpoints sind sinnvoll?

Patrick Lobacher: Diese Frage kann man pauschal nicht seriös beantworten. Breakpoints werden immer dann sinnvoll, wenn man größere Änderungen am Layout vornehmen will – man also Content-Choreography durchführen will. Und dies ist immer dann sinnvoll, wenn es der Content verlangt. Der Content bestimmt also die Breakpoints und nichts anderes. Meist wird aber bei der Content-Anordnung auf bewährte Pattern (z.B. Drei-Spalter, Zwei-Spalter) zurückgegriffen.

Daher kann man vage postulieren, dass es sehr wahrscheinlich zu mindestens zwei Breakpoints kommen wird, um große Screens, mittlere und kleine, voneinander zu unterscheiden. Es ist aber auch gut möglich, dass man nur mit einem Breakpoint auskommt oder sogar eine Trennung in Major- und Minor-Breakpoints vornimmt. Am Major-Breakpoint finden dann größere Veränderungen statt und am Minor-Breakpoint eventuell nur kleinere. In der Praxis betrachtet man den Content (der ja zuerst erstellt wird) auf einer kleinen Breite und vergrößert solange die Breite, bis man das Gefühl hat, dass man nun einen Breakpoint benötigt.

Redaktion: Wie ist abschließend gesehen deine Einschätzung: Responsive Webdesign nur ein Hype oder die Zukunft des Web?

Patrick Lobacher: Responsive Webdesign als Begriff wird sicherlich in den nächsten Jahren verschwinden – ähnlich wie Web 2.0 vor ein paar Jahren. Der Prozess und die Technik werden aber die Basis des zukünftigen Webs ausmachen. Die Gerätevielfalt nimmt zu und auch die möglichen Zugangspunkte zum Web. Hier bildet Responsive Design die Basis für eine höchstmögliche User Experience. Zurzeit werden bereits „neue“ Begriffe, wie „adaptive Webdesign“ als Weiterentwicklung von Responsive Webdesign gehandelt – dies drückt aber lediglich aus, dass natürlich auch Responsive Webdesign allumfassend gesehen werden sollte.

Redaktion: Wir danken dir für das Gespräch!

Wer noch mehr Informationen und Hintergründe zum Responsive Webdesign sucht, sollte sich dieses Video anschauen.

via www.andersundsehr.com

]]>
anders und sehr
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