UMSETZUNG
Websites, die sich mit Hilfe eines responsive Layouts an verschiedene Bildschirmgrößen anpassen, erfordern von Anfang an eine enge Zusammenarbeit mit dem Entwickler. So wurde ich gleich zu Beginn des Projektes bei der Planung der Seite mit einbezogen. Während Struktur und Aufbau der Seite für die Desktop-Ansicht von Ocker und Indigo geplant wurde, nahm ich Layout- und Typografie-Anpassungen für Smartphones und Tablets vor.
RESPONSIVE LAYOUT
Auf Smartphones ist der Platz begrenzt, Aus diesem Grund entschieden wir uns, das Menü per Knopfdruck ein- und auszublenden. Die hier verwendete Technik nennt sich „off-canvas“, der Hauptinhalt wird verschoben und gibt das Menü frei. Der Menü-Button ist auch beim scrollen jederzeit zugänglich, der Nutzer kann bequem auf der Seite navigieren, ohne erst lange auf und ab zu scrollen.
Schriftgröße und Zeilenabstand sind ebenfalls responsive und damit optimal für kleine Displays angepasst. Der Abstand zum Gesicht ist bei diesen Geräten kürzer als bei Desktop-Geräten, außerdem sind hochauflösende Displays bei Smartphones inzwischen fast schon Standard, wodurch Websites quasi Druckauflösung haben. So kann man mit kleineren Schriftgrößen Platz sparend arbeiten, ohne Lesbarkeit einzubüßen. Im Gegenteil, diese wird durch die Optimierung sogar verbessert.
WORDPRESS ALS CMS
Unter der Haube arbeitet WordPress, damit der Kunde regelmässig Inhalte aktualisieren und tauschen kann. Dazu wurde das CMS auf die besonderen Ansprüche des Restaurants abgestimmt und um einige Funktionen erweitert. Die Bereiche „Catering“, „Über Uns“ und „Aus der Reihe“ sind jeweils mit eigenen, komfortablen Eingabemasken ausgestattet, um die Bedienung übersichtlich und effizient zu gestalten. Ausserdem ist es möglich, alle Inhalte, Bilder, Links, Google Maps, und die Slogans im Header zu bearbeiten.
UND WAS NOCH?
Es gibt noch mehr Details, die vielleicht nicht sofort ins Auge stechen.
- Durch die Nutzung von Webfonts ist die Seite leichter zu bearbeiten, Suchmaschinen und Screen-Reader tun sich leichter, ob hochauflösende Displays oder größere Zoomstufe, alles ist gestochen scharf.
- Die Seite läuft auch ohne Javascript, alles bleibt weiterhin zugänglich.
- Alle Bildelemente sind verlustfrei komprimiert und für das Web optimiert, um die Ladezeiten zu verkürzen.
- Die Icons sind zu einem Icon-Font zusammengefasst, auch das verbessert die Ladezeit und garantiert eine optimale Auflösung.
- Der Kunde bekommt eine individuelle, bebilderte PDF Anleitung, so dass er sich als Nutzer leicht zurecht findet.
- Touch-freundliche Bedienung.
- Die Seite läuft auch auf älteren Browsern.
