• Articles
• admin

Wenn wir neuere Projekte starten, können Sie leicht vergessen, ältere Blogs und Websites zu aktualisieren. In diesem Artikel möchte ich 30 solide Ideen vorstellen, die Sie schnell umsetzen können, um Ihre Website benutzerfreundlicher zu gestalten. Nicht alle von ihnen basieren ausschließlich auf Front-End-Design. Ich werde auch beliebte HTML5-Codierungstechniken diskutieren, die Webparsern und Spidern helfen können, Ihre Daten entsprechend zu kategorisieren.

Nicht jede Website muss aktualisiert werden, und nicht mit jeder Technik, die in diesem Beitrag verfügbar ist. Diese Ideen sollen Entwickler dazu bringen, über Design nachzudenken und Websites schöner aussehen zu lassen. Es ist jetzt einfacher als je zuvor, skalierbare responsive Website-Layouts zu erstellen, die auf jedem digitalen Bildschirm gut aussehen.

1. UX-Tests

Ich bin schuldig, nicht immer Tests auf meinen Website-Starts durchzuführen, aber wann immer dies möglich ist, ist dies eine meiner Lieblingsaktivitäten. Sie können so viel über typische Benutzerinteraktionen lernen, indem Sie untersuchen, wie sie mit Ihrer Website spielen. User Experience Studien können ausschließlich durch Tools wie Google Analytics durchgeführt werden, oder mit anderen 3rd-Party-Ressourcen.

Die potenziellen Vorteile, die Sie finden können, sind enorm. User Experience Testing ist hilfreich für Webentwickler, um zu erfahren, welche Bereiche ihrer Website ärgerlich, fehlerhaft oder verbesserungswürdig sind. Verwenden Sie nicht nur digitale Tools, sondern auch Ihre Freunde und Kollegen. Das Hören von echtem menschlichem Feedback auf Ihrer Website kann zu Ergebnissen führen, die Sie nicht über einen Computerbildschirm erhalten können.

2. Whitespace

Wir können uns Whitespace als den Platz zwischen Elementen auf Ihrer Seite vorstellen. Einige Benutzer werden ein beengtes Layout nicht stören, wenn sie bereits daran gewöhnt sind. Betrachten Sie jedoch Ihre Zielgruppe und überlegen Sie, wie viele von ihnen nicht so computerkundig sind wie die jüngere Generation.

Sie können Bereiche, die zusätzlichen Abstand benötigen, durch geteilte A / B-Tests und Beibehaltung des Benutzerfeedbacks bestimmen. Oder schwingen Sie es einfach und sehen Sie, was Sie sich einfallen lassen können!

3. Web Fonts

Dynamische Web Fonts ermöglichen es Designern, Webseiten zu erstellen, ohne auf die typischen Schriftfamilien beschränkt zu sein. Dieser Trend ist jetzt immer beliebter geworden, da die meisten durchschnittlichen Internetnutzer eine anständige DSL / T1 / Glasfaser-Verbindung haben. Einschließlich Verweise auf 3rd-Party-Schriftart Stylesheets wird nicht mehr produzieren große Verzögerung in Ihrem DL-Geschwindigkeiten.

Der wahrscheinlich beste Anbieter von Schriftarten ist Google Webfonts. Sie können auf die Anwendung zugreifen, auch wenn Sie kein Google-Konto haben, obwohl die Registrierung Vorteile bietet. Der vollständige Einrichtungsprozess dauert nur 3 Schritte und Sie können benutzerdefinierte Google Fonts innerhalb von Minuten auf Ihrer Website ausführen.

4. CSS3 Shadows

Wenn ich über die Verwendung von Schatten zur Verbesserung Ihres Layouts spreche, verweise ich tatsächlich auf zwei verschiedene Eigenschaften. Der beliebte Box-Shadow ist wirklich cool für Divs und Boxen in Ihrem Layout. Wenn Sie diesen Effekt an Ihre Container-, Wrapper- oder inneren Seitenfelder anhängen, erhalten Sie einen schlankeren 3D-Effekt für Ihre Webseite.

