Scrabble Wörter in allen (Browser-)größen

Das neue Layout ist ja nun nicht mehr ganz neu. Ein wichtiger Baustein fehlte mir jedoch noch seit der ersten Veröffentlichung: das neue Layout sollte in verschiedenen Browsern gut aussehen und ich wollte nur noch ein Layout pflegen.

Ein Layout für alle Browser

Dank der sogenannten Media Queries reagiert die Seite nun auf unterschiedliche Browsergrößen. Das war zunächst ein Problem, weil viele einen Browser haben, der "nur" 1024 Pixel breit ist, die das neue Layout aber überschreiten kann. Da ich nun schon dabei war habe ich das Layout so angepasst, dass es bis zu einer Breite von 320 Pixeln, also die schmalsten Smartphones, heruntergebrochen wird. Zu große Elemente werden dabei verkleinert oder ganz ausgelassen.

Das neue mobile Layout ist inhaltlich identisch mit der Hauptseite. Die Abweichungen sind nur kosmetischer Natur. Mobile Nutzer können für die Übergangszeit weiterhin zum alten mobilen Layout umschalten, aber ich werde es nicht mehr betreuen.

Navigation vereinfacht

Auch das neue Layout hatte schon an vielen Stellen an Touchscreens gedacht. Das gilt zum Beispiel für die Optionen bei der Suche nach Scrabble-Wörtern, die mit nur einem Klick gewählt werden konnten.

Eine letzte Herausforderung lag nun noch darin, dass das Menü auch funktioniert, wenn der Besucher keine Maus zum Drüberfahren hat. Das ist der einzige Punkt an dem ich nicht sicher bin, ob es auf allen Geräten wie gedacht funktioniert. Getestet habe ich zumindest auf dem iPhone und einem Android Handy. Auch auf dem iPad sollte es jetzt besser sein.

Die Schnellsuche auf der Startseite hat ebenfalls vom Blick durch das Smartphone profitiert. Es ist nun nicht mehr notwendig einen Wert einzugeben. Statt dessen kann man mit einem Klick direkt zur jeweiligen Wortsuche gelangen. Zur Orientierung für neue Besucher wird dabei eine Testsuche ausgelöst.

Desktop Besucher profitieren ebenfalls

Die Optimierung des Layouts für mobile Browser hat mir auch eine andere Sichtweise auf das "normale" Layout gegeben. Damit die Suche nach Scrabble Wörtern auch für mobile Browser schnell ist, habe ich auf einige grafische Elemente verzichtet und die Größe von Dateien und Bildern verringert. Zudem sind die wesentlichen Informationen nach oben gerückt. Das betrifft sowohl die Wortsuchen, bei denen die für den wiederkehrenden Besucher bekannten Einleitungen jetzt unter der Suche stehen und die Übersichtsseiten wie die Wortsuchen und die Artikel, die jetzt gleich oben zu den jeweils weiterführenden Informationen verlinken. Außerdem habe ich die Schriftfarben vereinheitlicht, so dass Links immer braun-orange sind und Überschriften grün. Zudem wurde der Kontrast noch einmal verstärkt.

Ich werde später noch einen Hinweis ins alte mobile Layout einbauen, mit dem ich dessen Nutzer auf die Änderungen aufmerksam mache. Danach erhoffe ich mir natürlich reichlich konstruktives Feedback. Solange noch beide Layouts parallel laufen gibt es Probleme mit der Werbung im neuen Layout auf mobilen Browsern. Das wird sich mit dem Abschalten des zusätzlichen mobilen Layouts aber erledigt haben.

Update: Ich habe gerade den Hinweis auf die Umstellung im alten Layout ergänzt. Von dort könnt ihr direkt zur neuen Version gelangen. Wenn euch die neue Version nicht zusagt oder es Fehler gibt, so sendet mir bitte Feedback. Für kurze Zeit könnt ihr dann über den Link "mobile Version" wieder zurück zum alten Layout.