Themen
- Intro
- Um was geht's?
- Mobile First?
- Definition HTML
- Definition CSS
- Definition Javascript
- HTML- / CSS-Frameworks
- Grafiken / Animationen
- Webfonts
- Statische Site oder CMS?
Marcel Birrer, Webmaster SIZ, seit 1999 Web-Entwickler mit eigener Web-Agentur in Bern. Meine täglichen Werkzeuge:
Definition Webdesign / Webpublishing:
Umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das www bzw. das Interface-Design in diesem Bereich. Dabei werden in der Regel strukturierte Texte, die in HTML verfasst sind, samt ergänzenden Grafiken mit CSS formatiert.
Ziel der technischen Umsetzung ist eine möglichst komplette Trennung von Inhalt und Design. Dynamische Funktionen, Datenbank-Anbindungen, Animationen etc. werden mit zusätzlichen Skript-Sprachen (PHP, Javascript, ...) implementiert.
Der Entwickler hat dabei die Aufgabe, die Wünsche des Auftraggebers, die Wünsche der Besucher und die technischen Möglichkeiten auf verschiedensten Geräten/Browsern in Einklang zu bringen.
Desktop Browser:
Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, ...
Mobile Browser:
Apple Safari, Google Android, Google Chrome, Microsoft Edge mobile, Mozilla Firefox mobile, Opera mini, ...
Immer mehr Menschen nutzen das Internet nicht mehr nur zu Hause an einem Desktop-Computer mit großem Bildschirm, sondern surfen auf ihrem Smartphone, Tablet-PC oder Laptop im Internet. Bei der Gestaltung von Webseiten wird es daher immer wichtiger, auf diese Entwicklung zu reagieren und ein Webdesign für unterschiedliche Formate und Geräte zu optimieren («responsive design»).
Im ersten Moment liegt natürlich der Ansatz am nächsten, ein Webdesign in einem gewohnten Format zu konzipieren (Nettofläche: 960/600 Pixel) und dieses Design dann anschließend mit Hilfe von CSS Media Queries für kleinere Formate anzupassen. Der Ansatz «Mobile First» geht da allerdings noch etwas weiter. Hier dreht man die gewohnte Arbeitsweise einfach um und arbeitet von der kleinsten Layout-Version hin zur größten.
Da auf einem kleinen Smartphone-Bildschirm wenig Platz zur Verfügung steht, sollte man sich im Design auf das Wesentliche konzentrieren und überlegen, welche Webseiten-Elemente für den Nutzer wirklich wichtig sind. Idealerweise kommt man bei dieser Vorgehensweise auf eine übersichtliche, leicht zu bedienende Designlösung, die dann auch gleich für größere Bildschirme übernommen werden kann. Denn warum sollte ein Webseiten-Besucher nicht eine ähnlich reduzierte und aufs Wesentliche konzentrierte Information erhalten. Nur weil man auf einem großen Desktop mehr Platz für die Gestaltung hat, muss man diesen schließlich nicht bis auf den letzten Pixel mit ablenkenden Informationen ausfüllen.
Hypertext Markup Language: Textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. Erste Version von Tim Berners-Lee 1989.
Aktuelle Version: HTML5 als Nachfolger von HTML 4.01 und XHTML 1.0.
Der Programm-Code jeder HTML-Seite kann im Browser angezeigt werden. HTML kann mit jedem beliebigen Text-Editor geschrieben werden. HTML ist eine beschreibende Sprache, Funktionalität, Interaktion muss mit Javascript, PHP, ASP, … programmiert werden.
Code-Beispiel:
<p class="note">Hallo, ich bin ein Textabsatz (Paragraph)</p>
Cascading Style Sheets: deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt. Wird laufend weiterentwickelt, aktuelle Version: 4.15
Die Anweisungen im Stylsheet legen fest, wie ein besonders ausgezeichneter Inhalt (Element-, Class- und Id-Selektoren) dargestellt werden soll. Man zeichnet im HTML-Dokument also nur die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser Abschnitte im CSS festgelegt wird. Mit anderen Worten, man trennt den eigentlichen Inhalt von der optischen Gestaltung. Diese Anweisungen werden in der Regel in eine Stylesheet-Datei (xy.css) geschrieben und mit dem folgenden Befehl mit dem HTML-Dokument verlinkt:
<link rel="stylesheet" href="css/xy.css">
Formatierungen im Stylesheet können je nach Anweisung und Schreibweise an andere Seiten-Elemente vererbt («cascading») werden.
Code-Beispiel:
p.note {
width:80%;
padding:30px;
font-size:12px;
line-height:18px;
font-weight:bold;
color:#ff0000;
border:1px solid #ccc;
background:#eee;
}
Mit CSS ist es möglich, für verschiedene Ausgabemedien (Desktop, Tablet, Smartphone, Drucker, ...) eine unterschiedliche Darstellung auszugeben bzw. Layouts «responsive» zu gestalten oder eine individuelle Druckversion der Webseite zu generieren.
Code-Beispiel:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
p.note {
width:80%;
padding:30px;
font-size:18px;
line-height:24px;
font-weight:bold;
color:#fff;
border:none;
background:#ff0000;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/* Print Styles */
@media print {}
CSS Version 3 bringt viele Neuerungen wie Mehrspaltigkeit, Rundungen, Schattierungen, Verläufe, Animationen etc., wird jedoch von älteren Browsern (insbesondere IE 6-8) leider nicht unterstützt.
JavaScript (kurz JS) ist eine Skriptsprache, die für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern.
Eine bekannte JavaScript-Bibliothek ist «jQuery».
Code-Beispiel:
jQuery(document).ready(function(){
// change order of div on home if mobile
if (Modernizr.mq('only screen and (max-width: 767px)')) {
jQuery('div.tx-hauertduengersuche-pi1').insertBefore(jQuery('div.intro_text_home'));
jQuery('div.left.column.subnav').insertAfter(jQuery('div.right.column.aside .news'));
}
});
Ein Webprojekt kann selbstverständlich von Null auf eigenständig aufgebaut werden. Oder man greift auf ein Framework zurück. Die Vorteile:
Nachteilig sind höchstens die langen Eingewöhnungszeiten - wenn man mit einem Framework arbeiten möchte, bedarf dies einer nicht zu verachtenden Einarbeitungszeit.
Mögliche Formate zur Anzeige von Grafiken ohne Hilfe von Browser-Plugins:
SVG als vektorbasiertes Format wird in modernen Browsern angezeigt und boomt! Scalable Vector Graphics sind der Spätzünder unter den modernen Webstandards, da dieses Format von Internet Explorer lange nicht unterstützt wurde. SVG sind unabhängig von der Bildschirmauflösung, frei skalierbar und sind schlank in der Dateigrösse.
CSS ab Version 3 bietet mit dem Modul «Animation» eine geballte Ladung an Möglichkeiten.
Font-Download wurde Bestandteil des Fonts-Moduls von CSS3 und ist seitdem ab IE 7, Safari 3, Opera 10 und Mozilla Firefox 3.5 implementiert. Dadurch stieg das Interesse an Web-Typografie und dem Gebrauch herunterladbarer Schriftarten in Websites. Achtung auf Lizenzbedingungen und Kosten!
Ressourcen:
Nach dem Download eines Webfonts sind in den allermeisten Fällen HTML- und CSS-Bespiele vorhanden, welche die Implementation ins eigene Projekt veranschaulichen.
Der Vorteil einer statischen gegenüber einer dynamischen Website besteht darin, dass die einzelnen Seiten bereits fertig auf dem Webserver vorliegen und somit schneller an den Browser des Besuchers ausgeliefert werden können, da kein Zugriff auf eine Datenbank erfolgen muss. Zudem sind statische Seiten nicht so anfällig gegen Angriffe durch Hacker, die immer wieder versuchen, Webserver unter ihre Kontrolle zu bringen um sie dann für zweifelhafte Aktivitäten zu missbrauchen.
Benötigt man jedoch eine Website, auf der sich rasch verändernde Informationen darstellen lassen, kommt man kaum um eine dynamische Website herum. Bei der dynamischen Website sind die Informationen in einer Datenbank auf dem Webserver gespeichert und werden erst bei Abruf durch den Browser eines Besuchers von einer serverseitigen Programmierung (mit PHP oder ASP) zu einer Seite zusammengestellt und ausgeliefert.
Da diese Programmierung weit über die Programmierung einer statischen Website hinausgeht, schreibt man den Programmcode nicht für jede Website neu, sondern nutzt oft vorgefertigte Systeme, die dann speziell auf die Kundenwebsite hin angepasst und ggf. modifiziert werden. Diese Systeme werden als CMS (Content Management System) bezeichnet.
Bei den dynamischen Systemen spricht man von «Frontend» (was der Besucher der Site sieht) und «Backend» (hier kann sich ein Redakteur der Website einloggen und über ein Interface Seiten und Inhalte generieren). Mit ein wenig Schulung kann der Kunde problemlos die Website selbst verwalten und ist somit zur Content-Erstellung nicht mehr zwingend von der Webagentur abhängig.
Eine Auswahl bekannter Open Source CMS: