Webdesign

Neuer Server, neue Domain, neuer Anfang... RIP elcappuccino.ch (2001-2016)

  Hallo
Ich bin nicht nur Musiklehrer, ich bin auch Hobby-("Web")-Designer. Ich habe im Verlauf meiner Webpräsenz schon vieles versucht, inklusive einer Totalauflösung, Pause und Neuanfang. Meine Erfahrungen erstrecken sich über umfangreiche Webapplikationen (Chat, CMS, DB-Literatur/Community-Kommentar), und beinhaltet sowohl frustrierende wie schmerzvolle Erlebnisse. Heute erblicke ich mich als weitgehend verführter, dem beigebracht wurde dass die Lösung stets mehr Technik sei. Im fortgeschrittenen Alter ist man aber nicht mehr so bestrebt, sich etwas beweisen zu müssen.
An dieser Stelle möchte ich mich entschuldigen bei jenen, die unter meinen Irrtümern zu leiden hatten.

Prinzipien (KISS)

keep it simple stupid

Weniger Technik heisst mehr Zeit für Inhalte.

Jede Technik muss gelernt und das Wissen aktuell gehalten werden. KISS beschränkt sich auf die nicht reduzierbaren Kerntechniken:

Verzichte auf serverseitige Programmierung oder zusätzliche Abstraktionsschichten. Verzichte insbesondere auf jQuery, SASS etc.

Trenne Inhalt von Form

Verwalte alles, was mit dem Site-übergreifenden Design zu tun hat, separat und unabhängig von Inhaltsseiten. Inhaltsseiten sollen Site-Design-agnostisch verfasst werden und möglichst frei von globalen Inhalten sein.

URIs bezeichnen Inhalte und sollen relative Links sein

URIs sollen ganz dem Inhalt gerecht werden und frei von übergreifenden Zwängen sein.
Vermeide absolute oder in http-root verankerte Links, denn eine Site soll frei verschiebbar sein.

Die Anmeldung neuer Seiten soll schnell und einfach sein.

Die Erstellung einer Seite soll möglichst wenige Dateien tangieren:

  1. Das zu erstellende Dokument
  2. Eine Sitemap, wo die neue Seite einmal angemeldet wird und dann für die Bildung von Menus zur Verfügung steht.

Revisionen der Form

Durch die Trennung von Inhalt und Form ist die Revision der Form kein Problem. Mehrere Versionen können gleichzeitig betrieben werden.
Für Icons bedeutet dies die Einbindung über semantische Klassen.

Möglichst kleiner Energiefingerprint

Statische Seiten lassen sich gut durch den Client cachen und reduzieren damit das Download-Volumen. Der Verzicht auf jegliche Serverlogik nebst dem vorhandenen Server reduziert weiter den Energiebedarf.

Sei konservativ, verzichte auf neueste Technologien

Schreibe das JS so, dass alle 98% der verwendeten Browser es verstehen und hinreichend darstellen können. Verzichte auf mangelhaft unterstütztes html. Bevorzuge Methoden, die keine Patch-Scripte brauchen.
10 Schritte hinter den Edgelords des Webdesigns läuft es sich meist besser.

UTF-8 sei deine einzige Zeichenkodierung!

Nichts ist produziert mehr Kopfzerbrechen als ein Gemisch von Zeichenkodierungen. Mit UTF-8 steht ein erweiterbares Zeichenenkoding zur Verfügung.
Verzichte darauf, Zeichen als Entitäten zu maskieren.

Hoste alle Inhalte inklusive Fonts selber.

Privacy ist ein allgemeines Anliegen, und fremd gehostetes wird immer häufiger geblockt.

Summarisch kommt man also mit HTML-Seiten und Javascript schon sehr weit. Dabei kann man sogar auf externe Ressourcen für CSS verzichten. Allerdings ist Javascript nicht für Einbettung von Fremdsyntax vorbereitet. Demgemäss gilt beim Schreiben des Hauptscriptes mehr an Sorgfalt.

Durch den Verzicht auf Serverlogik sind ganze Websites einfach zu migrieren. Sie funktionieren sowohl aus dem lokalen Filesystem wie zwischen Server-Migrationen.

Vorlagen

Seitenvorlagen sollen so wenig wie möglich enthalten, aber so viel wie nötig enthalten dürfen.

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="description" lang="de" content="Beschreibung des Seiteninhalts">
	<title>Ein Titel</title>
	<script src="../js/main.js"></script>
<!--optional
	<noscript><link rel="stylesheet" href="../css/nojs.css"></noscript>
	<style>
main p {white-space:pre-wrap;}
	</style>
	<script data-initfunction="myfunc">
//script hier
	</script>
-->
</head>
<body>

<h1>Hauptüberschrift</h1>

<!-- Inhalt der Seite hier -->

</body>
</html>

Style und script Elemente sind optional. Damit Scripte geregelt ausgeführt werden, beschreibt data-initfunction den Namen der von von main.js auszuführenden init Funktion. Es wird darauf verzichtet, CSS Dateien oder anderes zu referenzieren. Die Referenzen werden durch main.js ergänzt. Der einzige Kompromiss ist die Angabe zum Zeichenencoding.

Themes

Themescripte definieren die Site.

Sehen Sie Themes in Betrieb auf anderen Sites:
http://arev.yourweb.de/pub/index.html