Es lohnt sich aber auch, die CSS3-Textschatteneigenschaft für die Typografie in Betracht zu ziehen, die von der Seite springt. Apple ist eines der ersten Unternehmen, das Textschatten rund um ihr Layout stark implementiert. Sie können einen entmutigenden Effekt erzielen, indem Sie Textschatten hinzufügen, die der Farbe Ihrer Schriftarten entgegengesetzt sind (weiße Schatten für dunklen Text, schwarze Schatten für hellen Text).

5. Texturen & Sich wiederholende Muster

Es gibt viele Websites, die nur mit Standardfarbschemata erstellt werden können. Damit sich Ihre Website jedoch wirklich von der Masse abhebt, können Sie Ihrem Hintergrund Texturen hinzufügen und Kacheln wiederholen. Eine der coolsten kostenlosen Webapps ist der Noise Texture Generator, der in jedem Browser ausgeführt werden kann.

Wählen Sie einfach die Hintergrundfarbe und das Rauschen, das Sie verwenden möchten, und diese App erstellt dynamisch ein gekacheltes Hintergrundbild. Wenn Sie nach Mustern und Fliesen suchen, würde ich subtile Muster empfehlen. Sie haben eine riesige Sammlung von verwendbaren Texturen, die Sie kostenlos herunterladen können.

6. CSS3-Verlaufshintergründe

Während wir über Hintergründe diskutieren, sollte ich die allseits beliebten CSS3-Verläufe ansprechen. Diese bieten Web-Entwickler mit einem enormen Vorteil, sie aus Adobe Photoshop für Web-Hintergründe zu halten. Und diese Verläufe können auf mehr als nur den Körper wirken, angewendet auf Navigationsleisten und Fußzeilen und andere wichtige Bereiche in Ihrem Layout.

7. Boostrap

Twitters Bootstrap ist möglicherweise das größte Frontend-UI-Framework für Webentwickler. Dazu gehören Schaltflächen, Formulareingaben, Links, Spalten und unzählige andere vorformatierte Seitenobjekte. Die häufigste Verwendung für Bootstrap ist innerhalb von Zielseiten für neue Anwendungen.

Open-Source-Entwickler verwenden Bootstrap aber auch, wenn sie Demoseiten für die von ihnen veröffentlichten Bibliotheken, Plugins oder Mini-Skripte erstellen.

Ich habe das Gefühl, dass Bootstrap so stark gewachsen ist, dass es heutzutage auf jeder Website angewendet werden kann. Entwickler, die den größten Nutzen finden, verwenden Bootstrap jedoch als schnellen Ersatz für die Einführung ihrer eigenen UI-Designs. Betrachten Sie diese Frontend-Bibliothek, wenn Sie das nächste Mal eine Webseite mit einem einzigen konkreten Zweck starten: Zielseite, Produktdemo, mobile App-Website usw.

Verwandt:

• Erste Schritte mit Twitter Bootstrap
• Bootstrap 201: Modales Fenster-Plugin

8. HTML5 Kickstart

Die meisten Webentwickler haben noch nichts von HTML5 Kickstart von 99Lime gehört. Dies ist eine weitere Frontend-UI-Bibliothek, die sich mehr auf schöne Designästhetik als auf gängige HTML5-Layouts konzentriert. Es gibt jedoch Codebeispiele zum Generieren von beiden in Pik. Sie können aus vordefinierten Elementen wie Verlaufsschaltflächen und Dropdown-Menüs auswählen. Ich würde nicht sagen, dass dies die gleiche Popularität wie Bootstrap hat, aber was macht es dann wieder?

Wenn Sie die Zeit und Geduld haben, würde ich empfehlen, dieser Bibliothek einen kurzen Testlauf zu geben. Erstellen Sie ein kleines Sandbox-Layout und prüfen Sie, ob Sie das Standardgefühl für jedes Benutzeroberflächenelement genießen. Kickstart ist sicherlich nicht für jedes Projekt, aber es kann eine große Zeitersparnis sein, wenn es in einer Klemme steckt.

9. jQuery UI

Animationen und Schieberegler und Fading-Elemente werden normalerweise aus der jQuery-Bibliothek ausgeführt. Dies ist die häufigste Open-Source-JavaScript-Bibliothek für Frontend-Entwickler, aber es hat auch eine Begleitbibliothek jQuery UI. Entwickler übersehen dies und denken, dass es nicht viel als Gegenleistung für die zusätzlichen KB bieten kann.

Wenn Sie jedoch die UI-Bibliothek einschließen, können Sie den easing -Aufruf für alle dynamischen Seitenanimationen aktualisieren. Dies bedeutet, dass Sie den jQuery-Animationstyp für alle Dropdown-Menüs, Überblendungselemente, Bildlauf-Diashows und alles andere dynamische anpassen können.

Auf der jQueryUI-Website finden Sie eine Demoseite, auf der Sie die vielen Variationen testen und sehen können, ob Ihnen bestimmte Animationstypen gefallen.

Verwandt:

• So gestalten Sie jQuery UI Accordion
• Lautstärkeregler mit jQuery UI Slider
• Anpassen und Thematisieren von jQuery UI Datepicker
• Ziehen und Ablegen mit jQuery UI sortierbar

10. Extravagante BG-Fotos

Heutzutage gibt es unzählige Websites, die den Vollbild-Hintergrundbildeffekt genutzt haben. Wenn Sie ein hochauflösendes Fotobeispiel finden, das als Hintergrundbild gut aussehen würde, lohnt es sich möglicherweise, diese Technik in Ihr Layout aufzunehmen. Große Hintergründe leisten hervorragende Arbeit, um die Aufmerksamkeit Ihrer Benutzer auf sich zu ziehen und gleichzeitig das Genre Ihrer Website zu implizieren.

Wenn Sie nach einer schnellen Lösung suchen, schauen Sie sich das jQuery Backstretch Plugin an. Dies erfordert nur eine einzige Codezeile, damit Ihre neuen Hintergründe mit einer beliebigen Auflösung ordnungsgemäß und reaktionsschnell skaliert werden können. Aber für Entwickler, die gegen JavaScript-Methoden sind, empfehle ich die CSS3 Fullpage Image-Technik, die auf CSS-Tricks veröffentlicht wurde.

11. Menüsymbole

Um die Aufmerksamkeit der Besucher auf sich zu ziehen, kann es sich lohnen, ein kleines Icon-Set in Ihre Webseite aufzunehmen. Standardmenülinks reichen oft aus, um ordnungsgemäß zu funktionieren und Benutzern das Navigieren zwischen Seiten zu erleichtern.

Ich bin jedoch oft beeindruckt, benutzerdefinierte Symbole für jeden Menülink zu sehen. Sie können Tonnen von kostenlosen Icon-Sets finden, die in Ihrer oberen Navigation, Seitenleiste oder Fußzeile perfekt aussehen würden.

12. Aktualisiertes Farbschema

Ich meine eigentlich nicht, Ihr gesamtes Farbschema zu ändern, sondern eher neue Farben hinzuzufügen. Nach monatelangem Betrieb des gleichen Layouts ist es schön, kleinere Bereiche zu aktualisieren und wiederkehrende Besucher zu überraschen.

Einige interessante Elemente können Ankerlinks, Kopfzeilen, Hintergründe und Symbolleisten enthalten. Erwägen Sie die Verwendung von Online-Tools wie Color Scheme Designer, um Ihre Flugbahn zu verbessern.

13. Verbesserte Browserunterstützung

Es ist schwierig, eine Website zu erstellen, die von allen wichtigen älteren Browsern vollständig unterstützt wird. Obwohl nur sehr wenige Leute Internet Explorer 6 ausführen, wird es immer noch in einigen meiner Google Analytics-Berichte angezeigt. Entwickler, die nach Ideen suchen, können eine kleine Testversion von Browsertests durchführen.

