Was ist eigentlich 12 Grid? | Webdesign | Gestaltungsraster

Ein Freund hat mir am Wochenende von 12 Grid erzählt. Er meinte das 12 Grid die Grundlage im Webdesign ist. Persönlich hatte ich vorher schon etwas von Grids gehört, aber noch nicht vom Ansatz 12 Grid. Was hat es also mit 12 Grid, bzw. Gestaltungsraster auf sich?

Was sind Gestaltungsraster / Grid?

Der Gestaltungsraster (in der Praxis oft das Gestaltungsraster), auch der typografische Raster, Rastersystem oder auf Englisch auch Grid genannt, ist ein Ordnungssystem in der visuellen Kommunikation, das als Hilfskonstruktion die Organisation von grafischen Elementen auf einer Fläche oder in einem Raum erleichtert. Gestaltungsaufgaben, in denen der Raster Anwendung findet, sind meist typografischer Art – es wird dann von Rastertypografie gesprochen.

Was bringen Gestaltungsraster / 12 Grid für das Webdesign?

Der Nutzen von Gestaltungsrastern liegt darin, dass für den Designer und für den Nutzer ein Ordnungssystem geboten wird. Diese fördert und unterstützt das Erfassen von Inhalten. Mit einem passenden Gestaltungsraster können Informationen besser verstanden und einfacher und schneller gelesen werden. Dieses wird dadurch erzielt, dass Bild- und Textinhalte logisch und systematisch aufgebaut werden. Dabei ist für den Nutzer ein Mehrwert zu erzielen.
Die Inhalte und deren Darstellung werden dabei standardisiert. Im Webdesign wird häufig mit Spalten als Aufteilungsmuster/Gestaltungsraster gearbeitet. Dieses kann z. B. in einem 12 Grid/Gestaltungsraster geschehen. Hierbei sind 12 Spalten als Basis vorgesehen.

Beispiel:

12 Grid, Gestaltungsraster, Grid, Webdesign
Quelle: W3Schools.com

Basierend auf dem oben abgebildeten Grid, können verschiedene Spalten kombiniert und Inhalten einer Webseite zugewiesen werden. Dieses geschieht zumeist automatisch per Seitendesigner, bzw. auf der jeweilige Theme einer Webseite. Beispiel hierfür keinen 2- oder 3-Spaltige Anzeigen im Theme sein (z. B. bei WordPress). Ebenso können Span-Bereich zusammengefasst werden (1 * span 4 für das Menü und 2 * span 4 für den Inhalt). Zusätzlich ermöglichen die Themes oder Grid-Frameworks das Ausrichten der Inhalte basierend auf der Auflösung des jeweiligen Endgerätes. Es sorgt also dafür, dass responsive Design umgesetzt werden kann.

Gibt es nur 12 Grid?

Natürlich sind 12 Spalten Grids, mit einer 60 Pixel Basis, nicht die einzige Lösung. So gibt es auch 16 Spalten Grids, welche 40 Pixel als Basis haben. Die 12 Spalten Grids scheinen jedoch die am meisten verbreitet zu sein. So gibt es für den Ansatz der 12 Spalten Grids auch verschiedene Frameworks. Dazu gehören z. B. das 1.200 Pixel und das 960 Pixel System. Die Argumentation für das 1.200 basiert darauf, dass 1.200 Pixel (als Grundbreite) teilbar durch 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 und 400 ist. Das 1.200 Pixel System ist dabei eine Weiterentwicklung vom 960 Pixel Grid System von Nathan Smith. 1.200 Pixel wurden gewählt, da heute die Auflösung von 1.280 * 1.024 Pixel als Basisauflösung angesehen werden kann.

Weitere Grid-Frameworks

(zum Teil CSS Frameworks, welche ein eigenes Grid-System mitbringen)

  • Semantic Grid System – A CSS grid framework
  • Twitter Bootstrap
  • ZURB Foundation
  • Cascade Framework

Quellen:

Search Engine Optimization – SEO Grundlagen

