Was spricht für responsive Webdesign?

• Geringerer Pflegeaufwand für Redakteure, als bei einer zusätzlichen “mobilen Version” der Website bzw. einer Verison für Smartphones und einer Version für iPads
• Geringerer Entwicklungsaufwand, als bei  zusätzlichen “mobilen Versionen” der Internetseite.
• Aus obigen Punkten resultiert natürlich auch eine Kostenersparnis für den Kunden.
• Benutzerfreundlich, da das Userinterface auf die jeweilige Bildschirmgröße optimiert werden kann.
• Einheitliche URLs: Die unterschiedlichen Versionen der Website haben die gleiche URL ,was den Suchmaschinen das Indexieren erleichtert und die Duplicate Content Problematik verringert.
• Google spricht sich für responsive Webdesign aus:

“[...]Websites mit Responsive Webdesign: Bei diesen Websites werden für alle Geräte dieselben URLs verwendet. Unter jeder URL wird dabei derselbe HTML-Code an alle Geräte gesendet und die Seitendarstellung auf den verschiedenen Geräten wird allein über CSS geändert. Google empfiehlt diese Konfiguration.[...]”

Google Developer: Empfehlungen im Detail, vom 29.04.2013. Abgerufen unter URL https://developers.google.com/webmasters/smartphone-sites/details?hl=de, vom 15.05.2013.

Was spricht gegen Responsive Webdesign bzw. darüber sollte man sich zumindest im Klaren sein:

• Generell erhöhter Arbeitsaufwand für den Webdesigner und Entwickler als bei einer reinen Desktop Version der Webseite.
• Höhere Kosten für den Kunden als bei einer reinen Desktop Version der Webseite.
• Speziell bei umfangreicheren Seiten mit Buchungsmasken oder Shops etc. erhöht sich der Arbeitsaufwand sehr erheblich.
• Kunden sehen die Vorteile und den Grund für Mehrkosten oft nicht.
• Responsive Webdesign macht nicht bei jeder Webseite wirklich Sinn (Kosten-Nutzen Verhältnis).
• Testphase viel umfangreicher da an etlichen Geräten getestet werden sollte.
• Ladezeiten: Oft wird die gleiche Datenmenge an mobile Endgeräte geschickt, die meist eine geringerer Bandbreite haben.
• Zusätzliche Fehlerquellen für Redakteuere und Entwickler.
• Wer ist meine Zielgruppe und wie nutzt sie das Internet? Denn es gibt mit Sicherheit Webseiten und Themen die kaum mit dem Handy aufgerufen werden. Hier hilft eine Auswertung der Besucherstatistik.
• Videos, Buchungsmasken, Bannerwerbung etc. stellen die Entwickler und Designer oft vor neue Herausforderungen.
• Responsive Webseiten benötigen oft sehr viel JavaScript Code zum Austauschen von Menüs etc. was wiederum die Ladezeiten erhöht.

Mein Fazit:

Mobile internetfähige Geräte sind nicht mehr weg zu denken und die Benutzerzahlen dieser Geräte werden auch weiter zunehmen. Hier ist responsive Webdesign momentan für die meisten Seiten die beste Lösung um diesen Usern eine bestmögliche Zugänglichkeit und Benutzerfreundlichkeit zu gewährleisten. Optimal eingesetzt ist diese Technik jedoch nur dann, wenn für Handys nicht die gleiche Datenmenge (speziell bei Bildern und Videos) geladen werden muss. Hierzu gibt es Techniken wie Adaptive Images etc. und man kann sich auch überlegen, ob man  bestimmte Teile der Seite evtl. nicht am Handy laden lässt. Denn mit Sicherheit liest der Besucher hier lieber deutlich weniger als auf seinem 24″-Monitor. Responsive Webdesign macht bei sehr vielen Seiten wirklich Sinn. Dennoch ist immer abzuwägen ob sich der Mehraufwand lohnt und ein Blick in die Statistik gibt hier schon mal einen ersten Anhaltspunkt.

Eine Sammlung nützlicher Browser Hacks

Auf Browserhacks.com wird eine Liste von browser-spezifischen CSS- und JavaScript-Hacks präsentiert. Diese Liste enthält alle wichtigen Hacks für Chrome, Safari, Firefox, IE und Opera. Das Projekt ist Open Source und wird laufend aktualisiert.

Website: www.browserhacks.com

