25 heißesten Webdesign-Techniken

Ein besseres Web bedeutet eine bessere Erfahrung für alle. Benutzer sollten in der Lage sein, das zu erreichen, was sie benötigen, ohne sich Gedanken darüber zu machen, wie sie auf das Internet zugreifen. Entwickler und Designer sollten Websites erstellen, die reibungslos gewartet und aktualisiert werden können. Ein besseres Web funktioniert mehr als nur, es funktioniert gut - für diejenigen, die es konsumieren und diejenigen, die es erstellen.

Ein besseres Web ist ein effizienteres Web. Effizienz steht im Mittelpunkt unserer Projekte, unabhängig davon, ob es sich um Zugänglichkeit, Reaktionsfähigkeit, Inhaltsstrategie oder Leistung beim Laden von Seiten handelt. Von der Auswahl der richtigen CSS-Eigenschaft bis hin zu den entscheidenden Fragen, die ein ganzes Projekt realisierbar machen, geht es bei Effizienz nicht nur darum, schneller zu werden, sondern die Dinge besser zu machen. Es geht um Empathie.

Wir haben uns weit und breit an Webdesigner und Entwickler gewandt, um deren Top-Tipps und Ratschläge zu erhalten. Ihre Vorschläge umfassen eine Vielzahl von Themen, alle mit einem besseren, effizienteren Web im Herzen. Jeder dieser Tipps ist eine Tür zu einer neuen Denkweise, die wir Sie zum Nachdenken und Erkunden einladen.



Je mehr wir teilen, desto mehr lernen wir. Wir hoffen, dass Sie einige neue Bereiche finden, in die Sie eintauchen können, auch wenn Sie ein erfahrener Webdesigner sind. Geh hinaus und lerne.

01. Fragen stellen

'Für wen baust du es?' sagt UX Designer Dylan Wilbanks . ' Warum brauchen sie es? Wo werden sie es verwenden? Welche Geräte werden sie verwenden? Hast du mit ihnen gesprochen? Wenn nicht, wer hat? Woher wissen Sie, wann es fertig ist? Was ist der Testplan? Baut jemand einen Prototyp? Verstehst du, was du bauen sollst? Haben Sie Antworten auf diese Fragen? Nein? Dann lass sie beantworten, bevor du baust. '

02. Hören Sie sich Ihren Code an

'Screenreader präsentieren Ihre Webseite genau so, wie der HTML-Code geschrieben ist', sagt der Informationsarchitekt Anne Gibson . 'Suchmaschinen auch. Das Schreiben von semantischem HTML verbessert die Erfahrung für beide und bietet eine Reihe weiterer Vorteile (um mehr davon zu erfahren, lesen Sie den Artikel von Paul Boag unter Hier ).

'Versuchen Sie, die semantische Qualität Ihrer Seiten zu überprüfen, indem Sie sie auf einem Bildschirmleser anhören. Wenn Ihre Seite nicht in Ordnung ist oder mit Ablagerungen verstopft ist, bereinigen Sie Ihren HTML-Code. Screenreader können mehr als nur Eingabehilfen sein. Sie können uns dabei helfen, sauberere, semantischere und leichter zu wartende Markups zu schreiben. '

03. Schützen Sie die inhärente Zugänglichkeit des Webs

die große Unzufriedenheit

Die große Unzufriedenheit ist ein großartiges Beispiel dafür, was mit neuen Techniken erreicht werden kann, während sie zugänglich bleibt

'Das Web ist ein zugängliches Medium', sagt Mitbegründer von Perch Rachel Andrew . 'Auf ein HTML-Dokument kann jeder auf jedem Gerät über die langsamste Verbindung zugreifen. Jede Entscheidung, die Sie als Designer oder Entwickler treffen, kann diese inhärente Zugänglichkeit schützen oder beschädigen. Das ist viel Kraft, die Sie dort haben. Benutze es weise.'

wie man beim Zeichnen einen Bleistift hält

04. Bedingte Belastung nutzen

Baumwollbüro

Auf der Website des Cotton Bureau wird das bedingte Laden verwendet, um sicherzustellen, dass potenzielle Kunden nicht warten müssen

'Jede Webseite besteht aus' dem Ding 'und einer Reihe von Dingen, die nicht' das Ding 'sind', sagt der bekannte Webdesigner Brad Frost . 'Das bedingte Laden ist ein wesentliches Werkzeug, um funktionsreiche Erlebnisse zu erstellen, die immer noch schnell geladen werden und Kerninhalte priorisieren. Suchen Sie nach Möglichkeiten, um soziale Schaltflächen, Kommentare, verwandte Inhalte und mehr bedingt zu laden. Weitere Informationen finden Sie unter Dieser Beitrag von Jeremy Keith. '

05. Verwenden Sie Ceaser, um Cubic-Bezier zu schreiben

'CSS-Übergänge können einfacher zu handhaben sein als Keyframe-Animationen', sagt er Jamie Kosoy , Präsident und Technologieleiter bei Arbitrary. „Das Anpassen mit Timing-Funktionen kann sich jedoch ziemlich entmutigend anfühlen.

transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); /* linear easing */

„Wenn es nicht Ihr Stil ist, Bézier-Tweens von Hand zu schreiben, haben Sie keine Angst. Mit dem Animationswerkzeug von Matthew Lein Ceaser können Sie schnell eine von verwenden Robert Penners Lockerungsgleichungen oder bauen Sie Ihre eigenen. Animiere weg! '

06. Verwenden Sie höhenbasierte Medienabfragen

'Nutzen Sie höhenbasierte Medienabfragen', rät Und Denney , ein Frontend-Entwickler an der Code School. 'Dies sind großartige Möglichkeiten, um Erfahrungen zu verbessern, wenn die verfügbare Höhe begrenzt ist. Es variiert je nach Design, aber mit den richtigen Anpassungen können Sie häufig den Bildlauf reduzieren und die Lesbarkeit verbessern. Wenn das Design Interaktionen oder Benachrichtigungen enthält, müssen Sie diese auch für begrenzte Höhen anpassen. Siehe ein Beispiel Hier . '

07. Denken Sie an das große Ganze

'Treffen Sie keine technischen Entscheidungen, bevor Sie nichts über die Probleme verstanden haben, die Sie lösen sollten', sagt er Sally Jenkinson , Berater und Lösungsarchitekt bei Records Sound the Same. „Eine zu frühe Einführung von Lösungen kann dazu führen, dass die Erfahrungen sowohl für Ihre Besucher als auch für Administratoren von der Technologie diktiert oder eingeschränkt werden. Treffen Sie stattdessen Ihre Auswahl unter Berücksichtigung des Gesamtbildes und Ihres breiteren Projektteams.

„Viele Technologien können alles und jeden, aber sollten sie? Welche Auswirkungen hat dies auf Menschen, Prozesse, Technologien und Erfahrungen? '

08. Verwenden Sie den Namespace für Ihre CSS-Dateien

'CSS-Dateinamen sind eine beschönigte Gelegenheit', betont Unternehmer und Systemdesigner Claudina Sarahe . 'Namespaceing liefert hilfreiche Hinweise auf den Inhalt der Datei. Wenn ein Teil keine Ausgabe erzeugt, fügen Sie .config.scss hinzu. Wenn eine Datei andere Partials importiert, fügen Sie .manifest.scss hinzu. '

09. Setzen Sie einfache Image-Fallbacks ein

'Reaktionsschnelle Bilder sind kompliziert, aber während das RICG die Spezifikation zusammenstellte, fanden wir einige Möglichkeiten für schnelle Gewinne - kurze Syntaxen, die für Benutzer einen großen Unterschied machen könnten', sagt er Mat Marquis , ein offener Webingenieur bei Bocoup. 'Eines davon war das Hinzufügen eines Typattributs zur Quelle, mit dem Sie alternative Bildformate mit verantwortungsvollen Fallbacks bereitstellen können:

'WebP für Browser, die WebP unterstützen, und ein einfaches altes PNG für Bilder, die dies nicht tun, und nur eine Anfrage in beide Richtungen.'

Hardcase für MacBook Pro 15

10. Master-Debugging in JavaScript

'Unterschätzen Sie niemals die Leistung des console.log', sagt er Rachel Velez , leitender Softwareentwickler bei npm. 'Wenn Sie versuchen, eine bestimmte Zeile zu verstehen, kennzeichnen Sie sie mit einer nützlichen Information. So etwas wie eine Konsole. log ('foo; a =', a) hilft Ihnen zu wissen, was a in Bezug auf eine Funktion foo ist. Wenn Sie versuchen, einen Fehler zu isolieren, protokollieren Sie mit der Konsole überall dort, wo Sie es für sinnvoll halten. log ('boom1'), console.log ('boom2') usw., damit Sie genau sehen können, wo Ihr Code kaputt geht. '

11. Machen Sie Ihre Hintergrundbilder reaktionsschnell

Audubon

Hintergrundgröße verwenden: Abdeckung; macht es einfach, reaktionsschnelle Hintergrundbilder zu erstellen (audubon.org)

'Für schöne und reaktionsschnelle Hintergrundbilder, unabhängig von der Breite eines Bildschirms', sagt der Designer Julie Ann Horvath , 'Verwenden Sie die CSS-Eigenschaft Hintergrundgröße: cover;. Zusätzlich zur visuellen Skalierbarkeit mit Hintergrundgröße: Abdeckung; Wenn Sie die Größe eines Hintergrundelements angeben, wird das Pixelverhältnis automatisiert, mit dem das Bild angezeigt wird, ohne dass dies in zusätzlichen Regeln oder Markups angegeben werden muss. '

12. Verwenden Sie Mixins, um komplexe Rastersysteme zu erstellen

'Meine Schüler lernten, wie man Netzsysteme baut und wie man Sass-Mixins einsetzt', sagt er Sam Kapila , Designlehrer bei The Iron Yard. „Als Klasse haben wir ein Mixin erstellt, mit dessen Hilfe ein flexibles Rastersystem erstellt werden kann. Du kannst es finden hier auf CodePen .

'Am ersten Haltepunkt kann das Rastersystem eine beliebige Anzahl von Spalten haben, aber das Mixin selbst addiert die Gesamtzahl der Spalten mit der Gesamtzahl der Rinnen (das ist weniger eine Rinne als die Säule).
Dann wird der schwebenden Spalte ein Rand rechts hinzugefügt. Das Mixin ist variablenabhängig - insbesondere Säulenbreite und Rinnenbreite. Schließlich setzt a: last-of-type den Rand rechts für die letzte Spalte in jeder Zeile zurück. '

13. Denken Sie an Gespräche, nicht an Seiten

'Mobile-first zu denken ist eine nützliche Methode, um die Priorisierung von Seiteninhalten anzugehen und zu entscheiden, welche Teile kritisch sind und welche später bedingt geladen werden können', sagt Grafikdesigner und Frontend-Entwickler Paul Robert Lloyd . 'Diese Übung setzt jedoch immer noch das Vorhandensein einer Schnittstelle voraus. Um wirklich universelle und zugängliche Websites zu erstellen, müssen wir über das visuelle Erscheinungsbild hinausblicken. Ein alternativer Ansatz könnte darin bestehen, Seiten als Teil eines Telefongesprächs zu betrachten. Welche Informationen könnte ein Benutzer anfordern und wie könnte die Webseite reagieren? '

14. Tastaturunterstützung bereitstellen

'Denken Sie beim Erstellen interaktiver Schnittstellen daran, Tastaturunterstützung bereitzustellen', sagt er Monika Piotrowicz , Frontend-Entwicklungsleiter bei Shopify. 'Mausereignisse können auch an Tastaturereignisse gebunden werden. Der Tastaturfokus sollte aktualisiert werden, wenn neue Inhalte angezeigt oder ausgeblendet werden, und die Escape-Taste kann dabei helfen, Interaktionen abzubrechen. Mit diesen Schritten können Tastaturbenutzer die gleiche großartige Erfahrung machen wie jeder, der eine Maus verwendet! Überprüfen diese Demo . '

