A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.

„The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.“

Ausprobieren! Das Photoshop Template dazu gibt es hier.

( via swissmiss )

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/

Design Links April 2010

linluv

 

 

 

 

 

 

 

Tech
e-commerce at its best, Magento kam sah & siegte, zumindest bei den meisten
+++Getting started: Magento for Designers Part 1
+++Magento for Designers Part 2

Einführung zu HTML 5
+++Introduction to HTML5

Man kennt das ja, – sauber anfangen zu schreiben, alles ist schön strukturiert und gegen Ende sieht’s dann aus wie…naja. – Einmal CSS aufräumen, bitte:
+++CSS Cleanup
+++Prime CSS erzeugt aus deinen HTML Klassen und IDs ein Starter Stylesheet

UX & Design
+++The Characteristics of successful User Interfaces
+++Designing with the Mind in Mind

SXSW Panel Links (thx @missmoss for sharing!)
+++Get Stoked On Web Typography Wrap Up
+++Beauty in web design Part 1, 2 und 3

Work & Process
+++Pain Free Design Sign Off (gibt es auch als podcast)
+++Reasons Designers Fail to Remain Motivated, and 5 Ways to Fight Back

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/

CSS Color Replacement–Tool

css-color-editor

Intuitiver als die übliche „Search & Replace“ Methode im CSS Editor finde ich den „Replace CSS Colors–Editor“.
Ein nettes online Tool: Du lädst einfach das alte CSS File hoch, ersetzt das alte Farbschema durch ein neues deiner Wahl, und bekommst deinen neuen „Anstrich“ zum download angeboten. Perfekt um schnell mal einen Styleswitcher für die Webseite zu basteln.

http://css-color-replace.orca-multimedia.de

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

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