Favicons, Favicons, Favicons…

Über die Website RealFaviconGenerator.net lassen sich schnell und einfach die Dateien/Grafiken erstellen, die man benötigt, damit das Favicon einer Website möglichst plattform- und browser-unabhängig funktioniert. Sehr zeitsparend, wenn man bedenkt, dass man diese Grafiken andernfalls alle von Hand erstellen muss. Was ich dagegen allerdings sehr erschreckend finde, ist die Anzahl 15 unterschiedlichen Favicons.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#f8f8f8">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

★ 24ways: Responsive Enhancement by Jeremy Keith

Tools and technologies come and go, but one thing has remained constant for me over the past decade: progressive enhancement.
Progressive enhancement isn’t a technology. It’s more like a way of thinking. Instead of thinking about the specifics of how a finished website might look, progressive enhancement encourages you to think about the fundamental meaning of what the website is providing. So instead of thinking of a website in terms of its ideal state in a modern browser on a nice widescreen device, progressive enhancement allows you to think about the core functionality in a more abstract way.

If you think the size of websites doesn’t matter because everyone has a good connection these days, think again. Geri Coady

Responsive Webdesign Workflow mit webEdition

Hier gibt es meine Präsentation, Links sowie weitere Informationen aus meinem Workshop bei der webEdition Konferenz 2012 in Frankfurt zum Thema „Responsive Webdesign Workflow mit webEdition – ein Praxisbeispiel“. Fragen und Feedback gerne über die Kommentarfunktion. Weiterlesen „Responsive Webdesign Workflow mit webEdition“ →

Pro & Contra: Responsive Webdesign

Responsive Webdesign ist in aller Munde. In vielen Fällen macht es Sinn, Responsive Webdesign auf einer Website einzusetzen, allerdings gibt es auch einige Argumente, die dagegen sprechen. Im Folgenden habe ich eine kleine „Pro & Contra“-Liste zusammengestellt. Diese ist sicherlich nicht vollständig und kann gerne durch Kommentare ergänzt werden.

Was ist Responsive Webdesign?

Responsive Design bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt … eine Webseite wird somit auf einem großen Display anders dargestellt als auf einem Tablet-PC oder Smartphone. Wikipedia

Wer es gerne ausführlicher hat, dem sei der englische A List Apart Artikel von Ethan Marcotte empfohlen.

Pro – Was spricht für den Einsatz von Responsive Webdesign?

  • Zukunftssicher für eine immer größer werde Anzahl von internetfähigen Geräten: Man kann nicht für jedes verfügbare Endgerät eine eigene Version erstellen. Eine recht umfangreiche Liste mit vielen Geräten und deren unterschiedlichen Auflösungen findet man hier bei Wikipedia.
  • Benutzerfreundlich, da sich das Layout je nach Umgebung anpasst
  • Redakteure müssen nur eine Version der Website pflegen, was das ganze auch gleichtzeitig leichter wartbar macht als zwei getrennte Versionen für Mobile und Tablets/Desktops
  • Niedriger Entwicklungsaufwand als eine getrennte Mobile und Desktop Version
  • Leicht einsetzbar bei kleinen Websites und Blogs
  • Responsive Webdesign steckt zwar noch in den Kinderschuhen, aber gerade in dieser Situation besteht noch viel Platz für Innovationen. Mit ein paar klugen Ideen und Anwendungsbeispielen kann man sich von der Konkurrenz absetzen.

Contra – Was spricht gegen den Einsatz von Responsive Webdesign?

  • meist zu teuer und zu aufwendig bei Websites mit kleinem Budget
  • noch zu wenig Best-practices für größere und komplexe Websites.
  • Responsive Webdesign steckt noch in den Kinderschuhen.
  • Performance: Ladezeiten für Smartphones können größer werden, da meist alle Ressourcen im Hintergrund geladen werden, auch wenn das eigentlich im Normalfall nicht der Fall sein sollte.
  • Bei großen und komplexen Websites kann ein deutlicher Mehraufwand entstehen.
  • Werbebanner / Ad Words Anzeigen & Co sind teilweise problematisch
  • Je nach Einsatz und Zielgruppe kann eine mobile native App eventuell auch die bessere Lösung sein. Dies muss allerdings von Fall zu Fall entschieden werden.
  • Redakteure können leicht Fehler machen: Bilder in falscher oder zu niedriger Auflösung, Einbettung von Videos etc. D.h. potentielle Fehlerquellen müssen seitens der Entwicklung abgefangen werden, was den Gesamtaufwand natürlich in die Höhe treibt.
  • Wenn man seinen mobilen Besuchern komplett andere Inhalte liefern will als den Besuchern einer “Desktop-Version”, dann ist Responsive Webdesign die falsche Lösung. (Aber warum sollte man das wollen? “There is only one web”!)