HTML5 is the Future – HTML5 is NOW

Den kompletten Artikel sowie das Video vom Vortrag findet ihr hier.

Nutzt ihr bereits HTML5?

Edit:
Hier noch ein interessanter Artikel, wie man den IE auch ohne Verwendung von js dazu „zwingt“, die Elemente zu erkennen und darzustellen (thx Christoph )

ProCSSor – CSS Prettifier

Mann kennt das ja, anfangs wird die CSS Datei gepflegt und gehegt, doch im Laufe des Projektes sieht sie dann aus wie Kraut & Rüben.
Wer es optisch aufgeräumt mag, sollte mal den ProCSSor ausprobieren – mit jeder Menge Formatierungseinstellungen, die man auswählen kann.
Er schafft zumindest eine optische Ordnung.
Nach Regionen oder Elementen muss man schon noch selbst ordnen – aber das ist ja sowieso fast eine religiöse Debatte ;)

procssor

http://www.procssor.com/

Colorscheme Tools für Designer

Farben sind ja nicht ganz unwichtige Informationsträger. Sei es darum sich einfach nur mal inspirieren zu lassen, oder die passenden Kombinationen zu einer vorgegebenen zu Farbe finden – bei der Gestaltung immer ganz nützlich: diverse Colorschemetools & Pickers, die helfen, Farbharmonien herzustellen.

Adobe Kuler
kuler
Der Klassiker, lässt eigentlich keine Wünsche offen, man kann eigene Farbschemen erstellen, nach versch. Kriterien wie z.B . Komplementärfarben, oder Abstufungen. Exportfunktion für die Paletten in Illustrator und Photoshop vorhanden.
Mir gefällt an Kuler, das es hauptsächlich mit Emotionen arbeitet, man kann also nach Schlagwörtern suchen wie z.B „early morning“ – super zur Inspiration.
Gibt es übrigens auch als Desktop AIR Applikation.

„Colorscheme Tools für Designer“ weiterlesen

CSS Gradients-Generator

Webkit unterstützt ja bislang als einziger Browser die CSS Eigenschaft „Gradient“ // Property: -webkit-gradient (Farbverläufe linear & radial)
So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln – wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4

grad Webkit unterstützt ja bislang als einziger Browser die CSS 3 Eigenschaft „Gradient“ // Property: -webkit-gradient (Farbverläufe linear & radial) So kann man hübsche Buttons also in Zukunft ganz ohne Grafiken basteln – wie gesagt funktioniert das ganze leider ausschliesslich ab Safari 4 – also bei der Anwendung der Eigenschaft bitte niemals vergessen einen Fallback mit einer Hintergrundfarbe für die Browser zu schreiben, die das nicht unterstützen. Wer nun auf jeden Fall per CSS seine Farbverläufe gestalten möchte, dem sei der Gradient Generator von den Westciv Tools empfohlen. Einfach die gewünschten Farbwerte & Einstellungen wählen, und den CSS-Code generieren lassen. Ich persönlich finde ja ein 1px breites Hintergrundbild, welches wenigstens browserübergreifend funktioniert, momentan immer noch die bessere Wahl – trotzdem ein nettes Tool, welches man sich ja mal vormerken kann und mit rumspielen kann ;) http://webkit.org/blog/175/introducing-css-gradients/ http://westciv.com/tools/gradients/

Cross Browser Testing mit Adobe Browserlabs

adobe-browserlabs

Neu ist die Idee ja nicht, das Webentwickler Webseiten in verschiedenen Browsern & unterschiedl. Betriebssystemen testen. Tools dafür gibt es einige: z.B. Browsercamp.com
Xenocode Browser Sandbox ( nur f. windows ), & IE Tester
„Cross Browser Testing mit Adobe Browserlabs“ weiterlesen

Usability Testing mit Silverback am Mac

Silverback ist ein low-budget Usability Testing Tool, d.h. es testet die Benutzerfreundlichkeit einer Webseite, indem es die Mausaktivitäten und Augenbewegungen sowie die spachlichen Aussagen des Benutzers in Echtzeit mit der integrierten iSight Kamera aufzeichnet, und den fertigen Film als .mov abspeichert – sodass man diesen hinterher auswerten kann.

1

Neulich bin auf meiner Suche nach guten Webdevelopment Tools für den Mac auf „Silverback“ gestossen.

Silverback ist ein low-budget Usability Testing Tool,  d.h. es testet die Benutzerfreundlichkeit einer Webseite, indem es die Mausaktivitäten und Augenbewegungen sowie die spachlichen Aussagen des Benutzers in Echtzeit  mit der integrierten iSight Kamera aufzeichnet, und den fertigen Film als .mov abspeichert – sodass man diesen hinterher auswerten kann.

„Usability Testing mit Silverback am Mac“ weiterlesen

„Machen Sie das mal schön!“ – Von Usability und anderen Ausserirdischen

Das kann ich auch!

Das es vielen freiberuflichen Webdesignern/Webworkern, gerade den Newbies unter uns, so schwer fällt mit Kunden erfolgreich zu kommunizieren liegt meines Erachtens daran, das das Web ein für jedermann zugängliches Medium ist.

„„Machen Sie das mal schön!“ – Von Usability und anderen Ausserirdischen“ weiterlesen

Der Footer – Das Stiefkind der Webseiten?

Die meisten Webdesigner legen immer sehr viel Wert auf einen toll gestalteten Header (Kopfbereich) einer Webseite, aber was ist mit dem Footer (folglich der „Fuß“/ das Seitenende) der Seite? Frei nach dem Motto oben hui, unten pfui – da schaut eh niemand genau hin – wird dieses Element der Webseite oft genug sträflichst vernachlässigt.

„Der Footer – Das Stiefkind der Webseiten?“ weiterlesen

CSS Sprites / Single-Image Rollover Effekte

sprites

An sich überhaupt nicht neu, aber viele kennen diese bestimmte Vorgehensweise zum Erzeugen eines grafischen MouseOver-Effektes doch noch nicht und arbeiten immer noch mit verschiedenen Background-Images oder gar mit JavaScript.

„CSS Sprites / Single-Image Rollover Effekte“ weiterlesen

für Webdesign-Pixelfetischisten ;)

Firefox 3 kommt mit einer Extension, die für alle Webdesigner & Developer ziemlich interessant sein dürfte.

Das nette Plugin nennt sich Pixelperfect und erlaubt dem Anwender, mit Bild-Overlays eines Designs direkt im Browser zu arbeiten, die pixelgenaues Webdesign ohne nervige Abmesserei möglich macht.

Doch damit nicht genug – dadurch, das man die Tranzparenz des Bildes nach Herzenslust einstellen kann, kann man sich sozusagen in Echtzeit  gleichzeitig mit Firebug die nötigen Anpassungen „on the fly“ gestalten und diese dann in die zugehörige CSS Datei übertragen.

Sehr nützliches Tool, wenn’s mal wirklich auf pixelgenaues Webdesign ankommt.

Plugin-Download & Tutorials dauzu hier: http://www.pixelperfectplugin.com/

Ein Leben nach dem Float?


3-spaltiges Layout ohne Floats

so ganz ohne Clears? ach wäre das schön …wenn man doch nur die alten IEs abschaffen könnte. Einfach auf die Müllhalde werfen :)

Denn mit der Veröffentlichung des Internet Explorers 8 wird die CSS Eigenschaft display:table unterstützt und es werden ebenso tabellenspezifische Eigenschaften unterstützt – dies war bisher nicht der Fall (IE 6/IE 7)

„Ein Leben nach dem Float?“ weiterlesen

Safari 3.1 Hack

Browser hacken ist häßlich und böse, aber manchmal muss es eben dennoch sein. Conditional Comments scheiden in diesem Fall sowieso aus, denn diese sprechen nur den Internet Explorer an.
Obwohl Safari wirklich einer der besten Browser ist, u.a. was Standards angeht, sucht man sich, wie ich neulich, fast die Finger wund nach einem funktionierendem Hack der nur Safari anspricht, ohne gleichzeitig Stress im Mozilla zu verursachen.
Here we go:

Benutzt wird die Pseudo Klasse :nth-of-type()

body:nth-of-type(1) deinSelektor {
deinAtttribut:blabla ;
}

funktioniert einwandfrei, spricht wohl auch Google Chrome an, ausgetestet habe ich dies wegen Nichtvorhandenseins von Chrome nicht.
gefunden bei:evotech.net

GDPR Cookie Consent mit Real Cookie Banner