Übergroße Formelemente für die Darstellung auf Smartphones

Wenn man Formularelemente in einer Website übergroß darstellen möchte muss man sich was einfallen lassen. Den Radiobutton oder die Checkbox kann man nicht einfach per CSS width und height in der Größe variieren.

In meinen Beispiel blende ich die nativen HTML Elemente aus und arbeite nur noch mit den Labels .. hier füge ich dann wahlweise ein grafisches Element oder per CSS gestylte Elemente ein die das selbe verhalten wie die nativen Formularelemente haben.

Hier das komplette Beispiel

CSS3 Tooltips

die ohne JavaScript funktionieren .. ich habe mal 3 verschiedene Arten einen CSS3 Tooltip zu bauen in einem Beispiel zusammengefasst.

Ein HTML5 Data Attribut via :before oder :after Pseudoselector auszulesen ist sicher die sauberste Methode. Allerdings bekomme ich in den Inhalt des Tooltips auch kein Markup. Außerdem eignet es sich auch nicht für lange und umfangreiche Texte da hier ja die Lesbarkeit gewährleistet bleiben muss. (siehe Variante 1)

Eine weitere Methode wäre den Inhalt des Tooltips als Kindelement dem zu öffnenden Element zuzuordnen .. für CSS kein Problem .. allerdings steht dann der Inhalt des Tooltips für Screenreader, Spider und Menschen die ggf. custom CSS zum anzeigen der Seite benutzen direkt im Fließtext. (siehe Variante 2)

Variante 1 und 2 funktionieren per mousehover .. doof für Touch Interfaces und wenn man den Text vielleicht herauskopieren möchte. Variante 3 bedient sich darum beim :target selector .. man muss also explizit auf den Link zum öffnen klicken. Danach wird das versteckte Target Ziel eingeblendet … ein CLOSE Button ist dann natürlich auch notwendig. (siehe Variante 3)

Hier alle CSS3 Tooltips zum testen .. das CSS steht direkt im Quelltext.

Google Venice Update

SEO kommt hier im Blog gerade etwas zu kurz .. aber ich glaube ich muss mal die nächsten Wochen vom coden an SEORCH etwas wegkommen und wieder mehr bloggen.

Venice?

wurde schon Mitte Juni von Google ausgerollt und zielte zu 100% auf lokale Suchergebnisse ab .. diese tauchen nun direkt in den organischen Suchergebnissen auf. Das bedeutet das man von Stadt zu Stadt für den gleichen Suchbegriff unterschiedliche Suchergebnisse erhalten kann.

Google versucht bei jeder Suche den Standort des Users zu ermitteln, zusätzlich ob es ich um eine ortsbezogene Suche handelt (Trigger können hier verschiedene Keywords sein) und blendet dementsprechend Suchergebnisse von lokalen Geschäften, Restaurants, Veranstaltungen usw. ein .. das habt ihr sicher schon gesehen.

Man ging davon aus, daß Google über die IP ungefähr ermitteln konnte wo man sich befand (zumindest in welcher Stadt). Mit Venice wurde nun scheinbar die Genauigkeit gesteigert und Google kann wohl in einigen Fällen bis auf wenige Meter genau ermitteln wo der Suchende sich befindet.

Aha .. und jetzt?

Ganz einfach .. wenn man mit seiner Website oder seinem Produkt eine gewisse Region oder Stadt ansprechen will muss Google das ja irgendwie rausbekommen können.

Die wichtigsten TODOs:

  • der Name der Region oder Stadt muss mehrfach auf den Seiten auftauchen, am besten in TITLE Tags und Headlines
  • eine Landingpage die auf eine bestimmte Region abzielt schadet auch nicht
  • diese Landing Page sollte dann die Adresse der lokalen Niederlassung beinhalten .. am besten nochmal zusätzlich als Microdata oder hCard .. auf jeden Fall gut lesbar im Markup
  • ein ausführlicher Eintrag, mit Link zu Website auf Places for Business ist Pflicht, dieser ist auch Voraussetzung um eine Anzeige in Google+ Local zu bekommen
  • bei Google Mapmaker kann man sich zur Not auch selbst hinzufügen (aber nicht spammen)

Außerdem ..

Sollte man drauf achten das man in Branchenverzeichnissen ebenfalls mit der korrekten Adresse und einem Link zur eigenen Website vertreten ist. Spontan fallen mir da Gelbe Seite, Yelp, Qype usw. ein.

Man sollte peinlichste genau drauf achten das die Adressen die man so im Web verteilt hat nicht voneinander abweichen. Ebenso die lokale Festnetznummer. Bilder als Adresse zu hinterlegen (aus Angst vor Spam) ist Tabu.

Sollte es mehere Möglichkeiten geben wie eine Region oder Stadt benannt ist sollte man eine für sich wählen und überall die gleiche Benamung verwenden.

Wer ganz sicher gehen will reicht noch eine Geo Sitemap ein.

Sich um mindestens 5 Erfahrungsberichte kümmern.

Alle üblichen OnPage und OffPage Regeln beachten die so gerade mal wieder aktuell sind.

Bloß nicht!

  • Postfachadressen oder Handynummern auf der Website verwenden
  • Mehrere Places Einträge faken
  • Unterschiedliche Adressen
  • Mehrere Adressen oder Telefonnummern auf einer Seite
  • Duplicate Content (durch Austausch des Ortsnamens) vermeiden