30 hilfreiche HTML5 Tutorials und Tricks

Juni 7th, 2011

Das Designer’s Terminal hat eine nette Liste von 30 HTML5 Tutorials und Tricks zusammengestellt. Darunter befinden sich auch einige CSS-Sachen wie Formular-Styling aber auch bisher exotischere Dinge wie Offline-Access und Drag n Drop. Sind paar nette Sachen dabei. Zu finden unter http://www.designerterminal.com/tutorials/html5/useful-html5-tutorials-tricks.html

30 Extremely Useful HTML5 Tutorials and Tricks

CSS3 Media Queries – Unterschiedliche Bildschirmgrößen bedienen

Juni 7th, 2011

Die Vielfalt der Geräte, die auf Websites zugreifen, wird immer größer. Gerade durch den Boom von mobilen Geräten wie Smartphones, Tablets (allen voran das iPad) oder Laptops kamen sehr viele neue Bildschirmauflösungen ins Spiel, die ebenfalls bedient werden möchten. Oftmals sehen Weblayouts, die für Desktop-Standardauflösungen gestaltet und umgesetzt wurden, auf kleinen Geräten einfach nur grausam aus. Die mobilen Geräte haben oft schon Techniken in ihre Browser integriert, die zumindest die Lesbarkeit gewährleisten sollen. Doch dem Designer in mir reicht das nicht.

Wollte man früher die Displayauflösung des Users abfragen, kamen häufig JavaScripts zum Einsatz. Relativ umständlich musste man dann noch die entsprechenden CSS-Klassen auf Basis dieser Skripte den HTML-Elementen hinzufügen. CSS2 erlaubte das Spezifizieren von verschiedenen Stylesheets für verschiedene Medientypen wie Screen oder Print. Doch das Ganze war relativ unflexibel. CSS3 schafft hier Abhilfe und führt die sogenannten Media Queries ein. Dieser Artikel soll das Prinzip der Media Queries kurz erklären und somit einen Einstieg in die Webentwicklung für verschiedenste Bildschirmauflösungen bieten. Read more »

CSS3 zur Suchmaschinenoptimierung

Mai 24th, 2011

Gestern habe ich diesen Blog ein wenig für Suchmaschinen optimiert. Hierfür benutze ich wie so viele andere WordPress-Blog-Betreiber einige Plug-Ins, lege aber auch manuell noch Hand an, wenn es sein muss. Ganz wichtig für die Suchmaschinenoptimierung ist die Einhaltung der Webstandards des W3C. Überprüfen kann man dies mit den W3C Validatoren für HTML und CSS. Das WordPress-Theme, welches ich verwende hatte hier noch einige Schwächen, die ich durch Änderung der Template-Files beheben könnte. Damit ist dieser Blog jetzt XHTML 1.1 und CSS3 standardkonform. Falls euch irgendwann Validierungsfehler auffallen – was ja immer passieren kann, wenn man z.B. neue Plug-Ins installiert – bitte ich euch, mir dies per Kommentarfunktion oder per E-Mail mitzuteilen.

HTML5Tutorial bei Nibbler

HTML5Tutorial bei Nibbler

Bei der Gelegenheit hab ich diese Website auch mal durch verschiedene Website-Checks laufen lassen. UITest.com bietet hierfür einen guten Ausgangspunkt. Bei dem Test von Nibbler kam z.B. heraus, dass dieser Blog zu viele Bilder verwendet. Dies kommt hauptsächlich vom Template, welches eben Grafiken dazu verwendet, um z.B. den Menühintergrund oder die Sidebar-Widgets zu gestalten. Wie ich ja kürzlich berichtet habe, kann man mit CSS3 viele Dinge durch’s Coding lösen, die bisher nur mit Bildern möglich waren. Dazu gehören z.B. auch die abgerundeten Ecken, die beim Hauptmenü und bei den Sidebar-Widgets dieses Templates für einen moderneren Look sorgen. Read more »

Frameworks, Tools und Templates

Mai 22nd, 2011

Wie aktuell die Themen HTML5 und CSS3 sind, merke ich immer wieder daran, wie viele Blogs sich zur Zeit mit diesem Thema beschäftigen. Fast täglich habe ich in meinem Newsreader einen oder mehrere Beiträge dazu, ich komme kaum hinterher, mir alles anzusehen geschweige denn auszuprobieren. So kam heute wieder ein Artikel von einem meiner Lieblingsblogs rein, 1stwebdesigner.com.

1stwebdesigner - gute Quelle für HTML5-Interessierte

1stwebdesigner - gute Quelle für HTML5-Interessierte

Der Titel diesmal: 20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates von Rochester Oliveira. Wie der Titel schon sagt, findet ihr hier eine Auswahl einiger HTML5 Templates, Entwicklungs-Frameworks und CSS-Generatoren, die den Entwicklungsprozess einer HTML5 / CSS3 Website wesentlich beschleunigen können. Denn nicht alles, was man benötigt, muss man selbst coden. Ihr findet in den genannten Artikel Links zu CSS-Generatoren, HTML5-Templates, Frameworks, Cheat-Sheets, Tutorials und Galerien. Read more »

Gestaltung von Typografie mit CSS3

Mai 21st, 2011

CSS3 wird häufig in einem Atemzug mit HTML5 genannt und dies aus gutem Grund. Erst durch die Verwendung von CSS lassen sich moderne HTML-basierte Websites komfortabel und standardkonform grafisch ansprechend gestalten. Und CSS3 bietet im Vergleich zu seinen Vorgängern viele neue Möglichkeiten, das Aussehen einer Website zum Positiven zu verändern.

ausgestanzter HTML-Text

ausgestanzter HTML-Text

Unzählige Webdesigner bzw. -entwickler setzen heute HTML-Text bewusst als Gestaltungselement ein, was nicht nur schick aussieht sondern auch bei der Optimierung für Suchmaschinen den früher oft dafür verwendeten in Grafiken abgebildeten Texten deutlich überlegen ist. Suchmaschinen können den HTML-Text lesen, verstehen und so Informationen über den Inhalt dieser Website erfassen. Dies wird besonders im Bezug auf  die Entwicklung zum sogenannten Web 3.0, dem semantischen Web, immer bedeutsamer. Read more »