Responsive Webdesign | t3n News News, Infos, Tipps und aktuelle Artikel zu Responsive Webdesign 2014-04-06T08:11:31Z t3n Redaktion http://t3n.de/tag/responsive-webdesign SVGMagic: Automatischer SVG-Fallback für deine Webseite http://t3n.de/news/svgmagic-svg-fallback-out-of-the-box-535992/ 2014-04-06T08:11:31Z
SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch w ...

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch wie.

SVGMagic: Fall-Back-Lösung für Browser ohne SVG-Unterstützung

Das SVG-Format hat in letzter Zeit ein wahres Comeback erfahren. Das teilweise für tot erklärte Vektor-Format erfreut sich spätestens seit Retina-Displays einer erhöhten Popularität, und auch für den Einsatz im als verlustfrei skalierendes Grafikformat sind SVG eine gute Wahl.

Wie bei vielen schönen Dingen im Web hat auch diese Technologie ihre Schattenseiten. Insbesondere der Support von älteren Browsern, aber auch einigen mobilen Plattformen, lässt hier zu wünschen übrig. Der technische und organisatorische Aufwand für Fallback-Lösungen überwiegt hier nicht selten die Vorteile, die mit dem Einsatz von SVG erzielt werden können.

Das jQuery-Plugin SVGMagic nimmt dir diese Probleme ab und leistet dabei ganze Arbeit. Es untersucht deine Webseite und liefert bei Bedarf vollautomatisch eine Fall-Back-Lösung für Browser ohne SVG-Unterstützung. Hierfür sammelt SVGMagic die URIs der SVG-Grafiken und sendet sie an eigene Server. Diese laden die Grafiken runter und erstellen PNG-Grafiken, deren URIs dann im Austausch an den Client zurückgeschickt werden.

SVGMagic Funktionsweise
SVGMagic untersucht deine Webseite und tauscht bei Bedarf SVG-Grafiken durch PNGs aus. (Grafik: SVGMagic)

Die verarbeiteten Grafiken werden auf den Servern von SVGMagic gespeichert, um später eine schnellere Verarbeitung zu ermöglichen. SVGMagic beschränkt sich dabei nicht nur auf Elemente im DOM, sondern kann zusätzlich Grafiken im Stylesheet deiner Webseite austauschen.

SVGMagic einbinden

Das Einbinden von SVGMagic ist äußerst simpel. Nachdem das jQuery-Plugin eingebunden ist, muss es beim Document-Ready-Event aufgerufen werden. Alles andere passiert automatisch.

$(document).ready(function(){
$('img').svgmagic();
});

Um Ladezeiten bei der Verarbeitung der SVG-Grafiken zu überbrücken, bietet das Skript zusätzliche Konfigurationsmöglichkeiten, wie das automatische Einbinden einer Preload-Grafik. Bei Bedarf kann sämtliche Kommunikation mit SVGMagic über https erfolgen.

$('img').svgmagic({
preloader: "/style/ajax-loader.gif",
secure: {true/false},
callback: placeTime
backgroundimage: true
});

SVGMagic ist eine sehr bequeme Lösung für Webworker, die den Aufwand eines eignen Fallbacks scheuen, aber dennoch nicht auf die Vorteile von SVG verzichten können oder wollen. Auf der offiziellen Webseite von SVGMagic kannst du dir selbst ein Bild von der Bibliothek machen. Eine ähnliche Lösung für automatisch generierte Responsive Images bietet dir Mobify.

]]>
Ilja Zaglov
Sticky Footer mit variabler Höhe im Responsive Webdesign? Kein Problem! http://t3n.de/news/sticky-footer-display-table-536687/ 2014-03-29T14:03:52Z
Einen Sticky Footer umzusetzen, ist nicht besonders schwierig. Kniffliger wird es, wenn er in einem responsiven Design verwendet werden soll. Wie ihr das einfach und mit wenig Code per display:table.. ...

Einen Sticky Footer umzusetzen, ist nicht besonders schwierig. Kniffliger wird es, wenn er in einem responsiven Design verwendet werden soll. Wie ihr das einfach und mit wenig Code per display:table löst, zeigen wir hier.

Normalerweise soll der Footer einer Website bei kurzen Inhalten am unteren Ende des Browserfensters kleben. Die passende Lösung dafür lautet „Sticky Footer“. Sie hält den Footer am unteren Browserfenster – ist der Inhalt länger, verhält er sich ganz normal und rutscht aus dem Sichtbereich.