Die mehr wichtig mainstream browser umfassen die neueste version von IE9, Mozilla Firefox, Opera, Chrome, Safari, und möglicherweise Camino/SeaMonkey. Aber Internet Explorer 6-8 sind auch immer noch weit verbreitet in Unternehmen und älteren Computerlabors verwendet. Sie können schnelle Rendering-Tests mit der IETester-Software ausführen. In ähnlicher Weise verfügt IE8 über einen Entwicklertool-Modus, in dem Sie zum Debuggen in ältere Rendering-Engines wechseln können.

14. Bei Typografie

Stellen Sie möglicherweise fest, dass Ihre alten Layouts Textstile immer noch effizient verwenden, dies ist jedoch nicht immer der Fall. Ich denke, dass große Typografie viel einfacher in Layouts passt. Ganz zu schweigen davon, dass es einfacher zu lesen ist und bei größeren Bildschirmauflösungen mehr Platz beansprucht.

Die Idee der „angepassten Typografie“ besteht darin, Text so zu gestalten, dass er genau in Ihre Website passt. Sie können einige Seiten durchgehen und diese Stile in 10-15 Minuten aktualisieren.

15. Social Media Sharing

Inzwischen bin ich sicher, dass die meisten Entwickler mit den Sharing-Badges vertraut sind, die auf beliebten Social-Networking-Websites verwendet werden. Facebook, Twitter, Reddit, Pinterest, Dzone und viele andere externe Netzwerke bieten Codes, die Sie in Ihre Website einbetten können. Dann können Besucher Ihren Link in diesen Netzwerken teilen, ohne Ihre Website verlassen zu müssen.

In einigen Blogs oder Webmagazinen werden Sie feststellen, dass diese Abzeichen Ihnen folgen, wenn Sie die Seite nach unten scrollen. Dies ist eine ausgezeichnete Technik, da Sie sie oft außerhalb des Körperbereichs schweben lassen können, wo sie keine wichtigen Inhalte blockieren. Ich empfehle auch, unseren Beitrag in den Symbolleisten der sozialen Medien zu durchsuchen, was einen ähnlichen Effekt haben kann.

16. Benutzerdiskussion

Wenn Sie ein CMS wie WordPress oder Drupal ausführen, können Sie standardmäßig Kommentarformulare einfügen. Wenn Sie jedoch statische Webseiten erstellen, müssen Sie Ihr eigenes Datenbanksystem einrichten, um diese Funktionalität nachzuahmen. Aber mit dem Aufstieg der Open-Source-Technologie können Entwickler jetzt bessere Lösungen wie Disqus implementieren.

Mit dieser Methode müssen Sie nicht ständig Spam und Junk aus dem Diskussionsbereich entfernen. Benutzer, die noch kein Disqus-Konto haben, können sich schnell über beliebte Social-Networking-Profile verbinden oder sich direkt von Ihrer Seite aus anmelden. Sogar WordPress-Benutzer, die Akismet satt haben, können mit dem Disqus Comment System Plugin wechseln.

17. Erweitern Sie den Fußzeilenbereich

Die meisten kleineren Website-Layouts sind mit dem unteren Fußzeilenbereich sehr konservativ. Dies kann einige grundlegende Copyright-Informationen und einige Links zur Hauptseite enthalten. Moderne Webdesign-Trends unterstützen jedoch die Idee großer Fußzeilen mit vielen Meta-Links.

Diese werden häufig in Startups und großen Unternehmenswebsites mit vielen zusätzlichen Informationen gesehen. Versuchen Sie auf keinen Fall, dies in ein Layout zu zwingen, in das es nicht gehört, aber es lohnt sich, darüber nachzudenken, ob das Öffnen eines größeren Fußzeilenbereichs Ihre Website-Erfahrung verbessern kann.

18. Responsify Images

Dynamische, flüssige und responsive Webseitenbilder sind zu einem Trend geworden. Es ist jetzt fast lächerlich, Ihre Bilder immer noch auf feste Breiten einzustellen und aus dem Container-Wrapper auszubrechen, wenn die Größe der Fenster geändert wird. Die gebräuchlichste Technik besteht darin, width: 100% mit CSS auf alle img-Elemente anzuwenden.

Sie können aber auch einige andere Open-Source-Methoden in Betracht ziehen, die sich in einer Bindung als nützlich erweisen können. ResponsiveImg ist ein solches jQuery-Plugin mit einer sehr kleinen Dateigröße. Fügen Sie dies einfach in Ihre Seite ein und führen Sie den einzeiligen Code aus, der auf alle Bilder auf der Seite abzielt. Dies ist eine hervorragende Ergänzung zu mobilen Layouts, die immer noch Desktop-basierte Inhalte verwenden.

19. Menü Barrierefreiheit

Ich würde nicht sagen, dass Sie dies ständig in Ihren Layouts aktualisieren sollten, aber Entwickler und Designer machen es beim ersten Mal nicht richtig. Ich denke, es lohnt sich, auf Ihre Navigationssysteme zurückzublicken und zu überlegen, ob es bessere Möglichkeiten gibt, Untermenü-Links zu implementieren.

Seitenleisten und Inhaltsbereiche enthalten häufig Akkordeonmenüs, da vertikal genügend Platz vorhanden ist. Denken Sie jedoch an horizontale Navigationsleisten mit Dropdown-Menüs oder verschiebbaren Untermenüs. Solange Ihre Menülinks schnell und einfach zugänglich sind, sollte es in Ihrer Benutzerbasis keine Probleme geben.

20. Semantische Mikroformate / Mikrodaten

Mikroformate und die neuere Mikrodatenspezifikation werden verwendet, um Metadaten in Ihrem HTML-Code zu erweitern. Diese Attribute bieten zusätzliche Informationen zu Ihren Inhalten und deren Beziehung zu anderen Inhalten auf der Seite. Letztendlich helfen diese Ergebnisse Google dabei, den Rang Ihrer Website für einzelne Keywords und in anderen Suchmaschinen wie der Bild- und Videosuche zu bestimmen.

Die am meisten unterstützte dokumentierte Version von Mikrodaten heißt Schema.org . Ihre Website bietet alle Informationen, die Sie benötigen, um Ihren HTML-Inhalt mit semantischem Schema-Markup zu bearbeiten. Diese Schemasyntax wird von allen wichtigen Suchmaschinen unterstützt und wird sich wahrscheinlich in die Zukunft des semantischen Metadatendesigns entwickeln.

21. Nav-Links neu anordnen

Bei einigen Websites ist die Navigation mit festem Inhalt möglicherweise kein echtes Problem. Aber ich habe in einigen größeren Business-Websites oder Portfolios festgestellt, dass bestimmte Navigationslinks zu viel Vorrang haben. Und ebenso gibt es einige Artikel, die selten zu finden sind! Nehmen Sie sich Zeit, um Ihre Website zu durchsuchen und sich so zu verhalten, als wären Sie ein anderer Besucher.

Überlegen Sie, welche Links Sie am meisten interessieren und möglicherweise welche Links Sie hinzufügen möchten. Diese können eine kurze Geschichte Ihrer Website, Informationen über das Team, Kontaktdaten, Datenschutzbedenken, Pressemitteilungen usw. enthalten. Es kann auch hilfreich sein, Benutzerfeedback zu sammeln und festzustellen, ob Korrelationen zwischen ihren Wünschen und der Nachfrage nach neuen oder aktualisierten Seiten bestehen.

22. Back to Top Link

Wenn Ihre Website sehr lange Seiten mit Inhalten veröffentlicht, ist dies ein unverzichtbares Element in Ihrem Layout. Die Scrollen zurück nach oben Links finden Sie fast überall in diesen Tagen. Benutzer denken nicht daran, die Home-Taste zu drücken, und es kann ärgerlich sein, den ganzen Weg zurück zu scrollen. Der beste Ort für diesen Link ist, neben Ihrem Container zu schweben oder direkt in der Fußzeile zu sitzen, wie wir es auf Hongkiat implementiert haben.

