9 Beispiele für den Einsatz von CSS3 – XHTML / CSS

Marc Haunschild Allgemein No Comments

CSS3-BeispieleZwar nicht mehr ganz frisch, aber trotzdem eine nette Sammlung von CSS3-Beispielen. Das Gute an nicht mehr frischen Beispielen: inzwischen funktionieren sie in den meisten Browsern.
Wichtig trotzdem: selber testen, ob die zu unterstützenden Browser tun, was sie sollen!

9 Beispiele für den Einsatz von CSS3 – XHTML / CSS

Mit CSS3 sollte sich jeder Webdesigner ernsthaft auseinandersetzen, da die Möglichkeiten von CSS3 oft verblüffend sind….

9 Beispiele für den Einsatz von CSS3 | onlinecasinodemar.com

Rezension: The CSS3 Anthology: Take Your Sites to New Heights

Marc Haunschild Literatur No Comments

Das Buch ist leicht verständlich. Technisch sind mir keine größeren Fehler aufgefallen.

Allerdings gibt es doch viele Dinge, deretwegen ich das Buch nicht selber nutzen oder gar für den Unterricht verwenden würde. Dazu gehören Kleinigkeiten, wie die gedankenlose Bemerkung, dass inline-styles die einfachste Methode sind, Formatierungsanweisungen anzuwenden. Das klingt gerade für Anfänger verlockend und scheint daher das Mittel der Wahl. inline-styles gelten aber zu recht als schlechter Stil und sie führen (wie von der Autorin später selber dargelegt) die Vorteile von CSS ad absurdum. Die einzige sinnvolle Anwendung von CSS geschieht in einer zentralen Datei. Wie gesagt, das wird dann später noch dargelegt, aber ich kenne es aus eigener Erfahrung, dass ich, wenn ich mich in ein Thema einarbeite, gerne erst einmal die Methode ausprobiere, die als “am einfachsten” bezeichnet wird. Das führt dann dazu, dass man die Methode die “am besten” ist, später nochmal lernen muss. Unnötiger Aufwand und daher didaktisch unklug solche Sätze zu verwenden. Wie gesagt, das mag kleinlich erscheinen. Aber es zieht sich durch das Buch. So wird behauptet, dass feste Layouts auf einem Desktop-Computer mit großem Bildschirm gut zu nutzen sind. Gerade das von der Autorin verwendete Beispiel mit absoluten Positionen, in Pixeln angegebenen Breiten und relativen Schriftgrößen kann sehr schnell zu Problemen führen, da lange Worte nicht in die vorgegebenen Boxen passen werden, wenn ein Besucher die Schriften im Browser vergrößert. Die Verwendung des Seitenzooms wird zudem dazu führen, dass das Layout schnell aus dem Browserfenster wächst.
Schon die nächste Kapitelüberschrift “How do I create a design that works well on mobile devices” unterstellt, dass ein herkömmliches (nicht responsives) Layout auf mobilen Geräten nicht funktioniert. Tatsächlich ist die Desktop-Version einer ordentlich gemachten Webseite aber mein persönlicher Favorit auf iPhone, iPad und Co. – Diese Geräte bieten mir auf ihren vergleichsweise kleinen Geräten einen schnellen Überblick über die gesamte Website. Ein “Doppeltipp” auf eine Spalte vergrößert diese bildschirmfüllend und alle Elemente sind an den Stellen, an denen ich sie vom großen Computer her gewöhnt bin: Suche oben rechts, Navigation links usw. Der Überblick ist besonders hilfreich auf Webseiten, die sich nicht an solche Konventionen halten.
Herkömmlich gestaltete Seiten sind also durchaus auf mobilen Geräten nutzbar und ich bin nicht der einzige, der diese Darstellung bevorzugt. Deswegen sollte es auf Seiten, die sich auf kleinen Displays automatisch anders verhalten, wenigstens ein Link zur “normalen Version” vorhanden sein. Aber so ein Link wird weder umgesetzt, noch wird auf diese ganze Diskussion überhaupt eingegangen.
Vielmehr wird der von der Autorin bevorzugte Weg hier und an anderer Stelle als beste oder gar einzige Methode dargestellt – was sicher gut gemeint war, kostet hier die Lernenden unter Umständen unnötig Zeit.
So wird responsives Design als die beste Methode genannt, um Bildschirme mit unterschiedlicher Breite zu berücksichtigen. Unterschiedliche Wünsche von Nutzern, wie oben beschrieben werden nicht behandelt.
Außerdem werden einige gerätespezifische Dinge hinzugefügt. Diese sind zwar sinnvoll, aber meiner Meinung nach nicht komplett. Ich vermisse hier Hinweise auf fertige Sets, wie die HTML5boilerplate.com – die Zeiten sind längst vorbei, in denen jeder Entwickler für sich einen Satz von Formaten schreiben musste, die der Harmonisierung von Browserunterschieden dienen. Auch hier wird wieder fahrlässig mit der Zeit der Käufer umgegangen.