Search Engine Optimization – Heute Abend habe ich mich etwas mit der Optimierung von Seiten (SEO) für Suchmaschinen (bzw. Google) beschäftigt. Im folgenden sind Best Practices zusammengetragen, wie Search-Engine-Optimization durchgeführt werden kann, bzw. welche Punkte beachtet werden sollten. Generell sollte man beachten, dass es 3-6 Monate dauern kann bis Seiteninhalte in Katalog einer Suchmaschine angezeigt werden. Die Best Practices sind in den Bereich von positiven und negativen Einflussfaktoren für das Ranking unterteilt. Ich hoffe, es hilft anderen, wie es mir geholfen hat.

Search Engine Optimization SEO Grundlagen
Sie müssen kein Computer sein, um Search Engine Optimization durchzuführen

Was wirkt sich bei Search Engine Optimization (SEO) positiv aus

Inhalte:

  • Sitemap XML
  • Passend benannte Bilder
  • Inhaltlicher Bezug zwischen den Inhalten der Seite
  • Erklärung von Nischenbegriffen
  • Backlinks bei Zitaten
  • Aktualität (Seiten mit Blogs)
  • Interne und externe Verlinkung (auch auf Quellen)
  • Alter der Links die auf eine Seite verlinken
  • Zeitraum des Aufbaus der Links
  • Zusammenfassung im ersten Absatz, bzw. der erste Absatz beinhaltet die Kernaussage des Textes
  • Backlinks (z. B. Kommentierungen aus Blogs – nur sinnvoll bei Inhalten)
  • Gute Beschreibung von Snippets/Meta-Informationen pro Seite sprechende
  • Sinnvoller Ankertext eines Links
  • Überschriften 5-7 Wörter

Design:

  • Einsatz von Breadcrumbs-Navigation
  • Struktur der Seite / Aufbau der Seite (Semantik)
  • Meta-Tags für Bilder
  • Übersichtliche Struktur über 3 Ebenen
  • Gezielte Nutzung der H1-H4 Tags
  • Responsive Design für Computer, Tables und Mobile Endgeräte (Abhängig von der Auflösung und der realen Größe des Bildschirms)
  • ggf. Verwendung von SVG (interpretierbar)
  • ggf. „Mobile First“/Optimierung für Touchgeräte (Menüs, Eingaben/Zoom)

Server/Technik:

  •  IP oder geteilter Server (eigener Server mit dezidierter IP ist besser/sicherer)?
  • Fehlerfreier HTML/CSS Code
  • Verwendung von semantischen HTML5 Elementen im Seitenaufbau und für Formularfelder
  • Sinnvolle Fehlerseiten (301/302/404) – auf für ausgelistete Inhalte
  • URL-Struktur (Basierend auf Struktur der Webseite/Sprechende URLs)
  • Crawlbarkeit der Seite (robot.txt Seite)

Sonstiges:

  • Sharingmöglichkeiten(?)/Shares in soziale Netzwerke
  • Manuelle Anmeldung bei Suchmaschinen/Kataloge (Metager)
  • Titel einer Seite (+ggf. ID in URL)
  • Vernetzung von Autoren (Autorenbilder) mit deren Seiten in sozialen Netzwerken
  • Bewertungen von Seiten oder Firmen auf Google (Sterne-Rating)
  • Ortseinträge zur Firma/Seite bei Google
  • Inhalte über Google Produktsuche oder Flickr teilen
  • Einsatz von „No_Follow“ bei unwichtigen Seitenteilen
  • Anbieten von RSS-Feeds
  • Wie häufig wird die Seite bei den Suchergebnissen angeklickt

Was wirkt sich bei Search Engine Optimization (SEO) negativ aus

Inhalte:

  • Kopierte Inhalte
  • Menge der Werbung auf einer Seite
  • Nutzung von Pop Ups/Layers (z. B. für Newsletter)
  • „gekaufte“ Backlinks (sehr schnell viele Backlinks)
  • Weiterleitungen
  • Falsche eingehende Links (von Seiten, welche nicht zu der verlinkten Seite passen)
  • Affiliate-Links

Design:

  • Barrieren (nicht für Mobile)
  • Fehlerhafte CSS/Fehlerhafter HTML
  • Flash
  • Frames/iFrames (bieten sich allerdings an für Inhalte, welche nicht indexiert werden sollen)
  • Versteckte Texte
  • Seiten speziell für Suchmaschinen

Server und Technik:

  • Downtimes
  • Ladezeiten
  • Nutzung von Plug-Ins/Java-Applets
  • Codierungsfehler
  • JavaScript (auf Seite des Clients – wenn hierdurch Informationen verloren gehen)

Wie misst Google den Wert von Texten

  • Umfang des Wortschatzes
  • Wortwiederholungen
  • Satzstruktur
  • Einzigartigkeit/Kopien

 

Weiterführende Quellen für Search Engine Optimization

INFODVAG2015: #Bundeswehr #Gedient #LevelAccomplished

Die letzte Woche wurde von mir genutzt, um die INFODVAG 2015 der Bundeswehr in Munster zu besuchen. Vom Veranstalter wurde ein enges Programm geplant. Es ging Mo-Sa von 6:00-21:30/22:00 (Mo/Sa sind als An- und Abreisetag nur halbzeitig verplant). Die Veranstaltung wurde von Herrn Oberst Schwitalla vom Ausbildungszentrum Panzertruppen in Munster inittiiert und von Herrn Oberstleutnant Ernst als Projektoffizier umgesetzt. Dabei half ihm aktiv der Oberstleutnant Götz mit seiner Spitzentruppe. Eine Truppe, welche immer hilfbereit, aktiv und supportiv war.

Im Rahmen meiner Tätigkeit an der Hochschule Weserbergland bin ich aktuell in einem Forschungsprojekt mit einem Bezug zur „Offenen Hochschule“ tätig. In diesem Forschungsprojekt werden wir zeitnah mit ehemaligen Soldaten der Bundeswehr in Kontakt treten. Um diese Zielpersonen besser kennenzulernen, meine Kenntnisse über die Struktur und den Aufbau Bundeswehr zu stärken oder überhaupt zu Formen und Gespräche mit Soldaten und Soldatinnen über ihr Verhältnis zur Bundeswehr führen zu können, entschied ich mich dazu, mich für das INFODVAG 2015 in Munster zu bewerben.

Allumfassend hat sich die Teilnahme gelohnt. Ich konnte passende Gespräche führen, habe viel über den Aufau und die Organisation der Bundeswehr gelernt, bin jetzt auch gedient und konnte einige Punkte finden, wie das oben genannte Forschungsprojekt besser ausgerichtet werden kann.

INFODVAG 2015 der Bundeswehr:

Unser Programm für die 5,5 Tage kann in Theorie und Praxis unterschieden werden. Beides hat sich sich für mich und für die anderen 43 Teilnehmer gelohnt –was ist genau im Detail passiert?

Das aktive Programm:

Montag:

Der Tag startete mit der Anreise und dem direkten Erhalt des Laufzettels, mit welchem wir verschiedene Stationen ablaufen mussten:

Laufzettel

Am Ende waren wir fertig eingekleidet. Nach den Exerzierübung durch unseren Gruppenführer Hauptfeldwebel Wolff waren wir bereit für unsere Ernennung als Soldat und unsere temporäre Vereidung bei der Bundeswehr. Die Vereidigung wurde dabei prima von lokalen Fusstruppen und dem Heersmusikkorp Koblenz begleitet. Nun waren wir offiziell Offiziere der Reserve bei der Bundeswehr.

Dienstag:

Heute standen die praktischen Punkte der eigenständigen Verpflegung im Feld und des Marschierens auf dem Programmplan. Nach der Fahrt in die Heide und dem Erhalt der Heidepost (der/die Editor in Chief hat wirklich ein sehr schönes Auge für Details) wurden wir mit Feldkocher und Feldverpflegung vertraut gemacht:

LebenimFelde_INFODVAG_2015

Durch die Nutzung der Bundeswehrhandschuhe verbrante sich auch kaum einer die Finger. Kameradschaftlich wurde beim Feuer machen geholfen (danke!).
Passend zur Umgebung nahmen uns vorbeifahrenden Panzertruppen mit ins Gelände:

ÜBersetzung_INFODVAG_2015

Ausgesetzt im Gelände mussten wir uns im Rahmen eines Orientierungsmarsches, durch „minenverseuchte Gebiete“, zum Sammelplatz kämpfen.

Marschpause_INFODVAG_2015

