Logo Wanja Friedemann Pflüger

Wanja Friedemann Pflüger

Wanja Friedemann Pflüger
Webdesign & Web Development

[javascript protected email address]

Handmade responsive Webdesign & Web Development aus Berlin

Ich bin einer von 6 studierten Web Entwicklern in Deutschland und studiere an der design akademie berlin, SRH Hochschule für Kommunikation und Design.

Lesen Sie hier alles, was Sie schon immer über Webdesign wissen wollten, aber bisher nicht zu fragen wagten.

Abkürzungen: Kontakt, Referenzen

Webdesign

Die große Vielfalt

Früher war alles 4:3.

Die Digitalisierung prescht voran und hinterlässt ein immer größer werdendes Chaos an quietschbunten Endgeräten, über die wir dann stolpern.

Da gibt es verschiedene Bildschirmgrößen, erhöhte Pixeldichten (Retina-Display), Endgeräte die sich drehen lassen, (VR-)Brillen mit denen man sehen kann, digitale Bilderrahmen und immer noch den Internet Explorer.

Computer Monitor im 4:3 Format

Früher wurden alle Computer-Monitore im Format 4:3 ausgeliefert. Modernes Webdesign muss sich unbekannte Seitenverhältnisse anpassen.

User Experience (Nutzungserlebnis) und Barrierefreies Internet

Der Nutzer soll sich auf Ihrer Website einfach zurechtfinden. Dabei soll sich ihm die Bedienung der Website intuitiv erschließen.

Das Prinzip Form follows function besagt, dass neben dem äußeren Erscheinungsbild einer Website, vor allem die innerern Werte eine hohe Priorität haben.

Bei der Entwicklung des Designs dürfen auch (technisch) beeinträchtigte Personen nicht übergangen werden. Es muss auf Lesbarkeit, multimediale Unterstützung, sowie Farben und Formen geachtet werden.

User experience

Das Verhalten von Besuchern im Anwendungsfall kann durchaus von der geplanten Nutzungsweise abweichen. Optisch ansprechendes Design ist keine Garantie für eine positive Nutzererfahrung.

Der moderne Ansatz

Die Lösung lautet responsives User-Experience Design (UX) barrierefrei (a11y) mit CSS3.

Das bedeutet, dass Ihre Website sowohl auf einem kleinen Smartphone, als auch auf einem 100" UltraHighDefinition 4K LED Fernseher gut aussieht, denn responsives Design passt sich dynamisch an seine Umgebung an.

Weitere Informationen zu CSS3 finden Sie hier.

Website auf Smartphone, Tablet und Computerbildschirm

Eine responsiv gestaltete Website passt ihr Layout dynamisch an jedes Endgerät an. So sieht Ihre Website sowohl auf dem Smartphone, als auch auf dem Computerbildschirm gut aus.

Web Development

Web Development ≠ Web Design. Mehr Informationen darüber, worum es bei der Entwicklung von Websites eigentlich geht. HTML ist die Kernsprache des World Wide Web.

HTML

HTML (Hyper Text Markup Language) ist das Grundgerüst einer Website, Basis, Struktur und Konstrukt. Die Kernsprache des World Wide Webs (www). Wenn CSS3 das Äußere des Körpers ist, so ist HTML das Skelett. Fun fact: seit 2014 n. Chr. schreiben wir übrigens HTML5 und nicht mehr HTML4.

HTML Code auf Computerbildschirm

So sieht der Code einer Website aus.

HTML5 Tags

Suchmaschinen sind im Prinzip nicht sonderlich intelligent. Dank HTML5 können wir ihnen aber beispielsweise erklären, dass es sich bei

<address>Auenweg 7, 50679 Köln</address>

tatsächlich um eine Adresse handelt. Diese Schreibweise mit den mathematischen Vergleichszeichen < und > nennt man Tag (bitte englisch aussprechen).

Das grundsätzliche Prinzip von Tags ist es, Inhalte zu organisieren und verändern zu können.

Beispiel:

Tag Schreibweise Ergebnis Bezeichnung
strong <strong>hallo</strong> hallo Fett
em <em>hallo</em> hallo Kursiv
s <s>hallo</s> hallo Durchgestrichen

<strong>, <em>, <s> sind also genauso wie das oben genannte <address> Tags. Wenn man den oben genannten Ausruck also in fett schreiben möchte, so lautet der Code:

<address>
  <strong>Auenweg 7, 50679 Köln</strong>
</address>

Ergebnis: Auenweg 7, 50679 Köln

Sonstiges in HTML5

HTML5 kann natürlich noch viel mehr, allerdings ist das an dieser Stelle ein bisschen out of scope.

Weitere Informationen zu HTML5 finden Sie hier.

Suchmaschinenoptimierung (SEO)

Schematische Darstellung von Daten

Noch präziser als HTML5 Tags ist der Einsatz der maschinenlesbaren Sprache (engl.: markup language) Schema. Mit Schema können Inhalte für Suchmaschinen strukturiert aufbereitet werden.

Syntax für Maschinen:

{
  "@context": "http://schema.org",
  "@type": "Event",
  "location": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Berlin",
      "postalCode": "10999",
      "streetAddress": "Moritzplatz"
    }
  },
  "name": "Tag der Offenen Tür",
  "startDate": "2018-01-22UTC18:00"
}

Übersetzung für Menschen:

"Hallo Suchmaschine, am nächsten Montag um 18 Uhr ist Tag der offenen Tür am Moritzplatz."

Durch das Hervorheben solcher relevanter Informationen werden die Daten extrahiert und können dem Nutzer schon geliefert werden, bevor er weiß, dass er sie braucht.

Weitere Informationen zu Schema finden Sie hier.

Inhalte erstellen

Suchmaschinen können lesen. Wirklich! Verstehen können Sie noch nicht alles. Noch nicht. Daher ist es enorm wichtig, gute Inhalte zu erstellen. Aber was sind gute Inhalte?

Zunächst sollten die Inhalte mit entsprechender Umsicht und Sorgsamkeit recherchiert, mit bestehenden Quellen verglichen (nicht plagiiert) und multimedial unterstützt werden. Die Inhalte sollten dabei für Mensch als auch Maschine zugänglich und gut strukturiert sein.

Gute Planung ist die halbe Miete!

Faktoren für das Ranking einer Website

Bei der Suchmaschinenoptimierung geht es letztendlich vor allem darum, dass Ihre Seite gut und schnell gefunden wird. Dies setzt voraus, dass ihre Inhalte besser sind als die der Konkurrenz. Weitere Faktoren sind zum Beispiel die Anzahl der Besucher und deren Verweildauer.

Darstellung und Qualität der Suchergebnisse

Noch wichtiger als die Position ihrer Seite im Ranking der Suchmaschinen ist die Qualität der angezeigten Information. Diese entscheiden letztlich darüber, ob ein Nutzer ihre Seite besucht.

Damit der Nutzer noch schneller an für ihn geeignete Informationen gelangen kann, können von einer Suchmaschine bestimmte Informationen extrahiert werden.

Google Business Ergebnis Über den Tellerrand Berlin

Mit Google Business können Sie für Ihr Unternehmen gezielt Kontaktinformationen, Öffnungszeiten, Bewertungen uvm. hinterlegen (hier: rot markiert).

SEO Marketing

Zusätzlich zur sogenannten Organischen Suchmaschinenoptimierung, besteht die Möglichkeit beispielsweise über den Dienst Google AdWords bezahlte Anzeigen und Kampagnen zu erstellen.

Pagespeed: Ladezeiten und Datenmengen

Um eine Website anzuzeigen, muss sie heruntergeladen werden. Das sollte schnell gehen.

Dabei geht es nicht nur um Dateigrößen und die Komprimierung von Bildern, Videos und Dokumenten, sondern auch um eine intelligente Methode und Reihenfolge der Datenbeschaffung (Lesbarkeit vor fancy Animationen).

Content Management Systeme (CMS) und Content Construction Kit (CCK)

Inhalte pflegen

Das was Sie von einer Website sehen, nennt man Frontend. Die Inhalte werden im Backend verwaltet.

Damit Sie das machen können, ohne vorher jahrelang kryptische Zeichensprache zu lernen, hilft Ihnen ein Content Management System (CMS).

Um bei der Pflege Ihrer Inhalte mit dem CMS nicht das gesamte System zu zerstören, gibt es das Content Construction Kit (CCK).

Mit diesem Kit können Sie ihre Inhalte über Formulare eingeben.

So ist das Pflegen von Inhalten kinderleicht, Sie können nichts falsch machen und alles hat seine Ordnung.

Formular im Backend einer Website

Screenshot vom Backend einer Website. Die Eingabe von Inhalten erfolgt sicher und übersichtlich über ein Formular.

Kontakt

Sie sind an einer zeitgemäßen, dynamischen Website mit modernsten Technologien interessiert? Sie sind Künstler, Freiberufler oder Unternehmer?

Dann schreiben Sie mir!

Wanja Friedemann Pflüger
[javascript protected email address]

Leistungen

Um Ihr Webprojekt erfolgreich voranzubringen, biete ich neben der technischen Umsetzung auch Hilfe bei der Erstellung multimedialer Inhalte an. Bei Bedarf assistiere ich Ihnen gerne bei der Namensfindung, Ideensuche oder organisiere die Produktion Ihres eigenen Werbefilms.

Preise

Was kostet eine Website?

Der Preis richtet sich nach dem Aufwand und muss im Einzelfall berechnet werden – denn es ist viel Aufwand ein Website zu konzipieren, konzeptionieren, skizzieren, planen, strukturieren, layouten, designen, entwickeln, programmieren, testen, neu machen, realisieren, verbessern, korrigieren, überarbeiten, pflegenweiterlesen und so weiter und so fort.

Referenzen

Published Software


Zurück nach oben ↑