Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Webdesign » Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder

Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Ein Kommentar
Lesedauer: 3 Minuten
  • von Dieter Petereit
  • 3. Februar 2017

Der Service Webfieldmanual.com ist eine wachsende Sammlung rund um die Themen Design und Coding. Neben der Informationsfülle sticht vor allem das bemerkenswert gut gelungene Design des Dienstes selbst ins Auge.

Hast du dein Webfieldmanual? Yes, Sir!

Das Webfieldmanual.com bietet nicht zufällig optische Reminiszenzen an militärische Zusammenhänge. Der Begriff Field Manual selber stammt aus dem militärischen Sprachgebrauch und bezeichnet eine Art Handbuch, das Soldaten im Kampfeinsatz mit sich führen sollten. Das Field Manual stellt somit die essentielle Wissensbasis auf dem Schlachtfeld dar.

webfieldmanual landing Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder
Webfieldmanual.com: Landing Page (Screenshot: Dr. Web)

Und wenn man es etwas martialisch liebt, findet man sich als freelancender Webdesigner und Coder vielleicht ganz gerne in dem Bild des Einzelkämpfers in der harten Web-Industrie wieder. Auf jeden Fall erhebt ein Field Manual als solches stets den Anspruch, das unverzichtbare Tool im Alltag zu sein, ohne das man es nicht unversehrt zurück ins Basislager schafft.

Das Webfieldmanual.com gibt sich große Mühe, diesem hohen Anspruch gerecht zu werden und bietet tatsächlich eine Fülle an Knowhow-Ressourcen und kleinen Tools, ohne die das Überleben im Web-Alltag schwerer als nötig ist.

Der Service wird betrieben vom US-amerikanischen Designer-Trio Jon Yablonski, Garrett Wieronski und Geoff Tice. Ergänzt wird die Website durch einen gleichnamigen Twitter-Account, über den du dich über Neuzugänge im Portfolio unterrichtet halten kannst. Bist du eher ein Freund traditioneller Informationswege, wird dich eventuell ein Abonnement des E-Mail-Newsletters reizen, der dich mit einer wöchentlichen Zusammenfassung ebenfalls auf dem Laufenden hält.

Webfieldmanual: Design | Code | Tools

Die einfachste und komfortabelste Zugangsmöglichkeit zum wirklich beeindruckend umfassenden Fundus des Dienstes ist die Freitextsuchfunktion, die sich hinter dem Lupen-Piktogramm rechts oben im Browserfenster befindet. Sobald du beginnst, einen Suchbegriff in das Feld zu schreiben, erscheinen darunter in Echtzeit Ergebnisvorschläge. Das funktioniert rasend schnell und äußerst präzise.

Webfieldmanual.com: Freitextsuche (Screenshot: Dr. Web)
Webfieldmanual.com: Freitextsuche (Screenshot: Dr. Web)

Wenn du nicht genau weißt, wonach du eigentlich suchst, oder einfach nur mal stöbern willst, brauchst du dich lediglich zu entscheiden, ob du in Design- oder Codethemen schwelgen willst. Innerhalb dieser beiden Hauptkategorien findest du dann jeweils lange vorsortierte Listen mit allen Informationen, die du heutzutage benötigen könntest.

Das ist nämlich auch eine der bemerkenswerten Tatsachen am Webfieldmanual. Mir ist keine einzige veraltete Ressource untergekommen. Da bin ich anderes gewohnt. Die meisten Verzeichnisse, Listenanbieter oder wie du es auch immer nennen willst, nehmen Elemente immer gerne auf, schmeißen sie dann aber nie wieder raus und brüsten sich damit Zigtausend Einträge anzubieten. So läufst du häufig genug Gefahr, dir veraltetes Wissen einzuverleiben. Diesbezüglich musst du dich beim Webfieldmanual nicht sorgen.

Die einzelnen Hauptkategorien Design und Code beherbergen zwar dann lediglich scrollbare Listen, die weiter nach Kategorien unterteilt sind. Die Strukturierung ist aber dennoch sehr gelungen. Viel Whitespace sorgt für gute Übersichtlichkeit und das zurückhaltende Design macht tatsächlich Spaß.

webfieldmanual design animation Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder
Webfieldmanual.com: Hauptkategorie Design > Kategorie Animation (Screenshot: Dr. Web)

Jede einzelne Ressource wird kartenbasiert mit einem Titel und einem Satz zur Beschreibung vorgestellt. Ein Klick auf die Karte führt direkt zu der URL des jeweiligen Elements. Die Bedienung ist demnach schnell erlernt. Willst du direkt zu einzelnen Kategorien aus der endlos erscheinenden Liste springen, verwendest du das am unteren Bildschirmrand angeordnete Hamburger-Menü mit der Bezeichnung Categories.

webfieldmanual tools Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder
Webfieldmanual.com: Tools aus der Feder der Betreiber (Screenshot: Dr. Web)

Eine Sonderposition nimmt die Hauptkategorie Tools ein. Hier findest du nicht etwa eine Sammlung von Tools nach dem gleichen Muster, wie du Ressourcen zu Design und Code unter den beiden anderen Hauptkategorien findest, sondern hier finden sich Tools, die von den Betreibern selber erstellt und bereitgestellt werden. Aktuell steht hier nur ein JavaScript-Tester zur Verfügung, ein Media-Query-Generator und ein Rechner für responsive Typografie sind angekündigt.

Das Webfieldmanual.com verdient sich mit einer klaren Empfehlung einen Platz in deiner Entwickler-Toolbox. Nicht unerwähnt bleiben sollte der Umstand, dass das Webfieldmanual selber eine Best Practice für modernes Design mit subtilen Animationseffekten darstellt. Good Job!

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

immoXXL Website-Erstellung für Makler Leverkusen und Köln.

immoXXL – Immonia GmbH

Leverkusen

4eck Media Webdesign Agentur Wahren an der Müritz.

4eck Media GmbH & Co. KG

Waren (Müritz)

Marco Wydmuch von Glamourpixel fotografiert sich selbst mit einer Canon-Kamera in der Hand.

Glamourpixel Fotodesign

Gelsenkirchen

WordPress Agentur Kreativdenker

Speyer

BIZ Digital Marketing Logo.

BIZ Digital Marketing

Nürtingen

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Eine Antwort

  1. Peter Schweizer sagt:
    3. Februar 2017 um 10:52 Uhr

    Sehr schicke Site, wenn man das auch nicht unbedingt so martialisch hätte machen müssen 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