Archiv der Kategorie: Browser

Browser

Inclusives Design: Formulare mit HTML und CSS

Auf den meisten Ihrer Seiten bieten Sie vermutlich Informationen an, die „nur“ gelesen werden sollen. Vielleicht haben Sie für Ihre Texte schon viel getan, um diese zugänglich zu machen.

Auch  Formularen sollten Sie die gleiche Aufmerksamkeit widmen. Formulare sind schließlich eine Möglichkeit, mit Ihren Besuchern in Kontakt zu treten. Worauf Sie bei der Erstellung von inklusiven Formularen achten müssen, erfahren Sie in diesem Artikel.

Inclusives Design: Formulare mit HTML und CSS weiterlesen

Linktipps Responsives Webdesign (RWD)

In aller Kürze ein paar nützliche Links zum Thema responsives Webdesign:

Online Tool zum  Testen:
https://quirktools.com/screenfly/

RWD muss schnell sein und ein (von mir nicht präferierter) Lösungsansatz:
http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/

Die Bücher aus dem Galileo-Verlag haben mich immer wieder begeistert. Das unten verlinkte werde ich mir auf jeden Fall besorgen. Ihr solltet Euch mal die Videos ansehen. Vor allem im Video Lektion: 3.4 Mobile First, Content First [12:02] wird eine prima Lösung gezeigt, um (ältere) InternetExplorer zu unterstützen, die ja keine media queries verstehen (Stichwort response.js).

Da diese Lösung JS benötigt könnt Ihr natürlich alternativ (falls die Seite auch ohne JS laufen muss) meine an anderer Stelle vorgeschlagene Lösung verwenden (d.h. alle Angaben in media queries für den IE wiederholen. Entweder per HTML5-Boilerplate-Klasse oder in einer CSS-Datei extra für den IE (was ich aus Performanz-Gründen empfehlen würde)).

Hier der Link zum Buch, (Auszüge und einige Videos können Online betrachtet werden):
http://www.galileocomputing.de/katalog/buecher/titel/gp/titelID-3347

Alle hier genannten links habe ich auch der Seite über Responsoves Webdesign zugefügt.

Speed is a feature – Tuning für Ihre Homepage

Wer eine Webseite besucht, möchte normalerweise nicht auf ein weißes „Blatt Papier“ starren.

Um die eigene Webseite richtig schnell zu machen, muss Men eigentlich nichts tun. Wenn man ein statisches HTML-Dokument erstellt und dieses weder gestaltet noch per JavaScript aufpeppt, ist die Seite schneller beim Betrachter, als der gucken kann.

Aber wer will schon eine ungestaltete Webseite? Also kommen CSS, JavaScript, Bilder und all die anderen Zutaten hinzu, mit denen man den Besuch zu einem Erlebnis für den Betrachter macht.

Damit die Seite trotzdem blitzschnell beim Betrachter ankommt, kann man an verschiedenen Schrauben drehen. Dabei muss die Seite nicht immer schneller laden: es kommt auch darauf an, wann die großen Brocken übertragen werden. So kann man beispielsweise die meisten JavaScripte nach den eigentlichen Inhalten laden. Der Besucher bekommt auf diese Weise schnell etwas zu sehen und im Hintergrund wird noch unbemerkt weitergeladen.

Wie das geht und noch viel mehr erklärt die Seite browserdiet.com (die eigentlich Websitediet heißen müsste)

Auch Erfahrene Entwickler finden hier noch die eine oder andere Perle – und weil die Texte kurz und übersichtlich geordnet sind, lassen sich diese Perlen auch schnell finden.

20130331-110203.jpg

Firefox in Version 11 mit 3D-Ansicht

FF kann in der jetzt aktuellen Version 11 die Elemente von Webseiten in einer 3D-Ansicht so visualisieren, dass auf einen Blick klar wird, wie diese Elemente ineinander verschachtelt sind.

Das soll Entwicklern die Analyse einer Seite einfacher machen. Etwas ähnliches in einer simpleren Darstellung bietet die Web Developer Toolbar unter „Information“ als topografische Information.

Einfach mal ausprobieren!

Wie man die Funktion aufruft, (Button im „Element untersuchen“-Bereich) zeigt das folgende Video von Vladimir Simovic.

Wie findet Ihr diese Funktion? Ist das eine echte Hilfe oder ein sinnloses Gimmick? Was bevorzugt ihr! Das neue FF-Feature oder die Web Developer- Topographie?

bittersmann.de

Allen Webentwicklern mit Lernpotential und -interesse sei ein Blick auf die Seite von Gunnar Bittersmann ans Herz gelegt. Eine hilfreiche Alternative für Floats, (zum Beispiel um Bildergalerien zu realisieren) löst ein lästiges Problem, wenn man es mit unterschiedlich hohen Elementen zu tun hat (in der Bildergalerie zum Beispiel Grafiken mit unterschiedlich langen Bildunterschriften). Wer also an gut erklärten Lösungen interessiert ist, schaut sich das mal an. Und alle die bereits alles zu wissen behaupten: seht es Euch trotzdem mal an, Ihr müsst es ja niemandem verraten. :-)

“CSS – Cascading Style Sheets Level 3″
Neues Lehrbuch für CSS3

Das CSS-Lehrbuch des Herdt-Verlages habe ich vollständig überarbeitet und in weiten Teilen komplett neu geschrieben. Dazu wurde es um viele CSS3-Möglichkeiten erweitert. Es erscheint am 30.08.2011 unter dem treffenden Titel „CSS – Cascading Style Sheets Level 3“.

Im Einzelnen lernen Sie:

  • Formatvorlagen erstellen und verwenden
  • Elemente sicher und gezielt ansprechen
  • Schriften gekonnt einsetzen und Texte gestalten
  • Farben und Hintergründe anpassen
  • Freiräume und Rahmen verwenden
  • Datentabellen und Formulare attraktiv präsentieren
  • Webseiten vollständig mittels CSS gestalten
  • Inhalte für den Ausdruck aufbereiten

Ein paar Highlights:

  • Die neuen Möglichkeiten der aktuellen Browser
  • Zahlreiche neue Selektoren zur detaillierten und effektiven Elementauswahl
  • Beliebige Schriften für Webseiten
  • Texte und Boxen mit Schatten
  • Mehrere Hintergründe in einem einzigen Element und frei definierbare Größen für Hintergrundbilder
  • Rahmen mit eigenen Bildern oder abgerundeten Ecken

Die Änderungen zum Vorgänger umfassen unter anderem:

  • CSS Level 3
  • Komplett überarbeitet und verbessert, zahlreiche neue Abbildungen und Beispiele
  • Alle Beispiele in aktuellem HTML5 und CSS3
  • Layout-Beispiele, die in allen Browsern funktionieren
  • Zahlreiche Angaben zur Browserunterstützung
  • Aufwändig gestaltetes Beispielformular, das auf Benutzereingaben reagiert

Bei diesem Buch handelt es sich um eine Schulungsunterlage, die speziell für den Einsatz im Unterricht entwickelt wurde. Aber auch Autodidakten werden durch den systematischen Aufbau verständlich in die Grundlagen von CSS3 eingeführt. Die Kapitel sind weitgehend eigenständig, so dass das Buch nicht zwingend von vorne nach hinten durchgearbeitet werden muss.