Zudem wird mir nicht klar, für wen das Buch sein soll. Für Anfänger ist das Buch aufgrund der einseitigen Sichtweise nicht empfehlenswert. Für Fortgeschrittene sind Beispiele und Erläuterungen zu banal.

Fazit:
Die eigene, subjektive Meinung der Autorin, wird häufig als “die beste” dargestellt. Gerade der Anfänger kann die Vorteile und Nachteile der aufgezeigten Lösungen nicht bewerten und erhält an vielen Stellen auch keine Entscheidungshilfe. Beispiele, wie man es nicht machen sollte (Breitenangaben in Pixeln, absolute Positionierung), führen den Leser in eine falsche Richtung. Formulierungen wie “am einfachsten ist…” verführen dazu schlechtere Lösungen zu bevorzugen.
Außerdem bleibt das Buch oft hinter den Möglichkeiten der aktuellen Browser zurück. Was als Vorteil verkauft wird (funktioniert auch in alten Browsern), betrifft gerade Leute, die erst mit CSS3 beginnen kaum noch. Schon mit dem IE8 ist mehr möglich, als die Autorin zeigt (z. B. einfach umzusetzende Spalten-Layouts mit CSS-Tabellen).
Die Beispiele sind oft veraltet, statt aktueller HTML-Elemente werden divs benutzt, denen dann nicht einmal ein role-Attribut mitgegeben wird. Das ist richtig schlecht. Mit den semantisch korrekten Elementen (nav, article, aside usw) würden auch die für z. B. blinde Nutzer so wichtigen WAI-ARIA-Landmarks mitgeliefert – ohne im Detail erklären zu müssen, was die machen, ohne dass der Anfänger das überhaupt wissen muss (in ein HTML5-Buch würde das natürlich rein gehören).

Hinweis:
Diese Rezension beruht lediglich auf dem Überfliegen der auf Amazon.de bereitgestellten Vorschau. Es ist durchaus möglich, dass andere Kapitel sinnvollere Beispiele, bessere Erläuterungen oder aber auch noch mehr Ungenauigkeiten/Probleme/Fehler enthalten.

 

Wer sich selber ein Bild machen möchte, findet das Buch bei amazon beispielsweise.

An open letter to all responsive designers out there

Marc Haunschild Allgemein 2 Comments

How responsive design frequently goes wrong

At smashing magazine there is an article called “Is there ever a justification for responsive text?”

So there are some people thinking about taking away content from users of small devices. In the comments some people really discuss about leaving out texts for users of mobile devices! What the heck!?!

Will people who own “just” an tablet soon get a different web – with less content? A censored web?

Responsive design already very often means: Content removed.

And responsive design sometimes means a reduction of features. What is this good for?

I hate seeing crippled sites on my mobile device – even more: I have serious problems with responsive design, when it is not explicitly triggered by the user. As a user I want to find all functions and texts at the places I know from my desktop experience! Smartphones have easy-to-use zooming functions. It’s a piece of cake to read any part of a page designed for an ordinary screen, as long as I am able to find all parts of the site, where I am used to find them. So please leave the search form on the top right, don’t hide the nav at the bottom of an endless column of articles (which I for sure do not want to read completely!) – Why do I have to scroll for hours, when I want to leave a page?

Because someone said – and unfortunately wrote it in some well visited blog – that this is good user experience? To hell with that guy!

Good user experience is, when I get everything, I want – even on a small screen!

There is one more thing: a lot of devices can read the texts to the user. Why somebody who uses a screen reader on a device with a really small screen (let’s talk about screen resolution of 1 by 1 pixel!)  should not be able to listen the whole text?
Again, and again and again, I want to ask all this strange responsitivity lovers: How you can know my needs and how you dare to decide what content I want to get – and what not.

So what do I suggest? Moderately change the layout, when you are running out of space. Use em instead of pixel to decide, when space is getting a problem. Give everybody the option to choose a linearized version of the content, shorten the texts to teasers for the people who decided to get a compact version of your site, with the possibility to chose, which texts they want to read completely (read more links) and a way back to the normal version any time.

Die 5 wertvollsten Stellen, um Schlüsselworte für Suchmaschinen unterzubringen

Marc Haunschild Allgemein No Comments

Wenn Sie mehr Traffic durch Suchmaschinen auf Ihre Webseite leiten wollen, sollten Sie einiges bei der Platzierung von Schlüsselworten auf Ihrer Homepage beachten. Aber wo sollten diese Schlüsselworte untergebracht werden? Auf Sitepoint gibt es die (englische) Antwort:

Die 5 wertvollsten Stellen, um Schlüsselworte für Suchmaschinen unterzubringen:

The 5 Most Valuable Places for Keywords on Your Website

Vorschau auf TYPO3 Version 4.7

Marc Haunschild Allgemein No Comments

Ich bin ja kein TYPO3-Spezialist. Zum Glück habe ich mit +Sacha Vorbeck einen sehr kompetenten Kollegen. So konzentriert sich jeder auf das, was er am besten kann: BITV/WCAG, HTML und CSS mache ich, TYPO3 er, wobei er geduldig alles umsetzt, wodrum ich ihn bitte. Im Laufe der Jahre ist auf diese Weise ein Setup entstanden, dass unsere Ansprüche an Barrierefreiheit, Usability und so weiter weitesgehend erfüllt und auch die tägliche Arbeit erleichtert (zum Beispiel das Aufsetzen neuer Angebote). Diese Anpassungen sind sehr umfangreich und an einigen wenigen Stellen kommt es bei Updates zu Problemen (z. B. das Kontaktformular und das Suchergebnis – hier mussten wir in den TYPO3-Kern eingreifen, um die Ausgabe unseren Wünschen anzupassen).

