Jun 22
Neben der reinen Optik geht es bei der Gestaltung von Webseiten vor allem um Nutzerfreundlichkeit.
Navigation und Aufbau der Webseiten sollen möglichst vielen Menschen entgegen kommen. Hier erfahren aber z. B. viele behinderte Menschen Nachteile, sie benötigen Webseiten, die barrierefrei gestaltet sind. Werden in einem Hypertext zu viele Wahlmöglichkeiten von Links gegeben, kann dies zu einer Desorientierung, dem so genannten Lost in Hyperspace führen.
Zur Benutzungsfreundlichkeit kommt die Zugänglichkeit, die sich in der Vermeidung von Techniken manifestiert, durch die Informationen nur mit einem bestimmten Browser erreichbar sind, oder durch das Schaffen von (Text-)Alternativen zu multimedialen Inhalten. Flash und andere Browsererweiterungen müssen deswegen nicht grundsätzlich vermieden werden, es sollte aber sichergestellt sein, dass der Inhalt auch ohne diese Techniken voll abrufbar bleibt.
Hier gilt form follows function (engl. wörtl. (Die) Form folgt (aus der) Funktion). So soll sichergestellt sein, dass bei zum Teil kunstvollem Design die Benutzbarkeit (engl. Usability) der Webseite nicht verloren geht.
Ein wichtiger Aspekt beim Webdesign ist eine korrekte Textauszeichnung und Kenntnisse in Webtypografie. Während Webseiten für die Browsergenerationen 4 (Netscape 4 und
Internet Explorer 4) noch sehr unterschiedlich geschrieben wurden, kann der Webentwickler in den aktuellen Versionen (Mozilla, Internet Explorer 6, Opera, Konqueror, usw.) eine weitgehende Unterstützung der Standards des W3C erwarten.
Webdesign unterscheidet sich vom Design für andere Medien vor allem durch diese starke Leserorientierung. Sie ist darin begründet, dass Websurfer meist gezielt nach Informationen suchen und eine Site nur so lange besuchen wie unbedingt nötig. Die starke Textlastigkeit von Webdesign hängt z. T. allerdings auch mit den
Indizierungsmöglichkeiten von Suchmaschinen zusammen.
Jun 10
Zum Thema Barrierefreiheit im Webdesign wurde schon einiges publiziert doch die wenigsten wissen etwas damit anzufangen.
Erst mit dem Aufkommen von Web 2.0 rückt dieses Thema mehr und mehr in den Vordergrund.
Jun 06
Eine CSS-Regel hat folgendes Aussehen:
Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B
}
/ Kommentar /
Ein Stylesheet darf beliebig viele solcher Regeln enthalten. Es gibt unter anderem folgende Selektoren, die jeweils Elemente auswählen. Im Wesentlichen sind dies die HTML-Tags:
| Muster |
Bedeutung |
| * |
Selektiert jedes Element |
| E |
Selektiert jedes Element vom Typ E |
| E F |
Selektiert jedes Element F, das ein Nachfahre von Element E ist |
| E > F |
Selektiert jedes Element F, das ein Kind von E ist |
| E:first-child |
Selektiert ein Element E, wenn es das erste Kind des direkten Vorfahren ist |
| E[foo] |
Selektiert jedes Element E, bei dem das „foo“-Attribut gesetzt ist (unabhängig vom Wert) |
| E[foo=bar] |
Selektiert jedes Element E, bei dem das „foo“-Attribut mit dem Wert bar gesetzt ist |
| .c |
Selektiert jedes Element der Klasse c |
| E.c |
Selektiert alle Elemente E der Klasse c |
| #myid |
Selektiert jedes Element mit der ID „myid“. |
| E#myid |
Selektiert das Element E mit der ID „myid“. |
Beispiel
p.note {
position: relative;
left: 15%;
width: 70%;
padding: 30px;
padding-bottom: 45px;
border: 1px solid black;
line-height: 1.5em;
color: black;
font-weight: bold;
text-align: justify;
background-color: #eeeeee
}
Ein mit dem p-Tag umgebener Absatz der Klasse „note“ wird dadurch von einem CSS-kompatiblen Browser wie folgt dargestellt:
CSS-Textabsatz
Textabsatz, der so formatiert ist, wie obiges CSS es vorgibt.
Hier wird der Deklarationsbereich allen p-Elementen zugewiesen, die das class-Attribut mit dem Wert note besitzen. Würde man das p im Selektor weglassen, würden alle Elemente der Klasse note betroffen sein, beim Weglassen des .note alle p-Elemente.
Ein wichtiges Prinzip von CSS ist die Vererbung der Eigenschaftswerte an untergeordnete Elemente und die Kombination verschiedener Stylesheets (Kaskade). Diese können dabei aus verschiedenen Quellen stammen: vom Autor des Stylesheets, dem Browser (User Agent) oder dem Benutzer.