Damit Sie sicherstellen können, dass Ihre Webseite auf allen Geräten optimal angezeigt wird, haben wir hier ein paar Tipps zur Gestaltung einer responsiven Webseite für Sie vorbereitet:
1. Planung ist der Schlüssel zum Erfolg
Definieren Sie Ihre Zielgruppe und deren Geräte (Smartphones, Tablets, Desktops). Sind Ihre Kunden eher am PC auf Arbeit vor dem großen Bildschirm aktiv, wenn sie auf Ihre Seite kommen, oder vielleicht doch abends auf der Couch am Handy bzw. Tablet, um nochmal eine Anfrage zu stellen oder eines Ihrer Produkte zu kaufen. Gerade im B2C-Bereich, also wenn Sie direkt an Privatkunden verkaufen, ist es ratsam bei der Planung Ihrer Website mit der Gestaltung für die mobilen Geräte zu beginnen, um Probleme bei der Anpassung im vornherein zu vermeiden. Das Gleiche gilt auch, wenn Sie als B2B-Betrieb hauptsächlich mit Unternehmern selbst oder mit Führungskräften zu tun haben. Für diese Personen ist das Smartphone das erste Mittel der Wahl, um Recherche zu betreiben, da sie i.d.R. oft im Außendienst unterwegs sind oder auch innerhalb des Betriebes viel Zeit außerhalb des Bürotisches verbringen.
2. Nutzen Sie ein responsives Framework oder einen Page-Builder
Es gibt eine Vielzahl von responsiven Frameworks und Website-Buildern, die Ihnen den Prozess der Gestaltung einer responsiven Webseite erleichtern können. Diese Tools nehmen Ihnen zwar nicht die komplette Arbeit ab, jedoch erleichtern sie den Prozess enorm und können auch konsistente und professionelle Darstellung auf allen Geräten gewährleisten.
Verwenden Sie beim Aufbau dazu flexible Raster bzw. Flex-Boxen, die prozentuale Werte verwenden, um die Größe von verschiedenen Elementen auf der Website relativ zur Bildschirmgröße anzupassen. Eine weitere Funktion, die den responsiven Aufbau erleichten, sind CSS Media Queries. Mit diesen kann z.B. definiert werden ab welcher Bildschirmgröße bestimmte Darstellungsvarianten verwendet werden sollen. Für große Bildschirme kann so beispielsweise eine breitere Darstellung verwendet werden, während auf kleineren Bildschirmen die Inhalte gestapelt oder angepasst werden, um eine bessere Benutzererfahrung zu bieten.
3. Text und Schriftarten sind zu beachten
Wählen Sie auf jeden Fall Schriftarten, die auf allen Geräten und insbesondere auf allen Smartphone-Größen gut lesbar sind. Dabei sollten Sie auf Schriften mit klaren Linien und ausreichendem Kontrast achten. Bei responsivem Design ist es ratsam, relative Einheiten wie „em“ oder „rem“ anstelle von festen Pixelwerten für die Schriftgröße zu verwenden. Dadurch passt sich der Text proportional an die Bildschirmgröße an. Ebenso helfen hier wieder Media Queries, um bei kleineren Bildschirmen die Schriftgröße anzupassen und die Lesbarkeit zu verbessern.
4. Anpassung der Navigation
Die Navigation auf einer responsiven Webseite sollte intuitiv und benutzerfreundlich sein – auch unabhängig von der Bildschirmgröße. Bei kleineren Bildschirmen kann es zudem sinnvoll sein, eine mobile Navigation mit einem Menüsymbol (Hamburger-Menü) zu verwenden. Wie z.B. auf unserer
WoWi-Webseite. Dies spart Platz und sorgt für eine aufgeräumte Anzeige.
Stellen Sie unbedingt sicher, dass Links und Schaltflächen groß genug sind, um auf Touchscreens einfach bedient werden zu können. Ein ausreichender Abstand zwischen den Elementen sollte gewährleistet sein, um unbeabsichtigte Berührungen zu vermeiden.