An anderen Stellen, zum Beispiel der Ausgabe der News-Details gibt es Ausgaben, die durch einen einzigen Marker erzeugt werden und gar nicht geändert werden können (da kommt – wenn ich mich recht entsinne – ein komplettes HTML-Konstrukt mit Tags und Werten raus. Ich glaube das betrifft das Datum. Da hat man im Quellcode so etwas wie ###single-date### und als Ausgabe < p>12.1.2012< /p> -Dadurch bekommt man das p nicht weg).

Die beiden ersten Probleme werden mit TYPO3 4.7 gelöst sein. Die Bundesanstalt für Landwirtschaft und Ernährung hat ein KP2-Projekt umgesetzt (KP2 steht für Konjunkturpaket 2 – solche Projekte wurden während der ersten Bankenkrise vom Staat aufgelegt, um die Wirtschaft zu stützen). Im Rahmen dieses Pojektes wurde TYPO3 zugänglicher und bekam endlich ein Standard-Setup, mit dem auch ein Anfänger direkt loslegen kann, ohne erst selber ein eigenes Template schreiben zu müssen.

Das wird als government package angeboten, ist weitestgehend barrierefrei und steht mit Version 4.7 der Allgemeinheit zur Verfügung.

Außerdem wurden viele weitere Details verbessert, zum Beispiel die indexed_search, die Wartbarkeit für System-Administrationen usw.

Unter der Haube hat sich bei der Verwaltung von Dateien viel getan – ein kompletter file abstrction layer ist hinzu gekommen.

Hierzu noch ein paar Ergänzungen von Oliver Hader, Leader of the v4 Core Team bei TYPO3 Association:

An dieser Stelle noch ein Hinweis zur Vollständigkeit:

  • derzeit wird noch intern an einem Projekt gearbeitet, den file-abstraction-layer zu erweitern – z.b. kommt gerade webdav Unterstützung mit dazu
  • die Medien-Verwaltung (media management, derzeit noch als DAM bekannt) wird somit auch noch bearbeitet

Ziel ist es, bis zum Final Release von 4.7 (Ende April 2012) diese Sachen natürlich stabil, fertig und auch korrekt veröffentlicht zu haben. Ergo Basiskomponenten im TYPO3 core von 4.7 und optionale Komponenten im TYPO3 extension repository (TER)”

Als beta gibt es das bereits. Der voraussichtliche Erscheinungstermin ist Ende April.

Dokus:
http://docs.typo3incubator.org/

Barrierefreie Bildergalerie:
https://svn.typo3.org/TYPO3v4/Extensions/media_gallery/trunk/

GovPackage:
http://govpackagetest.typo3incubator.org/

Das Projekt:
http://news.typo3.org/news/article/typo3-receives-german-governmental-funding-for-accessibility-and-usability-project/

Einfacher ist besser als besser

Marc Haunschild Allgemein No Comments

Einfacher für den Nutzer ist schwere Denkarbeit für den Entwickler.

Dabei gab es mal die gute alte Zeit, da hatte der InternetExplorer eine Verbreitung von fast 100% und die meisten Monitore eine Auflösung von 800×600 Pixeln. Daraufhin wurden Webseiten “optimiert”.

Ob die User das so wollten oder nicht. Man wurde einfach nicht gefragt. Der Nutzer hatte keine Chance. “Friss oder stirb” war die Devise.

Heute machen es sich manche Kollegen noch immer so einfach, obwohl viel mehr möglich ist und man auch sehr viel mehr über die Bedürfnisse und Wünsche der Nutzer weiß. Es gibt zahlreiche öffentlich zugängliche Studien, es gibt die WCAG 2.0 die in Bezug auf Nutzbarkeit mt unterschiedlichen Auflösungen und Geräten beachtenswerte Empfehlungen gibt und es gibt mehr vorgefertigte Lösungen als je zuvor. Jakob Nielsen ist seit vielen Jahren aktiv und seine Thesen werden öffentlich dsikutiert.

Heute bleibt es jedem Entwickler selber überlassen, ob er Nutzerbedürfnisse berücksichtigt oder nicht und die Nutzer sind nicht mehr die Dummen.

Sie haben heute nämlich die Wahl: es gibt inzwischen einfach zu viele gut gemachte Webseiten, als dass ich mich noch über bequeme “Webmaster” ärgern müsste.

Wenn ihr also Traffic auf Euren Webseiten (oder denen Eurer Kunden) wollt, macht es den Benutzern einfach, setzt intelligente Layouts ein, die sich an die Bedürfnisse der Nutzer anpassen.

Viele erschließen sich das Web aber auch auf anderem Weg: immer mehr Apps bieten gegenüber einer Webseite kaum einen Mehrwert. Dennoch werden sie verwendet. Vielleicht sind die Webseiten gar nicht immer so attraktiv, wie die Ersteller sich das erhofften.

Der Vorteile der meisten Apps: sie lassen sich von “Idioten” bedienen. Ich bin einer von denen, denn ich will nicht, dass ich über das Konzept einer Website nachdenken muss. Einfacher ist besser als besser und lasst mich nicht nachdenken, wenn ich Eure Webseiten besuche.

Damit die Nutzer nicht denken müssen, müssen die Köpfe der Entwickler um so mehr rauchen:

Unser Job ist vielfältiger geworden und darum auch interessanter. Die Herausforderungen sind mehr geworden, aber auch die Werkzeuge sind mächtiger.

Daher braucht man heute nicht länger, um eine Webseite zu erstellen als früher, obwohl moderne Seiten flexibler auf das Verhalten der Nutzer reagieren.

Deswegen zählt für mich auch das Kostenargument nicht.

Um aber doch noch ein Wort zu den Kosten zu sagen: wer ein Design in Pixeln abliefert, sollte das zu dem Preis anbieten, wie 1&1 den Homepagebaukasten – da kriegt man nämlich dasselbe und das ist auch dasselbe wert.

Um es mal plakativ und provokant zuzuspitzen.

Andere Meinungen zu diesem Thema in der XING-Gruppe “Webdesign und Usability“.

Der Unterschied zwischen width=”auto” und width=”100%”

Marc Haunschild Allgemein No Comments

Das CSS-Box-Modell beschreibt, die Dimensionen von Block-Level-Elementen. Neu ist die Möglichkeit mit CSS3 zu bestimmen, ob sich die Breitenangabe auf den Inhalt des Elementes (also zum Beispiel den Text eines Absatzes) oder auf das Element inklusive Innenabstände und Rahmen beziehen soll.
Manchmal ist das sinnvoll, zum Beispiel, wenn man möchte, dass ein Element genauso breit ist, wie sein Elternelement. Nach dem CSS-Box-Modell bezieht sich die Breitenangabe nämlich auf den Inhalt. Rahmen und Innenabstände werden hinzugefügt, so dass zum Beispiel ein Formularfeld mit border und padding nicht mehr ins Elternelement passt. Hier hilft die neue Eigenschaft box-sizing. Mit “box-sizing:border-box; width:100%” kann man erreichen, dass ein Element genauso breit ist, wie sein Elternelement. Aber das ist nicht immer der beste Weg. Wann immer möglich sollte statt dessen width:auto verwendet werden. Dann muss man sich um margin, padding oder border nicht selber kümmern. Die Details erklärt ein Artikel auf Berea Street (engl.):

http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Gesundheitskosmos-Bonn.de

Marc Haunschild Allgemein No Comments

Ein richtig tolles Projekt hat Hanna Kocanis für Bonn auf die Beine gestellt. Im letzten Jahr hat sie bei mir erst HTML und CSS gelernt. Jetzt hat sie die Seite Gesundheitskosmos-Bonn.de eröffnet. In verschiedenen Rubriken erklärt sie den Gesundheitskosmos Bonn und wie man sich darin zurecht findet.

Natürlich würde ich mich über mehr solcher Beispiele von Teilnehmern meiner Kurse freuen – und werde gerne darauf verlinken!

Autor für HTML5-Lehrbuch gesucht

Marc Haunschild Literatur No Comments

 

 

für einen renommierten Lehrbuchverlag suche ich einen Autor, der HTML5 inklusive API, JavaScript-Script-Beispiele, Canvas, Offline-Features usw wortgewandt vermitteln kann.

Zur Abgrenzung: die semantischen Elemente werden in einem zweiten Buch erläutert, das vor kurzem erschienen ist.

Wer Komplexes leicht verständlich erklären kann und in HTML5 und JavaScript/AJAX fit genug ist, ein Fortgeschrittenen-Buch zu schreiben, kann mir bei Interesse einfach mailen.

1 2 3 4 5