Marcus Pentzek, der Psycho-Seo fragte mich an, ob ich seine Psychic-seo.de nicht responsive machen möchte und das Layout an das Google Analytics Design annähern könnt.

Dieser Tage ging das neue Layout online und es sind sicher noch Feinheiten zu ändern, denn viele Bereiche auf dieser Seite bieten die Möglichkeit WordPress Widgets zu nutzen und ich kann vorher nicht wissen, welche Marcus haben mag. So kommt es, dass er jetzt grade noch zwei Suchfelder direkt obereinander in der mobilen Ansicht hat. Diese beiden Suchfelder sind in der Desktop Ansicht wunderbar aufgeteilt, mobile ist einfach eine zuviel. Auch änderte er seine SocialButtons, daher muss auch da nachgebessert werden, weil SocialButtons entwickeln ihr Eigenleben, davon kann jeder WebDesigner sicher viele Geschichten erzählen .

Die Headernavigation muss mobile noch an seine neuen Buttons angepasst werden. Der weiße HoverEffekt, den er dort erzeugte ist mobile kaum lesbar. Und da Marcus derzeit in China daheim ist schläft er, wenn ich munter bin und umgekehrt.

Also dauert alles ein bisschen länger, dies macht aber nichts: Gut Ding mag Weile haben und dennoch zeige ich sie her, denn responsive Design hat eben seine Tücken.

mobile First oder Desktop First ein Layout planen

Es wird viel diskutiert, ob man die mobile Ansicht vor der Desktop Ansicht machen sollte oder umgekehrt. Für mich ist dies keine technische Frage, sondern eine der prinzipiellen Planung eines Layouts.

Ich fragte zb Marcus was er am Desktop haben mag und was er davon in welcher Reihenfolge bei den mobilen Ansichten sehen mag.
Erst dann beginne ich in meinem Kopf die “Sektionen” des Layouts zu erstellen.
Herzeigen kann ich dies aber nur in zeitlicher Reihenfolge, im Kopf passiert dies gleichzeitig. D.h. ich denke nicht mobile First oder Desktop first, ich denke an ein Layout für alles.

die Anatomie des dreispaltigen Layouts

1. sichtbar sind drei Spalten technisch nur zwei
Sichbar ist, dass das derzeitige Layout auf psychic-seo.de ein dreispaltiges ist. Technisch ist es ein klassisches Header, Sidebar Inhalt, Footer Layout, also ein zweispaltiges. Bei dem sich die “Inhalt Spalte” nochmals aufteilt.

2. Der sichtbare Header Bereich weist insgesamt 7 verschiedene Sektionen auf, die somit alle einzeln gestaltbar sind. Diese 7 Sektionen sind: Titel, Mitte Bild, Avatar, der zweispaltige Text, der in “span” aufgeteilt wurde, die horizontale Button //Text Navigation und die Social Buttons.

3. Die Sidebar ist widgetfähig
Sowohl die Sidebar an sich wie jedes Widget, das Marcus nutzt wird zu einer gestaltbaren Sektion. Somit sehr flexibel in der Darstellung.

4. Der Bereich rechts neben der Sidebar teilt sich in fünf Sektionen auf.
Artikel, Werbung [widgetfähig], vorherige – nächste Seite Navi, Kommentare und dann noch die Sektion, die drei Boxen beinhaltet [widgetfähig].

5. Der sichtbare Footer bringt nochmals den Seitentitel und das “Coypright”.

so ändert sich die mobile Ansicht dieses Layouts

1. Änderungen im sichtbaren Header
Das Bild in der Mitte verschwindet, der zweizeilige Text wird einzeilig, die horizontale Navi zum MenuButton und auch die SocialLinks werden sehr oft “verrückt”.

2. Die Sektion “Werbung” rutscht direkt unter dem Artikel und dann erst kommt die vorherige – nächste Seite Navi und alle anderen Sektionen.

Dazu musste ich den WordPress Loop aufteilen, weil sonst die Kommentarfunktion nicht richtig funktioniert und ich auch sonst zuwenig Möglichkeiten hätte das HTML und die CSS Klassen für das korrekt “untereinander Rutschen” unterzubringen.

3. Die Sidebar kommt direkt vor dem sichtbaren Footer, somit als vorletzte in der Reihe.

Das GridSystem dahinter und ein Danke

Mein Dank geht an 34 Responsive Grid System by Kemal Yılmaz. Ich hab viele GridSysteme bereits getestet, ich komme mit diesem einfach am besten zurecht. Die Benennung der CSS Klassen ist für mich nachvollziehbar und verbraucht relativ wenig Zeichen im HTML.
Es ist stabil, liefert mir die Möglichkeite rechte Spalten nach linken Spalten im Quelltext anzuzeigen und das bieten nicht alle an. Liefert auch wichtiges für die mediaQueries und IEs kleiner IE9.

Außerdem kann ich es mir zusammenstellen wie ich es grade brauche. Hier entschied ich mich für ein 9-spaltiges Grid mit 1.5% margin links und rechts. Die maximale LayoutBreite sind 1200 px und die media queries setze ich nach “hier bricht das Design”.

Besonderheiten in diesem WP Theme sind außerdem noch

1. Seiten – Artikel Navigation

Vorheriger nächster Beitrag ist bei WP bekannt, hier gibts dasselbe auch für statische Seiten und zwar für alle Seiten nicht nur für Unterseiten zur Hauptseite.

2. Es gibt einige Quicktags für Marcus, damit er zb seine Startseite in Sektionen /Spalten aufteilen kann wie er möchte.

3. Außerdem weiß ich, dass Marcus gerne auch in den Templates selbst was ändern macht und dies meist mittels WP Design Editor habe ich ihm die Anzeige der Theme Templates soweit es mir möglich ist geschlichtet. Wie ich dies tat beschrieb ich hier auf der Texto.de.

Design Spielereien

Marcus wollte soviel Annäherung an Google wie möglich und so spielte ich mich mit Rahmen und HoverEffekten.

Es machte mir Freud für Marcus zu arbeiten und dieses Layout zu erstellen. Selten kann ich all die vielen Möglichkeiten der Verschieberei bei einem mobilen Layout gestalten. Noch trauen sich zu wenige

Schon länger ging iso9001.info online und ich mag nicht nur dieses Projekt herzeigen, sondern auch das Briefing öffentlich machen und meine Lösungen herzeigen. Prinzipiell wurde ein responsive WordPress Theme gewünscht und zwar nur mit Seiten und keine Beiträge oder Kommentare.

Das Briefing zum Projekt iso9001

Ganz schlicht und einfach wünschte sich Herr Grosser das Layout für seine neue Domain iso9001.info.
Die Navigation soll so sein wie bei Amazon – also geteilt. Außerdem wünschte er sich ganz viele Kontaktmöglichkeiten im obersten sichtbaren Bereich, egal wie klein oder groß der Bildschirm ist.
Das vorhandene ExcelFormular zur Berechnung der Kosten einer ISO Zertifizierung sollte ebenfalls neu werden und schön. Dabei war das Drucklayout sehr wichtig. Diverse Buttons, um manche Texte “bunt” machen zu können rundeten dann das Briefing ab.

Navigation wie bei Amazon

