Tag Archives: responsive

Quick-Hints #12

Repository for Web Components

Für die Web Components (W3C Working Draft) gibt es mit customelements.io eine Sammlung von vielen netten Custom HTML-Elementen. Das ganze ist ähnlich einem NPM (Node) oder Nexus (Java) aufgebaut. Die Web Components bieten (dank Polyfill auch heute schon), die Möglichkeit – wie es der ein oder andere von euch (in ähnlicher Form) schon aus AngularJS kennt -, das Spektrum an HTML-Elementen zu erweitern. So findet sich auf der Website zum Beispiel ein Calendar-Element, welches durch einfache Benutzung des Tags

<x-calendar view="2013-06-09"></x-calendar>

einen Kalendender in eure Website zaubert. Natürlich ganz normal mit CSS stylebar. Viele weitere Elemente und Informationen könnt ihr auch unter x-tags.org finden.

#perfmatters

Performance im Front-end ist immer wieder ein Thema auf meinem Blog. Vor allem beim Scrollen von Webseiten gilt immer wieder die Herausforderung, die 60 FPS zu halten. Mittlerweile gibt es sehr viele Kniffe und Hinweise, wie einem das gelingen kann. Ein guter Artikel zu diesem Thema ist hier zu finden: Continue reading

(HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen

Vor guten zehn Monaten ist der letzte Artikel in der Kategorie “Leicht und klar erklärt” erschienen und so gab mir heute (mal wieder) ein Thema in der Firma eine perfekte Vorlage für einen Artikel.

Wie stelle ich HTML5 Canvas Grafiken auf einem iPad mit Retina-Display scharf dar? Folgende Erklärung gilt aber nicht nur für das Canvas-Element, auf Bilder/Fotos trifft dies ebenso zu. Fast alle Tablets haben mittlerweile hochauflösende Displays (High DPI – HiDPI) und so wird es immer wichtiger, dass du das folgende beachtest – zumindest wenn du deinen Besuchern Qualität bieten möchtest. Die vernünftige Darstellung von Bildern auf allen Geräten kann man als Teildisziplin von Responsive Webdesign bezeichnen. Auf zur Theorie:
Continue reading

Alle hassen deine Mobile-Website!?

Samsung GS2 by Alvin Pingol - CC BY-SA 3.0 - 2011

Samsung GS2 by Alvin PingolCC BY-SA 3.0 – 2011

Ich hasse es wirklich. Ich bin in der Bahn, will www.supertolleseite.de aufrufen, habe schlechten Empfang. Er lädt und lädt, meine Hoffnung steigt, endlich die Seite zu sehen, auf einmal; zack Redirect auf m.supertolleseite.de und das Laden beginnt von vorne. So ein MIST!

Und jetzt rate mal was? Nicht nur den Benny in der Bahn nervt das, auch Google findet das gar nicht mal so geil. Du verteilst die ganze schöne SEO Power von Google auf deine Subdomains. Richtig schlimm wird’s, wenn noch eine Subdomain für Tablets existiert, etwa t.supertolleseite.de. Mit “Pech” ist in der mobil-optimierten Version nicht jeder Content verfügbar. Was passiert also, wenn ich über einen Link direkt an einen fehlenden Content angesurft komme? Hoffentlich ein Redirect auf die Desktop-Seite und keine mobil-optimierte 404. Letzteres straft Google ab.

*** Update: 24.11.2013
Die Qualität deiner Website auf mobilen Endgeräten hat, wie beschrieben, immer stärkeren Einfluss auf das Ranking in Google. Ein detaillierter Artikel (englisch) gibt es in Google’s Webmaster Central Blog unter der Überschrift: Changes in rankings of smartphone search results.

OK, jetzt bin ich also auf m.supertolleseite.de/304862/tollerContentZumSharen und will den Link twittern (oder anderweitig sharen). Wie oft hab’ ich’s erlebt, dass ich so einem Link dann auf dem Desktop geklickt habe und anschließend mit dem Desktop-Browser in der mobilen Version rumgeirrt bin. Selbst Facebook macht diesen Fehler.

Und um all das zu versauen, gibst du auch noch extra Kohle aus. Den gleichen Content zweimal darzustellen, kostet dich nur Zeit und Nerven. Lass es sein.

Wenn du dich also fragst: Sollte ich meine Website für mobile Endgeräte optimieren? Dann lautet die Antwort: “Ja, unbedingt, aber bitte richtig.” Responsive Design, keine Redirects und alle werden happy sein.