Material Design: Be-Greifbar

 Material Design ist eine von Google entwickelte Designsprache, die vor allem auf mobilen Endgeräten und im Web bei diversen Google-Diensten zum Einsatz kommt. Sie wurde aus dem minimalistischen Flat Design abgeleitet. Dem zweidimensionalem Flat Design fügt das Material Design eine dritte Dimension hinzu, die den grafischen Oberflächen subtil Tiefe verleiht und Elemente haptischer gestaltet. Wie das Flat Design setzt das Material Design sehr stark auf die Betonung von Icons und Schriften. Die verwendeten Elemente sind großflächig, einfarbig und in leuchtenden und kontrastreichen Farben ausgeführt. Im Zuge der Einführung des Material Designs hat Google auch seine eigene Schriftart, den Android Font “Roboto”, angepasst.

material design

 Was ist das erklärte Ziel von Googles Design?

Material Design erhebt den Anspruch, die Prinzipien “guten” Designs mit sämtlichen Möglichkeiten von Technologie und Wissenschaft zu verbinden. Besonders gut lässt sich die Umsetzung dieses Anspruchs an animierten Elementen erkennen.

    Beispiel:

Wenn sich eine rechteckige Form auf dem Display ändert - egal ob sie lediglich die Größe ändert oder sogar auch die Form - dann ändert sich sowohl die Höhe als auch die Breite der Form asynchron; also die Breite verändert sich beispielsweise schneller als die Höhe. Diese Art der Choreographie wirkt auf eine subtile Art natürlich. In manchen Fällen ändert sich die Größe eines Inhalts synchron, während sich der dazugehörende Container asynchron ändert. So kann der Designer vermeiden, dass beispielsweise Bilder unnatürlich verzerrt werden.

google material design martphone 1796337 640

Die Prinzipien von Material Design

“Material ist die Metapher” (Google)

Material Design basiert auf unserer realistischen Erfahrung der Welt; auf physikalischen Gesetzmäßigkeiten, die unsere Wahrnehmung strukturieren und von uns als “natürlich” empfunden werden. Materialien geben die taktile Dimension vor, vor allem Studien von “Papier und Farbe”, und werden durch technologische Finessen für “die Vorstellungskraft und Magie” geöffnet, so Google. Die Grundlagen von Licht, Oberfläche und Bewegung bestimmen, wie Elemente aussehen und animiert werden, wie sie sich in Interaktion miteinander verhalten. Licht und Schatten, Abstände und Absätze, Kanten und Ecken sind in diesem Sinne “realistisch” gestaltet und helfen den Nutzern, die Funktionalität der grafischen Oberfläche intuitiv zu “begreifen”.

“Kräftig, grafisch, intentional” (Google)

Print Design bildet in mehrfacher Hinsicht die Basis für Material Design. Typografie, Gitter, Räume, Dimensionierung, Farbe und der Einsatz von Bildern sind bestimmende Elemente und kreieren optische Hierarchien, Bedeutungen und bestimmen die Blickführung. Alles steht im Zeichen der User-Erfahrung. Der User soll geleitet werden und intuitiv verstehen: Darum setzt Googles Material Design auf ein bestimmtes Farbmanagement, großflächige Bilder, großformatige Typos und den bewussten und großzügigen Einsatz von white space.

“Bewegung verleiht Bedeutung” (Google)

Die Interaktionen der Benutzer mit der grafischen Oberfläche bringen diese in Bewegung: Sie transformieren die Oberfläche. Wenn sich die Elemente auf der grafischen Oberfläche ändern und neu organisieren, ist es von besonderer Wichtigkeit, dass die Nutzer dennoch ein Gefühl der Kontinuität erleben und die Oberfläche fokussiert auf die Intentionen der User bleibt. Zu den Prinzipien des Material Design zählt aus diesem Grund, dass die Feedbacks der grafischen Oberfläche subtil aber eindeutig und Veränderungen effizient aber kohärent sind.

google 920532 640

Materielle Eigenschaften