Wir wurden zeitlich erster – irgendwie hatten wir wohl eine der vielen Aufgabenstation übersehen – das hat unser temporärer Gruppenführer „Codename: Ist das ihr Ernst?“ sehr gut gemacht :-D.
Na ja – es hat auch etwas positives. Wir würden wohl auf den Feind im Krieg verfehlen O:-).

Mittwoch:

Der Tag begann mit dem Besuch des Truppenarztes. Bei den Highland Games vor ein paar Wochen hatte ich mir einen Sonnenbrand an den Kniescheiben geholt. Dieser war zwar fast abgeklungen. Durch die mit zu hoher Motivation geschnürten Stiefel und den neuen BW-Socken kam es dann an beiden Knien zu sehr starken Hautreizungen. Daher ging es auf Empfehlung des Gruppenführers zum Truppenarzt. Eine sehr sinnvolle Entscheidung! Dort wurde mir „Schuhwerk, freie Wahl“ verschrieben. Aus gesundheitlichen Gründen entschied ich mich, ab diesem Augenblick Sneaker zu tragen und auf die Hosengummis nachhaltig zu verzichten. Beides hätte nicht funktioniert. Die Kameraden konnten mein Bedauern, dass ich hier wirklich etwas verpasse sehr gut nachvollziehen. Sie würden nicht tauschen wollen:

Freie_Schuhwahl

Sneaker-Bundeswehr

Durch den Besuch beim Arzt, hatten ich und eine Kameradin, welche ebenfalls zum Arzt musste, die Möglichkeit direkter mit VP in Kontakt zu treten. Es kam zu sehr interessanten Gesprächen über die beruflichen Hintergründe und Motivationsgründe der Soldaten und Soldatinnen und deren Selbstverständnis.

Hiernach ging es zur Vorstellung des Pumas und des Infanteristen der Zukunft:

Zwischenablage01

Infanterist_der_Zukunft_INFODVAG_2015

Nach diesem Besuch begann der erste Schritt in der Waffenausbildung, welche uns zum Teil stark forderte (in diesem Zusammenhang bin ich echt glücklich, dass ich schnell von linkshändig auf rechtshändig umstellen kann). Nach dem ersten Schritt der Ausbildung ging es Abends zu einem informellen Treffen mit frischen Rekruten der BW. Hierbei konnte ich zufällig auf VP aus dem Bereich FI SI / IT SE treffen. Sehr interessant. Da differenziert die Zielgruppe doch wohl etwas stärker als angenommen.

Donnerstag:

Der praktische Teil des Tages beinhaltete die weitere Geräteausbildung. Dieses mal mit Trockenübungen und am Simulator:

Simulator_INFODVAG_2015

Nach der Ausbildung ging es zum Empfang der Stadt Munster und dem anschließenden Besuches des dortigen Panzermuseums. Das Museum hält eine sehr umfangreiche Sammlung vor. Dieses wird dadurch ermöglich, dass das Gelände der Bundeswehr gehört. Hierdurch gilt das Kriegswaffenkontrollgesetzt nicht und die Sammlung kann Exponate im Urzustand zeigen. Der rosa Panzer war leider nicht mehr vorhanden.

Freitag:

Dieser Tag stand fast ausschließlich im Fokus der Praxis. Nach unserer umfangreichen Waffenausbildung stand nun das Zielschießen mit der MP2 (Uzi), der HK P8 und dem HK G36 auf dem Programm:

LebenimFelde_INFODVAG_2015-6

LebenimFelde_INFODVAG_2015-5

INFODVAG_2015_Uzi_Mp2

INFODVAG_2015_Zielscheibe_Uzi
Das Zielschießen wurde durch zwei Praxisvorträge unterstützt. Zum einen wurden und die Gefechtsfahrzeuge der Spähtrupps und deren Vernetzung vorgestellt. Zum anderen wurde gezeigt, wie Soldaten im Feld arbeiten und über welche Fähigkeiten sie dort verfügen müssen.

Das Feuermachen im Feld:

LebenimFelde_INFODVAG_2015-3

Die Wassergewinnung im Feld:

LebenimFelde_INFODVAG_2015-2

„Verstecken“ im Feld:

LebenimFelde_INFODVAG_2015-1