Sticky Footer und Responsive Design? Normalerweise etwas schwierig

Bei den meisten Lösungen für dieses Problem muss der Footer eine feste Höhe besitzen. Das ist beim suboptimal und mit viel Probieren verbunden. Schrittweise wird getestet, wann der Footer andere Höhen braucht. Mit der CSS-Eigenschaft display:table lässt sich dieses Problem der Höhenanpassung elegant und ohne viel umgehen. Das HTML-Markup für den Inhalt sieht so aus:

<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
</main>
<footer class="page-row">
<p>Copyright, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, [...] Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</footer>

Der Code sollte selbsterklärend sein. Hier jetzt der CSS-Code:

html,
body { height: 100%; }
body {
display: table;
margin:0;
padding:0;
width: 100%;
}
.page-row {
display: table-row;
}
.page-row-expanded { height: 100%; }

Und das war's auch schon. Damit habt ihr eure Site mit einem Sticky Footer ausgestattet, der variabel in der Höhe ist. html und body werden auf die gesamte Höhe ausgebreitet, auch wenn es eigentlich zu wenig Inhalt gibt – soweit unterscheidet es sich nicht von anderen Lösungsmöglichkeiten. Im nächsten Schritt wird mit display:table für den body die Voraussetzung für den Trick geschaffen, der auf display:table-row basiert. Und jetzt wird es spannend:

Die drei horizontalen Inhalts-Level werden durch display:table-row zu Tabellenzeilen. Der Container, der eventuell zu wenig Inhalt für den Footer hat, bekommt über der Klasse .page-row-expanded eine Höhe von 100 Prozent. Und das ist der Trick: Dieser Inhaltscontainer nimmt sich jetzt den verbliebenen Platz der anderen Tabellenzeilen. Der Footer ist damit mindestens am unteren Ende des Viewports. Hier könnt ihr euch eine Demo anschauen.

Sticky Footer mit display:table – Das Beste: Der Browser-Support

Die Eigenschaft display:table ist schon ziemlich alt. Es gibt sie seit HTML 4.01. Dementsprechend gut sieht auch der Browser-Support aus. Es könnte nur Probleme geben, wenn ihr einen Internet Explorer unterstützen möchtet, der älter ist als Version 8. Eine noch kürzere Lösung für einen Sticky Footer mit variabler Höhe ist mit Flexbox möglich, dann allerdings mit schlechterem Browser-Support.

Was haltet ihr von dieser Lösung? Habt ihr vielleicht sogar eine noch bessere?

via galengidman.com

]]>
Florian Brinkmann
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop] http://t3n.de/news/responsive-webdesign-tools-browser-536196/ 2014-03-25T12:45:09Z
Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ...

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. Das heutige Thema: „Responsive Webdesign: Browserunterstützung und Tools”.

Die Media-Queries in CSS3 werden leider nicht von älteren Internet-Explorer-Versionen unterstützt. Im t3n-Video-Workshop erfahrt ihr genauer, welcher Browser was unterstützt. Außerdem gibt euch Trainer Peter Kröner mit an die Hand, womit bei älteren Browsern nachgeholfen werden kann. Weiterhin bekommt ihr allerlei Tipps zu anderen Helfern, die die Arbeit mit responsive erleichtern.

Noch mehr Video-Workshops

Noch nicht genug zum Thema Webentwicklung? Hier gelangst du zum letzten Teil unserer Serie. Darin bekommst du einen Einblick in Suchmaschinenoptimierung für WordPress.

html5-css3-trainingIn den nächsten Video-Workshops wird es um Themen aus den Bereichen WordPress, SEO und Facebook-Marketing gehen. Wer mehr zum Thema HTML5 & CSS3 erfahren will, der kann sich kostenfrei zum Beispiel knapp eine Stunde Videos aus dem Training (Affiliate-Link) von Peter Kröner anschauen.

]]>
Johannes Schuba
Image Lightbox. Schick, schlank, responsive http://t3n.de/news/image-lightbox-responsive-lightbox-mit-touch-support-529099/ 2014-02-23T15:19:29Z
Image Lightbox ist eine schicke Lightbox mit responsive Design-Features und Touch-Unterstützung. Wir stellen dir das schlanke Skript kurz vor.

Image Lightbox ist eine schicke Lightbox mit responsive Design-Features und Touch-Unterstützung. Wir stellen dir das schlanke Skript kurz vor.

Das zeichnet Image Lightbox aus

Image Lightbox Screenshot
So schick kann eine minimalistische Lightbox mit Image Lightbox aussehen. (Screenshot: t3n)

Lightbox-Skripte sind ein sehr gutes Mittel, um Grafiken vergrößert darzustellen. Da wundert es natürlich nicht, dass es unzählige Lösungen für diese Aufgab gibt. Image Lightbox ist eine dieser Lösungen, die sich die Markenzeichen Responsive und Touch-Freundlich auf die Fahne schreibt.

Der Macher von Image Lightbox fühlte sich erschlagen von der Vielfalt der Lösungen und der Vielzahl von Lösungen für Probleme, die in seinen Augen nicht existierten. Standardfunktionen, die unnötiges Gewicht für die Lightbox mit- oder das komplette Markup durcheinander brachten, inspirierten ihn dazu, Image Lightbox zu schreiben. Das Ergebnis ist eine schlanke Lightbox, die genau das tut, was eine Lightbox in der Basisversion tun soll: Bilder darstellen.

Image Lightbox bietet ein sehr minimalistisches Design, das den Betrachter nicht vom eigentlichen Motiv ablenken soll. Per Default liefert die Lightbox keine Buttons, Navigationselemente oder Überschriften – all das kann jedoch bei Bedarf hinzugeschaltet werden. Außerdem ist eine Steuerung mit den Pfeiltasten der Tastatur möglich. Auf Touch-Geräten ist darüber hinaus das Durchblättern von Bildern mit Wischgeste möglich.

Die nur vier Kilobyte große Lightbox bringt eine minimale Zusatzbelastung in das Projekt und schafft es durch den Verzicht auf externe Grafiken schlank zu sein und dabei auch für Retina-Geräte gestochen scharfe Ergebnisse zu liefern. Anders als andere Lightbox-Lösungen wurde hier auch an die Performance gedacht: Die großen Versionen der Bilder werden nur geladen, wenn sie tatsächlich gebraucht werden. Eine clevere Preload-Funktion lädt außerdem das nächste Bild vor, sodass eine gefühlte Verbesserung bei der Nutzung – insbesondere auf mobilen Geräten – erzielt werden kann.

Image Lightbox einbinden

Für die Nutzung von Image Lightbox benötigst du kein kompliziertes Markup. Ein Thumbnail-Bild und ein Link zur großen Version des Bildes reichen hierbei vollkommen aus:

<a href="grosses-bild.jpg">

<img src="thumbnail.jpg" class="lightbox">

</a>

Binde das Lightbox-Skript in dein Projekt ein und initiiere es. Schon ist deine Lightbox fertig.

<script src="jquery.js"></script>

<script src="imagelightbox.js"></script>

<script>

$( function(){

$( 'a.lightbox' ).imageLightbox();

});

</script>

Mit einer Reihe von Parametern kannst du verschiedene Einstellungen für die Lightbox wie die Animationsgeschwindigkeit und die Preload-Funktion konfigurieren. Mit verschiedenen Event-Listenern kannst du außerdem zusätzliche Funktionen für diverse Vorgänge in der Lighbtox, wie beispielsweise das Beenden eines Ladevorgangs, definieren, sodass verschiedene Erweiterungsmöglichkeiten einfach implementiert werden können.

Image Lightbox verlässt sich auf jQuery, ist aber mit den Versionen 1.x und 2.x kompatibel und funktioniert laut Hersteller in aktuellen Fassungen von Safari, Chrome, Firefox, Opera und Internet Explorer sowie iOS, Android und Windows Phone Browsern. Auf der offiziellen Seite von Image Lightbox erfährst du mehr über das kostenlos erhältliche Skript.

]]>
Ilja Zaglov
Responsive Webdesign: Einstieg in „Mobile First“ [t3n-Video-Workshop] http://t3n.de/news/responsive-webdesign-einstieg-524171/ 2014-01-24T10:54:16Z
Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren... ...

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. Das heutige Thema: „Mobile First, Content First”.

Bisher wurden Websites vorrangig für Desktop-Systeme entwickelt und anschließend für kleinere Displays adaptiert. Aber: Es geht auch anders herum. First heißt der Ansatz, bei dem zuerst für kleinere Displays, also Mobilgeräte, und danach für die Desktop-Größen entwickelt wird. Dabei liegt der Fokus auf der Navigation, der Performance und den relevanten Inhalten. Trainer Jonas Hellwig gibt einen Einstieg in das Konzept und erklärt, wie sich die Sichtweise bei Mobile First verändert.

Noch mehr Video-Workshops