Wer Material Design anwenden möchte, muss sich mit den Qualitäten von Materialien auseinandersetzen, um sie in grafische Elemente “übersetzen” zu können. Im Falle des Material Design von Google bedeutet dies:

  • Elemente haben eine variable Größe (auf der x- und der y-Achse) und eine einheitliche Dicke von 1 Millimeter (y-Achse). Die Dicke bestimmt auch den unerlässlichen Schattenwurf der Elemente. Der Schatten stellt dar, wie groß Abstände zwischen bestimmten Oberflächen sind.
  • Materialien sind “massiv”: Ein Element darf nicht denselben Ort einnehmen, wie ein anderes Element. Zwei Elemente überlappen sich gegenseitig und zeigen dies durch den Schattenwurf, der vom oberen Element auf das untere fällt. Neue Elemente erscheinen auf der oberen Schicht der Elemente und durchdringen nicht etwa tiefere Schichten.
  • Materialien können ihre äußere Form verändern.
  • Wenn Materialien ihre Größe ändern (x- und y-Achse), verharren sie auf ihrer festgelegten Ebene (z-Achse).
  • Materialien falten und biegen sich nicht.
  • Zwei Materialien können sich miteinander verbinden und Eins werden. Einzelne Materialien können sich teilen und wieder “ganz” werden.
  • Material kann spontan auftauchen und verschwinden.
  • Material kann sich auf jeder beliebigen Achse bewegen.
  • Wenn sich Material auf der y-Achse bewegt, ist dies vor allem für Interaktionen des Nutzers vorbehalten.

Materialle Bewegungen

Bewegungen sind im Material Design besonders ausgefeilt. Bewegungen, die der User mit einem Element vollführt - etwa, wenn er einen Regler zieht - geben ein bestimmtes Tempo und eine eigene Dynamik vor. Erklärtes Ziel dieser Ausrichtung ist es, dass Bewegungen weder als “lahm” noch als “nervös” empfunden werden.

 

Elemente, die sich bewegen, folgen, wie oben bereits erwähnt, einer besonderen Choreografie. Entscheidend ist, dass nicht eine lineare Bewegung angestrebt wird, sondern eine, die unserem natürlichen Empfinden für Bewegungen entspricht. So verlangsamen sich Bewegungen am Beginn oder gegen das Ende hin - als würden sie gegen die Trägheit, die Materialien ja auch in der realen Welt überwinden müssen, ankämpfen.  

Fazit

Material Design ist eine faszinierende und bereits extrem ausgefeilte Design-Philosophie. Sie kann Entwicklern viele inspirierende Ansätze liefern. Gleichzeitig beschränkt sie natürlich: Sie ist ein geschlossenes System, dass für jedes Element der Gestaltung - Farbgebung, Icons, Layout, Bewegung etc. - feste Vorgaben bereithält. Spannend wird es immer dann, wenn Webdesign die Regeln derart verinnerlicht hat, dass ein Ausbruch möglich wird.

 

Quellen:

https://material.io/guidelines/

https://design.google.com/

https://www.youtube.com/watch?v=Q8TXgCzxEnw

material design icons

Serif vs. Sans Serif: Welche Fonts sollten für Webseiten genutzt werden

Wenn Sie eine Webseite erstellen, achten Sie gewiss auf ein ansprechendes Design. Dabei stellen sich natürlich viele Fragen: Passt das Design zu den Inhalten und zu meinem Unternehmen bzw. meiner Dienstleistung? Kommen die von mir ausgesuchten Grafiken gut zur Geltung? Findet sich ein Nutzer auf der Seite optimal zurecht? Kann man die eingebauten Texte gut lesen und passen diese typografisch zum Design?
Für jede dieser Fragen können wir, als Agentur für Webdesign (Berlin), passende Antworten liefern. In diesem Blog-Post soll es nun um das Design des Textes gehen, genauer um die Wahl der Schriftart. Da dieses Thema sehr vielseitig ist, möchten wir hier mit einer groben Einteilung der Schriften beginnen und die Frage klären: Serif vs. Sans Serif? Was ist besser für Online-Inhalte.

Begriffserklärung: Was sind Serifen?

Bevor wir uns dem Thema widmen, welche Schriftarten (engl. Fonts) auf Webseiten besonders geeignet sind, möchten wir kurz den Begriff der “Serife” erklären. Laut Duden handelt es sich, um einen “kleinen, abschließenden Querstrich am oberen oder unteren Ende von Buchstaben”.

Auch wenn sich diese kleinen Striche zumeist sehr harmonisch ins Schriftbild fügen, sind sie Ihnen gewiss schon einmal aufgefallen. Schriften, die über Serifen verfügen, werden in der Typografie als “Serifenschrifen” (serif) bezeichnet; Schriften ohne Serifen werden unter dem Begriff “serifenlose Schriften” (sans serif) gefasst.

Schriftbeispiel: Serif und Sans Serif

Schriftart mit Serifen oder ohne Serifen - Was ist das Richtige für meine Webseite?

Die Schriftauswahl für eine Webseite ist ein entscheidender Schritt in Richtung eines stimmigen, unverwechselbaren Designs. Die Schrift sollte zum allgemeinen Design der Website passen, Kombinationen verschiedener Schriftarten (sog. Webfonts) sollten harmonisch sein und gerade bei längeren Textabschnitten spielt natürlich auch die gute Lesbarkeit eine wesentliche Rolle. Gerade dabei ist die Wahl zwischen Serif und Sans Serif entscheidend.

Webseiten sind keine Buchseiten

Buchseite mit Serifenschrift

Verschiedene Tests in Bezug auf das Leseverhalten haben belegt, dass für lange Texte in Druckerzeugnissen eine Serifenschrift von Vorteil ist. Die kleinen Querstriche erleichtern das Verbinden der Buchstaben und erhöhen die Lesegeschwindigkeit. In Romanen und Zeitungen finden sich daher i.d.R. Schriften mit Serifen.

 

Monitor Serif Sans SerifWebseiten werden aber nicht auf Papier, sondern auf Bildschirmen konsumiert. Da Bildschirme in ihrer Auflösung eingeschränkt sind, gelten hier andere Regeln für Texte. Bei geringerer Auflösung “verschwimmen” die Serifen vor dem Auge, sie werden pixelig ausgegeben und die Schrift wirkt insgesamt eher unscharf auf das Auge. Gerade bei kleinen Schriftgrößen wird dieser Effekt besonders deutlich.
Daher empfiehlt sich für längere Texte auf Bildschirmen in jedem Fall die Verwendung von Sans-Serif-Schriften. Die Ermüdung beim Lesen wird dadurch deutlich minimiert.

Schrift als Design-Element

Natürlich soll der Einwand bzgl. der Lesbarkeit die Verwendung von Serif-Fonts im Webdesign nicht komplett ausschließen. Auf vielen Webseiten und Microsites findet sich auch eine stimmige Kombination beider Schriftarten. So werden Serif-Schriften häufig für Überschriften verwendet, wodurch diese optisch vom Fließtext abgesetzt und hervorgehoben werden. Für längere Textblöcke, Breadcrumbs oder Navigationselemente wird i.d.R. auf Sans-Serif-Fonts zurückgegriffen. (Ein bekanntes Beispiel für diesen kombinatorischen Einsatz ist etwa Wikipedia.)

Serif vs. Sans Serif: Zusammenfassung

Eine unterhaltsame Zusammenfassung zum Thema bietet der Webfont-Anbieter “urbanfonts”.

Webdesign und SEO: Ohne das andere geht es nicht

Lange vorbei sind die Zeiten der Gelben Seiten oder der Kleinanzeigen im örtlichen Tageblatt. Auf der Suche Lösungen, Informationen, Produkten und Dienstleistungen ist das World Wide Web zur Bezugsquelle Nummer 1 avanciert. Von Berlin bis Böbrach wird gegoogelt, was das Zeug hält – nach Klamotten, nach Ärzten, nach Restaurants, Hotels, Fliesenlegern, Nachhilfelehrern, Fitnessstudios etc.

Also egal ob weltweit agierender Großkonzern oder lokal ansässiger Handwerksbetrieb – kein Unternehmen kommt heute mehr ohne Website aus, die das Firmenangebot konversionsfreundlich präsentiert.

Vor allem kleine und mittelständische Unternehmen verfügen aber oft nicht über das Know-how und die personellen Ressourcen, um selber eine ansprechende Website zu bauen. Sie lagern diese Aufgabe häufig an externe Dienstleister und Agenturen aus – unter dem Stichwort Webdesign - SEO spielt für eine erfolgreiche Homepage aber eine ebenso große Rolle wie Optik und Usability und sollte von Anfang an mitgedacht werden, also schon im Stadium der Programmierung und der Erstellung des Webdesigns.

Webdesign? Is’ klar - doch was macht SEO?

SEO ist die Kurzform für Search Engine Optimization, zu Deutsch: Suchmaschinenoptimierung. Vereinfacht gesagt geht es bei SEO darum, mithilfe technischer und redaktioneller Maßnahmen die Auffindbarkeit einer Website im Internet zu steigern.

Wer bspw. ein Taxiunternehmen in Berlin hat, will in der Google-Trefferliste natürlich möglichst weit oben stehen, wenn Leute nach “Taxi Berlin” googeln. Die obersten Platzierungen generieren in der Regel die meisten Klicks. SEO-Maßnahmen können die Platzierung verbessern.

seo 1018442 640

Wer seine Seite nicht SEO-optimiert, muss damit rechnen, weit hinten im Google-Ranking zu landen. Und kaum ein User klickt sich durch die Seiten 2 bis 10 auf der Suche nach einem passenden Ergebnis für seine Suchanfrage, eher ändert er seine Suchanfrage.

Webdesign und Suchmaschinenoptimierung beeinflussen sich gegenseitig

Dass die Möglichkeiten zur Suchmaschinenoptimierung schon bei der Erstellung einer Website berücksichtigt werden sollte, wird schnell deutlich. Denn was nutzt Ihnen als Unternehmen eine attraktiv und höchst nutzerfreundlich designte Website, wenn diese im Netz nicht auffindbar ist?

Andersrum verhält es sich ähnlich: Die Google-Rankings Ihrer Website sind hervorragend, viele Nutzer kommen auf Ihre Seite - aber: Sie bestellen nichts, stellen keine Anfrage, machen keinen Termin, verdrücken sich ohne Transaktion wieder von Ihrer Seite. Dann liegt vermutlich etwas mit der Nutzbarkeit im Argen zu liegen, einem Kernelement des Webdesigns.

Wer Webdesign und SEO getrennt voneinander und/oder zeitlich nacheinander angeht oder Agenturen damit beauftragt, der riskiert massive Folgekosten für die Nachrüstung bzw. die nachträgliche Anpassung beider Bereiche aufeinander: Ein schönes Design, das nachträglich mit SEO-Kriterien in Einklang gebracht werden muss, ist genauso arbeitsintensiv wie eine SEO-optimierte aber wenig ansprechende Seite im Nachgang zu verschönern, ohne dass die SEO-relevante Codierung verloren geht.

Um einen solchen finanziellen und zeitlichen Aufwand zu vermeiden und die Basis für eine in jeglicher Hinsicht gelungene Website zu schaffen, lohnt es sich, den Auftrag für eine Website an eine Online-Agentur zu vergeben, bei der alles aus einer Hand kommt. Das heißt, in der Webentwickler/Programmierer, Webdesign- und SEO-Experten von Anfang an zusammenarbeiten.

Eine seriöse Webdesign-Agentur erkennen Sie außerdem daran, dass Ihnen keine Standardlösung zum Festpreis angeboten wird, sondern ein individuell auf Ihre Wünsche und vor allem Ihre Zielgruppe zugeschnittenes Produkt.

Gutes Webdesign ist die Grundlage für gute Rankings

programming 1873854 640

Design und Programmierung sind die entscheidenden Faktoren für die Nutzbarkeit einer Website. Unter anderem folgende Punkte machen eine “gute” Internetseite aus:

  • Standardelemente und Optik: Internetnutzer haben eine bestimmte Erwartungshaltung an die optische Aufmachung und das Vorhandensein bzw. die Anordnung einzelner Elemente einer Website, die sie erfüllt wissen wollen. Dies betrifft unter anderem Texte, Navigationselemente oder Suchfelder.

 

  • Navigation und Menüführung: Eine Website sollte immer dem Unternehmenszweck entsprechend aufgebaut sein: Als Online-Shop wollen Sie verkaufen, als Anwalt wollen Sie Anfragen generieren. Hier bestimmt das Webdesign vor allem mittels passender Navigation, ob die Besucher Ihrer Website am Ende die gewünschte Aktion durchführen oder Ihre Seite tatenlos wieder verlassen.

 

  • mockup 654585 1280Responsives Design: Immer mehr Google-Suchanfragen werden über mobile Endgeräte gestellt. Internetseiten werden also verstärkt über Smartphones und Tablets aufgerufen. Hier ist es die Aufgabe des Webdesigns, neben der Desktop-Ansicht auch ein mobiles Design zu erstellen. Dieses sorgt für eine attraktive und nutzbare Darstellung Ihrer Seite auf kleineren Handy- und Tablet-Bildschirmen.

 

  • Barrierefreies Webdesign: Barrierefreiheit bei der Nutzung von Websites ist seit dem letzten verstärkt in den Fokus der Webdesigner gerückt. Barrierefreies Webdesign ermöglicht auch eingeschränkten Nutzern einen komfortablen Zugang zu Online-Inhalten.

 

Die Umsetzung dieser beispielhaft ausgewählten vier Punkte entscheidet darüber, ob die Besucher Ihrer Website diese als gut oder schlecht empfinden. Aber auch Suchmaschinen wie Google bewerten Aufmachung, Struktur und bspw. die Ladezeit Ihrer Seite und zeigen Ihre Seite je nach Urteil weiter vorne oder weiter hinten in ihren Suchergebnissen an.

Auch in Bezug auf relevante Inhalte auf einer Website muss die Schnittstelle zwischen Webdesign und SEO von Anfang an reibungslos ineinandergreifen: Texte, Videos, Infografiken oder auch Fotos, die auf Ihrer Seite eingebunden werden sollen, müssen vom Webdesign bedarfsgerecht aufbereitet werden. Gesuchte Informationen müssen innerhalb einer Seite vom User schnell und in einer fürs Auge angenehmen Weise gefunden werden können. Aus SEO-Sicht muss der Content über eine SEO-kompatible Codierung und Programmierung verfügen sowie einen informativen Mehrwert liefern. Letzterer dient dem Nutzer für seine Suchanfrage und liefert der Suchmaschine Anhaltspunkte für die thematische Relevanz Ihrer Seite.

Das Webdesign entscheidet also über den Grad, zu dem Onpage-Optimierung möglich ist. Ein Umstand, der einmal mehr beweist, wie sehr SEO und Webdesign zusammengehören.

Kostenlose Icon Sets für Flat Design

social media icons

Flat Design spaltet die Design Community. Die einen schwören auf den funktionalen, farbenfrohen Webdesign-Stil mit langen Schatten, die anderen verteufeln ihn als langsamen aber sicheren Untergang des guten Geschmacks. Außer Frage steht jedoch: Flat ist kein verfliegender Webdesign Trend. Wie Ghost Buttons, Infografiken und Storytelling Webdesign bleibt uns dieser Gestaltungsstil länger erhalten.

In unserem Flat Design Beitrag haben wir bereits Grund- und (künstlerische wie auch technische) Vorzüge aufgezeigt. Auch im Zusammenhang mit und im Rahmen eines Heute soll es nun um konkrete Formen bei der Umsetzung gehen, und zwar mithilfe von schön entworfenen Flat Icon Sets.

Flat Icons: unsere Lieblinge

Icons sind ein essenzielles Element im UI Design. Sie sparen Platz, sind ansprechend für den User, werden schnell erkannt und müssen nicht übersetzt werden. Schön entworfene Icons, die mit den anderen Details einer Webseite harmonieren, können ein Design merklich aufwerten.

Welche Icons wir in unseren Webdesign Berlin Projekten nutzen, hängt stark von den Kunden und dem Stil der Seite ab. Ist die Seite beispielsweise sehr filigran und in einem Minimalistischen Webdesign gehalten, kommen Line-Icons zum Einsatz, ist sie sehr plakativ mit großen Flächen, dann nutzen wir gerne ausgefüllte Icons. Je nach Zielgruppe können die Icons sehr klar oder auch verspielt sein. Ganz klar ist aber: Die gewählten Icons unterstützen die Aussage der Webseite und runden das gesamte Design ab.

Für jedes Webdesign-Projekt immer neue Icon Sets zu entwerfen, steht jedoch in keinem Verhältnis. Schließlich gibt es zahlreiche Plattformen, die wunderbare Icon-Sätze bieten. Zugleich ist der Pool an kostenlosen Icon Sets so riesig und unübersichtlich, dass die Suche nach Icon-Schätzen sich ganz schön ziehen kann. Wie bei Web Fonts verliert man sich schnell im Vektoren-Wald - die Grafiken und die kreative Vielfalt ist ja auch schön anzusehen.

font awsome icons

Bei unseren Projekten nutzen wir FontAwesome - ein Open Source Projekt für hochwertige Vektor Icons und Social Logos - sehr gerne. Interessanterweise haben die Macher Ende 2016 eine der erfolgreichsten Kickstarter Kampagnen in der Branche geführt, mit 35.550 Backern und $1,076,940 die meistfinanzierte Software.