Der einfache Teil dabei war das benutzerdefinierte Menu von WordPress zu teilen. Ich schrieb dafür eine “walker class”. Aufwändiger war es dann dies so zu gestalten, dass der Inhalt nicht “springt”, wenn einmal keine Unterpunkte bei der Navigation da sind und die Gestaltung für die kleinen Devices. Derzeit fand ich keine sinnvolle technische Möglichkeit “doppelte Menüangaben” im HTML zu verhindern.

viele Kontaktmöglichkeiten im sichtbaren Bereich

Dazu nutzte ich ein einfaches “Aufklapp Script” mit einer Fallback Lösung, wenn jemand kein JavaScript aktiviert hat. Die Positionierung der einzelnen Bereiche für das responsive Layout waren eine lustvolle Spielerei bis sie überall dort erschienen wo sie sollten und nicht wo sie wollten….

Quicktags für die Textgestaltung

Herr Grosser nutzt gerne den Texteditor von WP zum Schreiben und daher erstellte ich ihm einige Quicktags damit er seine Texte so bunt machen kann wie er es gerne wollte.

Formulare zur Berechnung der Kosten

Das Formular zur Berechnung der Kosten einer Zertifizierung war vorher ein Excel Formular und wurde nun in php umgesetzt. Online zu sehen ist es hier. Soweit sinnvoll und möglich sind nun html5 Elemente darin, die vor allem mobilen Nutzern das Ausfüllen erleichtern. Außerdem kann man sich das ausgefüllte Formular drucken – entweder auf Papier oder eben als .pdf je nachdem was jemand zur Verfügung hat.

Tabellen und kleine Ausgabegeräte

Es gibt viele Lösungen für responsive Tabellen. Doch die meisten brauchen eine eigene ID oder andere Angaben damit sie auch funktionieren. Herr Grosser erstellt viele Tabellen und oftmals mit TablePress. Daher sind all die Scripte kaum bis gar nicht nutzbar. So verkleinerte ich die Tabellen so gut es ging und bei Bedarf erscheint ein horizontaler Scrollbalken damit die Inhalte zumindest gut lesbar noch sind.

Meine Zusammenfassung

Dieses WP Theme sieht sehr simple aus. Der Teufel steckt wie meist im Detail und ist unsichtbar für die meisten. Die Inhalte und deren Gestaltung waren nicht meine Aufgabe, dies kann Herr Grosser sehr gut alleine und er machte es auch gern, soweit ich erkennen konnte.

Es war mir eine Freude mit Herrn Grosser zu arbeiten. Unsere Skypegespräche waren zielführend und dennoch lag immer auch Humor in der Luft.

Wird bei uns vielerorts noch diskutiert, ob man denn jetzt schon eine responsive Webseite brauche, ist in vielen Ländern der mobile Zugang zum WWW mittlerweile die einzige Möglichkeit geworden.

In diesem Artikel finden Sie Studien, dass langsame mobile Webseiten Kunden kosten: 4sec dann klickt 1 von 4 Nutzern weg

Hilfreiche Fragen in Form einer ToDo-Liste, auch als .pdf: ToDo-Liste für Entscheider

Und schlussendlich auch Anregungen für die Technik, die das mobile Web einfach schnell macht und somit den Nutzern ein tolles Erlebnis und der Firma volle Kassen beschert: mobile Seiten schneller machen, aber wie

max 4 sec, dann ist die Geduld bei 1von 4 Nutzern aus

1 von 4 Nutzer klickt eine Seite weg, wenn sie länger als 4 sec zum Laden braucht.

50% warten bis 10 sec, lädt die Seite dann nicht, kehren 3 von 5 nicht mehr zurück.

25% der mobilen Nutzer haben nur mehr ein Smartphone und nutzen absolut kein anderes Gerät mehr => Tendenz steigend.

Dies ist mit einer der Gründe wieso zb dieser Tage zu dem Verkauf der Windows Aktien geraten wurde => Haushalte haben immer seltener einen Desktop PC oder Laptop daheim.
[Business.chip.de]

iPad oder andere TabletPCs sind der Masse oftmals zu teuer. Eher haben sie noch einen Kindle oder ein anders Lesegerät für E-Books.

mehr INFO: Speed Kills Conversion

ToDo – Liste für Entscheider

• 1. Geschwindigkeitstest für die Webseite im mobilen Web und in realer Umgebung durchführen lassen

  Ja nie Geschwindigkeitstest im hauseigenen WLAN durchführen. Ihre Kunden surfen zumeist mit 56k und nicht mit WLAN von einem Hochgeschwindigkeitsserver.

• 1.1 Fragen an die Techniker
  • Wieviele Sekunden braucht es bis unser Kunde die Seite sieht?
  • Flackert der Seitenaufbau?
  • Wieviele Sekunden braucht es bis unser Kunde das erste Mal einen “touch” durchführen kann?
  • Wieviele Daten muss unser Kunde herunterladen, um unsere Seite nutzen zu können?

    Ihre Kunden haben eine Datenflatrate, verbrauchen sie zuviele Daten können sie weniger oft bei ihnen einkaufen, bestellen, sie kontakten.

• 2. Ausrechnen lassen:
  • a) Wieviel kostet ein verlorener Kunde.
  • b) Wieviel kostet Reputationsverlust unserer Marke.
  • c) Wie hoch ist die Investition, damit die mobile Version der Webseite dauerhaft schneller ist? ==> Handeln!
• 3. Entscheiden: Geschwindigkeit ist wichtiger als Ästhetik
  • Designer mit Bonus belohnen, wenn sein Design die Webseite schneller macht.

mobile Seiten schneller machen aber wie

Empfehlung: Pack dein CSS, das du oberhalb des Fold brauchst, direkt in den <head> und nutze asynchrones Javascript nach dem CSS.

Interessante Randbemerkung: Für manche Nutzer ist das mobile Web der einzige Zugang zum Web überhaupt. Nämlich für 75% in Ägypten und immerhin schon für 25% in USA.

Breaking the 1000ms Time to Glass Mobile Barrier

Information von Ilya Grigorik, Arbeitgeber Google.

Performance Gewinn mit Bildern als Data-URL

Länger schon wird von einigen behauptet, dass das Einbinden von Bildern als Data-URL besser sei, weil schneller. Sergej Müller machte den Test und fand eindeutig heraus, dass dies ein Irrtum ist.

Durch die Base64-Kodierung der Bilder hat sich der „Gewicht“ der Gesamtdatei nahezu verdoppelt. Das trägt dazu bei, dass der Server eine deutlich größere Menge an Daten zu übertragen hat – eine kostspielige Prozedur…. Data-URL und die Performance

Für alle die WordPress einsetzen, empfehl ich außerdem Sergej Müllers Plugin “Cachify“. Ich habe viele getestet, aber dieses ist nicht nur einfach zu nutzen, sondern brachte mir den höchsten Performance Gewinn.

Tools zum Testen der Geschwindigkeit im mobilen Web

Gibts hier bei mobilen Boilerplate auf Github.

Lesenswerte Ressourcen, um das mobile Web besser zu verstehen

• Folgende Seite hilft 1. die richtigen Fragen zu stellen; 2. den Unterschied zwischen Design und “Experience” ein wenig näher zu kommen und vor allem nimmt sie einem die Vorstellung je perfekt sein zu können => das befreit auch
  Mobile Web Best Practices