Noch nicht genug zum Thema Webentwicklung? Hier gelangst du zum letzten Teil unserer Serie. Darin bekommst du eine Einführung in 2D-Transformationen mit CSS3.

responsive-webdesignIn den nächsten Video-Workshops wird es um Themen aus den Bereichen WordPress, TYPO3 und HTMLS5/CSS3 gehen. Wer mehr zum Thema Responsive erfahren will, der kann sich kostenfrei zum Beispiel knapp eine Stunde Videos aus dem Training (Affiliate-Link) von Jonas Hellwig anschauen.

]]>
Johannes Schuba
t3n-Aktion: Jahresabo inklusive Fachbuch „Praxiswissen Responsive Webdesign“ http://t3n.de/news/t3n-aktion-jahresabo-inklusive-3-503977/ 2013-12-19T10:00:01Z
Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch.. ...

Möchte man für unterschiedliche Geräte anpassungsfähige Websites erstellen, ist „Responsive Webdesign“ das Stichwort. Um sich damit vertraut zu machen, ist Designern und Entwicklern das Buch „Praxiswissen Responsive Webdesign“ nahezulegen. Die ersten 30 Neuabonnenten bekommen das Fachbuch gratis zum t3n-Abo.

Gerade das mobile Web stellt Webdesigner und -entwickler vor die Herausforderung, Websites für unterschiedliche Devices zu optimieren. Wer das einsetzen möchte und noch kein t3n-Abo abgeschlossen hat, sollte nicht länger warten: Unser Vorrat an Büchern aus dem O'Reilly Verlag reicht für genau 30 Neuabonnenten. Ist dieser aufgebraucht, ist auch die Aktion beendet.

Deine Vorteile als t3n-Abonnent

  • t3n noch vor dem Erscheinungstag lesen
  • versandkostenfreie Lieferung
  • Preisvorteil gegenüber dem Einzelheftkauf
  • t3n-Shirt „Digital Pioneers“ (Einheitgröße L) gratis dazu

Weiterführende Links:

Kurzinfo zum Buch:

Responsive Webdesign gilt unter Webdesignern derzeit als Zauberformel, wenn es darum geht, anpassungsfähige Websites zu entwickeln, die auf allen Geräten gut aussehen. Ganz gleich, ob jemand mit einem Desktop-Rechner, Laptop, Tablet oder Smartphones auf eine Website zugreift – er bekommt immer ein für sein Device optimiertes Design zu sehen.

Dieses in den USA hoch gelobte Buch richtet sich an Webdesigner und -entwickler, die Grundkenntnisse in HTML und CSS mitbringen und sich nun mit responsive Webdesign vertraut machen möchten. Behandelt werden nicht nur technische Aspekte, sondern auch die Planung und der Design-Workflow werden ausgiebig besprochen.

]]>
Charlyn Schaper
Responsive Webdesign: Dieser Browser stellt Mobil- und Desktop-Ansicht nebeneinander http://t3n.de/news/responsive-webdesign-duo-browser-516759/ 2013-12-13T11:23:48Z
Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar.

Duo ist ein Browser, der dabei helfen soll, Responsive Webdesign zu testen. Dazu stellt er eine mobile Ansicht neben einer Desktop- oder Tablet-Ansicht dar.

Responsive Webdesign: Duo hilft beim Testen von Webseiten. (Bild: Apple App-Store)
Responsive Webdesign: Duo hilft beim Testen von Webseiten. (Bild: Apple App-Store)

Respsonsive Webdesign: Duo soll die Arbeit vereinfachen

Browser gibt es viele. Duo will sich aus der Menge der verfügbaren Programme dadurch abheben, dass er Entwicklern dabei hilft, ihre responsiven Webseiten zu testen. Dazu bringt die Software eine zweigeteilte Ansicht mit. Links wird die Ansicht einer Webseite präsentiert, wie sie auch auf Smartphones angezeigt wird. Parallel dazu wird die angesurfte Webseite im Desktop- beziehungsweise Tablet-Modus angezeigt. Die Breite lässt sich vom Nutzer dabei frei wählen, um verschiedene Geräte zu simulieren.

Da beide Seiten des Browsers gleichzeitig dieselbe Seite anzeigen, sollen Entwickler sich Zeit sparen können, da sie die Seite nicht in unterschiedlichen Größen neu laden müssen. Der Webkit-basierte bringt die entsprechenden Entwickler-Tools gleich mit, um beide Ansichten debuggen zu können. Außerdem haben die Entwickler verschiedene Tastaturkürzel integriert, um beispielsweise auf Knopfdruck Cookies löschen zu können.

Responsive Webdesign testen mit Duo

Die Entwickler haben Duo außerdem mit einer praktischen Möglichkeit ausgestattet, um eine URL von eurem Standard-Browser an Duo zu senden. Dazu verwendet ihr ein Bookmarklet. Duo benötigt OS X 10.8 oder höher und kann über Apples App-Store für 4,49 Euro heruntergeladen werden. Den entsprechenden Link findet ihr unter diesem Artikel.

Wer sich eingehender mit dem Thema responsives Webdesign beschäftigen möchte, dem können wir die vierteilige Responsive-Webdesign-Reihe unseres Kollegen Mario Janschitz ans Herz legen. In den vier Teilen behandelt er die Themen Layout- und Textdarstellung, Navigationsmenüs, Darstellung von Galerien und Videos sowie Steuerungselemente und Datendarstellung. Einen fünften Teil über Animationen werden wir demnächst veröffentlichen.

Duo Duo @ Mac App Store
Preis: 4,49 €
]]>
Kim Rixecker
Tooltipp: Time-Tracking mit Timelog – kostenlos, responsive, intuitiv http://t3n.de/news/timelog-web-app-stoppuhr-514599/ 2013-12-05T14:54:57Z
Timelog ist eine kleine, simple Web-App, mit der ihr einfach stoppen könnt, wie lange ihr für etwas braucht. Die App verzichtet auf Schnickschnack und setzt auf ein klares, responsives Design.

Timelog ist eine kleine, simple Web-App, mit der ihr einfach stoppen könnt, wie lange ihr für etwas braucht. Die App verzichtet auf Schnickschnack und setzt auf ein klares, responsives Design.

TimeLog besticht durch Einfachheit und Eleganz. (Screenshot: TimeLog)
Timelog besticht durch Einfachheit und Eleganz. (Screenshot: Timelog)

Timelog ist eine responsive Stoppuhr-App

Die beiden Hamburger Karl Ludwig Weise und Tim Herbig suchten nach einem einfachen Tool, um zu messen, wie lange sie für diese oder jene Tätigkeit brauchen. Um etwa die täglichen Abläufe zeitlich besser einschätzen zu können, aber manchmal vielleicht auch nur um zu sehen, wie lange man die Luft anhalten kann. Die bestehenden Lösungen für OS X oder iOS erschienen den beiden zu hässlich und viel zu komplex. Also machten sie aus der Not eine Tugend und entwickelten mit Timelog eine Web-App genau nach ihren Bedürfnissen.

Im Grunde ist Timelog nicht mehr als eine Stoppuhr. Allerdings eine recht schöne und HTML-basierte Stoppuhr. Neben einem kleinen Logo im oberen linken Bereich der Seite und einem kleinen Menü-Button auf der rechten, befindet sich lediglich ein Schriftzug in der Mitte des Bildschirms, der Nutzern die Verwendung der in vier simplen Wörtern erklärt: „Click to start timer.“

Wohin ihr klickt ist eigentlich egal, solange ihr nicht auf den erwähnten Menü-Button klickt. So lässt sich die App auch bequem vom Smartphone oder anderen Geräten mit vergleichsweise kleinen Bildschirmen bedienen. Einmal geklickt, wechselt die Hintergrundfarbe und der Timer läuft los. Ein weiterer Klick stoppt das virtuelle Uhrwerk und ihr habt die Möglichkeit eure gestoppte Zeit mit einem kurzen Text eurer Wahl zu kennzeichnen.

Timelog: Zeiten lassen sich auch abspeichern und beschriften

Die Zeitabnahmen werden so gespeichert und können zu einem späteren Zeitpunkt wieder abgerufen werden. Löblicherweise benötigt die Seite keine Anmeldung. Die Zeiten werden anhand von Cookies gespeichert. Dadurch verliert ihr aber leider auch die Möglichkeit, auf eure gespeicherten Zeiten zuzugreifen, wenn ihr einen anderen Browser oder ein anderes Endgerät verwendet.

Eine optionale Login-Funktion könnte hier Abhilfe schaffen. Und tatsächlich ist eine solche Funktion bereits in Planung, wie man uns auf Nachfrage mitgeteilt hat. Diese optionalen Accounts sollen so wenige Nutzerdaten wie möglich benötigen. Außerdem sollen verschiedene Logs unterschiedlichen Projekten zugeordnet werden können, um beispielsweise festzuhalten, wie lange man insgesamt an einem Projekt gearbeitet hat.

