Alle Projekte / 05 / 07

WordPress & mobile Darstellung

WordPress übersichtlicher und mobilfreundlicher gestalten

Überarbeitung mehrerer Bereiche einer bestehenden Website: klarere Layouts und mobile Darstellung, gezeigt an arabischen und deutschen Beispielen.

WordPressCSSResponsive Design
Studienkolleg Düsseldorf · WordPress
RTLArabische Startseite
Desktop + mobilResponsive Gestaltung
DE + ENMobile Seitenbeispiele

Ergebnisse einordnen

Die Bilder dokumentieren Änderungen an einer bestehenden Website. Veränderungen der Conversion-Rate oder Ladezeit wurden nicht gemessen. Der deutsche Banner wurde für Smartphones gestaltet; das englische Beispiel zeigt einen Desktop-Banner auf einem Handy.

Von der Idee zur Umsetzung

THE WORK / 05
01 /

Das Ziel

Informationen innerhalb der bestehenden Website moderner und übersichtlicher präsentieren – auf Desktop und Smartphone.

02 /

Mein Beitrag

WordPress-Layouts und Komponenten überarbeiten, Inhalte und Bilder ordnen sowie CSS, Handlungsaufforderungen und mobile Ansichten anpassen.

03 /

Verwendete Tools

WordPressCSSResponsive DesignLokalisierung
Kunde / OrganisationStudienkolleg Düsseldorf
Zeitraum2026

Was die Arbeit zeigt

Ein eigener Mobil-Banner ermöglichte es, Angebot, Text und Kontaktaufruf passend zur Bildschirmfläche anzuordnen. Der Vorher-Nachher-Vergleich betrifft die arabische Startseite; die deutschen und englischen Mobilbeispiele stammen aus unterschiedlichen Sprachseiten.

Meine Umsetzung und Entscheidungen

  1. 01

    Die Inhaltsdarstellung in mehreren Bereichen geprüft und Anordnung, Abstände und Textgrößen an unterschiedliche Bildschirme angepasst.

  2. 02

    Den Einstieg der arabischen Startseite überarbeitet und Bild und Informationsfläche getrennt, um die Leserichtung klarer zu führen.

  3. 03

    Einen eigenen Mobil-Banner für die deutsche Early-Bird-Seite gestaltet, weil eine Desktop-Komposition nicht immer auf den kleinen Bildschirm passt.

  4. 04

    Änderungen in WordPress und mit CSS umgesetzt und dabei arabische Leserichtung und mobile Layouts berücksichtigt.

Arbeitsbeispiele

Arabische Startseite im Gestaltungsvergleich

Früherer Entwurf
Frühere arabische Startseite.
Überarbeitete Gestaltung
Überarbeitete arabische Startseite.
Deutsch: Neuer Banner speziell für die mobile Ansicht
Englisch: Desktop-Banner in der mobilen Ansicht
Arabische Startseite besuchen
Quellen, Zeiträume und Messhinweise

Belege: Vergleich der arabischen Startseite und der mobilen Early-Bird-Landingpages. Die arabischen Bilder zeigen die frühere und überarbeitete Gestaltung. Der englische Early-Bird-Screenshot zeigt den Desktop-Banner in der Smartphoneansicht, mit angeschnittenen Bildbereichen und überlagerten Elementen. Die deutsche Seite zeigt den neu gestalteten, separaten Banner für Mobilgeräte. Der Vergleich veranschaulicht die Anpassung von Bildausschnitt, Textanordnung und Handlungsaufforderung an den kleinen Bildschirm. Eine Veränderung der Conversion-Rate oder Ladegeschwindigkeit wurde nicht gemessen.

Nächstes ProjektWebsite-Aktionen und Besuchsquellen messenAlle Projekte

KONTAKT

Du planst ein ähnliches Projekt?

Ich helfe dir, Inhalte und Layouts deiner bestehenden Website zu verbessern, besonders für Smartphones und arabische Seiten.