Beide Seiten der vorigen Revision Vorhergehende Überarbeitung Nächste Überarbeitung | Vorhergehende Überarbeitung |
webdesign:webdesign [2008/01/16 03:51] – st | webdesign:webdesign [2012/01/23 23:26] (aktuell) – [Brosertests] st |
---|
| ====== Webdesign ====== |
| Webdesign ist sowohl eine technische-, handwerkliche- als auch eine kreative Sache, für Unbegabte gibt es [[cms:CMS|Content Managing Systeme]] oder [[wikis:Wikis]] die das Webdesign übernehmen und den Inhalt mehr in den Vordergrund stellen. |
| |
| Dazu gehört im engeren Sinne die |
| - **Struktur** ([[HTML]]) und das |
| - **Design** ([[CSS]]). |
| - **Inhalt** (Texte und Bilder) |
| |
| siehe auch: |
| * [[programmiersprachen:ajax]] |
| * [[Flash]] |
| |
| |
| |
| |
| ===== Links ===== |
| * **[[http://jendryschik.de/wsdev/einfuehrung/|Einführung in XHTML, CSS und Webdesign]]** |
| * **[[http://validator.w3.org/unicorn/|W3C Validator (Unicorn)]]** |
| * [[http://browsersize.googlelabs.com/|browsersize @googlelabs - prozentuale Aufmerksamkeitsverteilung]] |
| * [[http://t3n.de/news/homepage-baukasten-10-besten-tools-eigene-website-312622/|Homepage-Baukasten]] |
| * [[http://inpics.net/htmlcss.html|HTML & CSS Tutorial]] |
| * [[http://www.photoshoplab.com/web20-design-kit.html|Web 2.0 Design Kit]] |
| * [[http://www.usability.gov/|usability.gov - Step-by-Step Usability Guide]] |
| * [[http://friendlybit.com/js/flash-only-vs-ajax-sites/|Flash-only vs. AJAX sites]] |
| * [[http://www.stichpunkt.de/css/zeilenbreite.html|Testseite zur Zeilenbreite incl. Erklärung zum Maßstab em]] |
| * [[http://www.stichpunkt.de/bookmarklets/bm-design.html|Bookmarklets: Webdesign analysieren]] |
| * [[http://www.oswd.org/|free designs]] |
| * [[http://support.microsoft.com/kb/294714|Transparente Hintergründe von PNG-Dateien werden in Internet Explorer nicht angezeigt]] |
| * [[http://internetweiten.de/|Tipps zum Start von Internetprojekten]] |
| * [[http://www.josiahcole.com/2007/02/14/a-webmasters-19-commandments/|19 Things NOT To Do When Building a Website]] |
| * **[[http://code.google.com/p/ie7-js/|ie7-js A JavaScript library to make MSIE behave like a standards-compliant browser.]] + [[http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html|Introduction]]** |
| * [[http://raphaeljs.com/|Raphaël—JavaScript Library]] |
| * [[http://www.heise.de/ct/artikel/2-Klicks-fuer-mehr-Datenschutz-1333879.html|2 Klicks für mehr Datenschutz]] |
| |
| ==== Brosertests ==== |
| |
| * **[[http://browsershots.org|browsershots.org]]**: Screenshots von Browsern auf unterschiedlichen Systemen |
| * [[http://cwa.dcn.de/2010/03/07/cross-browser-testing/|Cross-Browser-Testing]] |
| * [[http://www.spoon.net/Browsers/|Spoon Browser Sandbox]] |
| * [[http://www.my-debugbar.com/wiki/IETester/HomePage|Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9]] |
| * [[https://browserlab.adobe.com/de-de/index.html|Adobe Browserlab]] |
| |
| |
| === IE === |
| |
| * [[http://finalbuilds.edskes.net/iecollection.htm|Final Builds Site - IE Collection]] |
| * [[http://msdn.microsoft.com/en-us/library/hh673549%28v=vs.85%29.aspx|Internet Explorer 10 Guide for Developers]] |
| * [[http://msdn.microsoft.com/en-us/library/ff986083%28v=VS.85%29.aspx|Internet Explorer 9 Compatibility Cookbook]] |
| * [[https://blogs.msdn.com/b/ie/archive/2012/01/20/ie10-compat-inspector.aspx?Redirected=true|IE10 Compat Inspector]] |
| * [[http://www.heise.de/newsticker/meldung/Microsoft-stellt-aeltere-Versionen-des-Internet-Explorer-zum-Testen-bereit-1180269.html|Microsoft stellt ältere Versionen des Internet Explorer zum Testen bereit]] |
| ==== Ladezeiten messen ==== |
| |
| * [[http://code.google.com/intl/de/speed/page-speed/|Page-speed]] [[software:Firefox]]-Plugin das Ladezeiten anzeigt |
| * [[http://code.google.com/intl/de/speed/page-speed/download.html|mod_pagespeed]] [[apache:Apache]]-Modul |
| |
| ===== HTML ===== |
| [[http://de.selfhtml.org|Selfhtml]] |
| [[http://www.theserverside.com/news/thread.tss?thread_id=43237|HtmlCleaner]] |
| [[http://www.useit.com/alertbox/9605.html|Top Ten Mistakes in Web Design]] |
| [[http://catb.org/~esr/html-hell.html|Welcome to The HTML Hell Page]] |
| |
| * [[http://www.screem.org/index.php|SCREEM]] - a web development environment |
| * [[http://haha.nu/misc/html-tags-illustrated/|HTML Tags illustrated]] |
| |
| |
| ===== Icons / Buttons ===== |
| |
| * [[http://iris-design.info/photoshop/web-20-style-buttons/|Web 2.0 style buttons]] |
| |
| [[http://iconsurf.com/|IconSurf.com - Visual Surf Engine]] |
| [[http://yellowicon.com/downloads|Free Community Icons]] |
| [[http://ktd.sytes.net/cpg132/thumbnails.php?album=9|Kick The Donkey's Web Buttons]] |
| [[http://jimmac.musichall.cz/icons.php|Gnome Icons]] |
| [[http://www.chami.com/html-kit/services/favicon/|FavIcon from Pics]] |
| [[http://www.wholenotherthing.com/Docs/moods.html|mood Icons]] |
| [[http://ndesign-studio.com/resources/pixel_icons.htm|free mini Pixel Icons]] |
| |
| ===== Barrierefreiheit ===== |
| Unter [[wpde>Barrierefreies_Internet|Barrierefreiem Internet]] versteht man die Möglichkeit uneingeschränkt durch körperliche als auch durch technische (mobile Geräte, Textbrowser) Hindernisse das Internet nutzen zu können. |
| |
| Die Webseiten sollen mit Hilfe von Screenreadern |
| |
| |
| ==== Links ==== |
| * [[http://friendlybit.com/tutorial/quick-accessibility-testing/|Quick Accessibility Testing]] |
| * [[http://www.heise.de/ix/artikel/2007/08/144/|Barrierefreies Surfen (WWW für alle )]] |
| * [[http://it-infothek.de/barrierefrei/inhalt.html|Barrierefreie Internetseiten]] |
| * [[http://www.digitale-wertschoepfung.de/news/175/barrierefreies-webdesign-geschaeftsvorteile/|Geschäftsvorteile durch Barrierefreies Webdesign oder „16 Tipps, wie Sie mit Barrierefreiheit mehr Geld verdienen.“]] |
| * [[http://www.barrierefinder.de/start.asp|Test: Ist Ihre Webseite barrierefrei?]] |
| * [[http://www.einfach-fuer-alle.de/|Barrierefreies Webdesign - Einfach für Alle]] |
| * [[http://www.heise.de/ct/04/18/186/default.shtml|Internet ohne Ausgrenzung Teil 1]] [[http://www.heise.de/ct/04/19/194/default.shtml|... Teil2]] |
| * [[http://webxact.watchfire.com/|WebXACT Validator]] |
| * [[http://www.fbi.fh-koeln.de/institut/projekte/BF/liste.htm|Linkliste Barrierefreiheit]] |
| * [[http://www.knowware.de/barrierefrei.htm|Heft "Barrierefreies Webdesign"]] |
| * [[http://download.bluemars.de/webmontag/2007-07-02/|„Nicht unsere Zielgruppe“: Wirtschaftlichkeit von Barrierefreiheit]] |
| |
| |
| |
| ==== gesetzliche / offizielle Vorgaben ==== |
| * [[http://www.w3c.de/Trans/WAI/webinhalt.html|Richtlinien des W3(C): WAI I+II+III]] |
| * [[http://www.wob11.de/|Web ohne Barrieren - gemäß Paragraph 11 des Bundesbehindertengleichstellungsgesetzes]] |
| * [[http://www.heise.de/newsticker/Neuer-Webstandard-fuer-Barrierefreiheit-WCAG-2-0-verabschiedet--/meldung/120343|WCAG 2.0]] |
| |
| ==== Software ==== |
| * [[http://www.accessify.com/tools-and-wizards/|Accessibility Tools & Wizards]] |
| * [[http://www.webforall.info/html/deutsch/aistoolbar.php#download|Web Accessibility Toolbar für den IE]] |
| |
| === Screenreader === |
| * [[http://www.incobs.de/produktinfos/screenreader/test/index.php|Screenreader - Test 2006/2007]] |
| * [[http://www.novell.com/de-de/products/linuxprofessional/blinux/|SUSE-Blinux (Screenreader für Linux)]] |
| * [[http://live.gnome.org/Orca|Orca]] |
| * [[http://www.heise.de/open/news/meldung/71254|LSR]] |
| |
| * [[http://tcts.fpms.ac.be/synthesis/mbrola/mbrola_entrypage.html|The MBROLA Project]] - Projekt zur Sprachsynthese |
| |
| ==== Zentrale Punkte ==== |
| * konsequente Trennung von |
| - **Struktur** ([[XHTML]], HTML4, ...) |
| - **Design** ([[CSS]]): schlankere Webseiten und einheitliches Design |
| - **Inhalt** (Texte und Bilder) |
| - und **Funktion** ([[Programmiersprachen:PHP]], [[Datenbanken:MYSQL]]) |
| |
| Allgemein sollte man seine Seiten einmal standardgemäß gestalten in einem Textbrowser oder von einem Mobilgerät abrufen und schauen ob die Seite noch benutzbar ist. |
| |
| |
| ==== Konkrete Maßnahmen ==== |
| * Benennung von |
| - Feldern |
| - Schaltflächen |
| - Bildern (title+alt-Attribut): nicht zu lang, 1-2 Wörter wäre gut |
| * Maßnahmen zur Vermeidung von Spammern (z.B. [[wpde>Captchas]]) sperren natürlich auch Besucher mit Sehbehinderungen aus! Mögliche Lösung: dyn. erzeugte mp3-Datei. siehe [[http://netbank.de|Netbank]]. |
| * Tabellen logisch und mit ''summary'' und Überschriften gestalten, max. 3-4 Spalten |
| * nicht Links in neuen Fenster öffnen, wenn nicht nötig. Z.B. nur bei externen Links. |
| * Accesskey auf den Seiten überschreiben oft die Hotkeys von Screenreadernm, also nicht bzw. nur selten vorbelegte Kombinationen (z.B. solche mit Nummern) verwenden |
| * keine dynamische Inhalte wie Flash oder Laufschriften |
| * kein Hintergrundsound (Screenreader geben dann nichts aus, bzw. Soundmix) |
| * keine bzw. nur unbedingt notwendige automatische Aktualisierungen (refresh) der Seite (Grund: Screenreader lesen von oben nach unten, oben ist erstmal die Navigation. Wenn nun schnell aktualisiert wird bekommt man den Inhalt nie zu Gesicht) |
| * Anker setzen: nicht unbedingt notwendig, hilft aber bei wiederholtem Besuch |
| * Frames: wenn man sie schon unbedingt benutzen muss (muss man nicht, CSS iframes o.ä. geht besser) dann wenigstens die [[http://www.netmechanic.com/news/vol5/javascript_no7.htm|Frames zusammen halten]] |
| * Abkürzungen definieren entweder mit dem ''abbr''-Attribut kennzeichnen oder so: |
| <code html> |
| <acronym title="Content Managing System">CMS</acronym> |
| </code> |
| * ''tabindex''(e) oder ''Accesskeys'' setzen (am besten aber nur Zahlen, da Doppelbelegung bzw. Menüs sonst nicht mehr über Tasten(-kombinationen) erreichbar sind). |
| |
| ==== typische Fehler ==== |
| * Frames (wenn man sie denn unbedingt noch einsetzten muss) ohne sinnvolle Beschreibung (frame01, frame02, ...) |
| * Bilder ohne Beschreibungs- (alt-) Text (oder Bild1) |
| * javascript ohne Alternativversion, Javascriptlinks |
| |
| * „Tag Soup“ (Tags werden nicht zur logischen Gliederung des Inhaltes benutzt |
| * Layout-Tabellen und verschachtelte Tabellen |
| * <div>-Container für Überschriften |
| |
| ===== Impressum ===== |
| bei Webseiten mit gewerblichen Charakter (auch private Seiten mit Werbung als Einnahmequelle) muss ein Impressum zu finden sein. [[http://www.heise.de/newsticker/meldung/79621|Wo das Impressum stehen muss]] hat jetzt der [[http://www.bundesgerichtshof.de/|BGH]] entschieden. |