23. Code anpassen / pre Tags

Beim ersten Erstellen eines Website-Stylesheets übersehen viele Entwickler die typischen Seitenelemente. Überschriften und Absätze sind sehr häufig, aber was ist mit Pre-Tags oder Inline-Code-Tags? Diese werden verwendet, um vorformatierte Quellcodesyntax zu kapseln, wie Sie sie in einer Text- / NFO-Datei sehen würden. Einige Websites benötigen diese Elemente nicht, aber es wird immer noch als gute Praxis angesehen, sie nur für den Fall zu gestalten.

24. Hinzufügen von Attributen für Bildbreite / -höhe

Diese Aufgabe kann nun leicht eine Weile dauern, je nachdem, wie viele Bilder Sie durchlaufen müssten. Wenn Sie jedoch Bilder auf Ihrer Website ohne definierte Breite / Höhe finden, kann es sich lohnen, sie zu aktualisieren.

Normalerweise werden Bilder, denen diese Attribute fehlen, als 1 × 1-px-Quadrat angezeigt, bevor sie vollständig geladen werden. Dadurch springen Ihre Webseiten und Die Bildlaufleiste, wenn neue Bilder geladen werden. Auch dies wird nicht für alle hilfreich sein, aber es ist erwähnenswert, als schnelle Lösung in einigen Fällen. Und es gibt immer noch CSS-Techniken für Responsive Bilder mit festen Attributen.

25. JavaScript-Benachrichtigungen

Jeder Entwickler, der mit JavaScript gearbeitet hat, kennt die typischen Dialogfelder. Sie können ein Warnfeld einrichten, das dem Benutzer eine OK-Schaltfläche bietet, in der nur Informationen angezeigt werden. Es gibt aber auch Bestätigungsbenachrichtigungen mit Ja / Nein-Schaltflächen sowie das Eingabeaufforderungsfeld, in dem nach Benutzereingaben gefragt wird.

Alle diese können mit alertify angepasst werden.js. Dies ist eine sehr kleine Open-Source-Bibliothek zum Entwerfen eigener Frontend-Alert-Boxen. Es ist sehr schnell einzurichten und einfach anzupassen, wenn Sie Ihre eigenen CSS-Stile anpassen müssen.

26. Responsive Media Queries

Dies scheint nicht wie ein schnelles Stück Code hinzuzufügen, aber es dauert wirklich nicht viel Zeit. Responsive Abfragen können zu Ihrem vorhandenen Stylesheet oder zu einem neuen Responsive hinzugefügt werden.CSS-Dokument. So oder so können Sie schnell wiederkehrende Stile einrichten, um verschiedene Anzeigegrößen von Monitoren, Tablets und Smartphones zu verarbeiten.

Responsive Abfragen müssen nicht immer vollständig auf Ihr Layout reagieren. Manchmal verbergen diese nur Teile des Inhalts, z. B. Ihre längliche Seitenleiste oder eine größere Fußzeile. Sie können dann eine vollständig ansprechende Mini-Fußzeile anzeigen, die ursprünglich im Desktop-Layout ausgeblendet ist. Weitere Informationen zu Medienabfragen finden Sie in unserer Sammlung responsiver Web-Tutorials.

27. Affiliate-Links

Es wird immer ähnliche Websites online geben, die Inhalte zu Ihrem Bereich erstellen. Es entstehen sehr selten neue Ideen, meist sind es Ableger und Parodien bestehender Inhalte. Aber anstatt das Web in einen Wettbewerb zu verwandeln, warum nicht eine freundliche Atmosphäre schaffen? Wenn Sie den zusätzlichen Platz in Ihrem Layout haben, senden Sie ein paar E-Mails an verwandte Websites in Ihrer Nische (Suche Google) und bitten Sie um Affiliate.

