ShipPress

Anleitungen

Prüfe deine Website auf Computer, Laptop, Tablet und Phone

Die meisten Besucher sehen deine Website auf dem Handy und nicht auf dem großen Bildschirm, an dem du sie baust. Die ShipPress-Vorschau zeigt deine Website mit einem Klick in vier Breiten. In diesem Tutorial prüfe ich Pier 7 Coffee in allen vier Größen, finde ein kleines Problem im Menü auf dem Handy und bitte die KI, es zu beheben.

Von Oberon Lai. Ich entwickle ShipPress (Codotx, LLC), das hier ist also unser eigenes Produkt. Auf dieser Seite gibt es keine Affiliate-Links.

  1. Die vier Größen in der Vorschauleiste finden

    Öffne deine Website. Oben rechts in der Vorschau findest du vier Schaltflächen: Computer, Laptop, Tablet und Phone. Fahre mit der Maus über eine davon, um ihre Breite zu sehen:

    • Computer: 1920 px, ein großer Desktop-Bildschirm.
    • Laptop: 1280 px.
    • Tablet: 1024 px.
    • Phone: 480 px.

    Die Seite wird in genau dieser Breite dargestellt. Passt sie nicht in dein Fenster, verkleinert ShipPress sie, sodass du immer die ganze Breite siehst. ShipPress merkt sich die Größe, die du für jede Website gewählt hast.

    ShipPress-Fenster mit den hervorgehobenen Schaltflächen Computer, Laptop, Tablet und Phone oben rechts in der Vorschau.
    Die vier Größen befinden sich oben rechts in der Vorschau. Hier ist Computer aktiv.

  2. Laptop: die häufigste Größe für Desktop-Besucher

    Klicke auf Laptop. Viele Leute surfen auf einem 13- oder 14-Zoll-Laptop, deshalb ist das eine gute Alltagsprüfung. Schau dir das Menü oben und die großen Überschriften an: Bei Pier 7 Coffee bleibt das Layout gleich, nur etwas enger, und das Menü passt weiterhin in eine Zeile.

    Startseite von Pier 7 Coffee in der Größe Laptop (1280 px).
    Laptop (1280 px): gleiches Layout, etwas enger.

  3. Tablet: Spaltenreihen und breite Bilder prüfen

    Klicke auf Tablet. Hier wird es bei Reihen mit drei oder vier Spalten, langen Menüs und breiten Fotos langsam eng. Scrolle die ganze Seite nach unten, nicht nur den oberen Teil: In den weiter unten liegenden Abschnitten wird Text zuerst gequetscht oder ein Bild abgeschnitten.

    Startseite von Pier 7 Coffee in der Größe Tablet (1024 px).
    Tablet (1024 px): Das Menü passt noch, das Foto ist enger zugeschnitten.

  4. Phone: das Menü öffnen und jede Seite durchgehen

    Klicke auf Phone. Jetzt siehst du die Website so, wie die meisten Besucher sie sehen werden. Bei Pier 7 Coffee wird das obere Menü zu einer MENU-Schaltfläche, und Foto und Titel werden übereinander gestapelt.

    Hör nicht bei der Startseite auf. Nutze das Seitenmenü oben links in der Vorschau (es zeigt die Seite, auf der du dich befindest, zum Beispiel Home page), um zu deinen anderen Seiten zu gelangen, und mache auf jeder Seite Folgendes:

    • das Menü öffnen und wieder schließen,
    • ganz nach unten scrollen,
    • prüfen, ob Preise, Tabellen und Buttons gut lesbar und leicht antippbar sind.
    Startseite von Pier 7 Coffee in der Größe Phone (480 px), mit einer MENU-Schaltfläche oben.
    Phone (480 px): Das Menü wird zu einer MENU-Schaltfläche und der Inhalt wird gestapelt.
    Seite Bar Menu in der Größe Phone: Getränkenamen, Preise und Beschreibungen in einer gut lesbaren Spalte.
    Die Seite Bar Menu auf dem Handy: Die Preisliste lässt sich in einer Spalte gut lesen.

  5. Erkennen, was nicht stimmt

    Kleine Probleme übersieht man auf einem großen Bildschirm leicht. Als ich das Menü in der Größe Phone geöffnet habe, hatte es in der oberen rechten Ecke zwei Schließen-Buttons: ein großes × und ein winziges zusätzliches ×. Es funktioniert trotzdem, wirkt aber unfertig, und du siehst es nur auf dem Handy.

    Menü auf dem Handy vorher und nachher: links zwei Schließen-Buttons in der oberen rechten Ecke, rechts nur einer.
    Links: das Handy-Menü mit zwei Schließen-Buttons. Rechts: nach der Korrektur im nächsten Schritt.

  6. Sag der KI, was du siehst und in welcher Größe

    Beschreibe das Problem im Chat in einfachen Worten und sag, in welcher Größe es auftritt. Sag auch, was unverändert bleiben soll. Ich habe geschrieben:

    „Wenn ich auf Handys das Menü öffne, gibt es oben rechts zwei Schließen-Buttons (x). Bitte lass nur einen übrig und lass das Layout auf dem Computer so, wie es ist.“

    Während der Worker arbeitet, zeigt die Vorschau The AI is changing your site…. Du kannst weitertippen; neue Nachrichten kommen danach an die Reihe. Nach ein bis zwei Minuten erklärte der Worker, was er gefunden hatte (das Theme zeichnete ein zweites × über das eigene Symbol des Menüs), entfernte das überflüssige und sagte, dass die Änderung nur das geöffnete Handy-Menü betrifft.

    ShipPress-Chat mit der Anfrage zu den zwei Schließen-Buttons, während die KI arbeitet, Vorschau in der Größe Phone.
    Die Anfrage im Chat. Die Vorschau bleibt auf Phone, während die KI arbeitet.
    Die Antwort des Workers: Er hat den überflüssigen Schließen-Button entfernt und nur den Stil des geöffneten Handy-Menüs geändert.
    Die Antwort des Workers, mit Vorschlägen, was du als Nächstes tun kannst.

  7. Noch einmal auf Phone prüfen, dann auf Computer

    Die KI kann den Bildschirm nicht immer selbst ansehen, also prüfe das Ergebnis selbst. Bleibe auf Phone und öffne das Menü noch einmal: Jetzt gibt es einen Schließen-Button (die rechte Seite des Vorher-Nachher-Bildes oben). Klicke dann auf Computer und vergewissere dich, dass der große Bildschirm noch genauso aussieht. Wenn dir eine Änderung nicht gefällt, öffne oben History und gehe zur Version davor zurück.

    Seite Bar Menu nach der Korrektur wieder in der Größe Computer, sie sieht aus wie vorher.
    Zurück auf Computer: Das Desktop-Layout hat sich nicht verändert.

  8. Tipps

    • Prüfe jede Seite auf Phone, bevor du Go live gehst, und noch einmal nach großen Änderungen wie einem neuen Design.
    • Nenne die Größe in deiner Nachricht („auf Handys“, „auf Tablets“), damit die KI nur diese Größe ändert.
    • Um die Website in einem echten Browserfenster auszuprobieren, nutze oben rechts in der Vorschau Open in browser. Um sie auf deinem eigenen Handy zu sehen, nutze Share to phone.
    • Wenn auf Phone alles in Ordnung ist, aber auf Tablet etwas nicht stimmt, sag das: Die Zwischengrößen sind diejenigen, bei denen Designs am häufigsten Fehler haben.