Wenn wir Websites entwerfen und planen, wie der Inhalt dieser Websites dargestellt wird, tun wir dies oft mit einer idealen Situation. Überschriften und Textbereiche weisen bestimmte Längen auf, während die Bilder, die diesen Text begleiten, so dimensioniert sind, dass sie in Dimensionen angezeigt werden, die es ihnen ermöglichen, im Gesamtdesign wie beabsichtigt zu arbeiten. Selbst wenn diese Elemente als Teil eines responsiven Website-Builds etwas fließend sind (was sie sein sollten), gibt es eine Einschränkung, wie flexibel sie sein können.
Wenn Sie eine Website auf einem CMS (Content Management System) bereitstellen und Clients die Verwaltung dieser Website und das Hinzufügen neuer Inhalte im Laufe der Zeit ermöglichen, werden die von Ihnen festgelegten Grenzwerte absolut auf die Probe gestellt. Vertrauen Sie der Tatsache, dass Ihre Kunden Wege finden, die Website zu ändern, von der Sie nicht träumen würden, dass sie sie tun würden. Wenn Sie sich nicht mit Situationen befasst haben, die nicht den idealen Situationen entsprechen, mit denen Sie in Ihrem Entwurfsprozess gearbeitet haben, könnte das Layout dieser Site ernsthaft gefährdet sein. Aus diesem Grund ist es besonders wichtig, dass Sie den gesamten Website-Inhalt und die Layout-Aspekte der Website vor dem Start dieser Website einem strengen Test unterziehen. Hier finden Sie einige Tipps, wie Sie dies tun können.
Bildgrößen testen
Zweifellos besteht die häufigste Möglichkeit, dass Benutzer das Layout ihrer Website durchbrechen, in unangemessen großen Bildern (dies ist auch der Fall, dass sie die Gesamtleistung einer Website negativ beeinflussen und langsame Download-Geschwindigkeiten verursachen). Dies schließt Bilder ein, die zu groß sind, und Bilder, die zu klein sind, um wie beabsichtigt auf Ihrer Website zu funktionieren.
Selbst wenn Sie CSS verwenden, um die Größe dieser Bilder in Ihrem Layout zu erzwingen, verursachen Bilder, die mit den ursprünglichen Spezifikationen für die Website stark unter dem Maßstab liegen, Probleme. Wenn die Abmessungen eines Bildes nicht korrekt sind, kann es sein, dass Ihr CSS die Anzeige mit der entsprechenden Breite und Höhe erzwingt, aber das Bild selbst und sein Seitenverhältnis können verzerrt sein. Dies wirkt sich sicherlich negativ auf das Erscheinungsbild Ihrer Website aus, da ein zu kleines Bild "in die Luft gejagt" wird und an Qualität verliert. Ein zu großes Bild, das mit CSS verkleinert wird, macht das Erscheinungsbild gut und behält seine Qualität. Die Dateigröße kann jedoch für die Verwendung nicht angemessen groß sein.
Achten Sie beim Testen Ihrer Website darauf, Bilder hinzuzufügen, die außerhalb Ihres vorgesehenen Bereichs liegen. Fügen Sie CSS- und responsive Bildtechniken hinzu, die diese Herausforderungen angehen, indem Sie die Größe des Bildes entsprechend anpassen oder bei einem falschen Seitenverhältnis auch die Verwendung der CSS-Clip-Eigenschaft in Betracht ziehen, um das Bild nach Bedarf zuzuschneiden.
Testen anderer Medien
Testen Sie neben Bildern auch andere Medien wie Videos auf Ihrer Website und sehen Sie, wie diese Elemente in Ihrem Layout mit unterschiedlichen Größen- und Seitenverhältniswerten angezeigt werden. Berücksichtigen Sie noch einmal die Reaktionsfähigkeit Ihrer Website und deren Funktionsweise für verschiedene Geräte- und Bildschirmgrößen.
Textüberschriften testen
Nach Bildern ist der nächste Website-Bereich, der die meisten Probleme mit Live-Websites verursacht, die von Nicht-Web-Experten verwaltet werden, Textüberschriften. Dies sind die (vermeintlich) kurzen Textzeilen, die häufig den Inhalt einer Seite oder eines Abschnitts auf dieser Seite beginnen. Der Text über diesem Absatz mit der Überschrift „Testing Text Headings“ ist ein Beispiel dafür.
Wenn Sie eine Website für eine Überschrift wie diese erstellt haben:
„Textüberschriften testen“
Ihr Client verwendet jedoch den CMS, um einen Artikel mit folgender Überschrift hinzuzufügen:
„Testen von Textüberschriften auf einer Vielzahl von Webseiten mit unterschiedlichen Größenanforderungen und Benutzeranforderungen“
Dann kann Ihr Layout den zusätzlichen Text möglicherweise nicht sauber unterbringen. Genauso wie Sie Ihre Bilder und Medien einem strengen Test unterziehen sollten, indem Sie Einträge hinzufügen, die weit außerhalb der ursprünglich für Sie vorgesehenen Größen liegen. Wenn Sie dies mit Textüberschriften tun, sollten Sie sicherstellen, dass sie flexibel genug sind, um auch ultralange Linien wie die eins oben.
Textlänge testen
Zum Thema Text sollten Sie auch verschiedene Textlängen für den Hauptinhalt der Seiten testen. Dazu gehören sehr, sehr langer Text und sehr, sehr kurzer Text - was eigentlich das Problem ist, das bei vielen Seitenlayouts zum Verhängnis wird.
Da Webseiten von Natur aus an Größe zunehmen, um die Höhe des darin enthaltenen Texts zu berücksichtigen, werden Seiten mit viel Text in der Regel nur nach Bedarf skaliert. Es sei denn, Sie haben die Seitenhöhe (die Sie sollte nicht Wenn Sie möchten, dass Ihre Seite flexibel ist), sollte zusätzlicher Text kein Problem darstellen. Zu wenig Text ist ein anderes Thema - und viele Designer vergessen, sie in ihrem Designprozess zu testen.
Zu wenig Text kann dazu führen, dass eine Seite unvollständig oder sogar fehlerhaft dargestellt wird. Skalieren Sie daher den Seiteninhalt auf das Geschehen in diesen Fällen und nehmen Sie die erforderlichen Anpassungen am CSS Ihrer Website vor, um mit diesen Situationen umgehen zu können.
Zoom der Seite prüfen
Personen mit Sehstörungen verwenden möglicherweise die Seitenzoomfunktion eines Webbrowsers, um die Größe Ihrer Webseite zu vergrößern. Wenn jemand einen größeren Zoombereich erhält, kann das Layout beschädigt werden. Dies ist einer der Gründe, warum Sie EMs als Maßeinheit für die Schriftgrößen Ihrer Website sowie für Ihre Medienabfragen verwenden möchten. Da EMs eine relative Maßeinheit sind (basierend auf der Standardtextgröße dieses Browsers), sind sie für flüssige, flexible Website-Layouts günstiger.
Testen Sie Ihre Website auf Seitenvergrößerung und stoppen Sie nicht bei einer oder zwei Zoomstufen.Vergrößern Sie Ihre Site auf verschiedenen Ebenen nach oben und unten, um sicherzustellen, dass Ihre Seiten wie beabsichtigt reagieren.
Vergessen Sie nicht die Downloadgeschwindigkeit und -leistung
Vergessen Sie beim Testen der Layout-Auswirkungen von Kundenentscheidungen nicht, auch die Auswirkungen dieser Entscheidungen auf die Leistung einer Website zu berücksichtigen. Die von diesen Kunden hinzugefügten Bilder und Inhalte könnten die Downloadgeschwindigkeit einer Website beeinträchtigen und die allgemeine Verwendbarkeit der Website ernsthaft beeinträchtigen. Planen Sie die Auswirkungen dieser Ergänzungen und leisten Sie einen Beitrag zum Entwicklungsprozess, um diese Auswirkungen zu minimieren.
Wenn Ihre Website mit einem Leistungsbudget erstellt wird, teilen Sie diese Informationen mit Ihren Kunden und zeigen Sie ihnen, wie Sie eine Webseite auf Leistungsmesswerte testen. Erklären Sie ihnen, wie wichtig es ist, diese festgelegten Schwellenwerte für Seitengröße und Downloadgeschwindigkeit beizubehalten, und zeigen Sie ihnen, wie die von ihnen vorgenommenen Ergänzungen die gesamte Site beeinflussen können. Nehmen Sie sich die Zeit, um sie darin zu schulen, wie die Website funktioniert und gut aussieht. Zum Thema Ausbildung…
Kundenschulung ist wichtig
Es ist wichtig, die Bilder, den Text und andere Seitenelemente Ihrer Website einem strengen Test zu unterziehen und Stile zu erstellen, die extreme Fälle berücksichtigen. Dies ist jedoch kein Ersatz für die Kundenschulung. Ihre Bullet-Proofing-Funktion für eine Site sollte zusätzlich zu der Zeit sein, in der Sie Ihre Kunden darin trainieren, wie sie ihre Site effektiv pflegen und verwalten können. Am Ende wird ein gut ausgebildeter Kunde, der seine Verantwortlichkeiten und die Auswirkungen der Entscheidungen, die er auf einer Website trifft, verstanden hat, von unschätzbarem Wert für Ihre Bemühungen sein, diese Site weiterhin funktionieren zu lassen und ihr Bestes zu geben.
