Plattformübergreifendes, responsives Design ist heute Pflicht

responsive-design

Die Auflösungen von Displays auf Desktop Computern, Tablets, Smartphones und anderen Endgeräten können stark voneinander abweichen. Das responsible Webdesign berücksichtigt sowohl in gestalterischer als auch technischer Hinsicht die verschiedenen Auflösungen des jeweiligen Endgerätes.

Die technischen Voraussetzungen sind insbesondere die Webstandards HTML5, CSS3 und JavaScript. Besonders die Media Queries in CSS3 können auf besondere Belange der jeweiligen Auflösungen Einfluss nehmen.

Die Vorteile liegen auf der Hand. Musste vor nicht allzu langer Zeit eine Website in verschiedenen Varianten vorgehalten werden, nämlich für eine normale Ansicht auf Desktopcomputern und zusätzlich für mobile Endgeräte - von einer Unterscheidung zwischen Smartphone und Tablet ganz zu schweigen - reicht heute eine responsible Version der Website, welche sich selbstständig den verfügbaren Umgebungen anpasst.

Wir erleben nun seit vielen Jahren einen wachsenden Boom bei mobilen Endgeräten. Die Zahl dieser mobilen Endgeräte liegt schon heute bei über 1 Milliarde Geräte weltweit. Deshalb ist es so wichtig mit einer Website gerade diesen Anforderungen gerecht zu werden.

Die Agentur horst Werbung programmiert Webseiten nach den neuesten responsiven Standards auf Basis von Bootstrap Frameworks. Entscheiden auch Sie sich für diese neuen bahnbrechenden Entwicklungen und minimieren Sie so den Aufwand für Pflege und Administration Ihrer Website.

Duplicate Content - Website mit und ohne www erreichbar?

Duplicate-content

Duplicate Content, zu deutsch „doppelter Inhalt“, steht für gleichen Inhalt auf unterschiedlichen Webseiten. Das können sowohl Webseiten der gleichen Domain als auch unterschiedlicher Domains sein.

Wie entsteht Duplicate Content?

Duplicate Content kann entstehen, wenn mehrere URLs den gleichen Inhalt anzeigen. Dies kann beispielsweise so sein, wenn an eine URL noch GET-Parameter oder in unterschiedlichen Reihenfolge angehängt werden: www.ihredomain.de/index.php?a=1&b=2 und www.ihredomain.de/index.php?b=2&a=1 liefern normalerweise identische Seiten, sind aber verschiedene URLs. Suchmaschinen sehen also zwei Adressen, die ähnliche oder gleiche Inhalte haben und werden bei entsprechenden Suchanfragen nur eine dieser Seiten anzeigen.

Eine sehr verbreitete Form von Duplicate Content wird durch einen falsch konfigurierten Server verursacht, so dass die www-Subdomain auch ohne diese Angabe erreichbar ist, Beispiel: http://www.ihredomain.de und http://ihredomain.de. Dieser Fehler setzt sich dabei in der Regel auf jeder einzelnen Seite ihrer Domain fort.

Was passiert mit Seiten bei denen Duplicate Content festgestellt wird?

Google filtert Duplicate Content heraus, da Google bestrebt ist einzigartigen "unique" Content zu liefern. Es kann sogar eine negative Bewertung die Folge sein und ein Google Penalty verhängt werden.

Es kann aber auch Inhalte wie Disclaimer oder rechtliche Inhalte geben, die im gleichen Wortlaut auch auf anderen Seiten erscheinen. Wie geht Google mit diesen Seiten um? Was sagt Matt Cutts von Google dazu?

Wie wir sehen, unterscheidet Google sehr wohl zwischen zwingend notwendigen Kopien von Texten und Seiten, die versuchen sich einen Vorteil aus der Verwendung fremden Contents zu verschaffen.

Wichtig bleibt also qualitativ hochwertiger Content, denn "Content is king".

Online-Shopping - Die nicht mehr ganz neue Art zu kaufen

online-shopping

Konnte man sich um die Jahrtausendwende noch nicht vorstellen, dass jedwede Art von Waren, Produkten und Dienstleistungen über das Internet gehandelt und bestellbar sein würden, hat der Siegeszug dieses neuen Absatzweges uns ganz schnell eines Besseren belehrt.

Gerade die immer stärker werdende Präsenz der neuen Handelsplattformen in den Werbeblöcken der Fernsehsender zeigt die Verbreitung des Onlinehandels. Heute kauft man Schuhe bei Zalando, Bücher bei Amazon oder verschafft sich einen Marktüberblick zu praktisch jedem Produkt bei ebay.

Nicht nur Verbraucher, die aufgrund ihrer Wohnlage nicht die Möglichkeit haben schnell Geschäfte zu erreichen, profitieren von den neuen Wegen des Einkaufs über das Internet. Auch und gerade die urbane Bevölkerung, die junge und hippe Generation, surft durch das Netz und kauft heute lieber online bei Zara oder H&M, als sich in überfüllten Läden nerven zu lassen.

Die folgende Statistik zeigt die fulminante Entwicklung eindrücklich:

online-shopping-statMehr Statistiken finden Sie bei Statista

Wie kann mein Unternehmen in den Online-Handel einsteigen?

Die Agentur horst Werbung kann für Ihr Unternehmen einen professionellen und leicht zu administrierenden Shop auf Basis der quasi-Standards Magento oder Shopware erstellen. Ob als mandantenfähige B2B-Lösung oder über mehrere Domains mit unterschiedlichen Shops und Artikelkatalogen - wir zeigen Ihnen die Lösungen.