Natürlich ist Timelog letztlich nicht mehr als eine Stoppuhr und somit kaum eine besonders neue Erfindung. Die einfache, klare Bedienung, das responsive und die Möglichkeit, Zeiten abzuspeichern, könnten es für den einen oder anderen Nutzer aber zu einem praktischen Tool für verschiedene Lebensbereiche machen. Weitere Funktionen könnten in Zukunft nachgereicht werden. Die Entwickler freuen sich nach eigenen Angaben über Anregungen in dieser Hinsicht.

Eine Übersicht über Alternativen zu Timelog findet ihr übrigens in unserem Artikel „Time Tracking Tools: 10 praktische Apps für die Zeiterfassung“.

]]>
Kim Rixecker
Responsive Webdesign, Teil 4: Steuerungselemente und Datendarstellung http://t3n.de/news/responsive-webdesign-teil-4-512609/ 2013-11-29T10:05:12Z
Mit der Serie „Responsive Webdesign“ wollen wir euch die Entwicklung flexibler Projekte erleichtern. In Teil 4 zeigen wir Möglichkeiten auf, wie ihr Formulare, Steuerungselemente und Diagramme...

Mit der Serie „Responsive Webdesign“ wollen wir euch die Entwicklung flexibler Projekte erleichtern. In Teil 4 zeigen wir Möglichkeiten auf, wie ihr Formulare, Steuerungselemente und Diagramme für die responsive Darstellung fit machen könnt. Die von Webprojekten hat bekanntermaßen ihre Tücken – besonders, wenn eine Website auch auf mobilen Geräten wie Smartphones oder Tablets dargestellt werden soll. Ein großes Hindernis stellen auch Formulare und deren Steuerelemente dar. Komplexe Formulare darzustellen und das auch noch im Sinne der Usability, kann so manchen Entwickler zur Weißglut bringen. Ein weiteres Thema sind Tabellen und Diagramme. Heute zeige ich euch einige Bibliotheken und Lösungsansätze, die euch das Entwicklerleben vielleicht etwas vereinfachen – trotz der wenigen vorhandenen Möglichkeiten.

Formulare und Tabellen im Responsive-Webdesign

Bildschirmfoto 2013-11-28 um 14.23.45
Ein Formular-Skript für Responsive-Webdesign. (Screenshot: kumailht.com/gridforms/

Mit Grid forms bekommt ihr eine schöne Lösung, um komplexe Formulare, responsive darstellen zu lassen. Ihr könnt euch das Skript bei Github herunterladen.

Eine ähnliche Funktionalität bietet euch Stackable.js. Allerdings kopiert dieses Skript eure Tabelle und stellt sie in einer 2-Spalten-Ansicht neu dar. Auch Stackable.js ist auf Github verfügbar.

Mit Tablecloth.js bekommt ihr ein Skript, das euch Themes für eure Tabellen vorgibt. Das zeitfressende Gestalten einer Tabelle kann euch dadurch abgenommen werden. Dabei baut es auf Twitters Bootstrap auf und unterstützt jQuery-Manipulationen von Tabellen, wie zum Beispiel mit Tablesorter.

Eine sehr umfangreiche Library ist auch FooTable. Einen Überblick über den Funktionsumfang dieser Bibliothek könnt ihr euch auf der Demo-Seite machen. Dieses Skript bietet ebenfalls Themes an. Zusätzlich verfügt das Skript noch über eine Paginierungs-, Filter- und Sortier-Funktion.

Datendarstellung und Filter im Responsive-Webdesign

Eine vernünftige Darstellung von Daten entweder in Tabellen oder Diagrammen beziehungsweise eine benutzerfreundliche Dateneingabe generell, wird vom Kunden oft gewünscht, ist aber technisch nicht immer leicht umzusetzen.

Benutzereingabe

Bildschirmfoto 2013-11-28 um 13.43.27
„Touch-friendly“ und nett anzusehen. (Screenshot: ionden.com)

Abhilfe kann hier Ion.RangeSlider.js schaffen. Dieser Slider ist auch mit „Touch“-Geräten kompatibel.

Wenn ihr mit Dropdown-Menüs arbeiten wollt, dann solltet ihr unbedingt einen Blick auf Bootstrap-Select werfen. Damit könnt ihr euren Bootstrap-Formularen das gewisse Etwas verleihen. Auch Minimalect, Populous und Selectric dürften eure Herzen höher schlagen lassen – es werden Optionen zum „Themeing“ und diverse Callbacks geboten, um Steuerelemente benutzerfreundlicher zu machen.

Als letztes in dieser Kategorie möchte ich eure Aufmerksamkeit auf einen „Date-Picker“ lenken. DateTimePicker von XDSoft lässt euch Zeit, Daten und beides in Kombination „picken“. Auch eine Maskierung der input-Felder ist möglich.

Filter und Sortierung

Die eierlegende Wollmilchsau in Bezug auf Sortierung ist wohl MixItUp. Dieses Skript kann alles, was ein Webentwickler rund um das Thema Filter benötigt. Zieht euch das Skript über Github. Apropos Filter: Wenn ihr eine Alternative benötigt dann wird euch Filtrify gefallen. Seht euch die beindruckenden Demos an.

Diagramme

Bildschirmfoto 2013-11-28 um 13.51.55
Schönere Tabellen sind kaum möglich. (Screenshot: chartjs.org)

Der Markt mit responsiven Diagramm-Skripten ist ziemlich begrenzt, mit Chart.js werdet ihr trotzdem eine Freude haben, denn die Darstellungsoptionen sind absolut genial.

Derzeit kann man als Entwickler nur hoffen, dass es bald bessere Möglichkeiten gibt, um Daten im RWD besser darstellen zu lassen, oder man entwickelt seine eigenen Lösungen.

Welche Skripte vermisst ihr?

]]>
Mario Janschitz
Responsive Webdesign: So überzeugst du deine Kunden http://t3n.de/news/responsive-webdesign-fuer-kunden-509497/ 2013-11-26T12:57:53Z
Responsive-Webdesign ist eine tolle Technik. Die Notwendigkeit von RWD an Kunden zu vermitteln, gestaltet sich aber meistens etwas schwieriger. Mit einem genauen Blick auf die Bedürfnisse deines...

Responsive-Webdesign ist eine tolle Technik. Die Notwendigkeit von RWD an Kunden zu vermitteln, gestaltet sich aber meistens etwas schwieriger. Mit einem genauen Blick auf die Bedürfnisse deines Kunden geht es aber gleich viel einfacher von der Hand.

Hinweis: Ilja Zaglov berät mit seiner Agentur IMBAA Unternehmen zum Thema Web-Entwicklung und Markenkommunikation. Zu den Schwerpunkten der Agentur gehören individuelle Lösungen für Webseiten und Web-Applikationen mit dem Fokus auf Responsive-Web-Design.

Dass eine feine Sache ist, darüber brauchen wir hier wahrscheinlich nicht debattieren. Wenn aber Designer und Kunden aufeinander treffen, wird RWD oft nicht angemessen gewürdigt.

In meiner täglichen Arbeit in der Agentur betreue ich mit meinen Kollegen Kunden verschiedenster Wirtschaftsstufen und Branchen. Oft läuft die Arbeit und Beratung sehr reibungslos ab. Die ein oder anderen Kunden in Spe benötigen aber eine besondere Behandlung, wenn es um das Thema Responsive-Web-Design geht.

Aus unseren Erfahrungen basierend würde ich die Kunden, die besondere Aufmerksamkeit benötigen, in drei Gattungen unterteilen: „Die Konservativen“, „die Innovationsbereiten“ und „die Kenner“.

Der Konservative

56852996
Konservative Kunden hören nur ungern von Responsive Webdesign. © alphaspirit - Fotolia.com

Responsive-Webdesign? So etwas brauchen wir nicht. Unsere Kunden sind alle so wie wir und benutzen Desktop PCs um unsere Inhalte abzurufen.“ Der konservative Kunde fühlt sich meistens nur – wenn überhaupt – auf dem Desktop zuhause und weigert sich sein Nokia 6210 durch „diesen neumodischen Schnickschnack“ zu ersetzen. Für diesen Kunden ist es wichtig, dass seine Webseite auf seinem Rechner (4:3 mit 1024 x 769 Pixel) in seinem Browser (vorzugsweise IE8) funktioniert.

Der Ich-bin-bereit-für-Innovation-Typ

44615088
Der Innovationsbereite sieht die Welt oft nur durch ein Device. © alphaspirit - Fotolia.com

