Archiv für die Kategorie ‘Webdesign’

Transparenzen im IE

Sonntag, 28. August 2011

Und noch ein Trick mit CSS und IE. Nachdem ihr ja nun bereits gelesen habt, wie man Objekte selbst im IE6 drehen kann und für alle Browser automatisch skalierende Hintergrundbilder realisieren kann, geht es nun an die Geschichte mit Transparenzen.

Transparenzen auch ab IE5

Im Firefox und Co. kein Problem dank opacity-Befehl. Aber auch selbst der IE5 lässt sich mit einem simplen Workaround dazu hinreissen, Objekte durchsichtig scheinen zu lassen. Dazu hilft wieder mal ein Filter, wie im unteren Beispiel:

.selector {
filter: alpha(opacity=50); /* internet explorer 5~7 */
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* internet explorer 8 */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
-khtml-opacity: 0.5; /* khtml, old safari */
}

Statt .selector könnt ihr natürlich jedes beliebige Element einsetzen. Viel Spass beim probieren!

Tags:, , , ,
Abgelegt in CSS, IE, Webdesign | Keine Kommentare »

CSS3-Rotation – Objekte auch im IE drehen

Donnerstag, 25. August 2011

Der Internetexplorer gibt sich ja bekannterweise manchmal sturer als ein polnischer Ochse, wenn es um neuere Standards geht. CSS3 hat nun transform-Befehle eingefügt, mit denen es möglich ist, Objekte zu beliebig drehen. Ab der 9-er Version funktioniert das auch für den Internet Explorer. Doch was mit den Versionen davor? Nun, auch dafür gibt es Tricks und Kniffe:

Auch der IE kann Elemente drehen

Anbei mal ein Beispiel für eine 180Grad Drehung, welche in allen Browsern funktioniert. 

<style>
	img {
		transform:
			rotate(180deg)
			scale(-1, 1);

		/* für Opera */
		-o-transform:
			rotate(180deg)
			scale(-1, 1);

		/* für Firefox, Safari, Chrome */
		-webkit-transform:
			rotate(180deg)
			scale(-1, 1);
		-moz-transform:
			rotate(180deg)
			scale(-1, 1);

		/* für IE */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);

	}
</style>

Selbst der IE dürfte damit keinerlei Probleme haben. Einziger Wermutstropfen: es sind auf diese Weise nur Drehungen im 90Grad Winkeln möglich. Dafür könnt ihr aber mit dem Mirror-Befehl eure Bilder sogar spiegeln. Natürlich lassen sich die Transform Befehle auch auf andere Elemente wie zum Beispiel div-Container oder p-Absätze anwenden. Probiert’s einfach mal aus und schreibt eure Erfahrungen.

Tags:, , ,
Abgelegt in CSS, IE, Webdesign | 1 Kommentar »

Automatisch skalierende Hintergrundbilder nur mit CSS (auch IE)

Mittwoch, 10. August 2011

Ein Problem welches sich bei einigen Projekten bislang stellte: skalierende Hintergrundbilder. Also praktisch solche, die sich der Größe des Browserfensters von selbst anpassen und automatisch mit skalieren. Klar: es gibt im Netz unzählige Lösungen mit Javascript. Aber es geht auch wesentlich einfacher. Die Zutaten dafür sind lediglich: ein div-Container, Position-Angaben und Z-index. Das war’s schon! Ganz ohne dirty Tricks und Javascript-Workarounds – und das allerbeste: es funktioniert sogar im IE. Grund genug es mit euch zu teilen…

So wird’s gemacht

Auf der HTML Seite reichen zwei div-Container. Einer enthält die eigentliche Website mit allem Content, der andere das Hintergrundbild welches über einen Image-Tag eingebunden wird. So sieht’s im Code aus:

<div class="content">
    <p>Hier kommt euer Inhalt hin</p>
</div>
<div class="background">
    <img class="scale" src="URL des Hintergrundbildes" alt="" />
</div>

Das nötige CSS sorgt dafür, dass der Background-Container absolut positioniert wird und sich mit 100% der Breite und Höhe des Browserfensters flexibel anpasst. Das darinliegende Image wird anhand dessen automatisch skaliert. Hier das CSS:

.content {
    position: relative;
    width: 760px;
    z-index: 10;
}

.background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:2;
}

 .scale {
     width: 100%;
     height: 100%;
}

Damit war’s das schon. Euer Hintergrund dürfte sich nun dem Browserfenster anpassen! Keine weiteren Arbeiten nötig.

Alternative: Nur in Breite oder Höhe skalieren

Möchtet ihr das Bild nur an der Höhe des Browsers ausrichten reicht einfach die Höhenangabe:

.portrait {
     height: 100%;
}

Ebenso an der horizontalen Breite des Browserfensters, dann mit Breitenangabe:

.landscape {
    width: 100%;
}

Bei den beiden letzten Beispielen mit “portrait” und “landscape” müsst ihr natürlich noch die Klasse des Bildes im HTML-Code entsprechend anpassen.

Viel Spass beim konstruktiven Basteln. Konstruktive Kritik dagegen ist in den Kommentaren gut aufgehoben und stets willkommen.

Tags:, , ,
Abgelegt in CSS, Webdesign | 1 Kommentar »

Warum ich bei (fast) jeder Website auf Blueprint schwöre

Freitag, 07. Januar 2011

Zunächst erst einmal zur Klärung: Blueprint ist ein CSS-Framework. Dank vorgefertigter Klassen für die gängisten Layouts und die nötigsten grafischen Elemente, reduziert sich die Entwicklungszeit und der Aufwand erheblich.

Webdesign mit sofort-loslegen

Das erste was dir auffallen wird: die verblüffende Einfachheit! Blueprint offeriert dir eine solide Basis für deine Website. Dank eines kinderleicht zu bedienenden Blueprint-Generators erstellst du dir das benötigte Gitterlayout. Gesamtbreite, Anzahl der Spalten, Zwischenräume – alles lässt sich pixelgenau und mit wenigen Klicks festlegen. Heraus kommt am Ende eine recht schlanke blueprint.css, welche als Grundlage für dein Projekt dient.

Der nächste Vorteil: Hast du diese CSS einmal in deine Website eingebunden und schaust sie dir genauer an, wirst du festtellen, dass die Selektoren für einen Browserreset bereits enthalten sind. Somit hast du browserübergreifend eine solide Ausgangsbasis und legst sofort ohne mühselige Vorbereitungen los.

Hast du dir im Generator zusätzlich die Gitter-Grafik heruntergeladen, kannst du dir dein Gestaltungsraster bequem mit der CSS-Klasse “showgrid” im Hintergrund anzeigen lassen und deine Elemente bequem anhand dessen ausrichten und positionieren. Alle Befehle dazu gibt es übersichtlich in diesem Cheatsheet.

Blueprint Gestaltungsraster - Pixxelpassion, Webdesign aus Leipzig

Die restlichen Entdeckungen und Aha-Effekte möchte ich dir überlassen. Und da gibt es noch einige! Nur soviel: das leidige und zeitintensive Thema “verschobenes Layout im IE6″ gehört dank Blueprint auch der Vergangenheit an. Denn die Blueprint-Konstrukte sind nicht nur valide und ermöglichen geordnete, semantische Strukturen sondern halten auch browserübergreifend.

Vorteile im Überblick

  • Anders als andere CSS-Frameworks offeriert Blueprint eine schlanke – auf Wunsch auch komprimierte – CSS-Datei
  • CSS-Reset, dass die Abweichungen in verschiedenen Browsern beseitigt.
  • Eine festes Raster, welches in seinen Maßen komplett konfigurierbar ist.
  • Voreinstellungen für professionelle Makro- und Mikrotypographie
  • Styles für Formulare und Feedbackmeldungen
  • Druckansicht deiner Websites
  • Browserübergreifende Layouts
  • Modifikationen für fluide Layouts
  • Plugins für Schaltflächen, Registerkarten und Sprites.
  • Großer Support durch Tools, Editoren, Cheatsheets und Vorlagen für beinahe jeden Schritt im Workflow.



Wer jetzt von CSS-Frameworks zum ersten Mal Blut geleckt hat, aber gerne über den Tellerrand nach Alternativen Ausschau halten möchte, dem leg ich diesen Artikel ans Herz. Hier werden neben Blueprint noch über zwei dutzend weitere CSS-Frameworks verglichen und mit ihren Vorzügen aufgelistet.

Und welches CSS-Framework nutzt du?

Tags:, , ,
Abgelegt in CSS, Framework, Konzeption, Webdesign | Keine Kommentare »

Die leipziger Zapfen bekommen einen Relaunch

Freitag, 31. Dezember 2010

Auch alteingesessene Urgesteine brauchen mal einen Tapetenwechsel und frischen Wind. Dabei versteht sich die sieben Mann starke Band als eine der ältesten in der leipziger Musikszene. Zurecht, denn 1979 gegründet haben sie doch so manchen Zenit von Künstlern wie die Beatles, Eric Clapton und den Stones miterlebt, die sie heute in ihrem eigenen Programm unter anderem neu interpretieren. Allerdings sind die Zapfen mitnichten eine reine Coverband und auch nicht nur allein im Rockbusiness unterwegs. Die musikalische Klangbreite reicht von Rock über Soul bis Blues und glänzt auch mit etlichen Eigenkompositionen.

  • Aber macht euch am besten selbst ein (Klang)bild – auf der Zapfen-Website gibt es ein kleines Archiv mit Songs direkt zum Download.

Urig und rustikal

Womit wir beim Thema wären. Ebenso liebevoll zeitgemäß aufbereitet wie manch altgediegener Song, sollte die Website werden. Eine Neuinterpretation der Band. Nach ein paar Gesprächen haben wir die wichtigsten Merkmale der Zapfen auf ein paar wenige aber definierende Begriffe runtergebrochen: urig muss das neue Design rüberkommen. Rustikal, alteingesessen und gemütlich. Wie so manch typische leipziger Kneipe, in denen sie ihre Gigs runterbrechen.

Webdesign-Entwurf für die Rockband Zapfen - Pixxelpassion, Webdesign aus Leipzig

Erster Webdesign-Entwurf für die Rockband Zapfen

Und genau auf dieser Basis sind auch die ersten Entwürfe entstanden. Grob gemasertes Holz dominiert den Hintergrund und verleiht dem ganzen Set eine rustikale Note. Aufgelockert durch kunstvoll geschwungene Formen und Instrumente, die das Raster durchbrechen.

Webdesign-Entwurf für die Rockband Zapfen - Pixxelpassion, Webdesign aus Leipzig

Zweiter Webdesign-Entwurf für die Rockband Zapfen

Ein gemeinsames Review und eine Entscheidung für einen Entwurf steht noch aus, jedoch wurden die obigen Konzepte positiv aufgenommen. Diese wollte ich euch natürlich nicht vorenthalten und gleichzeitig – mit Einverständnis der Zapfen – zu einer kleinen Diskussion anregen. Wie findet ihr die Entwürfe?! Vielleicht sieht man sich ja mal auf einem Event der Zapfen. Momentan ist da noch nichts angekündigt, aber der nächste Auftritt im Anker folgt bestimmt.

Tags:,
Abgelegt in Konzeption, Webdesign | Keine Kommentare »

Solider Newsletter in HTML: Coding und Markup

Donnerstag, 18. November 2010

Alle Jahre wieder… Weihnachtszeit – Newsletterzeit. Gerade in den nächsten Wochen wird mit dem anstehenden Weihnachtsgeschäft auch wieder eine wahre Flut mehr oder weniger feierlicher, virtueller Weihnachtsangebote gnadenlos über uns hereinbrechen. Des einen Freud des anderen Leid. Denn was unsere Spamordner und Papierkörbe unter der puren Last ächzen lässt, entpuppt sich in der Vorweihnachtszeit für die meisten Onlineshop-Betreiber umso mehr als regelrechte Goldgrube.

Newslettercheck - Pixxelpassion, Webdesign aus Leipzig

Und auch ich habe mich hinreissen lassen und bastele gerade fleissig an einem Weihnachts-Newsletter für Pixxelpassion. Und genau an diesem Prozess möchte ich euch gern teilhaben lassen und zusammen erörtern, auf was es alles dabei ankommt. Wenn euch also beim Lesen Dinge auffallen und einfallen, schreibt mir einfach

Da sich über das Thema generell mehrere dicke Bände schreiben lassen, möchte ich dies kurz und präzise in drei Teile aufgliedern und in regelmäßigen Abständen weitere Artikel dazu posten. Praktisch eine mehrteilige Last-Minute-Anleitung und Checkliste für euren kommenden Weihnachtsnewsletter:

  • Teil I: Newsletter-Coding: Alles über den korrekten Aufbau, Markup und Styles von Newslettern um Darstellungsfehler zu vermeiden
  • Teil II: Newsletter-Design: Fragen rund um das Design von Newslettern. Aufbau, optische Gliederung, Key-Visuals
  • Teil III: Newsletter-Marketing: Alles zum Thema Kundenansprache, Usertracking und Auswertungsverfahren

Den ersten Teil könnt ihr nun im Folgenden lesen. Die weiteren zwei Teile werden nicht minder interressant und folgen die nächsten Tage, versprochen! PS.: Also speichert euch am besten diesen Blog in euren Favs und im Gedächtnis um nichts zu verpassen.

Part I: Do’s and Dont’s beim Newsletter Coding

Fangen wir heute mit Teil I an: der technischen Seite bei der Erstellung eines Newsletters! Dafür benötigen wir grundlegend zwei Dinge: zum einen ordentlich Zeit, zum anderen das Bewusstsein, dass Newsletter- und Webdesign zwei grundlegend andere Sichtweisen auf den Quellcode erfordern.
Das liegt größtenteils daran, dass das Angebot an E-Mail-Readern mittlerweile unüberschaubar hoch ist. Und während so manch moderner Webmail-Provider wie Google Mail fast alle gängigen CSS-Standards problemlos darstellt, hinken beispielsweise Outlook und Co. noch gnadenlos hinterher. Da wir jedoch nicht wissen, welchen E-Mail-Reader unsere Kundschaft letztendlich nutzt, zählt im Endeffekt der kleinste gemeinsame Nenner um euren Weihnachts-Newsletter überall korrekt darzustellen.


Daraus ergeben sich folgende essentielle Regeln für euer Grundlayout:

  • Rückbesinnung auf Tabellenlayouts: Im Webdesign normalerweise verpöhnt, sind solide Tabellenlayouts in Newslettern definitiv den gängigen Layouts aus Div-Containern vorzuziehen. Tabellen sind rasterbasiert, grundsolide und lassen weniger Spielraum für Fehleranfälligkeiten bei älteren Mailern. Alle “table-Tags” werden in der Regel korrekt interpretiert (table, thead, tbody, tfoot, tr, td). Tabellen sollten das Grundgerüst und den Großteil eures Newsletter-Layoutes ausmachen. “Divs” und “spans” am besten nur wo nötig einsetzen.
  • Inline-CSS benutzen: Anstatt mit externen CSS zu arbeiten oder eure Stylesheets im “head-Bereich” eures Newsletters zu definieren, solltet ihr lieber den Elementen direkt die Styles zuweisen, wie Hintergund, Schriftgrößen und -farbe. Dies funktioniert weitesgehend mit allen gängigen HTML-Elementen wie div, span, p etc.
  • CSS-Shorttags vermeiden: Klar ist es einfacher, eure gemeinsamen CSS-Styles zu bündeln. Aber gerade in Newsletterlayouts solltet ihr jedes Style einzeln aufschreiben. So würde ich euch raten den Style “font: 12px arial bold;” lieber in “font-size: 12px; font-family: arial; font-weight: bold;” aufzuschlüsseln. Weniger Fehleranfälligkeit!
  • absolute Pfade verwenden: Nutzt bei allen Bildern sowie allen PDF’s und Links in eurem Weihnachtsnewsletter stets absolute Pfade.
  • verwendetes Material langfristig speichern: Sollte sich eigentlich von selbst verstehen: alle Bilder und sonstige Materialien, die ihr für den Newsletter benutzt oder auf die ihr verlinkt sollten langfristig in einen separaten Ornder gespeichert werden. Oftmals werden Newsletter auch von euren Kunden archiviert und teils Wochen oder gar Monate später noch gelesen. Wäre doch schade, wenn dann nur ein nacktes HTML-Gerüst erscheint, nicht wahr?!

Wie schon gesagt: für das Newsletterdesign gelten weitesgehend andere Regeln als beim Coden einer normaler Website. Beachtet ihr obige allgemeine Tipps, wird das Grundlayout eures Weihnachts-Newsletters schon auf recht soliden Füßen stehen. Vergesst nicht öfter in verschiedenen Mailprogrammen (Outlook, Thunderbird, Lotus Notes) und den populärsten Webmailern (Google, AOL, Hotmail, Web.de,…) zu testen.

Markup genau unter der Lupe

Nachdem ihr nun ein Basis-Layout stehen habt, gehen wir nun ins Detail:

  • Table-Tags vor Stylesheets: Wenn ihr euer Tabellenkonstrukt stylen wollt, gebt immer table-Tags den Vorrang vor CSS. Dies verringert Kompatibilitätsprobleme gerade bei älteren E-Mail-Clients. Ein td border=”0″ cellpadding=”5px” ist also generell immer einem td style=”border:0px; padding:5px” vorzuziehen.
  • Padding vor Margin: Insbesondere fällt dies bei der Positionierung von Elementen mittels “padding” und “margin” auf. Nutzt am besten die “cellpadding”-Deklaration um Inhalte von den Rändern der Tabellenzelle wegzurücken.
  • Ausnahme Rahmen: Eine Ausnahme, die mir bis jetzt aufgefallen ist sind die Rahmen. Wenn GoogleMail diese ignorieren sollte, ist tatsächlich ein div style=”border-width:1px;” einem td border=”1″ vorzuziehen. Platziert dazu einfach einen div-Container in die Tabellenzelle und weist ihm den Rahmen zu.
  • Hintergrundgrafiken direkt in Tabelle einbinden: Gerade Outlook 2007 hat bei mir als CSS-eingebundene Hintergrundgrafiken strikt verweigert. Abhilfe verschafft ihr, indem ihr die Grafik direkt der Tabelle bzw. Tabellenzelle zuweist oder über den image-Tag einfügt.
  • Grafikattribute immer definieren: für alle direkt eingebundenen Grafiken gilt: Die Angabe von height, width und alt-Attributen verringert die Wahrscheinlichkeit auf Darstellungsfehler. Auffällig zum Beispiel in GoogleMail. Desweiteren könnt ihr vorbeugen, dass das Layout vor den Augen eurer Kunden zerfällt, wenn der E-Mail-Reader die Anzeige von Grafiken deaktiviert hat.
  • Span, das multifunktionale Tag: Wo Tabellenstyles an ihre Grenzen kommen sind spans das ideale Mittel um inline-Elemente zu stylen. Beispielsweise um Text eine Farbe zuzuweisen, eine Schriftgröße zu definieren – ja sogar zum positionieren.
  • Verschobene Grafiken korrekt platzieren: Es kann vorkommen, dass Grafiken am unteren Ende einer Tabellenzelle ein wenig versetzt erscheinen. Probiert in dem Fall einfach mal, den schliessenden td-Tag auf die gleiche Zeile wie den image-Tag zu setzen. In vielen Fällen hat dieser einfache Kniff wahre Wunder bewirkt.
  • Links stets in neuem Fenster öffnen: Gerade wenn ihr in eurer Weihnachtsmail viele Links verwendet solltet ihr darauf achten target=_blank zu verwenden. Die Nutzer von Webmailern werden es euch danken, wenn der Klick auf einen Link ein neues Fenster öffnet und die eigentliche Mail zum weiterlesen erhalten bleibt.
  • Links stylen: Habt ihr innerhalb eines textgefüllten p-Tags einen Link, den ihr farblich hervorheben wollt, probiert mal folgende Vorgehensweise: Definiert die Schriftfarbe für den gesamten Text bereits im umschliessenden td-Tag. Danach färbt ihr den a tag individuell ein um den Link andersfarbig hervorzuheben. Dies funktioniert natürlich auch mit anderen Font-Styles wie Schriftgröße, Text-Decoration, …
  • 1×1 Pixelgrafiken vermeiden: Obwohl gerade in Tabellenlayouts durchsichtige Platzhaltergrafiken von 1Pixel Größe gerne angewandt werden um die Tabellenstruktur zu erhalten, solltet ihr ein eurem Newsletter darauf verzichten. Solche Grafiken nutzen nämlich auch Spammer um zu prüfen, ob ihre Mails gelesen werden. Somit steigt die Wahrscheinlichkeit, dass euer Weihnachtsnewsletter nur im Spamordner eurer Kunden landet.
  • Eigenheiten von GoogleMail: Obwohl einer der moderneren Webmailer, interpretierte GoogleMail meinen Newsletter manchmal doch recht eigenwillig. Prüft deswegen vorallem eure Font-Styles in den td, h1, h2, p und a Tags auf Richtigkeit. In manchen seltenen Einzelfällen ist es auch anzuraten, der allumschliessenden Layout-Tabelle ein padding von 10px zu geben. Dies verhindert, das lästige Beschneiden mancher E-Mail am Rand. Aber testet einfach mal selbst in eurem GoogleMail-Reader und entscheidet je nach Bedarf.

Und wo wir gerade beim Testen sind: vergesst nicht, regelmäßig euren Newsletter zu prüfen. Wird er im Firefox und Internet-Explorer richtig dargestellt, könnt ihr zuversichtlich sein dass allenfalls kleinere Anzeigefehler bei den meisten Webmailern wie Yahoo, GMX, GoogleMail etc. auftreten. Natürlich solltet ihr auch diesen nachgehen. Doch mit obigen Tipps seid ihr dafür schonmal gut gewappnet. Habt ihr gerade kein älteres Outlook zur Hand, prüft euren Weihnachtsnewsletter doch einfach mal im Internet Explorer 6. Die Darstellungsroutinen sind dort ähnlich.

Sicherlich habt ihr auch schon Erfahrung mit den teils wiederspenstigen Mailsystemen eurer Kunden gemacht. Vielleicht habt ihr auch noch Tipps und Kniffe um diese Liste zu ergänzen. Ich freue mich dazu auf eure Kommentare!

Nützliche Helferlein

Abschliessend möchte ich euch zum Thema noch zwei Newslettertools ans Herz legen, welche ich sehr gelungen finde:

  • Mailchimp: Breitgefächerte Newsletterfunktionen, Tracking und Asuwertungstools, große Palette an Newsletter-Vorlagen, viele Schnittstellen zu bekannten sozialen Netzwerken, Onlineshops, Google Analytics sowie WordPress…und das Beste: für bis zu 1000 Subscribers zahlt ihr nichts. Genau das richtige um den Dienst mal auf Herz und Nieren zu prüfen.
  • Newsletter-Plugin für Worpress: Speziell für WordPress gibt es auch noch ein Plug-In, welches ich oft einsetze und zufrieden bin. Es enthält alles wichtige: Subscribing mit einfachen oder Double Opt-In, bequem verwaltbare Subscriber-Liste, Import/Exportfunktionen sowie einen umfangreichen Newsletterbaukasten mit HTML-Editor. Ihr könnt sogar eure neuesten Blog-Artikel als regelmäßiges Update automatisch an eure Kunden senden. Dieses Plugin ist grundlegend gratis – lediglich die optionalen Tracking- und Auswertungstools kosten einen kleinen Obolus.

Dies sind die Werkzeuge, welche ich momentan einsetze. Gerne möchte ich diese Liste und meinen Horizont noch erweitern. Wenn ihr also was empfehlen könnt, dann schreibt mir ruhig:).

Mit diesem ersten Teil hoffe ich, euch einen Einblick in den korrekten Newsletteraufbau gegeben zu haben und möchte sogleich mit einem Ausblick auf die weiteren Artikel der Serie hinweisen. Denn im nächsten Teil geht es ganz um das Design und den grundlegenden, optischen Aufbau eines Newsletters. Optimale Strukturierung, gezielte Userführung sowie den Einsatz von Eye-catchern – natürlich garniert mit eindrucksvollen Beispielen. Den Abschluss bildet dann ein Artikel rund um das Marketing, die Kundenansprache, das Tracking und die abschliessende Auswertung eurer Newsletterkampagne – mit vielen nützlichen Tools. Also bleibt dabei, wenn es euch gefallen hat.

Tags:, , , ,
Abgelegt in Marketing, Newsletter, Webdesign | 3 Kommentare »