15. Entwerfen Sie schnell im Browser

'Eine gute Möglichkeit, neue Funktionen im Browser zu entwerfen, besteht darin, das Neue direkt im Code zu skizzieren und anderen zu zeigen', sagt Designer und Frontend-Entwickler Frances Berriman . 'Markieren Sie das übergeordnete Element des neuen Features mit einer Klasse wie' skizzenhaft ', damit Sie Stile darauf anwenden können, um zu zeigen, dass es sich um eine laufende Arbeit handelt, oder kommentieren Sie schnell alle skizzenhaften Elemente auf einmal, um eine saubere Produktdemo zu erhalten.'

16. Vereinfachen Sie Ihren Code

'Mussten Sie jemals einen Wert zurückgeben, aber nur, wenn ein anderer Test true zurückgibt?' fragt Codierer und Designer Sacha Greif . 'Zum Beispiel könnten Sie etwas schreiben wie:

if (user.isAdmin()) { return password; } else { return false; }

'Sie können dies tatsächlich vereinfachen in:

Können Sie ein MacBook Pro als Monitor verwenden?
return user.isAdmin() && password;

'Wenn user.isAdmin () false zurückgibt, gibt der gesamte Ausdruck false zurück. Wenn user.isAdmin () jedoch true zurückgibt, gibt der Ausdruck den Wert des Kennworts zurück. '

17. Konvertieren Sie feste Breiten in Prozent

'Eine einfache Möglichkeit, eine Site von einer festen Breite in ein responsives Format umzuwandeln, besteht darin, alle Breiten in Prozent umzuwandeln und Floats zu entfernen', sagt er Inayaili von León Persson , leitender Webdesigner bei Canonical. 'Wenn Ihr Hauptcontainer eine Breite von 900 Pixel hat, ändern Sie diese stattdessen in eine maximale Breite. Ändern Sie Spalten und andere Elemente in den Prozentsatz, den sie auf der Seite einnehmen, anstatt in Pixeleinheiten und so weiter. Schauen Sie sich dann Ihre Website auf einigen Geräten an und Sie erhalten eine gute Vorstellung von den nächsten Schritten: Sie sind möglicherweise weniger und einfacher als Sie denken! Der Prozess, wie ubuntu.com reagiert, wird unter untersucht Hier . '

18. Umfassen Sie das Titelfeld

'Das Nageln des Titelfelds kann eine einfache Möglichkeit sein, das Backend zu klassifizieren und das Frontend zu klären', rät Corey Vilhauer , UX-Stratege bei Blend Interactive. 'Erleichtern Sie den Redakteuren die Arbeit, indem Sie klarstellen, was jedes Titelfeld bedeutet. Eine sollte für die Navigation sein ('Klassen'). Man sollte den Titel der Seite darstellen, der die ('Unsere Klassen') ausfüllt. Und man sollte im CMS verwendet werden, um die Dinge in Ordnung zu halten ('Klassenliste'). Mischen und anpassen, wie es Ihre Organisation erfordert. '

19. Konfigurieren Sie Git

'Sparen Sie Zeit, indem Sie Git konfigurieren', rät Stacey Mulcahy , leitender technischer Evangelist bei Microsoft. 'Konfigurieren Sie eine globale Ignorierdatei für Dateien, die Sie niemals festschreiben möchten. Platzieren Sie eine Gitignore-Datei in '~ / .gitignore' und dann können Sie $ git config - global core.excludesfile ~ / .gitignore '.

20. Verwenden Sie Git-Commit-Hooks

'Da neue Technologien unseren Workflow zu rationalisieren scheinen, nehmen wir immer mehr Abhängigkeiten an', sagt er Brian Suda , Inhaber von optional.is. „Wie viele Leute verwenden regelmäßig Less oder Sass, um ihre Stile zu verwalten? Oder Tools wie JSLint für JavaScript? Tools zum Verketten, Komprimieren und Zwischenspeichern Ihrer Assets?

'Wir vergessen unweigerlich, einige Befehle auszuführen, und veraltete Dateien werden in Repos gespeichert oder in die Produktion verschoben. Wir verwenden Git-Commit-Hooks, damit wir nie vergessen. Durch das Einrichten einiger Pre-Commit-Hooks werden alle diese Befehle jedes Mal ausgeführt, wenn wir unsere Änderungen übermitteln. '

21. Lernen Sie aus Problemen und Fehlern

'Unabhängig davon, wie oft Sie Ihre Anwendung getestet haben und wie viele Geräte Sie verwendet haben, kommt es zu unerwarteten Verhaltensweisen', sagt der Entwickler Alex Duloz . 'Sie werden niemals eine Anwendung starten, die keine Fehler enthält. Machen Sie es Ihren Benutzern daher einfach, Sie über Probleme zu informieren, die bei der Nutzung Ihrer Website auftreten.

'Nutzen Sie die GitHub-API mithilfe eines einfachen Formulars von Ihrer eigenen Website. Protokollieren Sie Serverfehler und analysieren Sie sie. Verwenden Sie etwas so Triviales wie window.onerror, um JavaScript-Fehler zu verfolgen (oder versuchen Sie es mit {} catch (e) {} am Einstiegspunkt Ihres Codes). Atme tief ein, gehe live und perfektioniere deine Arbeit basierend auf dieser Weisheit. '

22. Fühlen Sie, wie schnell Ihre Website ist

'Wasserfälle sind nicht die einzige Möglichkeit, die Leistung Ihrer Website zu visualisieren', sagt er Lara Hogan , Senior Engineering Manager für Leistung bei Etsy. 'Auf Webpagetest.org können Sie ein Video darüber erstellen, wie Ihre Website im Laufe der Zeit geladen wird. Aktivieren Sie einfach das Kontrollkästchen' Video aufnehmen 'in den erweiterten Einstellungen. Auf diese Weise können Sie spüren, wie schnell Ihre Website von verschiedenen Standorten und auf verschiedenen Geräten aus ist, und Sie können sehen, was Ihre Benutzer wirklich erleben. '

23. Vermeiden Sie lange Auswahlfelder

'Verwenden Sie keine ausgewählten Elemente mehr für das Geburtsdatum', sagt er Alice Bartlett , Frontend-Entwickler für GOV.UK. 'Die Angabe eines Geburtsdatums ist Teil vieler grundlegender Transaktionen im Internet. Es ist üblich, Auswahlfelder für Geburtsdaten zu sehen, aber Untersuchungen zeigen, dass lange Auswahlen für diejenigen, die mit der Technologie nicht vertraut sind, sehr schwierig sind. Durch Texteingaben mit serverseitiger Validierung können Benutzer mit geringem technischen Vertrauen ihr Verständnis von Papierformularen auf Webformulare übertragen. '

24. Skalieren Sie die Symbole mit dem Hintergrundbild: Cover;

'Wenn Sie die CSS-Eigenschaft für Hintergrundbilder verwenden, um ein Symbolbild hinzuzufügen und zu formatieren', sagt der freiberufliche Designer Julie Ann Horvath , 'Eine weitere Option für die Skalierbarkeit ist das Hintergrundbild: enthalten;. Während Sie theoretisch das Hintergrundbild verwenden könnten: cover;, wenn das Element, das das Symbol enthält, abgerundete Ecken hat, kann cover Teile des Symbolbildes abschneiden. enthalten wird es angemessen dimensionieren und skalieren. '

25. Halten Sie es kurz und bündig

'Seien Sie prägnant in Ihren E-Mails und robust in Ihren Codekommentaren', sagt der Informationsarchitekt Anne Gibson . 'Wenn Sie üben müssen,' kurz und bündig 'zu schreiben, treten Sie der Entwickler-Community auf Twitter bei.'

Wörter :: Katy Watkins und Alex Duloz

Dieser Artikel erschien ursprünglich in Ausgabe 269 des Netzmagazins.

Mochte dies? Lese das!