Sie können Links austauschen und sich gegenseitig Traffic bringen. Dies öffnet Türen für neue Benutzer, um Ihre Website viel schneller zu finden und zu sehen, dass Sie auch in die Community anderer Websites aufgenommen werden. Wenn Sie Backlinks von Websites mit Autorität in Google erhalten, kann dies nur zur Glaubwürdigkeit Ihrer Domain beitragen.

28. Icon-basierte Fonts

Vor kurzem habe ich einen Artikel auf 24ways gelesen, in dem Icon-Fonts und Datenattribute behandelt wurden. Dies brachte mich dazu, über die Zukunft des Webdesigns nachzudenken und darüber, wie HTML / CSS die Frontend-Codierung dramatisch beeinflusst hat. Icon-basierte Schriftarten sind perfekt für eine Reihe von Gründen, einschließlich Navigationsmenüs, geordnete / ungeordnete Listen und sogar grundlegende Seiteninhalte.

Viele dieser Schriftarten können mit @font-face schnell zu Ihrer Website hinzugefügt werden. Dies bedeutet, dass Sie sich nicht auf einen 3rd-Party-Service wie Typekit verlassen müssen, um Ihre Schriftarten zu hosten. Es bedeutet auch einen semantischeren Designstil, anstatt nur PNG-Symbole zu verwenden.

29. Image Box Shadows

Wenn Sie Besucher länger auf Ihrer Seite halten möchten, müssen Sie qualitativ hochwertige Inhalte anbieten. Dies kann bereits für Ihre Website der Fall sein, aber wenn Ihre Stile langweilig sind, werden die Leute woanders suchen. Atmosphäre und Ästhetik sind in gutem Webdesign riesig.

Ich empfehle, eine Quick Image-Klasse zu erstellen, die einen Rahmen um Ihre Seitenbilder legt. Dies kann auch einen kleinen Kastenschatten zusammen mit Rändern und Polstern enthalten. Alles, was Ihren Bildern hilft, vom Bildschirm zu springen und sich in den Textabsätzen abzuheben.

30. Alternative Stylesheets

Berücksichtigen Sie alle verschiedenen Medienstile, die Sie beim Erstellen eines einzelnen Website-Layouts berücksichtigen müssen. Dies müsste auf Desktop-Monitoren, Laptops, Tablets und möglicherweise sogar Smartphones gut aussehen. Und vergessen Sie nicht, Projektion und Printmedien, die nicht immer unterstützt wird.

Wenn Sie ein großes Publikum haben, das diese obskuren Medientypen verwendet, empfehle ich, Ihre eigenen alternativen Stylesheets zu erstellen. Diese können basierend auf dem Medientyp wie Druck beschriftet werden.css, oder in Ihre vorhandenen Stylesheets hinzugefügt. Wenn es genug Nachfrage gibt, dann werden Ihre Besucher auf ewig dankbar sein. Und es braucht ehrlich gesagt nicht viel Zeit, um Ihr Standard-Website-Layout für gängige Drucker zu bearbeiten.

Abschließende Gedanken

Kreative Designer und insbesondere Frontend-Webentwickler werden hoffentlich einige nützliche Techniken in dieser Liste finden. Die meisten dieser Ideen sollten nicht länger als 1-2 Stunden dauern, während viele in nur 15-30 Minuten umgesetzt werden können.

Es ist oft eine gute Idee, Ihre Website-Layouts neu zu bewerten und von Zeit zu Zeit mit neuen Trends zu aktualisieren, insbesondere mit neueren Versionen von CSS3-Eigenschaften, die native Browserschatten, Animationen und abgerundete Ecken ermöglichen. Dies ist eine hervorragende Sammlung von Ideen, die einen Blick wert sind, wenn Sie einige schnelle Updates benötigen.

Wenn Sie Fragen oder Ideen zu dem Artikel haben, können Sie uns dies gerne im Diskussionsbereich mitteilen.