• Und wer als WebDesigner sich mehr mit responsive WebDesign beschäftigen mag, dem empfehl ich das Video Mobile Experience Design Strategy with Luke Wroblewski . Es verändert das Verständnis von Geschwindigkeit, weil diese zum Erlebnis wird.

ich lern genauso jeden Tag dazu , mts

Gefragt wurde ich dieser Tage wie man es schafft, dass ein Text in einem span umbricht. Das span Element war korrekt in einem div eingebettet. Und dieses hatte eine feste Breite in em.

Dies ging solange gut bis einmal ein sehr langes Wort in dieses html Konstrukt gelang . Und dann brach das lange Wort aus der festen Breite des Div aus.

Hier bringe ich eine simple Lösung wie einen Zeilenumbruch in jedem inline Element, also auch dem Span erzwingen kann.

Span in einem Blockelement mit fester //flexibler Breite und langer Text

Der problematische Teil auf der Website des Fragenden sah ungefähr so aus. Man sah den Rahmen des umgebenden div und das lange Wort ragte weit über diesen hinaus.

Zeilenumbruch in einem span erzwingen

Gewünscht war aber untenstehende Ansicht. Auch das lange Wort sollte sich an die Breite des ihn umgebenden html Elements anpassen.

IE8 benötigt ein hasLayout, damit dies funktioniert, daher supporte ich diesbezüglich diesen Browser nicht!

 
<div style="width:10em;">
<span style="word-wrap: break-word; word-break: break-all;"> 
 
ganzlangesWort
 
</span></div>

Das inline CSS habe ich nur hier für die Beispiele verwendet, sonst vermeide ich es inline CSS zu verwenden.

word-wrap Eigenschaften und Browsersupport

Ob dies dann immer einen sinnvollen Textumbruch ergibt ist eine andere Frage. Zumindest bricht das Layout nicht und verhindert daher, dass der zulange Text oder das zulange Wort in einen anderen Text hineinfließt und alles unlesbar wird.

Daher kann dies für eine Breadcrumb sehr wohl hilfreich sein. Wenngleich ich es nur im Notfall dafür verwenden tät.

andere Länder andere Sprachen und andere CSS3 Lösungen

In den sogenannten CJK Sprachen würde word-wrap nicht ausreichen. Aber auch in Chinesisch, Japanisch und Koreanisch mag man hie und da einen Zeilenumbruch in einem span erzwignen und dafür ist word-break: break-all oder word-break:hyphenate. Auch word-break ist vererbend..

Browsersupport von word-break

Bis auf den Opera verstehen dies alle modernen Versionen der gängigsten Browser.

Ich verwende daher meist beide, weil ich nie weiß, ob sich nicht jemand einen Artikel in eine dieser Sprachen automatisiert übersetzen läßt.

responsive Layout mitbedenken

Word-wrap und word-break eignen sich nicht nur für den erzwungenen Zeilenumbruch in einem inline Element wie dem span, sondern können auch bei der Erstellung eines responsive Layouts für “pre” und “code” sehr hilfreich sein.

weitere INFO zu div und span: Unterschied zwischen einem Div und einem Span

SEO ist ein Teil der Werbemaßnahmen für ein Unternehmen das im WWW erfolgreich sein mag. Die Aufgaben eines SEO haben sich in den letzten Jahren drastisch gewandelt. Spätestens seit dem ersten Panda Update reicht es nicht mehr ein paar Überschriften zu lesen. Halbwissen kostet Geld und Kunden. Sehr viele SEO Tools und SEO Plugins//Zusatzmodule erwecken den Eindruck, die Verwendung derselben sei bereits “SEO”.

Ich nehme solche Fragen sehr ernst, zeigen sie doch auf, dass das Wort “SEO” bekannt wurde. Die Tragweite von SEO aber in vielen Köpfen der Unternehmer noch nicht angekommen ist.

SEO ist eine Marketing Investition.

Wer eine Investition ohne Diagnose und nachfolgender Strategie tätigt handelt gegen jedes unternehmerisches Denken. Die falsche oder fehlende Diagnose kann tausende von Euros und Kunden kosten und daher sollte sie das Kernstück jeder Werbemaßnahme sein. Diese SEO Diagnose einzufordern ist Chefsache.

Welcher SEO darfs denn sein, zeigt die Kernbereiche der Suchmaschinenoptimierung auf und hilft so das große Spektrum an SEO Maßnahmen eher zu verstehen und für sich gezielt zu nutzen.

der Diagnostiker

Gefragt ist hier profundes Wissen. Total verkürzte Stichworte zu den einzelnen Punkten.
a) Die derzeit wichtigen Google Updates

Panda Update

Webseiten werden thematisch in Cluster eingeteilt und innerhalb dieser stellt sich die Frage, ob einzigartige Inhalte den User dazu verführen sich lange auf der Seite aufzuhalten. Außerdem ist es wichtig, dass der User nicht mehr dieselbe Suchanfrage via Google startet. (Bouncerate). Bereits wenige inhaltsschwache Unterseiten können einer Domain schaden. Guter Content ist keine Frage des Inhalts sondern der User Experience. Ebenfalls wichtig ist der Blick auf alles was “above the fold” sich zeigt. Content Strategie und die Struktur der Website wird wichtigst. WDF*IDF [Donna Harman]ebenfalls ein gutes Stichwort.

Pinguin Update

Der Ankertext ist es und die Qualität der Backlinks. Es geht um Backlinks und um sonst nichts.

Venice

Der “Standort des Suchenden”, das verwendete Gerät bei der Googlesuche und die Relevanz der Seite zu diesem Standort entscheiden mit über das Ranking. Der User sieht Suchergebnisse, die sich nach seinem Standort und seinem Gerät richten. Allgemeingültige Aussagen über “das” Ranking sind kaum mehr möglich.

EMD Update, die Exact Match Domain die Keywort Domain

Wird die Keywort Domain korrekt verwendet. Bietet sie was ihr Name verspricht.

b) Gibt es ein Penalty oder ist der Algorithmus.
Ein Penalty ist eine “händische” Herunterstufung der Website. Seit neuestem gibt es dazu eine Nachricht über die Webmastertools.
Es kann ein Bad Link Penalty genauso sein wie ein Penalty wegen gekaufter Links oder anderer Spammaßnahmen. Aus einem Penalty kommt man nur mit einem “reinclusion request”.

c) Kann der Googlebot alles lesen
Angefangen vom html bishin zu diversen Scripten, den Einträgen in die hoffentlich vorhandene robots.txt und in der htaccess. Die korrekte Verwendung der meta tags bishin zu title und description sind hier die Themen. Verstecken sie zuviel an Inhalten, zb in jQuery Tabs … .

der Statistiker

SEO Tools gibt es aktuell vermutlich mehr als selbst dem größten Statistiker lieb sein kann. Sie alle liefern wunderbare Statistiken. Herrlich bunte Kuchen, die in keinem SEO Reporting fehlen dürfen.

Kennt ein SEO jedoch nicht den Unterschied zwischen Korrelation [Zusammenhang] und Kausalität [Ursache und Wirkung] ist der kritische Punkt erreicht.

Beispiel wo sich Korrelation und Kausalität beißt:

Sehr viele SEO Agenturen versenden wöchentliche oder tägliche SEO Reportings. Wenn diesen Report niemand liest oder mit den Ergebnissen arbeitet ist das nett, aber absolut sinnlos. SEO Reportings für die Akten helfen niemanden weiter. Entscheiden sie was sie wirklich wissen wollen und vor allem was ihnen dieses Wissen nützt.

Tools die Hilfe zu WDF*IDF [Donna Harman] bieten sind ebenfalls modern. Haben sie jedoch kaum bis gar keine Ahnung von Textstatistik oder Semantik sind deren Daten Output für sie nutzlos.

der BilderChef

Gezielte Namensgebung der Bilddateien, alt-Attribute nutzen, Größe der Bilder und Performance der Webseite. Texte rund um das Bild bishin zur technischen Bewertung der verwendeten Galerie oder des Sliders sind die Spezialaufgaben des Bilder SEO, neben dem Wissen um die sich stets ändernden Rankingfaktoren bei Bildern in der Googlesuche.

Seit der neuen Bildersuche in etlichen Ländern rund um Deutschland wird auch das Wissen um Umleitungen in der htaccess sehr wichtig.

Bilder in Social Medien zu präsentieren ist eine rechlich schwierige Angelegenheit, der Bilder SEO sollte sie zumindest auf juridische Beratungsmöglichkeiten hinweisen.

Videos YouTube &Co

Vor -und Nachteile ein Video selbst zu hosten oder eine /mehrere der Video Plattformen zu nutzen.
Branding, Tracking, technische Möglichkeiten und die Tatsache, dass etliche große Firmen VideoPlattformen im Intranet sperren sind nur einige der überlegenswerte Punkte.

Genauso muss ein SEO, der sich auf Videos spezialisierte um die RankingFaktoren derselben wissen. Und wie man diese auf den diversen VideoPlattformen für sich nutzen kann.

der LokalePlatzhirsch

Immer wenn Keywort+Stadt für sie relevant ist, dann brauchen sie einen SEO, der sich der lokalen Suche verschrieben hat. Sollte ihre Firma eine Standortänderung vornehmen, dann empfehl ich dringend vorher einen lokalen SEO zu konsultieren, damit sie keine Rankings verlieren.

Wie trägt man seinen Domain richtig bei Google Places ein? Wie nutzt man Microformate [Stichwort Sterne] für eine bessere Platzierung? Ist ihr Standort auch in Google Maps zu finden? Kundenmeinungen und ihr Ranking in der lokalen Suche. Wie verbessern sie ihr Ranking nachhaltig innerhalb der lokalen Suche. usw… .

der Linkbuilder

Bis vor knapp 3 Jahren waren natürliche Links wirklich noch möglich. Heute gilt Linkgeiz allüberall und wer fest daran glaubt, dass guter Inhalt alleine ausreicht, um genügend Backlinks zu bekommen, möge daran glauben.

Für alle anderen empfehle ich sich an einen Linkbuilder zu wenden.

• Welche Backlinks von wo und in welcher Qualität?
• Welche Backlinks in welcher Häufigkeit und wenn wielange und mit welchem Ankertext.
• Gibt das Budget vielleicht sogar einen guten Linkbait her?
• Brauchen sie Links zum Branden der eigenen Marke oder für Googles Suche?

Als Faustregel gilt: Qualität schlagt Quantität auf Dauer.

der Content-Manager

Der Content Manager ist keine Software, sondern ein Mensch der Inhalte und deren Strukturierung liebt.
Haben sie ein Forum, ein großes Magazin dann wird er für sie immer wichtiger.
Guten Content mag der Panda besonders gern, daher stellt sich die Frage wie sie ihre Inhalte aufbereiten. Wie sie geplante Inhalte auch der Suchmaschinenoptimierung unterordnen ohne deren Relevanz zu schmälern.

Ob der Content Manager als SEO WDF*IDF [Donna Harman] nutzt ist eine strategische Entscheidung. Prinzipiell sollt er es verstehen und damit spielen können. Zumindest eine Beratung welche Texter sie engagieren wäre eine Überlegung wert.

Wie verführen sie mit Snippets bei Google, welche Titel holt auch den letzten skeptischen Kunden hervor und wie präsentieren sie indivuelle Produktbeschreibungen in ihrem Shop.

der technische SEO

Zu all dem gehört auch Technik. Der SEO muss kein Programmierer sein, obwohl dies die Arbeit erleichtert, doch zumindest muss er wissen was technisch umgesetzt gehört. Wie erstellt man titles, meta description in diversen CMS und ShopSoftwaren. Die htaccess muss ihm vertraut sein genauso wie die robots.txt und außerdem sollt er sie beraten können welche html Tags sie zur Textgestaltung nutzen können. Welche Scripte bei Google schaden muss er sehen und wie sie es ändern können.

Als Teamplayer ist es hilfreich, wenn er hier mit ihrem WebDesigner zusammenarbeitet.

der Stratege

Jeder SEO ist auch immer ein Stratege. Welche Maßnahme wann, wo, wie und vor allem wozu. Alles Wissen ist sinnlos, wenn es nicht geordnet einer Zielerreichung dient. Je klarer die Strategie desto eher sind Krisen bewältigbar, denn niemand weiß was Google morgen vorhat.
Über die Strategie an sich entscheidet im Normalfall jedoch nicht der SEO, es ist Chefsache. Der SEO schlägt die Strategie vor und hat sie im besten Fall über Für und Wider aufgeklärt. Sie überlassen hoffentlich auch nicht dem Einkäufer strategische Geschäfsentscheidungen, genauso wenig sollten sie es bei SEO tun.

der krisensichere Partner

Ein SEO weiß, dass alles was er weiß morgen falsch sein kann. Krisen die daraus entstehen sind ihm/ihr vertraut. Zum krisensicheren Partner wird ein SEO allerdings erst dann, wenn er auch als solcher behandelt wird. Betrachten sie selbst SEO als austauschbare Dienstleistung wird auch jede SEO Agentur,jeder SEO ihr Projekt, ihre Firmenpräsenz als austauschbaren Kunden betrachten, der einem nur genausoviel wert ist wie Geld über den Tisch kommt.

Engagement kann man nicht kaufen, es ist immer eine Frage des persönlichen Umgangs untereinander. Schlussendlich ist es ihre Firma, die von dieser Dienstleistung profitiert. Möchten sie mehr vom Dienstleister, dann ist dies selten eine Frage des Geldes, sondern der Wertschätzung.

Schalten sie niemals ihren Hausverstand ab, auch dann nicht, wenn es um SEO geht.

ebenfalls zum Thema

Marcus Pentzek bringt das Dilemma zwischen Full-Service wünschen der Kunden und der Unmöglichkeit von SEO Agenturen diese zu erfüllen. Oliver vom Fob-Marketing zeigt in seinem Kommentar klar auf, woran es dabei hakt. Gibt es die perfekte SEO Agentur

Andre Alpar bringt in seinem Artikel die unterschiedlichen Entwicklungen im Leben mancher SEOs. Und er stellt sich dabei u.a. Frage: “Will man die SEO Szene / Branche klassifizieren und in möglichst wenige, aber trennscharfe Gruppen unterteilen,… Das Panoptikum der SEO Szene

Mancher WebDesigner oder Webmaster leitet gelöschte Seiten auf die Startseite um. Seit Herbst 2012 erkennt Google dies und meldet diese umgeleiteten Seiten in den Google Webmastertools als “Soft 404″. Und sie schicken diese Meldung auch per “Nachricht”.

Eine Domain mit vielen Soft 404 Fehlern wird u.a. vom Googlbot dann nicht mehr sooft gecrawlt. Dies hat Auswirkungen auf die Aktualität der Seite und daher auch auf ihren Platz in den Suchergebnissen.

Google hat also seinen Umgang mit umgeleiteten Error 404 und Error 410 seit Herbst 2012 offiziell geändert. Ich bringe hier die wesentlichen Änderungen und was sie schlussendlich bedeuten. Wie man den Status Code 404 und 410 bei seiner Domain überprüft und welche Möglichkeiten man hat diesen zu ändern. Außerdem ein paar meiner spekulativen Gedanken wieso diese Änderung von Google kam.

Soft 404 => Falsche 404

In den Google Webmastertools (WMT) sieht man diese Fehler als “Soft 404“. Diese Wortwahl suggerierte zumindest mir, dass diese nicht soo wichtig sind. Das ist ein großer Irrtum, wie mir ein Test bewiesen hat.

Wie handhabt Google Status 404 oder 410

Wenn eine nicht vorhandene Seite angefordert wird, gibt der Server gewöhnlich einen 404-Fehler (Seite nicht gefunden) zurück. Dieser HTTP-Antwortcode teilt sowohl Browsern als auch Suchmaschinen mit, dass die Seite nicht vorhanden ist.
Daher wird der Content der Seite (falls vorhanden) von Suchmaschinen nicht gecrawlt oder indexiert.WMT Hilfe

Dies bedeutet:

Bei StatusCode 404 oder 410 dreht der Googlebot um und indiziert den Inhalt dieser Seiten nicht.

Auswirkungen auf die Domain bei Soft 404 Fehlern

Der Google Bot hat für jeden Crawling Durchgang eine bestimmte Zeit zur Verfügung. Verbraucht er diese Zeit, um einen falschen HTTP Statuscode zu erkennen und umzusetzen, hat er weniger Zeit für das Crawling der anderen Seiten auf dieser Domain.

…… Aufgrund der von Googlebot aufgewendeten Zeit für nicht vorhandene Seiten werden Ihre tatsächlich vorhandenen, eindeutigen URLs möglicherweise nicht so schnell erfasst oder nicht so häufig besucht, was die Crawling-Abdeckung Ihrer Website beeinträchtigen kann. Außerdem möchten Sie sicher nicht, dass Ihre Seite bei der Suchanfrage [Datei nicht gefunden] weit oben rangiert.WMT Hilfe

Hat man nun seine Error 404 Seiten auf die Startseite umgeleitet, werden ziemlich sicher die Unterseiten weniger oft vom Google Bot erfasst und ranken daher schlechter.

Ich weiß zwar nicht wer gezielt nach “Datei nicht gefunden” sucht, aber wenn das das einzige Ranking der Startseite wird, find ich es nicht so prickelnd.

Den HTTP Status der Error Seiten überprüfen

Eine eigene Error 404 oder 410 Seite zu haben, bedeutet nicht, dass die den richtigen Code sendet. Es gibt folgende Möglichkeiten dies zu überprüfen.

1. In den WMT findet man unter Status ==> Abruf wie durch Google die Möglichkeit dazu. Die genaue URl eingeben und ein wenig warten. Bei einer Error 404 Seite muss der Status “nicht gefunden” erscheinen.
2. Einen der angebotenen HTTP Status Checker Tools nutzen, wie Rex Rex Swain. Dort die URL der Fehlerseite eintragen und dann nach “Receiving Header” suchen. Es muss “HTTP/1.1·404·Not·Found” dabei stehen, dann ist es richtig.

Ich suchte Bananen auf deiner Domain und Du lieferst mir Birnen

Der Suchenden klickte auf eine URL in der Hoffnung dort einen Artikel über Bananen zu finden und auf einmal ist er auf der Startseite und findet dort zwar ähnliches, aber nicht genau das was er suchte.

Benutzerfreundlich ist eine gut gestaltete eigene Error 404Seite. Die Leute bleiben dann wirklich einfach länger. Und dies senkt daher auch die gefürchtete Absprungrate in die SERPs.

Auch bei diesem Problem geht Benutzerfreundlichkeit und Suchmaschinenfreundlichkeit immer mehr Hand in Hand.

Den Status Code 404 oder 410 auf die Startseite umzuleiten ist daher nicht mehr zu empfehlen.

Vor drei Jahren war dieser Artikel vom Frank Doerr noch richtig. Seit Herbst 2012 empfehle ich diese Vorgangsweise keinesfalls mehr.

Spekulationen wieso Google umgeleitete Error 404 anders behandelt

Der allererste Grund ist die Menge an Webseiten. Es gibt nun Mal Milliarden von Webseiten, würde der Googlebot auch noch die Fehlerseiten durchsuchen, wäre dies einfach zuviel.

SEO Methoden ein bisschen besser verhindern:

• Linkpower von gelöschten Seiten mitnehmen. Grade bei Exired Domains wurden die gelöschten Unterseiten gern dazu verwendet, um der Startseite die Linkpower derselben mitzugeben. => das geht nicht mehr auf diese Weise.
• Genauso wurde dies doch auch mit Gewinnspielseiten oder anderen Linkbait Unterseiten gemacht. Hier ist Umdenken gefragt, neue Strategien sind sicher hilfreicher als eine Umleitung der Error 404 via Redirect 301.

Google kann diese falschen Error 404 nun einfach technisch einwandfrei erkennen. Vermutlich ging das vorher nicht.

Ich freu mich über Deine Spekulation wieso Google nun Soft 404 anzeigt und was dies für SEO bedeutet.

Google hat eine neue Bildersuche. Nicht jeder kann die bereits sehen. In Österreich ist sie bereits ausgerollt. Ich bringe hier Informationen was sich geändert hat.
Dann versuche ich zu erklären was diese Bildersuche drastisch verändert.
Welche rechtlichen Folgen diese Bildersuche auch für den Bildlieferanten – also jeden Webseitenbesitzer haben kann.

Und ich bringe Links zu Informationsquellen über Initiativen gegen diese neue Bildersuche genauso wie Informationsquellen über das Urheberrecht in Österreich. Dies betrifft vor allem auch Firmen aus Europa und der Schweiz, die eine österreichische Webseite haben.

Wer mit der neuen Bildersuche nicht einverstanden ist muss dies nicht einfach hinnehmen. Man kann den Google – Media bot auf unterschiedliche Art und Weise aussperren und aus rechtl. Sicht wird es nötig sein, etliche Bilder nicht mehr der GoogleBildersuche zur Verfügung zu stellen. Wie das geht erkläre ich ebenfalls.

Was hat sich geändert bei der Bildersuche

Googles Bildersuche zeigte und zeigt kleine Vorschaubilder. Klickte man vorher auf eines öffnete sich das angeklickte Bild in einer Lightbox und darunter sah man die Zielwebseite. Nun dies ist umständlich keine Frage, aber diese Umständlichkeit hat Google bei der letzten Änderung der Bildersuche selbst verursacht. Vorher kam man direkt zur Webseite.

Nun klickt man auf ein Vorschaubild. Die Thumbs verschieben sich und das Großbild ist direkt zu sehen. Es ist nicht mehr nötig auf die Webseite des Bildinhabers zu surfen.

Das ist als ob ich ein Essen zuerst total versalze nachher eines koche, das ein bisschen weniger Salz drin hat, aber immer noch zuviel und sag: Nun ist alles besser….

Paradoxon: Bildersuche ist wunderschön – aber….

Ariel Lambrecht beschreibt es in einem G+ Beitrag perfekt:

Was versteht man unter Hotlinking von Bildern

Das oben gezeigte Bild ist unter dieser URL aufrufbar.

 
http://www.webdesign-in.de/wp-images/2013/01/mts-bildersuche-hotlinking.png

Wenn sie nun diese URL nehmen und dieses Bild damit auf ihrer Webseite einbinden. Nehmen sie nicht nur ungefragt ein Bild von mir, sondern auch meine “Traffickosten”. Jeder Aufruf verursacht mir Kosten und sie haben das Bild .

Wie man sich vor Hotlinking schützen kann. Dies greift aber nicht wirklich bei der Bildersuche.

Besucherrückgang von bis zu 70% <==> Google wird Lügen gestraft

Ariel Lambrecht ist nur einer von vielen, die massive Trafficverluste zu verzeichnen haben. Im Forum webmasterworld wird von bis zu 70% weniger Besuchern gespochen. 70% bei amerikanischen Seiten

Google hat keine Inhalte.

Trafficverluste können für Künstler einen irren Schaden mit sich bringen. Die klassische WinWin Situation zwischen Webseitenbesitzern und Google ist mit dieser Bildersuche aufgehoben. Bis dato hieß es: wir liefern dir Inhalte Google und Du kannst damit Geld machen und wir Webseitenbesitzer erhalten im Gegenzug “Traffic” auf unseren Seiten. Das ist nun Geschichte.

Was viele Google Nutzer nämlich immer wieder vergessen:

Wer stellt denn noch diesem Unternehmen seine Werke zur Verfügung, wenn im Gegenzug keine Kunden, liebe nette Besucher bei ihm auf der Webseite vorbeischauen. Künstler leben vom Feedback, das ist weg.

Trafficverluste dokumentieren das Jahr 2012 meiner “Bilderdomain”

Ich dokumentierte hier bei dieser Vergleichsgrafik den Bildertraffic und den über die normale Suche von einer meiner Webseiten. Klar erkennbar ist hier der jahreszeitliche Verlauf. Dies ist eine österreichische Domain und daher kann ich sehr bald über Trafficveränderungen bei der Bildersuche berichten. Unter googlePunktat wurde diese Suche vor wenigen Tagen ausgerollt, Ende Februar habe ich sicher die ersten Vergleichszahlen.

Bilder, die unter CC-Lizenz stehen (jedoch ohne die erforderlichen Angaben).

Neben den befürchteten Trafficverlust und somit den Verlust von Geldeinahmen durch “weniger Bilder verkaufen können” gibt es massive Rechtsunsicherheit.

Es herrscht Rechtsunklarheit war dann für diesen Rechtsbruch verantwortlich gemacht werden wird. Thomas Hey’l hat dies bereits festgestellt und berichtet.

Dass man solche Bilder als “Thumbnail” also als sehr kleines Bild anzeigen darf, regelt ein Urteil aus dem Jahr 2011. Dies behandelt aber nicht die Bilder in Großansicht wie es diese Bildersuche nun macht. Urteil über die Darstellung von Thumbs I ZR 140/10 – Vorschaubilder II

Abmahnschutz: Image Bot aussperren

Hat man Bilder auf seiner Webseite für die man nur für diese Domain das Recht hat sie herzuzeigen und man fürchtet eine Abmahnung wegen der neuen Google Bildersuche, kann man sich so abhelfen:

A) Alle betroffenen Bilder in einen eigenen Ordner auf dem Webspace geben, die robots.txt nutzen und den Google Image Bot das indizieren genau dieser Bilder verbieten.

 
User-agent: Googlebot-Image
Disallow: /bilderrecht/meinfoto.jpg