Pagespeed - Googles Anforderungen an moderne Websites

pagespeed

Google Page Speed wurde erstmals 2011 vorgestellt. Mit dieser Hilfe von Page Speed lassen sich Internetseiten auf ihre Optimierungen hin prüfen. Google Page Speed berücksichtigt dabei den HTML-, CSS-, und JavaScript-Aufbau der Seiten. Weiterhin wird geprüft, ob Bilder und Grafiken ausreichend komprimiert worden sind oder ob noch Reserven bestehen.

Jeder von uns kennt die Frustration, wenn man vor dem Rechner sitzt und für jede neue Seite vergeht eine gefühlte Ewigkeit. Auch Google zieht deshalb die Page Speed heran und bevorzugt Seiten, die alles dafür tun die Performance zu steigern. Angefangen bei dem Aufbau der Seite, über perfekte Komprimierung der Dateien, bis hin zu schnellen dedizierten Servern.

SEO Relevanz - ist meine Seite schnell genug für Google?

Pagespeed ist ein Rankingfaktor - das ist schon länger bekannt.
Hier ein Beitrag von Matt Cutts  zu diesem Thema.

Untersuchungen bei amazon haben ergeben, dass 100ms längere Ladezeiten den Umsatz zum 1% einbrechen lassen. Und Marissa Mayer von Google bestätigte, dass 500ms längere Ladezeiten die Suchanfragen um 20% reduzieren.

Sowohl die mobile Version als auch die Desktopversion lassen sich individuell optimieren und prüfen. Hierbei sollten die folgenden Faktoren beachtet werden:

  • Gzip-Komprimierung einschalten
  • Server-Caching nutzen
  • 301-Weiterleitungen reduzieren
  • Kein shared Hosting
  • Webserver optimal konfigurieren
  • Möglichst wenig HTTP-Requests
  • Kein Spaghetti-Code
  • CSS-Stylesheets zusammenfassen
  • Bilder maximal komprimieren
  • CSS-Sprites nutzen
  • Inline-Frames vermeiden

Ist ein Favicon wichtig für die Suchmaschinenoptimierung?

favicon

Ein Favicon, also eine kleine Bilddatei die in der Adresszeile eines Browsers neben der URL angezeigt wird, dient dazu die Site zu branden. Auch bei den Lesezeichen und Registerreitern tauchen diese kleinen Icons auf und sorgen so für einen nachhaltigen Wiedererkennungswert.

Auch für die mobilen Betriebssysteme iOS und Android lassen sich spezielle Größen auf dem Webserver hinterlegen und dienen dann als Buttons auf dem Homescreen. Es macht schon viel Arbeit all die verschiedenen Auflösungen und Varianten zu erstellen und zu verlinken, aber es sollte auch in Hinblick auf die Usability nicht gescheut werden.

Wie wird ein Favicon eingebunden?

Theoretisch könnte man eine Datei mit Namen favicon.ico in das Basisverzeichnis legen. Die meisten Browser würden es dann auch erkennen, aber leider nicht alle. Vom W3C wird deshalb empfohlen, das Favicon über ein HTML-Element zu referenzieren, das im Head-Bereich der Seite folgendermaßen angelegt werden muss. Hierbei ist zu beachten, dass die Bezeichnung für den Internet Explorer "shortcut icon" sein muss, da erst die Version 11 auch die W3C-konforme Version "icon" beherrscht: 

<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">

Die Größe des Icons sollte 16×16 oder 32×32 Pixel betragen und im .ico Datei-Format erstellt sein. Es kann zwischen 16 bis hin zu 16,7 Millionen Farben enthalten.

Für iphones gibt es spezielle Größen und auch eine eigene Form der Einbindung, wobei Android sich ebenfalls der hinterlegten apple-touch-icons bedient:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">

Zusammenfassend lässt sich sagen, dass die Usability durch ein Favicon gesteigert wird. Es ist also ein wichtiger Faktor.

Im Mix der SEO-Mosaiksteinchen ergänzt das Favicon das Gesamtbild und stellt so einen weiteren Beitrag zum Ranking dar. Testen Sie Ihre Seite mit einem Tool wie seitwert.de, so wird auch geprüft, ob ein Favicon verlinkt ist.

Auf Facebook postenAuf Twitter postenAuf LinkedIn posten Empfehlen Sie diese Seite auf Google+

Weitere Projekte

Image Broschüre für unseren Kunden tvh. Beratung, Gestaltung und Druck aus einer Hand.

tvh

tvh

 

Neue Anzeigenserie für Fachzeitschriften, um die USPs unseres Kunden tv Heide optimal zu präsentieren.

tvh Anzeige

 

6-seitiger Salesfolder mit aktuellen Produkt-Highlights der Firma FantasTick.

FantasTick Salesfolder

FantasTick Salesfolder

Contact Details

horst Werbung
Christian Horst
Mühlenkamp 37
22303 Hamburg
+49 (0)40 33 42 46 75
+49 (0)40 33 42 46 76
Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Google Analytics

Die Seite verwendet das Tool Google Analytics.

Besucher können sich hier informieren und die Datenschutzerklärung einsehen, sowie Browserplugins herunterladen.

Valides Markup

Die Seite wurde valide und mit größter Sorgfalt programmiert.

Sowohl html5 als auch CSS entsprechen den Richtlinien des W3C, damit moderne Browser diese Seiten einwandfrei darstellen können.

Site Information

Die Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Downloads und Kopien dieser Seite sind nicht erlaubt.

Impressum
Datenschutz