Responsive Webdesign – Grundlagen

RESS – RWD + Serverside Components

Testen Sie unsere 1957 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Nicht immer reichen die Mittel des RWD aus – manchmal braucht man zusätzlich eine serverseitige Logik. Willkommen bei RESS!

Transkript

Nicht immer reichen die Möglichkeiten des Responsive Web Design aus. Manchmal braucht man zusätzlich serverseitige Logik. Willkommen bei RESS. RESS heißt nämlich Responsive Web Design an Server Side Components. Ein ganz banales Beispiel. Ich habe jetzt hier ein Dokument und da habe ich eine Telefonnummer. Und die habe ich direkt mit dem tel-Protokoll verknüpft. Das ist sehr praktisch, weil dann Benutzer von Smartphones beispielsweise direkt draufklicken können und dann die Nummer anrufen können. Denn man vergisst ja häufig, dass Smartphones immer auch noch Telefone sind. Und dann ist es natürlich eigentlich gut, wenn die Leute direkt draufklicken können und dann die Nummer gar nicht erst eingeben müssen. Das Problem daran ist allerdings, dass ein Browser, der kein Smartphone ist und der kein Telefon hat, der kann mit diesem tel nichts anfangen. Jetzt kann man natürlich hingehen und sagen: Ja, wir verstecken das über Media Queries. Das können wir ja machen. Das ist jetzt ja auch nicht tragisch, wenn man bei einer kleiner Zeile ein display: none macht oder so. Das Problem ist aber folgendes: wir können über Media Queries nicht ermitteln, ob das Gerät telefonieren kann oder nicht. Denn es gibt beispielsweise noch den iPod. Der hat auch einen kleinen Bildschirm, der kann aber nicht telefonieren. Das sind solche Fälle, wo Sie mit den normalen Methoden des Responsive Web Designs eigentlich nicht weiterkommen und wo Sie eine Möglichkeit brauchen die Eigenschaften des Gerätes irgendwie serverseitig zu ermitteln. Und die klassische Methode besteht natürlich darin, dass man den User Agent String ausliest, also, die Kennung, die der Browser sendet und aufgrund dessen dann entscheidet, ob jetzt dieses tel-Protokoll beispielsweise sinnvoll ist oder nicht. Der User Agent String ist etwas sehr kryptisches, weil der historisch gewachsen relativ komisch ausschaut und es wäre jetzt sicher nicht sinnvoll, wenn man selber beginnen würde sich eine Logik zu entwickeln je nach User Agent String: hat das Gerät ein Telefon oder nicht, sondern muss da auf die Ergebnisse von anderen Leuten zugreifen. Und was man da am besten macht, ist eigentlich solche Datenbanken wie die von ScientiaMobile zu verwenden. Der hat ein Projekt, das heißt WURFL. Und das ist eine riesige Datenbank, die zu einzelnen Geräten die Eigenschaften enthält. Ich habe jetzt mal Explorer aufgerufen, wo mit so einem beliebigen Gerät die Eigenschaften gezeigt werden. Wenn Sie einen mobilen Browser genutzt hätten, würden Sie die Eigenschaften von diesem mobilen Gerät auch sehen. Und Sie sehen, Sie kriegen dann Information wie Produktinformation, welche Version des Browser ist es, wie heißt das Betriebssystem, aber auch weitere Sachen, wie zum Beispiel wie groß ist der Cash, funktioniert das überhaupt, welche Bildformate werden unterstützt et cetera, et cetera, et cetera. Sie sehen eine große Anzahl von Eigenschaften, die Sie auslesen können. Und wenn Sie jetzt nach dem Prinzip von RESS arbeiten, dann heißt das, dass Sie ganz normal Ihre responsive Webseite erstellen, dass Sie aber an den Stellen, wo Sie es brauchen, auf so ein Tool wie WURFL zugreifen und damit einem serverseitigen Script die Eigenschaften, die ihm darüber zur Verfügung gestellt werden, auslesen. Und je nach Ergebnis dann einen bestimmten Code einblenden lassen oder nicht. Dafür kann man zugreifen auf die Cloud-Version, die Sie hier sehen. Also, WURFL bietet inzwischen auch eine Cloud-Version. Sie könnten das Ganze natürlich auch herunterladen, aber die Cloud-Version hat den Vorteil, dass Sie sicher sind, dass dort immer die aktuellste Version ist. Und dann gibt es so verschiedene Angebote. Es gibt eine Möglichkeit das auf jeden Fall frei zu testen. Da kann man nur zwei Eigenschaften auslesen. Also, die Angebote unterscheiden sich in der Anzahl an Eigenschaften, die auslesbar sind, auch wie viele Überprüfungen man durchführen kann und für wie viele Domains das ist. Aber man kann es eben diese kostenlose Variante einmal testen, kriegt dann eine Kennung, die man einbinden muss und muss auch vorher angeben welche Eigenschaften man gerne überprüfen will. Und dann kann man das einmal austesten. Beispielsweise gibt es eine Php App, über die man das dann realisieren kann. Ein Beispiel was man mit RESS machen kann, ist auch die Webseite von ScientiaMobile. Ich aktualisiere die mal ganz kurz. Und je nachdem mit was für einem Gerät Sie die jetzt aufrufen, gibt es eben kleinere Anpassungen. Es ist nicht wie eine klassische mobile Seite, dass es vollkommen unterschiedliche Versionen gibt, sondern es gibt kleinere Anpassungen. Und wenn ich das jetzt beispielsweise auf einem Smartphone aufrufe, dann sind bestimmte Bereiche ausgeblendet und es werden dadurch weniger Dateien heruntergeladen, was natürlich eine bessere Performance bringt. Dieser kleiner Ausflug in RESS sollte zeigen, dass es nicht an sich schlecht ist den User Agent auszulesen. Es kommt einfach darauf an was man damit macht. Und es ist auf jeden Fall auch sinnvoll Responsive Web Design durch weitere Sachen zu erweitern, wenn es im Sinne der Nutzer ist.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!