Für PlayThru wird kein Flash verwendet, alles basisert auf HTML5 und funktioniert auch auf iPhone und iPad (und auf den ganzen Kopien wohl ebenso). Außerdem gibt es Plugins für gängige Anwendungen (wie WordPress, phpBB), die wichtigsten Übersetzungen und Bibliotheken für verschiedene Skriptsprachen. PlayThru ist kostenloser und nur wer mehr Funktionalität und Anpassungsmöglichkeiten benötigt wird zur Kasse gebeten.

Website: http://areyouahuman.com/

Den leeren Value Wert bei den Select Feldern erreicht man in Powermail wie folgt:

Bitte wählen |

Um die JavaScript Validierung wieder zum Laufen zu bringen, ist es nötig, die Datei tmpl_frontend.js im templates Ordner zu bearbeiten:
// select validation
$.tools.validator.fn('select', '',
function(el, value) {
if (el.attr('multiple')) {
return value != null ? true: '###VALIDATOR_LABEL_ONE_REQUIRED###';
} else if(el.attr('required')) {
return value.length > 0 ? true : '';
} else {
return true;
}
}
);

Danach sollte alles wieder wie gewohnt funktionieren. Es gibt inzwischen eine Version 2.x von Powermail, die jedoch kein direktes Update von Version 1.6.x erlaubt. Daher weiß ich im Moment auch nicht, ob hier dieser Bug bereits behoben ist.

Bei der Erstellung von Websites und Printprodukten können Trennzeichen wie Middot oder Bullet nützlich sein.
Leider vergesse ich immer wieder die Shotcuts hierfür am Mac. Daher dieser kleine Spickzettel:

Middot am Mac: Shift(⇧) + Alt(⌥) + 9 = ·

Weitere Mac Shortcuts für Trennzeichen:
⌥H ˙ Overdot
⌥K ˚ Ring
⌥8 • Bullet
⇧⌥8 ° Degree
⇧⌥9 · Mid dot
⌥- – En dash
⇧⌥- — Em dash

Da ich selber immer wieder mal über das Problem stolpere, dass bei Verwendung von TemplaVoila in der Dateiliste beim Kontextmenü der Punkt “TemplaVoila” fehlt, hier die Lösung:

Einfach in der Template Datei ganz oben einen HTML Kommentar wie diesen hier einfügen:

<!- – dummy template – ->

Für einen unserer Kunden war es nötig TYPO3 auf einem 1und1 Webspace einzurichten. ImageMagick funktionierte soweit, d. h. die Image Processing Tests im Install Tool verliefen erfolgreich. Dennoch wurden die Thumbnails im Backend und alle eingepflegten Grafiken im Frontend nicht angezeigt.

Die Lösung des Problems ist zwar recht einfach, war aber schwer zu finden:

In der localconf.php musste folgendes ergänzt werden:

putenv("MAGICK_THREAD_LIMIT=1");

Problem dieses mal: Ein Input Feld (Suchfeld) war im IE8 nicht anclickbar, also man konnte nicht in das Feld klicken und Text eingeben. In allen anderen Browsern funktionierte es ohne Probleme.
Ursache: Wir verwendeten bei dieser Seite ein CSS Reset das unter anderem folgendes beinhaltete:

*{
  background-color:transparent;
 }

Nachdem wir das entfernt hatten funktionierte das Input Feld wieder. Wirklich seltsam, aber bei Microsoft Software überrascht mich gar nichts mehr. Ich hoffe dem ein oder anderen damit geholfen zu haben.

Möchte man YouTube oder Vimeo Videos responsive einbinden, hilft das FitVids jQuery Plugin:
http://fitvidsjs.com/

Responsive Webdesign wird wegen der zunehmenden Verbreitung von Smartphones und Tablet-Computern immer wichtiger. Dabei ist es natürlich auch wichtig, dass sich die einzelnen Komponenten der Website an die aktuelle Auflösung anpassen.

Die meisten Websites haben sich von Flash in den letzten Jahren verabschiedet und viele Flash-Animationen wurden durch jQuery-Slider ersetzt. Flash hatte aber zumindest den Vorteil, dass es beliebig skaliert werden kann, die meisten JavaScript Slider und Slideshows bieten diese Möglichkeit nicht. Hier nun eine Auswahl an guten jQuery responsive Plugins und Scripts (die Reihenfolge stellt hierbei keine Wertung dar):

Responsive Slider jQuery Plugins

1) Unoslider:

2) Flexslider:

3) Elastislide:

4) Seamless Responsive Photo Grid

Responsive Lightbox

5) fancybox 2: