Kategorien
Webentwicklung Werkzeuge

Creating a Professional WordPress Development Workflow With Vagrant

Creating a Professional WordPress Development Workflow With Vagrant

Kategorien
Code

Kleiner Tipp für auf den Weg.

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live. Code for readability.
John F. Woods

Kategorien
Webentwicklung

Listen mit eigenen Aufzählungszeichen (ohne Bilder, mit Unicode!)

Wenn man mal in die Verlegenheit kommen sollte, eine Liste mit eigenen Aufzählungszeichen machen zu müssen, wie zum Beipiel in “Auflistung von Vorteilen”, der kann das mit der Content-Eigenschaft gut machen. Allerdings sind die Dinger dann meist inline, so dass Zeilenumbrüche unter dem Listen-Symbol weitergehen, und eher fies zu positionieren.

Mit einem kleinen Trick geht’s aber auch einfacher:

// LESS code

  ul {
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      display: table-row;
      &:before {
        content:'\002B'; // "+"
        font-size: 20px;
        line-height: 1.5;
        display: table-cell;
        padding-right: 5px; // Achtung: Margins und Borders greifen hier nicht mehr.
      }
    }
  }

Links

  1. CSS Value Converter
Kategorien
Webentwicklung

CSS-Content-Eigenschaften

Man lernt ja nie aus: “open-quote” und “close-quote” sind valide Werte für die CSS-Eigenschaft “content” und zeigen an dieser Stelle dann typografisch korrekte Anführungszeichen. Wunderbare Eigenschaft zum Stylen von quotes und blockquotes, finde ich.

CSS content • Inhalte mit CSS generieren

Kategorien
Allgemein Webentwicklung Werkzeuge

Das Ding mit dem m.

OpenCliptart by agomjo

Neulich wurde ich gefragt, was denn diese m.-Seiten bedeuten sollen. Die Antwort an sich ist ja relativ simpel: Es sind speziell für Mobilgeräte optimierte Versionen von großen Websites. Wobei groß ja auch eher eine ungenaue Beschreibung für Websites ist, die diese Möglichkeit einsetzen.
Beispiele der großen Websites:

  • spiegel.de
  • faz.de
  • bmw.de
  • audi.de

Alle diese Seiten werden umgeleitet, wenn man sie mit einem Mobilgerät (ich habe das jetzt mal nur mit einem Nexus 5 überprüft) ansurft. Nicht selten wird auf der Website dann auch Werbung für die App der Seite eingeblendet, aber das ist ein anderes Thema.

Und nachdem Responsive Webdesign (“RWD”) in den letzten Jahren mit Verbreitung der Smartphones immer weiter zugenommen hat, ist es (scheinbar) verwunderlich, dass viele große Marken dieses Prinzip immer noch nicht umgesetzt haben. Oder?

Wann ist eine dedizierte Mobile Site sinnvoll und wann RWD?

Die wichtigsten Gründe für eine dedizierte mobile Website sind:

  1. History (es ist einfacher, eine zweite View auf die Daten zu präsentieren, als komplett neuzumachen)
  2. Einfachheit
  3. Kosten

Die mobile Website läuft komplett parallel zur bisherigen, Inhalts-Struktur und Darstellung können komplett unterschiedlich sein, unter Umständen kann man bei der Mobilseite auf neuere Webtechniken zurückgreifen. Die Mobil-Seite wird nicht mit SEO-Krempel belastet und es werden nur die Inhalte geladen, die man wirklich braucht.

Beipiel: spiegel.de / m-spiegel.de

Die wichtigsten Gründe für eine responsive-Website sind:

  1. Es muss nur ein Design gepflegt werden
  2. Performance
  3. Zukunftssicherheit (keine Browserweichen etc. die irgendwann fehlschlagen)

Die RWD-Seite bietet alle Informationen für alle Displaygrößen und fokussiert sich damit auf den Inhalt mehr als auf das Design. Super für SEO, keine gesplitteten Domains, keine duplicate-Content-Probleme und die User werden nicht umgeleitet, was unter Umständen in mobilen Netzen schon durchaus mal länger dauern könnte.

Beipiel: tagesschau.de / sportschau.de / daserste.de

Natürlich setze ich dabei eine korrekte Umsetzung bei beiden Vorangehensweisen voraus. Letztendlich ist RWD nicht die Lösung aller Probleme, auch wenn ich finde, dass man die Displaygrößen immer im Hinterkopf haben sollte.

 


OpenClipart by agomjo