Ein anderes Extrem aus dieser Klasse sind die Kunden, die ein iPad zu Weihnachten geschenkt bekommen haben und darin die einzig mögliche Zukunft sehen – diese sind bereit für Innovation, so zusagen. Zwar haben alle möglichen Medien den mobilen Trend schon breitgetreten, aber nur die Erfahrungen mit dem Gerät selbst überzeugt den Chef von Welt. Wer denkt, dass diese Kundengattung einfacher zu handhaben ist, irrt. Denn hinter vielen dieser Kunden verstecken sich die konservativen Kundenexemplare, die von einem starren Gerät ins andere wechseln, die Welt nur noch durch das jeweils neue Gerät sehen und der festen Überzeugung sind, dass der Rest der Welt das auch tut.

Insgesamt aber ist dieser Kunde deutlich empfänglicher für Argumente als der Konservative. Schließlich hat er den Sprung in die Gegenwart gewagt und will sich nicht mit dem technischen Stand von vor zehn Jahren abgeben. Die Bereitschaft zum Fortschritt ist immer gut für jedes Projekt.

Der Kenner

43001203
Die kenner verstehen dich und testen gerne deine Fähigkeiten © alphaspirit - Fotolia.com

Die Kenner bringen ein besonderes Set an Erwartungen mit. Der Kenner weiß genau, was Responsive-Webdesign ist und wie man es einsetzt. Zwar ist er kein Designer oder Entwickler, weiß aber dennoch mit dem Fachjargon unserer Spezies umzugehen. Diese Kunden kommen von sich aus auf dich zu, und wollen ein Responsive-Design für ihre Webseite haben. Oft führt dieses Wissen aber zu einem anderen Problem: Durch das „fundierte Wissen“ geht diese Art des Kunden schnell dazu über, dir deine Arbeit zu diktieren und sämtliche Einschätzungen für dich zu übernehmen. Das Ergebnis sind neben anstrengenden Preisverhandlungen und spontan angeforderten Änderungen, die solche Kunden oft als einfach – und daher als Inklusivleistung ansehen – auch generell Schwierigkeiten einen festen Arbeitsprozess beizubehalten.

Obwohl dem Kenner RWD nicht unbekannt ist, musst du bei der Handhabung solcher Kunden vorsichtig sein. Das Wissen beziehungsweise das vermeintliche Wissen, das der Kunde hat, bergen großes Konfliktpotential, wenn der Kunde selbst zum Experten mutiert und beginnt dir deinen Job zu erklären.

Responsive Webdesign für Konservative Kunden

Wenn dir eine dieser Kundengattungen am Konferenztisch gegenüber sitzt, steht dir ein hartes Stück Überzeugungsarbeit bevor. Es geht nicht nur darum, die allgemeinen Trends herunterzubeten und mit Zahlen zu hinterlegen. Hier wird der Kunde Responsive-Design selbst erleben müssen. Für diesen Fall habe ich immer entspreche Testgeräte und Simulatoren auf meinem Laptop dabei, sodass spätestens nach der dritten Erklärungsrunde die grundsätzlichen Vorteile von Responsive-Design ersichtlich werden.

Doch selbst wenn der Konservative oder der „Innovationsbereite“ die Grundsätze verstanden haben – den Sinn sehen sie oft doch nicht – zumindest nicht beim eigenen Projekt. Die häufigsten Absagen dürften in dem Fall „Unsere Kunden sind alle zu konservativ oder im B2B Bereich und benutzen keine mobilen Geräte“ oder „Ja, machen Sie das doch erst mal für <setze hier Lieblingsgerät deines Kunden ein> und dann sehen wir weiter“.

Mit etwas Glück sprechen die Statistiken eine andere Sprache und man kann die Kunden von der Notwendigkeit von Responsive-Webdesign, auch für ihr Projekt, überzeugen. Und selbst wenn die Zahlen gegen dich sprechen: der Grund für mangelnde mobile Besucher kann im Fehlen einer entsprechenden technischen Lösung liegen. Nichts fördert die Absprung- und Wiederbesuchsrate so sehr wie die fehlende technische Unterstützung des bevorzugten Surf-Gerätes.

Auch die Entwicklung für ein Gerät/eine Bildschirmgröße ist relativ leicht ad Acta zu legen, da die Kosten für ein solches Unterfangen meistens unverhältnismäßig viel höher wären als sofort responsive zu arbeiten.

Grundsätzlich ist es wichtig Kunden keine Features sondern Lösungen zu verkaufen. Ein Feature, das nicht belegbar ein offensichtliches Problem eueres Kunden löst, ist so schwer zu verkaufen wie Sand in der Wüste. Hierbei ist es wichtig nicht nur die Probleme, die der Kunde selbst mitteilt zu erkennen, sondern selbst Weitsichtigkeit und Expertise zu zeigen.

]]>
Ilja Zaglov