All projects / 05 / 07

Website improvements & mobile

Improving WordPress layouts for mobile

Updates across parts of an existing website, with clearer layouts and mobile presentation, illustrated by Arabic and German examples.

WordPressCSSResponsive design
Studienkolleg Düsseldorf · WordPress
RTLArabic homepage
Desktop + mobileResponsive work
DE + ENMobile page examples

Reading the results

Screenshots document changes to an existing website. Conversion and loading-speed changes were not measured. The German banner was designed for mobile; the English example shows a desktop banner on a phone.

From idea to execution

THE WORK / 05
01 /

The goal

Present information more clearly and with a more modern layout on desktop and mobile, within the existing website.

02 /

My contribution

WordPress layout and component improvements, content and image presentation, calls to action, CSS adjustments and mobile layouts.

03 /

Tools used

WordPressCSSResponsive designLocalisation
Client / organisationStudienkolleg Düsseldorf
Period2026

What the work shows

A dedicated mobile banner allowed the offer, text and contact button to be arranged for the available space. The Arabic homepage shows a before-and-after update; the German and English mobile examples are different language pages.

What I did and why

  1. 01

    Reviewed content across parts of the website and adjusted layout, spacing and text sizes for different screens.

  2. 02

    Reorganized the Arabic homepage opening, separating the image area from the information panel to clarify the reading order.

  3. 03

    Designed a dedicated mobile banner for the German Early Bird page because a desktop image and text composition does not always fit a smaller screen.

  4. 04

    Implemented the changes in WordPress and CSS, taking Arabic reading direction and mobile layouts into account.

Work samples

Arabic homepage: design comparison

Earlier design
Earlier Arabic homepage.
Updated design
Updated Arabic homepage.
German: New banner designed specifically for mobile
English: Desktop banner shown on mobile
Visit the Arabic homepage
Sources, dates and measurement notes

Evidence: the Arabic homepage comparison and mobile Early Bird landing page screenshots. The Arabic images show the earlier and updated design. The English Early Bird screenshot shows the desktop banner on a smartphone, with cropped image areas and overlapping elements. The German page shows the newly designed, separate mobile banner. This comparison illustrates how image framing, text placement and the call to action were adapted for a smaller screen. Changes in conversion rate or loading speed were not measured.

Next projectMeasuring website actions and traffic sourcesAll projects

LET’S TALK

Working on a similar project?

I can help improve an existing website’s content presentation and layouts, especially on mobile and Arabic pages.