Skip to content
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Smarte Agenturköpfe
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » (Kostenlose) Services » Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder

Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder

Sozial sein
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.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Full Stack Developer SW Prototyping

Berlin

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

United Ads Agentur Starnberg.

UnitedAds

Starnberg

WPSteinheisser Photography

Ludwigsburg

Webdesign Doerrer Frankfurt.

Webdesign DOERRER

Frankfurt am Main

Logo von der Warscher Digitalagentur aus Zürich, Horgen und Basel.

Warscher – Digital Experts

Horgen

pistis wordpress agentur logo

Philipp Pistis – WordPress Agentur

Zolling

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten

 →   

Eine Antwort zu „Webfieldmanual: Zentrale Anlaufstelle für Designer und Coder“
— was ist Deine Meinung?

  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.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Unternehmen: Agenturen finden in…

  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich
Menü
  • Augsburg
  • Basel
  • Berlin
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Freiburg im Breisgau
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Ingolstadt
  • Innsbruck
  • Frankfurt am Main
  • Karlsruhe
  • Köln
  • Leipzig
  • Mainz
  • Mannheim
  • München
  • Nürnberg
  • Potsdam
  • Regensburg
  • Reutlingen
  • Salzburg
  • Stuttgart
  • Wien
  • Wuppertal
  • Zürich

Für Agenturen

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.