heisenberg flaticon

Sollen es andere Icons sein, nutzen wir genauso gerne flaticon.com. Da findet man die ausgefallensten Icons, inklusive Heisenberg.

Hier ein kleine Auswahl unserer Lieblinge unter den kostenlosen Flat Icon Sammlungen:

Flat Icon Sammlung Bildungsbereich

education flat icons

veröffentlicht von: Popcorn Arts
Download Format: Vector icon (SVG & EPS), PNG und PSD

Energie Icons

energy icon setveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Icons auf Weltreise

monument icon sammlungveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Landschaften Icon Set

icon satz landschaftenveröffentlicht von: Popcorn Arts
Download Format: Vector icon (SVG & EPS), PNG und PSD

Icon Satz Marketing

marketing icon packveröffentlicht von: Zlatko Najdenovski
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Menschen Icons

people flat iconsveröffentlicht von: Roundicons
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Icon Sammlung Berufsfelder

professionals icon setveröffentlicht von: Freepic
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Office Icon Set

office icon setveröffentlicht von: Madebyoliver
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

Coffee Icons

coffee icon sammlung

veröffentlicht von: Madebyoliver
Download Format: Vector icon (SVG & EPS), PNG, PSD und Iconfont

 

 

Tabelle generieren und konvertieren: HTML, DIV TABLE und CSS

Tabellen sind der Klassiker, wenn es um die strukturierte Darstellung von Informationen geht. Sie sind flexibel in der Gestaltung und werten eine Website nicht nur optisch auf. Für den Nutzer erfassen die Inhalte in der Regel besser, wenn diese gut aufbereitet und in Spalten und Zeilen strukturiert sind.

 

So nützlich sie für den Besucher auch sind, für manche ist das Erstellen von Tabellen und Tabellengittern eine Sisyphos-Arbeit. Vor allem ungeübte Hände haben beim Webdesign oft Probleme, Ihre Vorstellungen umzusetzen - trotz der vielen Plug-Ins, die es in modernen Content Management Systemen gibt. Abhilfe schafft die Website divtable.com mit einem Tabellengenerator, der sehr einfach zu bedienen ist.

tabelle generieren mit divtable

Individuelle Tabellen generieren

Unter divtable.vom/generator haben Sie die Möglichkeit, mit wenigen Klicks eine Tabelle nach Ihren Vorstellungen zu generieren. In den “Settings” wählen Sie zunächst zwischen der Verwendung von Table tags und Div tags - nutzen Sie letzteres, werden Ihnen die entsprechenden CSS-Befehle vom Tool mitgeliefert.

 

Weiterhin bestimmen Sie die Stärke des Tabellenrahmens und die Tabellenbreite in Pixeln oder Prozent. Für das Cell Padding (Abstand des Zelleninhalts vom Zellenrand) können Sie ebenfalls einen Wert vergeben.

 

divtable generator zur tabellenerstellung

 

Das vorgegebene Tabellengitter auf der rechten Seite hilft Ihnen dabei, die Anzahl der Spalten und Zeilen ohne großen Aufwand zu bearbeiten. Im visuellen Editor können Sie durch die Bedienflächen einzelne Spalten oder Reihen ober- oder unterhalb hinzufügen oder entfernen.

 

Bei der Verwendung von Table Tags bieten die Table properties weiterführende Einstellungsmöglichkeiten wie die Ausrichtung, Werte für das Cell spacing (Abstand der Zellen zum Tabellenrand) oder Farben für Rahmenlinie und Hintergrund.

 table properties bestimmen

Vorhandene Tabellen konvertieren

Mithilfe des Online-Tools können Sie nicht nur eine eigene Tabelle generieren, sondern auch vorhandene Tabellen mit Table Tags in Tabellen mit Div tags umwandeln. Auch beim Table Converter unter divtable.com/converter gibt das Tool die Angaben für Ihre CSS-Datei dazu.

 

divtable converter

 

Im visuellen Editor, dem HTML-Editor und den CSS-Befehlen können Sie gegebenenfalls Anpassungen vornehmen, um Ihre Tabellen weiter zu personalisieren und Inhalte einzutragen. Anschließend kopieren Sie einfach die benötigten Elemente und binden sie in Ihren Beitrag bzw. die CSS-Datei ein. Et voilá - da ist die gewünschte Tabelle mit all den gewünschten Komponenten!

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35