„Responsive“ Webseiten sind Webseiten, die reaktionsfähig (= responsiv) bleiben.

Bei diesen Seiten geht es darum, dass sie unabhängig von der Displaygrösse oder auch geräteunabhängig genutzt werden können. Egal, ob man eine Seite per Smartphone, Tablett-PC oder "richtigen" Computer aufruft, bleibt immer die volle Nutzbarkeit gewährleistet.

Es gibt bei responsiven Webseiten v.a. einmal keine festen Regeln, welches Element des Seiteninhaltes wo zu liegen kommt. So baute man z.B. noch vor Kurzem man Webseiten in einem „Grid-Design“ auf, bei dem eine Webseite rasterartig aufgeteilt war - auch heute macht das noch Sinn. Diese rasterartige Aufteilung ist aber dann kontraproduktiv, wenn die Element und das Layout inflexibel und starr ist.




Wenn man dann auf die gleiche Seite mit sehr unterschiedlichen Geräten zugreifen will, passiert das:

• die Positionierung der Elemente verschiebt sich deutlich, wenn man die Browserfenstergrösse verändern. Der Vorteil einer responsiven Seite: Das Seitenlayout wird nicht einfach zerhauen, es bleibt funktional und auch ansprechend gestaltet - nur verändert sich die Anordnung der Elemente zueinander. Egal, ob die Seite im Breitbildformat angesehen wird oder ob das Browserfenster (z.B. auf dem iPhone) ganz schmal ist: Die Seite bliebt nutzbar.


• Schriften machen oft ein Problem, wenn sich der Browser verändert: Sind die Schriftgrössen statisch angelegt, ist ein Text, der auf einem Schreibtischmonitor gut lesbar ist, auf dem Smartphone-Display nur noch mit der Lupe zu erkennen. Responsive Webseiten haben jedoch veränderliche Schriftgrössen, die sich den unterschiedlichen Bedürfnissen anpassen.


• das Gleiche bei Bildern: Ein Bild mit einer festen Bildgrösse kann auf einem Schreibtischmonitor oder auch noch auf dem Notebook gut proportioniert erscheinen, auf dem Smartphone oder dem iPad aber sprengt das gleiche Bild die Dimensionen. Auch das setzen responsive Webseiten anders um.

Die Folge: Was auf dem einen Gerät gut aussieht, ist auf dem anderen Gerät kaum noch nutzbar.

RapidWeaver-Vorlagen sind in der Mehrzahl mit einer festen Layout-Struktur angelegt. An sich war das bislang kein Problem, aber die Anforderungen im Web ändern sich rasant - responsiven Webseiten wird die Zukunft gehören. Dem müssen sich auch mit RapidWeaver angelegte Projekte unterwerfen - es braucht also responsive Themes für RapidWeaver.

Hier eine Auswahl der derzeit angebotenen responsiven Vorlagen:



Mehr Informationen zu RapidWeaver gibt es hier...

Etwas sehr Nerviges für einen Webseitenbesucher ist es, wenn er einem Link, vielleicht einem selbst abgespeicherten Bookmark, einem Link auf einer anderen Seite oder auch einem Suchergebnis einer Suchmaschine folgt und er dann im „Nirvana“ landet.

Die Seite gibt es nicht mehr, zumindest ist sie unter der gespeicherten URL nicht mehr erreichbar und es kommt zu einer so genannten „404-Fehlermeldung“ („Seite nicht gefunden“) im Browser. Diese Meldung kennen wir alle - und alle wissen wir, dass wir von hieraus kaum weiter kommen.



aboutpixel | no_mis

Ein unverzichtbarer Service für den Seitenbesucher ist es daher, eine eigene Fehlerseite zu haben. Diese Fehlerseite wird bei einem 404-Fehler den Seitenbesucher auf eine andere Seite, am besten die Startseite, weiter leiten, oder aber auf eine speziell für diesen Zweck angelegte Fehlerseite. Die Fehlerseite bietet eine erste Orientierung, vielleicht ein Inhaltsverzeichnis oder zumindest eine Meldung, dass irgendetwas schief gelaufen ist.

was ist überhaupt eine Fehlerseite?

Eine Fehlerseite ist eine einzelne Seite innerhalb des Projektes. Hier kann eine selbst gestaltete Fehlermeldung erscheinen, es kann ein Inhaltsverzeichnis eingebunden werden oder aber eine Weiterleitung zur Startseite nach einigen Sekunden.
Sie wird in eine bestimmtes Verzeichnis, z.B. in das Verzeichnis
www.meinedomain.de/anhang/404.html
exportiert.

Je nach Wunsch kannst du eine automatische Weiterleitung einrichten.
Dazu brauchst du diesen Code:
meta http-equiv="refresh" content="0; url=http://www.deinestartseite.de/"
Den Wert "0" kannst du individuell anpassen.

Im Seiteninspektor wird diese Seite unter „Allgemein“ als aktiviert, aber als nicht im Menü sichtbar gekennzeichnet. Nach dem Upload der Seite sollte diese im Internet erreichbar sein, du solltest das auch testen - die URL kennst du ja.

Eine Fehlerseite sollte enthalten:

• eine Erklärung, dass der Seitenbesucher eine Seite aufgerufen hat, die nicht (mehr) existiert


• einen Link zur Sitemap


• einen Link zur Startseite


• ein Suchfeld


• und ggfs. jene oben beschriebene Weiterleitung

Serverkonfiguration

Der nächste Schritt besteht darin, deinen Server so zu konfigurieren, dass bei Aufruf einer „falschen“ oder nicht mehr gültigen URL, der Seitenbesucher automatisch auf diese Fehlerseite geladen wird.

Das geht mit auf Apache-Servern mit dem nachfolgend beschriebenen Code:

Du rufst dein Webverzeichnis mit einem FTP-Programm auf. Dort suchst du die Datei .htacces auf und öffnest sie mit einem Texteditor.

Du schreibst diesen Code (natürlich angepasst) in diese Datei und sicherst sie:
###########################################################
# 404-Umleitung auf Suchseite #
##########################################################

AuthGroupFile /dev/null
AuthName Intern
AuthType Basic
ErrorDocument 404 http://www.deinedomain.de/pfadzurfehlerseite.html
Jetzt testest du die Erreichbarkeit der Fehlerseite mit einigen falsch geschriebenen URL zu deiner Domain, beispielsweise mit „www.deinedomain.de/blabla.html“ (Vorraussetzung ist natürlich, dass es keine Seite mit dem Namen blabla.html gibt...).

Das war‘s eigentlich schon...

Und noch eine Ergänzung:

Der Internet Explorer macht wieder mal seinen eigenen Mist. Die Fehlerseite sollte mindestens 512 KB haben - ansonsten könnte es sein, dass der IE seine eigene Fehlermeldung ausgibt.

Fehlerseiten können gestalterisch durchaus auch einmal etwas von der restlichen Webseite abweichen. Eine gute Anregung findet man z.B. hier:

404 Error Pages: Reloaded

Mehr Informationen zu RapidWeaver gibt es hier...

Es gibt eine kleine, mitunter nervige Angelegenheit in Pages:

Wenn ich ein neues Dokument erstellen will, wird, wenn man nichts verändert hat, in der Vorlagenauswahl ein leeres Textverarbeitungsdokument angeboten.

So ganz "leer" ist die Vorlage aber nicht, immerhin ist die Schrift "Helvetica" voreingestellt und wenn man nun keine Änderungen an der Schriftformatierung vornimmt, werden die Texte in eben dieser Schrift angelegt. Ausserdem sind auch weitere Formatierungen von der Dokumentegrösse bis hin zu den Schriftstilen festgelegt.

Das mag aber nicht jeder

Vielleicht möchte man aber auch, dass eine ganz spezielle Vorlage angeboten wird - vielleicht ein Geschäftsbrief mit der Hausschrift und dem Firmenlogo oder ein rosafarben gestalteter Liebesbrief.

Macht nichts, in einem ersten Schritt legt man ein entsprechendes Dokument an und speichert es als Vorlage ab.

Im zweiten Schritt geht man mit der Tastenkombination ⌘ - , (oder eben über das Fenstermenü) in die Programmvoreinstellungen von Pages und geht dort in den Bereich "Allgemein". Hier kann man für neue Dokumente vorgeben, welche Vorlage angeboten werden soll.

Und voila!

Wenn man nach dieser kleinen Veränderung eine neues Dokument erstellen will, liegt der rosafarbene Liebesbrief (oder eben eine andere Vorlage...) im Focus der Vorlagenauswahl...