B)Oder alle .jpg verbieten, man kann da auch jede Bilddateiendung angeben.

 
User-agent: Googlebot-Image
Disallow: /*.jpg$

C) Den Google Image Bot alle Bilder verbieten.

 
User-agent: Googlebot-Image
Disallow: /

Branding mit Wasserzeichen

Bis dato nutzte ich nur bei den kleinen Vorschaubildern ein Wasserzeichen, wenn mir die Bilder es wert waren. Ab nun werde ich auch die großen Bilder damit versehen, damit im Bild sichtbar ist von wo es kommt. Dies verhindert keinen Trafficverlust und schon gar keinen “Bilderklau”, doch fürs Markenbranding kann man es nutzen.

Ich lasse meine Fotos und Bilder bei jpegmini.com verkleinern. Dort werden alle Exif Daten eleminiert. Meine Fotos und Bilder haben aber selten künstlerischen Wert wie ein Kunstwerk.

Was bei einem Thumbnail noch hinnehmbar ist, wird nun etwaig zur Rechtsfalle. Auch Heike Rost berichtet darüber und erklärt die rechtl. Unsicherheit und Schwierigkeiten dieser so wunderbaren Bildersuche.

Initiativen wegen der neuen Bildersuche von Google

• Eine Initiative des Fotografen Michael Schilling Verteidige Dein Bild.
• Martin Mißfeldt Künstler bringt jede Menge an Argumenten wieso diese Bildersuche so gefährlich für den Berufsstand der Fotografen und Künstler ist.
• Pressemitteilung: Der Deutsche Journalisten-Verband hat Google aufgefordert, den Umgang mit Bildern zu korrigieren. Grund ist die stark vermutete Existenzbedrohung von Fotografen. Quelle.

rechtliche INFO zum Urheberrecht in Österreich

• Fotorecht, Bildrechte, Zitatrechte, Kopierschutz, Verwertungsrecht etc. Hier eine der umfassendsten Webseiten zum Thema aus Österreich, die ich kenne. Sie ist staubtrocken zu lesen, doch deren Inhalt ist fantastisch.
  Recht herzlichen Dank an diese INFO Quelle. Internet & Recht Urheberrecht.
• Eine kurze Zusammenfassung all dieser Punkte ist auf PRVA.at zu finden.

Error 410 ist der oft vergessene HTTP Status Code der jedoch in vielen Fällen sehr hilfreich sein kann. Ich zeige hier auf was dieser Status Code Error 410 bedeutet und seinen Unterschied zum Error 404. Wann ich diesen zur Optimierung oder Rettung einer Webseite einsetze. Wie man diesen Status Code technisch nutzt. Und schlussendlich welche Vor-und Nachteile ich darin sehe Error 410 statt Error 404 zu nehmen und wann ich dennoch das Disavow Links nutzen tät. – Ergänzungen sind jederzeit Willkommen.

Grund für diesen Artikel ist Martin, der ein Hangout mit John Müller brachte bei dem unter anderem bestätigt wurde, dass schlechte Links, die ins Leere laufen, bei Google nicht zählen. Hier mag ich eben aufzeigen wann für mich etwas “ins Leere” läuft.
Grund für die Änderung des Artikels ist die Tatsache, dass mir John Müller soeben was anders mitgeteilt hat, als ich ebenfalls von einem Google in den WMTForen erfahren habe. Es lebe die Eindeutigkeit der Aussagen.

Der Apache hat ein ausgeklügeltes Fehlerseiten Protokoll.

Jede dieser Fehlerseiten ist anhand der Nummerierung zuordenbar. Alle Fehlerseiten des Apache können auch selbst gestaltet werden. Viele machen sich dies bei dem Error 404 bereits nutzbar und zeigen ihren Besuchern eine wunderbar hilfreiche Fehlerseite.
WordPress hat bereits seit Jahren eine 404.php automatisch in jedem Standardtheme und lädt so ein diese zu nutzen.

Ganz kurz wann zeigt der Apache eine Error 404 und wann eine Error 410.

Error 404 Not Found
Die angeforderte Ressource wurde nicht gefunden. Dieser Statuscode kann ebenfalls verwendet werden, um eine Anfrage ohne näheren Grund abzuweisen. Links, welche auf solche Fehlerseiten verweisen, werden auch als Tote Links bezeichnet.

410 Gone
Die angeforderte Ressource wird nicht länger bereitgestellt und wurde dauerhaft entfernt.

Der Unterschied zw Error 404 und 410

Vertippt sich jemand bei der Eingabe einer URL, ist eine URL falsch verlinkt, hat man was irrtümlich gelöscht auf der Webseite kommt die Error 404 und sagt dem Besucher:

Die 404 ist also auch eine wichtige Seite für die Benutzerfreundlichkeit und sollte daher eine “gute” Seite bleiben.

Also eindeutig keine Entschuldigung. Hier lief nicht was schief, sondern Error 410 ist ein gewollter Akt der Trennung.

Error 404 aus SEO Sicht

Ich kann die Fehler auf meiner Webseite in den Griff bekommen. Aber ich bin nun mal auch menschlich, daher gibts da keine Garantie, dass es nicht doch passiert.

1. Externe Links kann ich nicht immer auf Fehler überprüfen und selbst wenn kaum reparieren.
2. Diesen externen Linkjuice holt mir aber die Error 404, wenn ich sie selbstgestaltet habe und dort gut weiterverlinke. Dies ist laut Aussage von John Müller unmöglichst. (erfuhr ich nach der Veröffentlichung)

Somit habe ich Zeit bis ich diese fehlerhaften Links per htaccess richtig stelle. Und Google wird nicht müde zu betonen, dass diese meinem Webauftritt nicht schaden.

eigene Error 410 technisch einrichten

Am besten einen Unterordner am Webspace erstellen. Darin eine 410.php speichern, die man nach Lust und Laune gestalten kann. Wichtig ist sich zu entscheiden, ob man den Googlebot index, follow oder noindex, nofollow oder jede Kombination davon mitgibt.

In der htaccess der Domain nun diese Datei als Error 410 festlegen:

 
ErrorDocument 410 /namedesunterordners/410.php

Die Unterseiten, denen man diesen StatusCode 410 zuweist gibt man dann in der htaccess so an:

 
Redirect Gone   /url-der-boesen-unterseite-ohne-domain-voran/

Error 410 aus SEO Sicht

Habe ich ein Bad Link Penalty, habe ich mir eine Domain gekauft und die hat mehr als fragwürdige Backlinks oder habe ich Sorge wegen meines Linkprofiles und mag nicht gleich das Disavow Links Tool verwenden, dann kann die Error 410 die bestmögliche Lösung sein.

Denkbare Szenarien:

• Du erkennst, dass die Bad Links auf eine begrenzte Anzahl von Unterseiten linken und Du wirst sie einfach nicht los.
  Webmaster anworten nicht, verlangen ein Horror Geld für die Löschung usw. Es ist Dir einfach zu viel Arbeit zig Webmaster um Linklöschung anzuschreiben, nachzufragen, zu bedanken etc.
• Du hast Dir eine Domain wegen des Keywortes gekauft. Ihr Linkprofil ist aber bescheidenst und die Inhalte ebenso. D.h. du wirst klugerweise dieselben Inhalte auf diese KeywortDomain geben, aber die alten Seiten magst Du in die virtuelle Wüste schicken.

meine Erfahrunge mit Error 410

Bevor Google das Disavow Links Tool zur Verfügung stellte konnte ich mit gezielter Nutzung der Error 410 einige Domains aus einem BadLink Penalty holen.

Ich eruierte nicht nur die BadLinks, sondern auch die Zielseiten auf der Domain. Hauptaugenmerk war aber immer das Abwägen welche guten Links dabei auch kaputt gehen und dass dies niemals zuviele sind.

Startseite
Nicht funktionieren kann das aber, wenn die BadLinks auschließlich oder im größten Teil auf die Startseite gehen
Auch wenn das implizit logisch ist erwähne ich es der Vollständigkeit halber. Und dies wäre der einzige Grund wo ich heute das Disavow Links Tool als Option durchdenken tät.

Schlechte Links, die ins Leere laufen zählen nicht…

schrieb Martin in seinem Artikel. Wann läuft bei Google was sicher ins Leere……..
Theoretisch immer dann, wenn ein Fehler 404 oder 410 oder ein anderer ausgegeben wird, weil Google diese Seiten nicht ansieht.

D.h. Error 404 und 410 werden von Google NICHT gelesen. Sie biegen bei diesen Status Code des Apache quasi ab und suchen anderorts weiter. Die Unterscheidung bringt eine Verwaltungsvereinfachung bei den diversen Fehlercodes.

Diskussionen und Hilfreiches anderorts
Disavow Links Tool: www.google.com/webmasters/tools/disavow-links-main
Nochmals der Artikel vom Martin: Hangout mit John Müller.

Bereits 2011 gab es mehr als 11 Millionen Tablets in Deutschland. Diese werden sehr gern zum online Shopping genutzt. Gerade in online Shops sind Tabellen sehr oft vorhanden. Hier unterschiedliche Ansätze und Lösungen wie man diese responsive machen kann.

Tablets sind nicht Tablets – daher greift eine responsive Lösung nicht immer

Wer nun denkt Tablet sei Tablet, der irrt gewaltigst, als WebDesigner steht man vor dieser Vielfalt, die es zu beservicen gilt: Tablet INFO.

Auf Tablet-Screendesign.info findet man die unterschiedliche Bildschirmauflösungen von 1366 x 768 bis 800×600, unterschiedlichste Betriebssysteme und extrem unterschiedliche Zollgrößen, von den Browsern mal gar nicht zu reden.

Nicht immer ist ein APP eine gute Lösung, wer also sein Shop modernisieren mag hat dies nicht immer als Alternative. eCommerce ohne hilfreiche Tabellen ist kaum denkbar, daher machte ich mich auf die Suche nach Lösungen.

Tabellen und responsive Design

Es ist nicht nur die Technik, die es zu beachten gilt, sondern auch die Benutzerfreundlichkeit einer Lösung. Und ob diese auch von älteren Smartphones angezeigt wird. Spannende INFO dazu gibt es hier in diesem Beitrag und auch in den Kommentaren dazu: Responsive Tables bei David Bushell.

Daher habe ich hier Links zu Lösungen wie man Tabellen responsive machen kann gesammelt. Die Ansätze sind sehr unterschiedliche und bedürfen unterschiedlicher Eingriffe in das MarkUp der Tabelle. Je nachdem was man wo nutzen kann oder mag.

Footable nutzt data Attribut

Diese responsive Lösung arbeitet mit dem data Attribut. Wer also Tabellen mit einem Plugin //Zusatzmodul seines Shops verwendet, wird eventuell dabei Probleme haben. Footable.

Zurbs arbeitet mit CSS Klassen

Hier braucht der table Tag eine spezielle CSS Klasse und schon ist alles responsive: Zurb.

Fileamentgroup bietet ein DropDown

Hier kann der Nutzer in einem DropDown wählen welche Spalten er angezeigt haben mag. Die Anzahl der angezeigten Spalten ergibt sich aus der Größe des verwendeten Bildschirmes. Auch bei dieser Lösung bedarf es spezieller CSS Klassen. Fileamentgroup responsvie Tabellen mit dropdown.
Hier ist der Link zum Download auf Github.

Stewart Curry CSS Freak

Er nutzt “nchilds”. Daher ist kein zusätzliches MarkUp bei der Tabelle nötig. Allerdings werden hier Spalten auf kleinen Bildschirmen versteckt. Ich bin unsicher, ob dies immer praktikabel und im Sinne der Nutzer ist. eine CSS Lösung

Marco Pegoraro laßt den User auswählen

Er liefert eine Lösung für komplexe Tabellen. Der User kann auswählen welche Spalten er sehen mag. MediaTable Auch hier der Link zum Github Download.

weitere Lösungen sammle ich gern

Ich veröffentliche gerne weitere Lösungen für responsive Tabellen. Daher freue ich mich über Erfahrungen oder weitere Links.
Dass ich dabei den Spamordner für Kommentare hier kontrolliere ist selbstverständlich.

Einmal mehr zeigt sich, dass auch wir WebDesigner uns sehr intensiv mit den Anforderungen der Suchmaschine auseinandersetzen müssen. Jquery Tabs werden in einer unermesslichen Menge angeboten. Jeder von uns WebDesigner braucht nur eines dieser Plugins minimalst anzupassen und schon glaubt man sich im Himmel der User Experience, die modernes WebDesign unter anderen ausmacht.

Gäbe es da nicht die berechtigte Anforderung unserer Kunden, dass die Webseite auch bei Google gefunden werden können solle. Und selbst, wenn dies der Kunde nicht direkt sagt, hat er meiner Meinung nach ein Recht darauf eine Webseite zu bekommen, die zumindest bei Google nicht schadet.

Die absolute Kurzfassung dieses Artikels ist:

Versteckte Inhalte werden von der Suchmaschine ignoriert, so die offizielle Aussage und an Spekulationen mag ich mich diesmal nicht gleich beteiligen. Selbstverständlichst gibt es Webseiten, die auch heute noch mit versteckten Inhalten ein Superranking haben. Es gibt immer Gegenbeispiele.

Wieso können jQuery Tabs hidden content sein

Der Suchende sucht ein bestimmtes Wort mittels Google und klickt dann auf die Webseite, die ihm in dem kleinen Textsnippet bei den Suchergebnissen anzeigt, dass er das was er sucht, dort findet. Auf dem kleinen Screen habe ich diesen Snippet rot umrahmt.

Nun landet der Suchende auf der Webseite und der gesuchte Inhalt ist in einem jQuery Tab. Somit findet er nicht mehr, sondern klickt manchmal sogar völlig enttäuscht weg. Dies löst das gefürchtete “return to SERPs” aus, also mit denselben Suchwort nochmals die Suchmaschine bemühen. In den Analytics Statistiken sieht man es an der hohen Absprungrate.

Wie streng betrachtet Google diese jQuery Tabs

Eine total klare, absolut nachvollziehbare Aussage gibts dafür nicht. “Manchmal” ist das eindeutigste Wort in diesem und anderen Zusammenhängen.

Dennoch denke ich mir anhand der Aussagen von John Müller, dass nachfolgende jQuery Tab Plugins extrem gefährdet sind als “hidden content” Above the Fold betrachtet zu werden und somit eine Abstufung der Webseite in Betracht gezogen werden kann:

• Creat Tabs with html und jQuery
  Dieses jQuery Plugin wird promotet mit “Say goodbye to those long pages and implement HTML tabs today to improve your website’s user experience.” => schön wär es, wenn da nicht das Gefundenwerden bei Google auch noch eine Rolle spielen tät.
• Dieses Tabbed Rotator Plugin verheißt, dass das Bild oben sich wandelt und darunter der dazugehörende Inhalt angezeigt wird.

Mehr als zwei negative Beispiele für “Hidden Content Above the Fold” bring ich nicht übers Herz

worauf also achten, um nicht in die Above the Fold und hidden content Falle zu tabben

1. Fallback Lösung, wenn das ganze nur bei aktiviertem JavaScripts funktioniert, ist dies ein Schaden.
2. Niemals den ganzen Inhalt in so Tabs verstecken. Zumindest muss der Suchende das wonach er suchte auch ohne auf ein Tab klicken zu müssen, finden können.
3. Sparsamst einsetzen. Login//Logout Formen, wenn sie benutzergerecht gestaltet sind. Bestellvorgänge etc. Aber keine Produktbeschreibungen. Es ist geschickter Inhalte so aufzubereiten, dass der Kaufwillige voller Freude weiterliest und dabei gar nicht merkt, dass er scrollt.
   

   meine persönliche Sicht zum Thema Hidden Content Above the Fold

   Es freut mich!
   Es ist für mich eine absolute Bestätigung meines persönlichen Credos:

   Webseiten für alle Menschen und für Maschinen zu erstellen ist niemals ein Gegensatz.

   

   Es ist Webstandard, jQuery Scripts niemals ohne Fallback einzusetzen.
   Es ist Webstandard, dass Inhalt für alle zugänglich sein sollen.
   Es ist Webstandard, dass die Leut auf einer Seite finden sollen und nicht suchen müssen.

   Und somit klau ich mir einen Titel von Stefan David, der im 9. Türchen des Webkrauts Kalenders sagt:

   SEO versus Usability: Gemeinsam klappt es besser.Stefan

   Nur wenn SEOs und WebDesigner //Webentwickler zusammenarbeiten entstehen Webseiten mit hoher User experience, die wie nebenbei den Erfolg ermöglichen.

   meine Quellen und Fundstücke zum Thema

   Die offizielle INFO Seite von Google:What counts as a high-quality site Der Autor Amit Singhal dieses Artikels hat auch maßgeblich bei der Implementierung des Panda Updates mitgearbeitet.
   Dan Petrovic, ein australischer Kollege, der über das Hangout mit John Müller berichtete.
   Und Viktor, der bereits vor geraumer Zeit auf die Problematik der Tabs und Google aufmerksam machte.

   mts

   ---

   Copyright © 2013
   This feed is for personal, non-commercial use only.
   The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. Original article: www.webdesign-in.de (Digital Fingerprint: WebDesignakamts[webdesign-in.de] (184.73.74.47) )]]> http://www.webdesign-in.de/mts/tabb-nicht-in-die-above-the-fold-hidden-content-falle/feed/ 2