Wie gut die Personen oben versteckt sind, zeigt dieses eine(!) Auflösung:

LebenimFelde_INFODVAG_2015-1-1

Der „Kampf“ im Feld (eine unglaubliche „Show“ – sehr realistisch):

LebenimFelde_INFODVAG_2015-9

Mein Mitgefühl für die Leistungsbereitschaft der Soldaten*innen wurde durch diese Vorstellung deutlich steigerte.

Beim Preisschießen landete unsere Gruppe konstant und aus Überzeugung im Mittelfeld. Es hatte keiner das Bedürfnis als Sieger in einer Waffengattung hervorzugehen. Oder wie Oberst Schwitalla beim abendlichen Zusammensitzen sagte: Die Gruppe 2 sind halt eher die Diskutierer und Philosophen (danke :)!).

Samstag:

Der letzte Tag der Veranstaltung – es stand ein Feldgottesdienst auf dem Programm. Mir persönlich wäre es hier lieber gewesen, wenn dieser fakultativ wäre. Natürlich erst nach der Einordnung der Kirche in die Organisation der Bundeswehr. Die ausgesuchte Örtlichkeit war wie immer sehr gut gelegen. Vor Ort kam es dann zur Dankesrede gegenüber der Teilnehmer für die Organisatoren und dem Orga-Team. Nach dem Gottesdienst ging es dann zur Auskleidung, gefolgt vom Check-Out. Dort erhielten wir unsere Dienstbestätigung, ein Verpflegungstüte und eine DVD als Andenken an diese hervorrange Veranstaltung.

Für mich endete damit diese Dienstzeit bei der Bundeswehr – etwas, was ich nicht missen würde. Nach dem Abitur wäre die BW allerdings wirklich keine Option für mich gewesen. Das hätte absolut nicht funktioniert. Ich danke auch unserem Ausbilder und dem Team von der Inspektion 1, dass die so viel Verständnis für uns zeigten und uns nicht so hart trainierten wie die Mannschaft oder einen normalen Soldaten.

Die Vorträge:

Von Di-Fr wurde der Vormittag ab 7:45 für Vorträge im Lehrsaal der Offiziersschule genutzt. Referenten waren unter anderem Carsten Jacobson und Walter Spindler. Die Vorträge beinhalteten umfassende Informationen über den Aufbau, die Organisation und die Abläufe innerhalb der Bundeswehr, des Heeres und der Truppenschule. Die Inhalte selber wurden der Veranstaltung und dem anvisierten Anspruch gerecht. Eine passende Balance zwischen Theorie und Praxis wurde, auch in abstrakter und reflektierter Form, konstant erreicht.

Was mir hierbei persönlich nicht gefallen hat war die Tatsache, dass die gesamten Vorträge als reiner Frontalunterricht (ggf. mit 1-2 PPT Folien pro Minute) umgesetzt wurden. Das war sehr schade, da die Referenten eine solche Klasse hatten und die Teilnehmer viele Fragen und Ideen. Hier wäre padägogisch mehr möglich gewesen. Eine gezielte Taktung zwischen Vortrag und Nachfragerunde (Nachfragen alle 15-20 Minuten), gezielte Fragen in das Plenum oder ggf. Brainstormings/Gruppenarbeiten wäre möglich gewesen. Auch wären Hand-Outs – auch für den Bereich der Praxis – sehr gut gewesen. Damit hätte man sich besser vor- und nachbereiten können. Insbesondere beim Waffentraining wäre das für viele sehr hilfreich gewesen. Hier hat das Team noch ein sehr gute Steigerungspotential im Bereich der Didaktik.

Insgesamt ändert das alles nichts an dem sehr, sehr positivem Eindruck der Veranstaltung. Diese Veranstaltung sei jeder Person empfohlen, welche die Chance dafür hat. Ich kann sie nur empfehlen und hoffe, dass die nächsten Veranstaltungen mindestens genauso gut werden! Persönlich habe ich bei der INFODVAG sehr viel über die Bundeswehr, das Leben von Soldaten und über mich selber gelernt. Die sehr angenehme und coole Gruppe 2 rundeten die Veranstaltung ab (*****/*****).

 

Weiterführende Informationen: