Adobe stellt am 17. Juni 2013 das gesamte Produktsortiment von CS6 auf CC (Creative Cloud) um. Neben der Tatsache, dass Photoshop CC & Co. dann nur noch im Rahmen eines Creative Cloud Abonnements nutzbar sind (was Agenturen und Verlage auf die Barrikaden treibt), werden mit der neuen Version natürlich auch neue Funktionen eingeführt.
Ich möchte in diesem Beitrag die Features von Photoshop CC vorstellen. Da mich der Einsatz von Photoshop im Bereich Web- und Interface-Design besonders interessiert, nenne ich Webdesign-Funktionen zuerst. Fireworks wird übrigens eingestellt.

Photoshop CC und Edge Reflow CC arbeiten eng zusammen

Edge Reflow, das Produkt zum gestalten von flexiblen und reaktionsfähigen Designs (Responsive Design) wird in Zukunft eng mit Photoshop CC zusammenarbeiten. In Photoshop gestaltete Entwürfen können direkt nach Edge Reflow exportiert werden, was den Kreativprozess im Responsive Design deutlich beschleunigen und verbessern könnte. Im ersten Release von Photoshop CC wird diese Funktion jedoch noch nicht vorhanden sein, sie soll in Kürze nachgereicht werden.

Einen ausführlichen Artikel zu Edge Reflow findet ihr hier.

Ecken-Radius von Vektor-Objekten nachträglich editieren

In Photoshop CC kann der Ecken-Radius von Vektor-Objekten endlich jederzeit angepasst werden. Insbesondere für Web- & Interface-Designer ist das sehr praktisch. Bisher musste eine Form nämlich komplett neu erstellt werden, wenn der Radius verändert werden sollte. Es ist auch möglich, den Radius der Ecken unterschiedlich abzurunden und den passenden CSS-Code zu exportieren.

Intelligentes Hochrechnen (Upsampling)

Bilder können in Photoshop CC (angeblich) ohne Qualitätsverlust massiv vergrößert werden. Insbesondere das Entstehen von Bildrauschen soll nicht länger auftreten. Für die nachträgliche Retina-Optimierung von Grafiken könnte diese Funktion äußerst hilfreich sein.

Mehrfach-Auswahl von Pfaden und Vektoren

In Photoshop CC können mehrere Vektoren, Formen und Pfade gleichzeitig ausgewählt werden. Auch eine Auswahl über verschiedenen Ebenen hinweg ist möglich. Das dürfte die Arbeit mit Vektoren in Zukunft deutlich vereinfachen.

Ebenen isolieren (isolate Layers)

Wenn man an einem komplexen Photoshop-Dokument mit vielen Ebenen arbeitet, kann die Übersicht schnell verloren gehen. In Photoshop CC steht daher eine neue Funktion namens „Ebenen isolieren“ zur Verfügung.
Zunächst werden alle Ebenen ausgewählt, die man im Augenblick sehen möchte. Anschließend aktiviert man die neue Funktion und Photoshop blendet alle anderen Ebenen im Ebenen-Bedienfeld aus. Sehr praktisch.

Voreinstellungen für Schriften

In Photoshop CC können individuelle Einstellungen für Schriften gespeichert und anschließend per Klick angewendet werden. Auch eine globale Voreinstellung über alle Photoshop-Dokumente hinweg soll möglich sein.

System-Schriftglättung

Bisher hatten Webdesigner immer das Problem, dass Schriften in Photoshop anders aussahen als später im Browser. Das ist nun vorbei, Photoshop CC führt „System Anti-Aliasing“ ein. Hiermit wird die Schrift so geglättet wie vom verwenden Betriebssystem gewohnt. Die Funktion kann in der Optionsleiste als Glättungsmethode ausgewählt werden.

Farbfelder aus HTML, CSS & SVG-Dateien

Farbfelder können in Photoshop CC auch auf Basis von HTML, CSS und SVG-Dateien erstellt werden. Eine neue Import-Funktion macht es möglich.

Synchronisierte Voreinstellungen

Im Rahmen der Creative Cloud werden zukünftige Photoshop-Funktionen automatisch eingespielt sobald sie von Adobe fertiggestellt worden sind. Wenn ihr Photoshop auf verschiedenen Rechnern installiert habt, verfügen also auch diese Installationen ab CC über die gleiche Versionsnummer. Die Voreinstellungen für Installationen auf verschiedenen Computern können daher nun synchronisiert werden.

Share on Behance

Behance als führende Kreativ-Plattform ist jetzt stark mit Photoshop CC verbunden. Dateien können direkt aus dem Programm in die Plattform geladen und so der Community vorgestellt werden. Insbesondere für Echtzeit-Rückmeldungen während des Designprozesses kann diese Verbindung sinnvoll sein.

Smart Schärfen-Werkzeug (Smart Sharpen)

Das Smart-Schärfen Werkzeug von Photoshop CC verwendet neue Algorithmen und ermöglicht so ein verbessertes Schärfen, ohne die hässlichen Nebeneffekte wie Bildrauschen oder Halo (leuchtende Kanten) zu erzeugen.

Camera Shake Reduction Tool

Das Camera Shake Reduction Tool entfernt Verwackelungseffekte in Fotos. Nach ersten Tests einiger Kollegen scheint das Tool zu funktionieren, allerdings wirklich gut nur bei sehr geringen Verwackelungen.

Camera RAW 8

Camera RAW 8 integriert neue, non-destruktive Werkzeuge. Neben einem Korrekturpinsel mit echter Pinselspitze (bisher gab es nur einen runden Punkt) sind das der Radial-Verlaufsfilter (Radial Filter) für Vignetten-Effekte und das Aufrichten-Werkzeug (Automatic Upright) zur Perspektiv-Korrektur.

Camera RAW-Korrekturen als Smartfilter

Die Korrektur-Funktionen von Camera RAW stehen jetzt auch in Photoshop zur Verfügung. Dank einer Smartfilter-ähnlichen Anwendung können die Korrekturen ein- und ausgeschaltet und nachträglich editiert werden.

Photoshop und Photoshop Extended verschmelzen zu einer Version, Creative Cloud Funktionen sind integriert

Bisher existierten mit Photoshop und Photoshop Extended zwei separate Programmversionen mit unterschiedlichem Funktionsumfang. Das ist mit Photoshop CC vorbei, es existiert nur noch eine Variante. Für Nutzer der bisher abgespeckten Version stehen somit jetzt die 3D-Werkzeuge und die Bildanalyse-Werkzeuge zur Verfügung.
Wer bisher Photoshop CS6 als Standalone-Lösung genutzt hat (also nicht in der Creative Cloud) kommt ab sofort in den Genuss der Cloud exklusiven Updates. Dazu gehören unter anderem die Weichzeichnungsfilter als Smart-Filter.

Links / Quellen

• Photoshop CC for Creative Cloud Members Coming Soon!
• Adobe TV zu Photoshop CC
• Adobe Blogs
• Photoshop auf Facebook
• Photoshop auf YouTube
• Photoshop auf Twitter

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ab und zu muss oder möchte man Anpassungen an der eigenen Seite vornehmen, will aber nicht, dass währenddessen Besucher die Seite aufrufen können. Tritt ein solcher Fall ein, kann man WordPress in den Wartungsmodus versetzen. Man selbst hat dann vollen Zugriff auf die Website, Besucher hingegen bekommen eine alternative Seite angezeigt.

Mit einem Plugin wie WP Maintenance Mode ist der Wartungsmodus schnell hergestellt. Das Plugin ist auch sehr komfortabel und erlaubt verschiedene Designs und Einstellungsmöglichkeiten. Wenn man kein Plugin verwenden möchte und die Seite „nur mal eben“ in den Wartungsmodus versetzen muss, reicht aber auch eine Anpassung in der functions.php.

Wartungsmodus in der functions.php aktivieren

Fügt einfach folgende Zeilen in die functions.php ein. Alle Besucher die keine Administratoren sind, oder die nicht eingelogged sind, sehen anschließend eine Wartungsseite.

// Wartungsmodus 
function kb_wartungsmodus() {
if ( !current_user_can( 'edit_themes' ) || !is_user_logged_in() ) { 
	wp_die('
		<h1>Wir aktualisieren unsere Website</h1>
		<p>Im Moment arbeiten wir an dieser Website. Bitte schauen Sie in Kürze noch einmal vorbei.</p>
		<p>Sie erreichen uns in der Zwischenzeit per <a href="#">E-Mail</a>.</p>', 'Website im Wartungsmodus');
}} 
	
add_action('get_header', 'kb_wartungsmodus');

Der Aufbau der Funktion sieht wie folgt aus:

...
wp_die('INHALT DER MELDUNG', 'TITLE-TAG');
...

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das Grafikformat SVG (Scalable Vector Graphics) erfreut sich dank hochauflösender Displays und einem zunehmend flexiblen, Performance optimiertem Webdesign größter Beliebtheit. SVG-Dateien lassen sich verlustfrei skalieren und haben eine verhältnismäßig geringe Dateigröße. Schade nur, dass die WordPress-Mediathek den Upload dieses Dateiformats bisher verbietet. Mit einer kleinen Anpassung an der functions.php behebt ihr dieses Problem.

MIME-Type für SVG hinzufügen

Fügt folgendes Snippet in die functions.php eures Themes ein. Damit wird der MIME-Type für SVG hinzugefügt. Anschließend kennt WordPress den Dateityp und verbietet den Upload nicht länger.

function kb_svg ( $svg_mime ){
	$svg_mime['svg'] = 'image/svg+xml';
	return $svg_mime;
}

add_filter( 'upload_mimes', 'kb_svg' );

Das Hinzufügen von bislang unbekannten Dateitypen ist keine Theme-Funktion. Das Snippet sollte daher eigtl. besser als Plugin eingesetzt werden, damit es aktiv bleibt, wenn das Theme gewechselt wird. Alternativ kann das obige Snippet auch innerhalb des Plugins Toolbox eingesetzt werden. Toolbox verwaltet Code-Snippets im Backend.

Links / Quellen

• Allow SVG through WordPress Media Uploader
• SVG Vektorgrafik in WordPress einbauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mein neues Buch "Webdesign mit Photoshop CS6 und CSS3" ist ab sofort im Handel erhältlich. Da CSS3 mittlerweile große Teile der Webgestaltung abdeckt, habe ich das Buch sowohl auf die gestalterischen Aspekte in Photoshop, als auch auf die Arbeit mit CSS3 ausgerichtet. Auf über 320 Seiten findet ihr daher diverse praxisorientierte Workshops.

Ziel des Buches ist es, Techniken und Arbeitsweisen zu vermitteln, mit deren Hilfe moderne, performante und flexible Weblayouts möglich sind. Viele Workshops zeige ich sowohl in CSS3 als auch mit Hilfe von Photoshop, damit ihr bei einem späteren Projekt selbst entscheiden könnt, welche Lösung geeigneter ist.

Jetzt bestellen

Inhaltsverzeichnis

Photoshop effizient konfigurieren

• Voreinstellungen festlegen
• Werkzeuge und ihre Funktionen
• Arbeitsbereiche einrichten
• Bridge und Mini Bridge
• Neue Dokumente einrichten
• Non-destruktive Arbeitsweise
• Photoshop und CSS3

Briefing und Projektplanung

• Wahrnehmung
• Zielgruppe
• Konventionen

Farben gekonnt einsetzen

• Mögliche Farbprobleme
• Farbe und Wirkung
• Farbkontraste einsetzen
• Durchdachte Farbkonzepte
• Hilfreiche Tools im Umgang mit Farben

Layoutplanung und Scribble

• Größen im Webdesign
• Seitenaufbau
• Layouttypen
• Gestaltungsraster
• Multi­Screen­Design
• Grid­Systeme, Frameworks und Tools
• Gestaltungsraster des Beispielprojekts
• Das Projekt skizzieren
• Mock­ups und Wireframes
• Style Tiles
• Prototypen

Flächen und Linien aufwerten

• Farbflächen
• White Space
• Linien und Konturen
• Transparenz
• Farbflächen verbinden

Schatten und Spiegelung

• Spiegelungen und Schatten bei 2­D­Objekten
• Spiegelungen und Schatten bei 3­D­Objekten

Muster, Strukturen, Brushes

• Muster
• Grafiken mit CSS kacheln
• Kostenlose Pattern im Netz
• Pattern mit CSS3
• Skriptbasierte Muster in Photoshop CS6
• Strukturen
• Photoshop­Brushes
• Eigene Brushes

Navigationskonzepte umsetzen

• Navigationsstrukturen
• Darstellungsformen
• Navigation platzieren
• Navigation gestalten
• Interaktionen kennzeichnen
• Navigationsmuster im Responsive Design

Texte attraktiv gestalten

• Typografie im Internet

Fotos einsetzen und optimieren

• Nach Fotos googeln?
• Bedingungen der CC­Lizenz
• Fotos aus einem Stock­Archiv
• Bildausschnitt und ­ausrichtung
• Geeignete Bildformate festlegen
• Bilder mit Bedacht spiegeln
• Bilder per HTML5 einbinden
• Bilder fürs Web aufbereiten

Illustrationen, Icons, Animationen

• Zierelemente für mehr Atmosphäre
• Icons
• Favicons
• Apple Touch Icon
• Webfont­Icons
• Animationen erstellen

Grafiken fürs Web optimieren

• Der »Für Web speichern«­Dialog
• Dateiformate im Web
• Grafiken maximal komprimieren
• Slices
• CSS­Sprites
• Layout für die Webentwicklung vorbereiten

Jetzt bestellen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn ihr regelmäßig neue WordPress-Seiten aufsetzt und einrichtet, werdet ihr auch immer wieder die gleichen Plugins installieren. Man hat halt mit der Zeit einige Plugins besonderes zu schätzen gelernt. Seit WordPress 3.5 können beliebte Plugins nun als Favorit abgespeichert, und anschließend komfortabel aus dem Backend installiert werden.

Plugin-Favoriten über WordPress.org

Um Plugins als Favorit abspeichern zu können, benötigt ihr einen WordPress.org-Benutzeraccount. Loggt euch über die Plugin-Directory ein und ruft die Seite eines guten Plugins auf. Direkt unter dem Download-Link findet ihr den Link um das Plugin zu den Favoriten hinzuzufügen.

WordPress Favoriten Plugin Installer

Wenn ihr euch ein paar brauchbare Plugins gemerkt habt, wechselt in das WordPress-Backend und ruft hier die Seite "Plugins → Installieren → Favoriten Plugin Installer" auf. Gebt nun euren WordPress.org-Benutzernamen ein, anschließend erhaltet ihr Zugriff auf die Favoriten und könnt die Plugins mit nur einem Klick installieren.

Wenn ihr den Benutzernamen eines anderen Users kennt, könnt ihr natürlich auch auf dessen Plugin-Merkliste zugreifen. In Teams oder Agenturen kann es sich daher durchaus anbieten einen Account zu teilen.

Was sind eure Favoriten?

Welche Plugins gehören bei euch zur Standard-Ausstattung? Ich würde mich freuen wenn ihr in den Kommentaren eine Liste eurer Lieblings-Plugins teilt. Inspirationen für hilfreiche Plugins kann man ja nie genug bekommen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In Photoshop CS6 werden Vektoren, Pfade und Transformationen automatisch am Pixelraster ausgerichtet. Für Webdesigner ist das normalerweise sehr praktisch, denn am Raster ausgerichtete Vektoren sind immer scharf und erzeugen keine unschönen Kanten. Doch leider rasten die Vektoren und Pfade in CS6 auch dann am Pixelraster ein, wenn man in der Optionsleiste die Checkbox „Kanten ausrichten“ deaktiviert hat. Das führt zu einiger Verwirrung, wenn man Pfade absichtlich auf halben Pixel positionieren möchte.

Die Lösung für dieses „Problem“ findet sich in den Voreinstellungen. Unter „Voreinstellungen → Allgemein“ befindet sich die Checkbox „Vektorwerkzeuge und Transformationen am Pixelraster ausrichten“.

Sobald hier der Haken deaktiviert ist, können Pfade und Vektoren wieder auf halben Pixel positioniert werden. Vorausgesetzt in der Optionsleiste wurde „Kanten ausrichten“ ebenfalls deaktiviert. Andernfalls rundet Photoshop die Pfade auf glatte Pixel.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Seit dem Update auf iOS 6 stehen in Apples mobilem Betriebssystem die sog. „Smart App Banners“ zur Verfügung. Mit Hilfe eines solchen Banners kann im mobilen Safari auf eine App im App Store hingewiesen werden, was die Downloads spürbar erhöhen kann. Neben dem App-Icon werden innerhalb des Smart Banners der Titel, der Preis und die Bewertungen der Anwendung angezeigt. Ein Button führt den Anwender zum AppStore. Wenn die App bereits installiert ist, kann über den Button die Anwendung gestartet werden.

Smart App Banners unter iOS 6+ einbinden

Wenn ihr einen Smart App Banner in eure Website integrieren wollt, so reicht ein simpler meta-Tag im head der Seite.

<meta name="apple-itunes-app" content="app-id=HIER_DIE_ID, affiliate-data=HIER_DIE_AFFILIATE_ID, app-argument=HIER_DIE_URL">

Drei Angaben sollten angepasst werden:

app-id

Hier muss die individuelle ID der App eingetragen werden. Die ID erfahrt ihr u.a. über den iTunes Link Maker. In der URL zum iTunes Store steht die ID zwischen /id und ?mt

affiliate-data (optional)

Wenn Ihr am iTunes Affiliate Programm teilnehmt, sollte hier die Partner-ID eingetragen werden

app-argument (optional)

Hier kann eine URL übergeben werden, die innerhalb der App auf eine bestimmte Position verlinkt. Wenn der Anwender die App bereits installiert hat, kann über einen Button diese Adresse direkt erreicht werden.

Nachdem der meta-Tag einbunden wurde, seht ihr unter iOS einen Banner in folgendem Stil.

Debugging unter iOS

Wenn der Banner nicht angezeigt werden sollte, prüft zunächst einmal folgende Punkte:

• Besucht ihr die Website über iOS? (iPhone, iPad, iPod)
• Ist mindestens iOS in Version 6 installiert?
• Besucht ihr die Website mit dem Gerät für das die App auch entwickelt wurde? iPad-Apps werden nur auf dem iPad angezeigt, iPhone-Apps nur auf dem iPhone
• Benutzt ihr Safari? Unter Fremdbrowsern funktionieren die Smart App Banner nicht

Smart App Banner für Android und Web-Apps

Wenn ihr die Smart App Banner auch für Android-Apps im Play Store oder für Web-Apps einsetzen möchtet, könnt ihr auf jQuery-Plugins zurückgreifen. Das folgende Script simulieren die Banner in den o.g. Systemen. Allerdings ist der Banner dann nicht mit dem App Store synchronisiert und muss inhaltlich manuell gepflegt werden. Übrigens werden mit dem "jQuery Smart Banner" auch iOS 4 und iOS 5 unterstützt.

• jQuery Smart Banner

Native Lösung unter Android?

Soweit mir bekannt ist existiert keine native Lösung unter Android. Sollte es doch eine Möglichkeit geben Smart Banner unter Android einzusetzen oder sollte eine solche Lösung in Zukunft angeboten werden, bitte ich euch um einen entsprechenden Hinweis in den Kommentaren.

Links / Quellen

• Offizielle Dokumentation von Apple

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die grafischen Elemente einer Website müssen flexibel gestaltet werden, um den Anforderungen im Responsive Webdesign zu entsprechen. Für die Gestaltung des Layouts nehmen Hintergrundgrafiken daher eine besondere Rolle ein. In diesem Video zeige ich euch welche Möglichkeiten Ihr habt CSS-Hintergründe zu skalieren oder zu transformieren und wie in diesem Zusammenhang die CSS-Eigenschaft background-size genutzt werden kann.

Das Video ist eine Lektion des Video-Trainings "Responsive Webdesign".

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor Kurzem habe ich euch das brandneue Photoshop-Plugin Enigma64 vorgestellt. Enigma64 stellt ein zusätzliches Bedienfeld für den Export von Web-Grafiken und Code zur Verfügung und beschleunigt den Workflow deutlich. Insbesondere für schnelle Prototypen setze ich das Tool umfassend ein. Ich freue mich daher besonders euch im Rahmen dieses Gewinnspiels zwei Lizenzen bereitstellen zu können. Hier erfahrt ihr wie ihr gewinnen könnt.

Was müsst ihr tun um zu gewinnen?

Die Teilnahme am Gewinnspiel ist unkompliziert. Verfasst einfach einen Kommentar zu diesem Artikel und schreibt mir mit welchen Programmen ihr eure Websites erstellt und welche Hilfsmittel ihr für eure Arbeit einsetzt.

Unter allen (sinnvollen) Kommentaren ermittle ich per Los zwei Gewinner. Bitte gebt eine gültige E-Mail-Adresse an, damit ich euch im Falle eines Gewinns kontaktieren kann. Das Gewinnspiel endet am 22.04.2013 um 12:00 Uhr.

Mit dem Verfassen eines Kommentars akzeptiert ihr die Gewinnspiel-Bedingungen. Ich wünsche euch viel Glück!

Das Gewinnspiel ist beendet. Die Gewinner wurden bereits per E-Mail über Ihren Gewinn informiert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In WordPress 3.5 wurde der Menüpunkt „Links“ (auch bekannt als Blogroll) entfernt. Wenn ihr den Bereich wiederherstellen möchtet, könnt ihr entweder das offizielle Plugin Link Manager installieren, oder eine kleine Anpassung an der functions.php des Themes vornehmen.

Blogroll über functions.php wiederherstellen

Um Links wieder verwenden zu können, reicht folgendes Snippet in der functions.php:

add_filter( 'pre_option_link_manager_enabled', '__return_true' );

Links / Quellen

• Link Manager Plugin
• How to activate link manager on WordPress 3.5 (and newer) – WP Recipes

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Es ist wieder soweit – ich möchte euch einige neue Tools, Scripte und Frameworks vorstellen, über die ich in den vergangenen Wochen gestolpert bin. Diesen Monat sind verschiedene Hilfsmittel für die Arbeit mit Prototypen, Icon-Fonts und WordPress-Themes mit von der Partie. Darüber hinaus Scripte zur Erstellung von Text-Animationen, komfortablen Formularen und Suchfeldern. Viel Spaß beim stöbern.

Frameworks

Responsable

Mit dem CSS/LESS/SCSS-Framework Responsable könnt ihr Prototypen und responsive Websites auf Grundlage einer Reihe vordefinierter Elemente herstellen. Neben einem Baseline-Grid sind beispielsweise Responsive Images auf Basis von jQuery Picture enthalten.

Mueller Grid System

Wenn ihr mit Compass arbeitet ist das responsive/adaptive Framework Mueller sicher einen Blick wert.

jFormer

jFormer ist ein auf jQuery basierendes Framework zum Erstellen von komplexen Formularen. Auch eine umfangreiche Validierung des Formulars ist möglich.

Sidetap

Sidetap ist ein Framework für mobile Websites und Applications. Unter anderem lässt sich mit Sidetap eine Off-Canvas-Navigation herstellen.

jslibraryboilerplate

Mit Hilfe der jslibraryboilerplate könnt ihr ein eigenes JavaScript-Framework aufsetzen. Genutzt werden kann pures JavaScript, CoffeeScript und TypeScript.

Proto

Mit Proto erstellt ihr schnelle Prototypen auf Basis von SCSS.

Download-Quellen

Genericons

Die Macher von WordPress (Automattic) haben mit "Genericons" ein eigenes Webfont-Icon-Set zur Verfügung gestellt.

Scripte

Blokk

Blokk ist ein Webfont für Mockups, Wireframes oder Prototypen. Der Schriftsatz zeigt lediglich Balken anstelle von Zeilen und könnte immer dann helfen, wenn Kunden anfangen Lorem Ipsum Texte zu übersetzen. Zur Beurteilung des Layouts halte ich Blokk für ungeeignet. Die dunklen Textblöcke haben ein viel stärkeres Gewicht als echte Texte das hätten. Der Eindruck entspricht daher nicht dem Endergebnis.

pdf.js

pdf.js ist ein PDF-Viewer auf Basis von JavaScript.

cssFx.js

cssFx.js ist ein Polyfill für CSS3-Funktionen in alten und neuen Browsern. Das Script fügt die notwendigen Vendor-Prefixes automatisch ein und ist sehr vergleichbar mit -Prefix-Free.

typehead.js

Mit dem jQuery-Plugin typehead.js erstellt ihr eine performante Auto-Vervollständigung für Suchfelder.

textillate.js

Mit dem Script textillate.js könnt ihr mit recht geringem Aufwand sehr ansehnliche CSS3 Text-Animationen erstellen.

Leaflet

Mit der JavaScript-Bibliothek Leaflet erstellt ihr interaktive Karten, ohne die Performance auf Smartphones zu sehr zu belasten. Das Script funktioniert in allen populären Browsern (Desktop & Mobile) und kann mit Plugins erweitert werden.

Responsive Measures

Mit dem jQuery-Plugin Responsive Measures berechnet ihr die Schriftgröße einer Website automatisch anhand des Container-Elements.

jQuery Timing

Mit jQuery Timing könnt ihr Animationen und zeitabhängige Events jeglicher Art realisieren: Wiederholungen, Timeouts, Verzögerungen etc. lassen sich kinderleicht erstellen.

Holder.js

Mit dem Script Holder.js generiert ihr frei gestaltbare Platzhalter-Grafiken, ohne dass eine Internetverbindung notwendig ist. Je nach Projekt kann das ein entscheidender Vorteil gegenüber Diensten wie Placehold.it sein.

Fabric.js

Fabric.js ist eine Javascript-Bibliothek zur Erstellung von HTML-Canvas-Elementen. Enthalten ist auch ein SVG-Converter.

Online-Tools

Am I Responsive?

Mit dem Online-Tool Am I Responsive? erstellt ihr 4-in-1-Screenshots einer Website. Das Tool dient nicht als Debug-Umgebung, sondern soll dabei helfen schnell ansprechende Screenshots zu generieren.

HSL Color Picker

Mit dem HSL Color Picker steht euch ein umfangreiches Tools zum Auswählen von Farben zur Verfügung. Der Farbwähler kann auch in die eigene Website integriert werden, der Code steht auf GitHub bereit.

Compress PNG

Mit Compress PNG konvertiert ihr (geeignete) Grafiken ins PNG8-Format und verringert die Dateigröße noch einmal erheblich.

Sonstige Quellen

WP Test

WP Test ist ein Set von Test-Inhalten zur Überprüfung eines neuen WordPress-Themes. Nach dem Import stehen in WordPress diverse Artikel, Inhalte, Medien, Kategorien und mehr zur Verfügung. Wenn hier keine Fehldarstellungen mehr erkennbar sind, sollte das Theme weitestgehend kugelsicher sein.

One Div

Auf One Div findet ihr eine Liste an Icons, die ausschließlich mit CSS realisiert wurden. Jedes Icon verwendet nur ein einziges HTML-Element als Basis.

Roots Theme

Roots ist ein Blank-Theme für WordPress auf Basis der HTML5 Boilerplate und Bootstrap. Mit Hilfe eines solchen Templates kann die Theme-Entwicklung entscheidend beschleunigt werden.

Noch mehr Tools gefällig?

Als Gedankenstütze für mich selbst, habe ich eine Website gebastelt, die alle mir bekannten Tools auflistet. Wenn ihr ein Hilfsmittel für ein bestimmtes Anwendungsgebiet sucht, werden ihr dort sicher schnell fündig.

Die Tools sind verschlagwortet und können am einfachsten über die Suche gefunden werden. Probiert es doch mal aus und sucht nach Responsive Slidshow jQuery, Retina Script oder CSS3 Tooltip.
Die Website ist noch lange nicht fertig. Für Bug-Reports, Anregungen und Hinweise bin ich euch sehr dankbar.

• Best Webdesign Tools

Das Artikelbild dieses Beitrags stammt von WP Test.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Was macht Enigma64?

Enigma64 exportiert einzelne Ebenen, Auswahlen oder ganze Dokumente mit nur einem Klick nach JPG, PNG und Base64. Zunächst werden der Pfad und die Kompressionsstufe angegeben, anschließend lassen sich die grafischen Elemente der Website viel schneller speichern als das bisher der Fall war. In Kombination mit CSS Hat stehen in Photoshop somit alle Export-Möglichkeiten zur Verfügung, die wir heute für die Web-Entwicklung brauchen:

• JPG – Enigma64
• PNG – Enigma64
• Base64-Code – Enigma64
• CSS3-Code – CSS Hat

PNG und JPG-Grafiken exportieren

Um Grafiken zu exportieren sind nur wenige Punkte zu beachten. Zunächst müsst ihr mit dem großen Button ganz oben bestimmen, dass Grafiken exportiert werden sollen. In den Einstellungen könnt ihr festlegen in welcher Kompression die JPG-Grafiken gespeichert werden sollen und ob es sich um progressive JPGs handeln soll.

Darüber hinaus könnt ihr bestimmen wohin die Grafiken gespeichert werden, und ob ihr den Namen der Ebene als Dateinamen verwenden wollt. Wenn ihr einen individuellen Dateinamen vergeben wollt, aktiviert einfach die entsprechende Checkbox. Ein Haken bei „Trim“ beschneidet die Grafik, sollte die Ebene kleiner sein als der ausgewählte Bereich.

Nun müsst ihr nur noch bestimmen ob ihr PNG- oder JPG-Grafiken erstellen wollt. Anschließend klickt ihr auf „Visible Canvas“ um die gesamte Bühne zu exportieren. Ihr könnt alternativ auch einfach eine oder mehrere Ebenen auswählen und über „Selected layers“ exportieren. In diesem Fall werden jedoch nicht mehrere Dateien erstellt, sondern ein Dokument mit dem sichtbaren Inhalt aller markierten Ebenen.
Wenn ihr lieber mit einer Auswahl arbeitet, markiert zunächst einen Bereich und klickt anschließend auf „Selection“. Hierbei wird der sichtbare Inhalt der Auswahl durch alle Ebenen hinweg kopiert.

Base64-Code exportieren

Wenn ihr Base64-Code exportieren wollt, müsst ihr den Bereich zunächst ganz oben aktivieren. Wählt aus welches Dateiformat (PNG, JPG) als Grundlage für den Base64-Code dienen soll, anschließend reicht ein Klick auf einen der Export-Buttons und der Code befindet sich in der Zwischenablage. Etwas verwirrend ist hier, dass ganz unten noch Optionen für den Bildexport angezeigt werden. Wurde in Version 1.1.0 behoben.

Die Vorteile von Base64 habe ich in meinem Artikel „Grafiken mit Data URIs (Base 64) erzeugen“ ausführlich erklärt.

Enigma 1.1.0

Enigma ist in Version 1.1.0 erschienen. Neben einigen Fehlerkorrekturen ist die wohl wichtigste Verbesserung der Export nach PNG8. In den Optionen kann zwischen PNG24 und PNG8 gewechselt werden. Alternativ reicht ein Klick auf die PNG-Schaltfläche um zwischen den beiden Varianten von PNG zu wechseln.

Videos zu Enigma64

Links / Quellen:

• Enigma64 – Offizielle Website
• Enigma64 Changelog

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Webdesign ist aktuell der heißeste Trend der Webdesign-Szene. Aus diesem Grund freue ich mich besonders, euch mein neues Video-Training zu diesem Thema vorstellen zu dürfen. Die bei Galileo Press erschienene DVD kann bereits bei Amazon bestellt werden. Im Buchhandel ist sie ab Ende des Monats erhältlich.
Euch erwarten über 8 Stunden praxisorientiertes Know-how rund um Responsive Webdesign und moderne Webentwicklung. Die Trailer und ein detailliertes Inhaltsverzeichnis findet ihr hier.

Trailer

Wenn ihr einen schnellen Überblick über die Inhalte der DVD haben wollt, schaut euch am besten den Trailer an.

Produktbeschreibung:

Das Praxis-Training für den neuen Webdesign-Standard! Der Webexperte Jonas Hellwig zeigt Ihnen, wie Sie Ihre Webseiten mit HTML5 und CSS3 für alle Geräte und Auflösungen aufbereiten. Mit diesem Training sind Sie am Puls der Zeit und lernen, wie Sie Responsive Webdesign richtig einsetzen.

Machen Sie mit bei zahlreichen Praxisworkshops und entwickeln Sie flexible Designkonzepte, mit denen Sie die Besucher auf Ihren Seiten halten - egal ob auf dem iPad, einem Android-Smartphone oder am Windows-PC.

Jetzt bei Amazon kaufen

Inhaltsverzeichnis:

Vom statischen zum flexiblen Design

1. Einleitung
2. Die mobile Evolution
3. Lösungsansätze für mobile Seiten
4. Was ist Responsive Webdesign?
5. Viewport-Varianten berücksichtigen
6. Weblayouts im Überblick: Fixed, Fluid, Elastic
7. Pixelmaße in Prozentwerte wandeln
8. Breakpoints und Media Queries
9. Adaptive und Responsive Design im Vergleich
10. Der Meta-Viewport

Best Practices für Responsive Webdesign

1. Einleitung
2. Design für Touch-Screens
3. Neue Layout-Muster
4. Mobile Navigationskonzepte
5. Flexible Bilder aufbereiten
6. Flexible Videos erzeugen
7. Slider und Carousel-Präsentation

Der Webdesign-Workflow

1. Einleitung
2. Der neue Design-Prozess
3. Graceful Degradation – Webseiten vereinfachen
4. Mobile First, Content First
5. Klassische Gestaltungsraster
6. Workflow für Adaptive Webdesign
7. Flüssige Gestaltungsraster entwerfen
8. Prototypen entwickeln
9. Foundation und Bootstrap
10. Mit Style-Tiles arbeiten

Reaktionsfähige Webprojekte anlegen und testen

1. Einleitung
2. Browser als Entwicklungsumgebung
3. Nützliche Werkzeuge im Internet
4. Simulatoren und Emulatoren
5. Webdesigns testen mit Adobe Edge Inspect
6. HTML5 Boilerplate, Modernizr & Co.
7. Frameworks für Adaptive Design
8. Frameworks für Responsive Design
9. Fließende Rasterlayouts anlegen mit Adobe Dreamweaver CS6

Design und Typografie für moderne Webseiten

1. Einleitung
2. Relative Schriftgrößen
3. Flexibel gestalten mit CSS3
4. Endlosmuster entwerfen
5. Pixelgrafiken mit CSS3 verzerren
6. Rauschüberlagerung mit CSS3
7. Webfonts verwenden
8. Webfont-Icons einsetzen
9. Schriften optimieren
10. Responsive Typography

Fehlersuche und Optimierung

1. Einleitung
2. Hintergründe optimieren
3. Bilder im HTML-Code austauschen
4. Reaktionsfähige Tabellen umsetzen
5. Image-Maps verwenden
6. CSS-Sprites im Responsive Design
7. Bilder richtig komprimieren
8. Webclip-Icons verwenden
9. Die Performance verbessern
10. Browser-Probleme beheben
11. Formulare optimieren

Praxisprojekt »Graceful Degradation«

1. Einleitung
2. Inhalt und Konzeption
3. Die HTML-Struktur des Projekts
4. Den Prototyp entwerfen
5. Media Queries einsetzen
6. Das Design umsetzen
7. Die Navigation optimieren

Praxisprojekt »Mobile First«

1. Einleitung
2. Inhalt und Konzeption
3. Mockup und HTML-Basis entwickeln
4. Den Prototyp anlegen
5. Breakpoints hinzufügen
6. Eine Navigation als Select-Liste
7. Eine Off-Canvas-Navigation umsetzen
8. Das Design entwickeln

Responsive Webdesign für Retina-Displays

1. Einleitung
2. Probleme mit Retina-Displays
3. Grafiken optimieren und integrieren
4. CSS-Sprites verbessern
5. SVG-Grafiken erstellen und einbinden
6. Hilfreiche Skripte

Einführung in Adobe Edge Reflow

1. Einleitung
2. Die Oberfläche von Edge Reflow
3. Flüssige Raster entwickeln
4. Boxen erstellen und gestalten
5. Typographie mit Adobe Edge Reflow
6. Das Layout umstrukturieren
7. Optimierung und Browser-Vorschau

Jetzt bei Amazon kaufen

Probe-Lektion: Breakpoints und Media Queries einsetzen

In diesem Video zeige ich euch wie Ihr mit Hilfe von Media Queries das Layout einer Website in Grenzbereichen umstrukturiert. Dabei setzen wir Media Queries sowohl in der klassischen Variante (max-width) als auch nach dem Mobile-First-Prinzip (min-width) ein und lernen auch die technischen Hintergründe der CSS-Technologie kennen.

Probe-Lektion: Mobile First, Content First

"Mobile First" ist eines der prominenteren Stichworte im Umfeld von Responsive Design. In diesem Video erkläre ich die konzeptionellen Hintergründe und zeige die technische Umsetzung mit CSS3 an einem Beispiel.

Probe-Lektion: Rauschüberlagerung mit CSS3

Mit CSS3 erzeugte Grafiken haben oft eine zu glatte, technische Darstellung ohne eine Körnung. In diesem Video zeige ich euch, wie Ihr die Flexibilität von CSS3-Grafiken mit der detaillierten Gestaltung einer Pixelgrafik kombinieren könnt.

Probe-Lektion: Hintergründe optimieren

Die grafischen Elemente einer Website müssen flexibel gestaltet werden, um den Anforderungen im Responsive Webdesign zu entsprechen. In diesem Video zeige ich euch welche Möglichkeiten es im Bereich der CSS-Hintergründe gibt und wie die CSS-Eigenschaft background-size genutzt werden kann.

Probe-Lektion: Den Prototypen anlegen

Ein Großteil des "responsive Workflows" geschieht direkt im Browser. In diesem Video zeige ich euch wie nach dem "Mobile First"-Prinzip ein Prototyp live im Browser entwickelt wird. Diese Ausgangsbasis wird dann Stück für Stück technisch und optisch erweitert.

Wenn ihr Fragen zur DVD habt, meldet euch gerne per E-Mail oder über die Kommentar-Funktion dieser Seite.

Jetzt bei Amazon kaufen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit dem CSS Befehl box-sizing: border-box; lässt sich das Box Model von CSS manipulieren. Die sichtbare Breite eines Elements wird dann nicht mehr wie üblich durch die Summe von width, padding und border bestimmt, sondern schließt diese Angaben bereits mit ein. Das erleichtert die Erstellung flexibler Seitenelemente, insbesondere im RWD, deutlich.

Was stört am klassischen Box-Model?

Normalerweise addiert das Box Model von CSS die Angaben von padding und border zur Breite (width) des Elements hinzu. Auch die Größe von margin wird hinzugefügt; da margin jedoch keinen Einfluss auf die sichtbare Breite des Elements hat, lasse ich diesen Punkt in diesem Zusammenhang mal außer acht.

Ein Container mit einer Breite von 100 Pixeln, einem padding von 20 Pixeln und einer Umrahmung von 1 Pixel nimmt also tatsächlich 142 Pixel in Anspruch. 1px border-left + 20px padding-left + width + 20px padding-right + 1px border-right = 142 Pixel Gesamtbreite.

In der Praxis ist dieses Verhalten sehr unpraktisch. Insbesondere wenn Prozentwerte für die Breite des Elements in Kombination mit pixelbasierten padding- oder border-Angaben verwendet werden kann es schnell zu Rundungsproblemen kommen.

Funktionsweise von box-sizing: border-box;

Mit der CSS-Eigenschaft box-sizing: border-box; kann das Box Model verändert werden. Die Breite des Elements wird dann anhand der „Border Box“ berechnet. Wird einem Element eine Breite (width) von 200 Pixeln zugewiesen, so nimmt das Element dank box-sizing auch 200 Pixel in Anspruch. padding und border werden nach innen berechnet.

Browser-Support und Polyfills

Der Browser-Support für box-sizing: border-box; sieht sehr gut aus. Alle modernen Browser unterstützen die Eigenschaft. Mozilla und Webkit brauchen allerdings noch einen Vendor-Prefix.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

In den Internet Explorern 6 und 7 funktioniert die Eigenschaft nicht. Zu diesem Zweck gibt es allerdings ein Polyfill was Abhilfe schafft und sehr einfach einzusetzen ist.
Zunächst muss eine .htc-Datei heruntergeladen werden. Im zweiten Schritt reicht der Befehl *behavior: url(/scripts/boxsizing.htc); aus, um die Datei anzusprechen. Das war auch schon alles.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(/scripts/boxsizing.htc);

Links / Quellen

• Box Sizing Border Box FTW - Paul Irish
• Box Modell - SelfHTML
• Box Sizing Polyfill - Github

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einiger Zeit habe ich drei Möglichkeiten verglichen CSS3-Code aus Photoshop zu exportieren. Der klare Gewinner meines Tests war CSS Hat, ein kostenpflichtiges Plugin für Photoshop, dass ich selbst täglich einsetze und wärmstens empfehlen kann. Ich freue mich daher sehr, dass die netten Entwickler aus Prag sich bereit erklärt haben, zwei Lizenzen im Wert von je 29.99$ für dieses Gewinnspiel zur Verfügung zu stellen. Was ihr tun müsst um zu gewinnen erfahrt ihr hier.

Wie funktioniert CSS Hat?

CSS Hat konvertiert Ebenenstile und Vektor-Formen in einwandfreien CSS3-Code. Neben CSS stehen auch die Präprozessoren LESS, SCSS, SASS, Stylus und Stylus CSS zur Auswahl.

Sobald das Plugin installiert ist findet ihr in Photoshop ein neues Bedienfeld. Hier wird der Code in Echtzeit angezeigt und kann per Klick kopiert werden. Im Fuß des Bedienfeldes findet ihr zusätzlich noch erweiterte Optionen zur Code-Ausgabe. Ihr könnt z.B. festlegen, ob der Ebenenname als Klasse verwendet werden soll, ob auch die Dimensionen berücksichtigt werden sollen und ob ihr Vendor-Prefixes integrieren möchtet.

Was müsst ihr tun um zu gewinnen?

Die Teilnahme ist wie immer äußerst unkompliziert. Verfasst einfach einen Kommentar zu diesem Artikel und schreibt mir wie euer Webdesign-Workflow im Moment aussieht. Welche Programme und Plugins nutzt ihr? Wie arbeitet ihr? Was wollt ihr in Zukunft ändern?

Unter allen (sinnvollen) Kommentaren ermittle ich per Los zwei Gewinner. Bitte gebt eine gültige E-Mail-Adresse an, damit ich euch im Falle eines Gewinns kontaktieren kann. Das Gewinnspiel endet am 15.03.2013 um 09:00 Uhr.

Mit dem Verfassen eines Kommentars akzeptiert ihr die Gewinnspiel-Bedingungen. Ich wünsche euch viel Glück!

Das Gewinnspiel ist beendet.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

CSS-Hintergrundgestaltung mit Data URI

Der Base64-Code wird in CSS wie folgt verwendet. Wie bei der Arbeit mit Pixelbildern wird der Code als background eingefügt und kann auch gekachelt werden.

.selector {
   background:url( /* Base64-Code */ ) repeat;
}

Das folgende Beispiel zeigt die Hintergrundgestaltung einer Website auf Grundlage einer Data URI. Der Code ist bereits bei kleinen Grafiken sehr umfangreich. Ich möchte ihn dennoch zumindest einmal in diesem Artikel vollständig abbilden.

Beispiel anzeigen

body {
	background: white url(data:image/png;base64,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) repeat;
}

HTML-Tags mit Data URI

Ihr könnt auch img-Tags verwenden um Base64-Grafiken einzubinden. Der Syntax sieht dann so aus:

<img width="300" height="342" alt="kulturbanause Logo" src=" <!-- Base 64 Code -->" />

Das folgende Beispiel zeigt die Einbindung als HTML-Tag.

Beispiel anzeigen

Bilder in Data URIs umwandeln

Data URIs sind recht komplex. Der einfachste Weg zu Base64-Bildern führt daher über Hilfsmittel zur Konvertierung. In diesen Online-Tools ladet ihr eine Grafik hoch und erhaltet den entsprechenden Code als Ausgabe. Je größer und komplexer die Grafik ist, desto länger wird auch die Zeichenkette.

Eine Liste an Tools zum Thema Data URI findet ihr hier.

Base64 Pattern online erstellen

Mit Patternify, einem Tool das ich schon vor langer Zeit vorgestellt habe, ist es möglich Endlosmuster online zu erstellen. Diese Endlosmuster können auch als Base 64 Code ausgegeben werden.

Performance als Design-Faktor

Die Performance einer Website ist wichtiger denn je. Mit dem Einsatz von Data URIs spart ihr HTTP-Requests was den Seitenaufbau beschleunigen kann. Man sollte nur darauf achten, dass der sehr umfangreiche Base64-Code nicht inperformanter wird als eine Pixelgrafik.

Photoshop-Plugin für Base64-Export – Enigma64

Enigma64 ist ein kostenpflichtiges Photoshop-Plugin mit dessen Hilfe ihr u.a. auch Base64-Code aus Photoshop exportieren könnt. Darüber hinaus beschleunigt das Tool den Webdesign-Wrokflow erheblich. Einen ausführlichen Artikel zu Enigma findet ihr hier.

Quellen / Links

• Photoshop-Plugin Enigma64
• Browser-Support von Data URIs – Can I Use
• Data URIs – CSS Tricks

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit Hilfe der CSS-Pseudoklasse :target können recht komplexe Techniken ohne den Einsatz von JavaScript realisiert werden. Häufig wird :target in letzter Zeit im Zusammenhang mit Slider- oder Off-Canvas-Effekten im responsive Design erwähnt. Doch wie funktioniert die Pseudoklasse überhaupt?

Wofür braucht man :target?

Mit :target könnt ihr prüfen, ob ein Ankeridentifikator angesprochen wurde. Das ist zum Beispiel der Fall wenn ihr einen Link auf eine ID setzt oder einen Anker verwendet. Das folgende Beispiel zeigt einen Link dessen Ziel eine ID ist. Sofern sich ein Element mit dieser ID auf der Seite befindet, springt die Ansicht zu dieser Stelle.

<a href="#test">Klick mich</a> 

Wenn der Link angeklickt wird, verändert sich auch die URL der Seite. Die Adresse http://kulturbanause.de würde nach dem Klick so aussehen: http://kulturbanause.de#test. Daran ist auch im nachhinein erkennbar, dass dieser Ankeridentifikator gerade angesprochen wurde.

Mit der Pseudoklasse :target kann nun geprüft werden, ob sich eine ID gerade im Ziel befindet und folglich in der Adressleiste steht. :target funktioniert allerdings nur, wenn die ID auf der Seite auch existiert.
Wir erweitern den Beispiel-Code daher ein wenig und fügen die ID in den body ein:

<body id="test">
  <a href="#test">Klick mich</a>
</body>

Jetzt prüfen wir mit CSS, ob die ID #test angesprochen wurde. Wenn das der Fall ist, wird der Hintergrund des Elements mit dieser ID (in diesem Fall der body selbst) rot eingefärbt.

#test:target  { background:red; }

Wenn wir das Beispiel um einen zweiten Hyperlink ohne Ziel erweitern, kann der Effekt zurückgesetzt werden.

<body id="test">
  <a href="#test">Klick mich</a><br />
  <a href="#">Reset</a>
</body>

Eine Live-Demo dieses Beispiels könnt ihr euch hier anschauen:

Beispiel öffnen

Mehrere Elemente verändern

Wir haben die ID auf den body gesetzt, was es einfach macht auch untergeordnete Elemente zu verändern. Ich habe einen div und eine h1 hinzugefügt und verändere nun Position, Größe und Farbe mit Hilfe der übergeordneten ID des body.

Eine Live-Demo könnt ihr euch hier anschauen:

Beispiel öffnen

<body id="test">
  <a href="#test">Klick mich</a><br />
  <a href="#">Reset</a>
  <div>
    <h1>kulturbanause.de</h1>
  </div>
</body>

h1, div { 
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

h1 {font-size:100%;}

div {
	position: absolute;
	top: 50px;
	left: 0;
	padding: 10px 20px;
	background:#eee;
}

#test:target div {
	background: #0C0;
	left: 200px;
}

#test:target h1 { font-size: 200%;}

Off-Canvas-Navigation mit :target

Das folgende Beispiel setzt den Off-Canvas-Effekt mit Hilfe von :target um. Es geht mir darum die elementare Funktion zu verdeutlichen. Der Code kann nicht ohne Optimierung für Live-Projekte verwendet werden.

Eine Live-Demo des Beispiels findet ihr hier:

Beispiel öffnen

<body id="openNav">
  <div class="navMain"> 
  </div>

  <div id="content">
    <a href="#openNav" id="openBtn">Open Navi</a>
    <a href="#closeNav" id="closeBtn">Close Navi</a>

    <h1>Off-Canvas mit :target</h1>
    <p>Hier steht der Inhalt</p>
  </div>
</body>

* {
	margin:0;
	padding:0;
}

html, body {
	height:100%;
	overflow-x:hidden;
}

.navMain, #content { 
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.navMain {
	width:240px;
	height:100%;
	position:fixed;
	left:-240px;
	background:gray;
}

#content {
	margin-left:20px;
	padding-top:20px;
}

#openBtn, 
#closeBtn {
	width:40px; 
	height:40px; 
	margin:0 0 20px 0; 
	color:white; 
	padding:10px;
}

#openBtn {
	background:green; 
	display:block;
}

#closeBtn {display:none;}


/* if nav open */

#openNav:target .navMain {left:0;}

#openNav:target #content {
	margin-left:260px;
	position:fixed;
}

#openNav:target #openBtn {display:none;}

#openNav:target #closeBtn {
	display:block; 
	background:red;
}

Nachteile

Mit :target lassen sich interessante Effekte erzeugen, doch die Technik hat auch Nachteile.

• Die URL muss verändert werden und der Effekt funktioniert nur, wenn hier eine Anpassung möglich ist
• Der Effekt basiert auf IDs, mit Klassen funktioniert es nicht. Es ist aber nicht möglich mehrere IDs auf ein Objekt anzuwenden, :target hat daher seine Grenzen
• Der Besucher springt bei einem Klick auf den Anker natürlich zu entsprechender Stelle
• Der Browser-Support ist auf moderne Browser beschränkt

Quellen / Links

• Polyfill für CSS-Pseudoklassen
• CSS Spezifikation
• CSS 3: Die :target-Pseudoklasse

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Auch in diesem Monat möchte ich euch die neuen Tools und Scripte über die gestolpert bin nicht vorenthalten. Angefangen bei Hilfsmitteln zur Berechnung von Prozentwerten im RWD, über Code-Generatoren für WordPress-Themes und CSS3-Animationen bis hin zu Debuggern, Emulatoren und praktischen JavaScripten. Es ist für jeden etwas dabei.

Frameworks

ProFound Grid

Wenn ihr mit SCSS arbeitet und euch für Responsive Webdesign interessiert, ist ProFound Grid definitiv einen Blick wert. Das Framework ist sehr flexibel und ermöglicht flüssige und starre Raster.

Groundwork

Groundwork ist ein umfangreiches Responsive Framework auf Basis von SASS und Compass.

Online-Tools

Modern IE

Auf modern.ie stellt Microsoft umfangreiche Informationen und Test-Möglichkeiten für den Internet Explorer 10 zur Verfügung. Mit Hilfe dieser Website soll Webentwicklern die Optimierung für den Internet Explorer erleichtert werden. Vielen Dank an Mat für die Info zu dieser Seite.

GenerateWP

GenerateWP stellt verschiedene Code-Generatoren zur Entwicklung individueller WordPress-Themes bereit. Ihr findet u.a. einen Taxonomy Generator, einen Post Type Generator, einen Post Status Generator, einen Sidebar Generator, einen Menu Generator und einen Theme Support Generator for WordPress. Fantastisch!

Animation Fill Code

Mit dem Online-Tool "Animation Fill Code" könnt ihr euch den benötigten CSS-Code für Keyframe-Animationen generieren lassen. Sehr praktisch, da Keyframe-Animationen lästig zu schreiben sind. Das Tool berücksichtigt auch Vendor-Prefixes.

The Responsive Calculator

Mit dem Responsive Calculator berechnet ihr das Verhältnis zwischen Eltern- und Kind-Elementen in Prozent. Sehr praktisch, wenngleich ein Taschenrechner auch funktioniert.

Font2Web

Font2Web konvertiert Schriften (TrueType, OpenType) in die Webfont kompatiblen Formate .ttf, .otf, .eot, .woff und .svg. Auch der entsprechende CSS-Code wird mitgeliefert.

Hailpixel

Mit Hailpixel könnt ihr auf sehr intuitive Weise Farbsets erstellen.

Opera Mini Simulator

Der Opera Mini Simulator ist ein Online-Tool zur Simulation des Opera-Browsers auf sog. Feature Phones.

Cover Compliance Tool

Facebook hat in den Guidelines eingeführt, dass ein Coverfoto maximal 20% Text enthalten darf. Dieses simple Online-Tool hilft euch dabei die 20% abzuschätzen. Weitere Hilfe zur Facebook-Page-Anpassung findet ihr auch in meinen Cheatsheet zum Thema.

Fontello

Mit dem Online-Tool/Generator Fontello könnt ihr euch eigene Webfont-Icon-Sets zusammenstellen.

WP Fill Me

Auf WP Fill Me könnt ihr Test-Inhalte für WordPress erstellen lassen. Wählt aus der Liste verschiedene HTML-Elemente aus und generiert den entsprechenden Code. Anschließend fügt ihr die Struktur im WordPress-Editor wieder ein. Sehr praktisch!

WP Function Me

Auf WP Function Me stehen verschiedene, häufig benötigte Code-Snippets für die functions.php des Themes zur Auswahl. Markiert die gewünschten Bausteine und generiert anschließend den entsprechenden Code.

Desktop-Anwendungen

Opera Mobile Emulator

Diese Desktop-Anwendung emuliert den Opera Browser auf diversen Tablets und Smartphones. Nicht nur die Auswahl an Hardware ist sehr umfangreich, auch die Einstellungsmöglichkeiten sind sehr ausgefeilt. Ein super Tool für den Einsatz im Responsive Web Design.

Scripte

jQuery Custom Content Scroller

Mit dem jQuery-Plugin jQuery Custom Content Scroller erstellt ihr individuell gestaltete Scrollbars.

Motio

Mit Motio erstellt ihr Sprite-Animationen mit Hilfe des JavaScript-Frameworks jQuery. Die Website zeigt einige interessante Beispiele.

Conditionizr

Mit Conditionizr könnt ihr CSS- und JavaScript-Code nur für ausgewählte Browser, Bildschirmauflösungen und/oder Betriebssysteme ausgeben. Also vergleichbar mit Conditional Comments, nur eben als Script für JavaScript, CSS und Retina. Darüber hinaus arbeitet das Script optimal mit Modernizr zusammen, und fügt nach dem selben Prinzip CSS-Klassen in den html-Tag ein.

Toolbar.js

Mit Toolbar.js erstellt ihr im Handumdrehen attraktive Toolbars im Look eines Tooltips. Die Optionsleisten können beliebig positioniert werden und enthalten eine klassische HTML-Liste.

Pickadate.js

Wer einen Datepicker auf jQuery-Basis sucht, sollte sich Pickadate.js einmal anschauen. Der Kalender eignet sich sogar für den Einsatz im RWD.

The Heads-Up Grid

Mit Hilfe des Scripts "The Heads-Up-Grid" kann ein (responsive) Raster über der Website eingeblendet werden. Das erleichtert die Webentwicklung im Browser enorm.

FlexNav

Mit FlexNav könnt ihr komplexe Multi-Level-Navigationen für responsive Websites herstellen.

Hint.css

Mit Hint.css erstellt ihr hübsche Tooltips auf Basis von CSS (SASS) und HTML5.

Responsive Img

Mit Responsive Img könnt ihr bereits existierende Bilder "responsive" machen. Das Script arbeitet sehr ähnlich wie Adaptive Images und benötigt eine winzige Anpassung auf dem Server. Ein großer Vorteil: Scripte dieser Art lassen sich in Zukunft wieder restlos entfernen.

Behave.js

Mit Hilfe von Behave.js wandelt ihr eine ganz normale Textarea in einen komfortablen Mini-Code-Editor um.

Download-Quellen

Raphaël Icon-Set via @font-face

Mit diesem Webfont-Icon-Set könnt ihr eure Website mit schicken Vektor-Icons aufwerten.

Noch mehr Tools gefällig?

Als Gedankenstütze für mich selbst, habe ich eine Website gebastelt, die alle mir bekannten Tools auflistet. Wenn ihr ein Hilfsmittel für ein bestimmtes Anwendungsgebiet sucht, werden ihr dort sicher schnell fündig.

Die Tools sind verschlagwortet und können am einfachsten über die Suche gefunden werden. Probiert es doch mal aus und sucht nach Responsive Slidshow jQuery, Retina Script oder CSS3 Tooltip.
Die Website ist noch lange nicht fertig. Für Bug-Reports, Anregungen und Hinweise bin ich euch sehr dankbar.

• Best Webdesign Tools

Das Artikelbild dieses Beitrags stammt von Profound-Grid.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das Interface von Windows 8 zeichnet sich u.a. durch bunte Kacheln mit einfarbigen weißen Icons im Startmenü aus. Neben Programmicons können hier auch Websites „angeheftet“ werden um vom Startmenü aus einen Schnellzugriff auf die Seite zu ermöglichen. Mit einer kleinen Anpassung im head der Website können Titel, Farbe und Icon dieses „Tile Icons“ festgelegt werden.

Tile Icon erstellen

Zunächst sollte ein Tile Icon in der Größe von 144x144 Pixeln und mit transparentem Hintergrund erstellt werden. Farbige Icons sind zwar auch möglich, entsprechend der Design-Guideline von Windows fügen sich einfarbige Icons aber besser in den Gesamtlook ein. Speichert das Icon im PNG-Format ab und verschiebt es ins Stammverzeichnis der Website. Hier dürften bereits ein Favicon und ein Apple Touch Icon liegen.

Meta-Tags für Tile Icons

Nun muss eine Anpassung am Quellcode der Website vorgenommen werden. Kopiert folgende Meta-Tags in den head und passt die Inhalte an. Neben dem Titel der Kachel und dem Pfad zum bereits erstellten Icon, muss eine Hintergrundfarbe angegeben werden. Hier sind Hexadezimal und RGB-Werte möglich. Der Titel sollte nicht länger als 2x 13 Zeichen sein, ansonsten wird er abgeschnitten (Danke an Michael für die Info).

<meta name="application-name" content="kulturbanause">   
<meta name="msapplication-TileImage" content="tile-icon.png">
<meta name="msapplication-TileColor" content="#014454">

Websites zum Startmenü hinzufügen

Wenn alle Änderungen gespeichert und hochgeladen sind, kann die Website im Internet Explorer 10 über den Button „An Start anheften“ zum Startmenü hinzugefügt werden.

Anschließend kann das Tile Icon wie alle anderen Kacheln auch positioniert werden. Per Klick öffnet sich die Website im IE10.

Windows Tile Icon unter Windows Phone 8

Bedauerlicherweise scheint das Tile Icon unter Windows Phone 8 nicht zu funktionieren. Wenn du mehr weißt, freue ich mich auf deinen Kommentar.

Links / Quellen:

• Build my pinned site
• Tile design guidelines for Windows Phone
• Mobile HTML5 Boilerplate
• High Quality Visuals for Pinned Sites in Windows 8
• Add your web site to the Windows 8 Metro UI

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Webdesign stellt Designer vor eine Herausforderung: es müssen flexible Layouts auf Basis von Prozentwerten gestaltet werden, obwohl innerhalb der Grafikprogramme Pixelwerte verwendet werden. Designer müssen daher während der gesamten Gestaltungsphase im Hinterkopf haben, dass alle Spalten des Designs später in der Breite variabel sind. Der klassische Workflow stößt hier an seine Grenzen, da es wenig Sinn macht, zunächst unzählige statische Layouts zu entwerfen und diese anschließend in eine flexible Website umzuwandeln. Aus diesem Grund wird direkt zu Beginn des Projektes ein sog. interaktiver Prototyp erstellt, der die gesamte Flexibilität abbilden kann. Anschließend wird die Gestaltung der Website und die technische Umsetzung mit HTML, CSS und JavaScript parallel vorangetrieben. Mit Adobe Edge Reflow ist jetzt das erste Programm erschienen, das den Workflow im Responsive Webdesign abbilden kann.

Wie funktioniert Adobe Edge Reflow?

Edge Reflow ist eine Art Hybridlösung zwischen Illustrator, Fireworks und Dreamweaver. Auf der Arbeitsfläche wird das Web-Layout mit Hilfe simpler Formen zusammengestellt, im Hintergrund schreibt das Tool jedoch HTML- und CSS-Code. Die verschiedenen Elemente der Website werden innerhalb des Rasters platziert und können mit gestalterischen Effekten versehen werden. Hier stehen hauptsächlich die Möglichkeiten von CSS3 zur Verfügung, es können jedoch auch Grafiken eingebunden werden.

Breakpoints im Layoutprogramm

Der große Unterschied zu allen anderen Programmen ist die Möglichkeit Breakpoints zu setzen. Über einen Schieberegler auf der rechten Seite kann die Arbeitsfläche gestaucht werden. Dabei verhalten sich alle Elemente flüssig - entsprechend des gewählten Rasters.

Reflow is not meant to replace Photoshop/Fireworks for design or Dreamweaver/Edge Code for development, but to provide a place to explore responsive layouts and design using standards based CSS on a web based design surface.

Sobald das Design nicht mehr funktioniert, kann über einen Button ein Breakpoint gesetzt werden. Anschließend werden gestalterische Anpassungen vorgenommen. Über farbige Balken am oberen Ende der Arbeitsfläche kann zwischen den Breakpoints unterschieden werden.

Edge Reflow kann im Rahmen einer kostenlosen Creative Cloud Mitgliedschaft heruntergeladen werden.

Download Edge Reflow

Die Benutzeroberfläche

Das Interface von Edge Reflow ist unterteilt in folgende inhaltliche Bereiche:

• Arbeitsfläche mit Schieberegler (grün)
• Media Query Leiste (blau)
• Werkzeugauswahl (violett)
• Eigenschaften-Leiste mit den Tabs „Layout“ und „Styling“ (orange)
• Canvas Bar (gelb)
• Icon für Adobe Edge Inspect (rot)

Arbeitsfläche

Die Arbeitsfläche ist beim Erstellen einer neuen Datei automatisch mit einem 12er-Raster unterteilt, was der Arbeitsweise vieler aktueller Frameworks entspricht. Darüber hinaus ist ein 12er Raster sehr flexibel und bietet sich für die meisten Websites gut an. Das Raster kann in der Eigenschaften-Leiste detailliert angepasst werden.

Über den Schieberegler rechts neben der Arbeitsfläche kann die Breite der Bühne stufenlos verändert werden. Dabei skalieren sich das Raster sowie alle Elemente auf der Bühne.

Media Query-Leiste

Die Media Query-Leiste zeigt die verschiedenen angelegten Media Queries an. Per Klick auf einen Bereich kann zwischen den Media Queries gewechselt werden. Über den Button rechts neben der Leiste wird ein neuer Media Query hinzugefügt. Der Breakpoint wird entsprechend der aktuellen Breite der Arbeitsfläche gesetzt.

Wenn ihr auf das "+"-Icon klickt und etwas länger gedrückt haltet, öffnet sich ein neues Menü mit detaillierten Optionen. Hier kann der exakte Pixelwert des Breakpoint eingestellt und ein Name vergeben werden. Ihr könnt auch festlegen, ob der Media Query mit einer max- oder min-Angabe (mobile First) geschrieben wird.

Werkzeuge

Die Werkzeuge von Reflow sind äußerst übersichtlich.

• Mit dem Auswahl- / Verschieben-Werkzeug werden die Elemente auf der Arbeitsfläche ausgewählt, verschoben oder transformiert. Die Optionen in der Eigenschaften-Leiste ändern sich entsprechend des aktiven Elements.
• Mit dem Box-Werkzeug werden neue Elemente gezeichnet, oder bestehende Elemente verändert.
• Das Text-Werkzeug erzeugt per Klick einen Text, alternativ kann ein Textrahmen aufgezogen werden.
• Das Bild-Werkzeug ermöglicht das Einfügen von externen Bildquellen.

Eigenschaftenleiste / Eigenschaften-Inspector

Die Eigenschaftenleiste erlaubt Einstellungen in Abhängigkeit zum gerade aktiven Element. Wenn das Container-Element ausgewählt ist, kann das Raster editiert werden.
Im Bereich „Layout“ werden Einstellungen zu Größe, Padding, Margin, Floating-Modell etc. festgelegt. Im Bereich „Styling“ werden die Elemente mit Farben, Schatten, Verläufen etc. ausgestattet.
Normalerweise betrifft die Änderung einer Eigenschaft nur den aktuellen Media Query. Bei vielen Angaben erscheint jedoch per MouseOver über dem Eingabefeld ein weiterer Button (siehe Abb.). Wird hier geklickt, übernimmt Reflow die Eigenschaft für alle Media Queries.

Einige Eigenschaften werden farblich hinterlegt. Daran erkennt ihr in welchen Media Queries die Eigenschaft definiert wurde und ob eine Vererbung stattfindet.

Canvas Bar

Die Canvas-Bar (Leinwand-Leiste?) zeigt den Pfad der Elemente an und beschreibt wie die HTML-Objekte auf der Bühne verschachtelt sind. Per Klick kann ein Element ausgewählt werden, was die Navigation innerhalb der Website enorm erleichtert. Wenn ihr das „<>“-Icon neben dem aktuellen Element anklickt, erscheint ein Pop-Up mit den CSS-Eigenschaften.

Edge Inspect

Mit einem Klick auf den „Edge Inspect“-Button, kann eine Synchronisation zwischen verschiedenen mobilen Endgeräten hergestellt werden. Mehr über Edge Inspect erfahrt ihr hier.

Edge Reflow Tutorial

Ich möchte euch die Funktionsweise von Edge Reflow mit einem kleinen Tutorial erklären. Ziel ist es eine Mini-Website mit zwei Breakpoints zu erstellen, an der ich alle wichtigen Funktionen von Edge Reflow zeigen kann. Den ästhetischen Anspruch stellen wir heute mal hinten an.

Projekt anlegen

Erstellt ein neues Dokument und speichert die Datei ab. Reflow erstellt keine einzelne Datei, sondern einen Projektordner. Hier werden später HTML- & CSS-Dokumente sowie weitere Dateien abgelegt. Innerhalb des Dokuments legt Reflow automatisch einen Div-Container und ein Gestaltungsraster an.

Media Queries festlegen

Als erstes legen wir die Media Queries fest. Da es im Vorfeld immer schwierig ist abzuschätzen wann ein Breakpoint gebraucht wird verwenden wir zunächst die typischen Größen für Smartphone und Tablet. Die Media Queries können später noch erweitert oder angepasst werden.
Zieht mit dem Schieberegler die Arbeitsfläche auf eine Breite von 960 Pixel und fügt per Klick auf die „+“-Schaltfläche oben rechts einen Breakpoint hinzu. Wenn die Pixel nicht genau getroffen wurden, könnt ihr lange auf das Icon klicken um die erweiterten Optionen aufzurufen. Hier kann der Wert in Pixel angegeben werden.
Erstellt nach dem gleichen Prinzip zwei weitere Breakpoints bei 780 und 480 Pixeln. Per Klick auf die farbigen Bereiche in der Leiste könnt ihr zwischen den Media Queries wechseln.

Raster anpassen

Edge Reflow erstellt automatisch ein Raster mit 12 Spalten. Für die Desktop-Variante unserer Beispiel-Website ist das soweit in Ordnung. Die anderen Ansichten passen wir an. Aktiviert zunächst den Bereich von 0-480 Pixel und wählt mit Hilfe des Auswahl-Werkzeugs oder der „Canvas-Bar“ das Container-Element aus. In der Eigenschaften-Leiste verringert ihr die Anzahl der Spalten auf 3 und erhöht den Abstand zwischen den Spalten auf 5%.

Für den Media Query von 480-780 Pixel vergebt ihr 6 Spalten und einen Abstand von 3%. Sollte euch das eingeblendete Raster stören, könnt ihr über „Opacity“ die Deckkraft regeln.
Im Bereich von 870-960 Pixel muss das Raster nicht angepasst werden, der Container sollte jedoch eine maximale Breite erhalten um sich nicht unendlich weit auszudehnen. Vergebt bei max-width 960 Pixel.

Elemente hinzufügen und ausrichten

Jetzt sollten wir ein paar Elemente hinzufügen um die Seite zu gestalten. Aktiviert zunächst den Media Query für die Desktop-Ansicht und wählt anschließend das „Box-Werkzeug“ aus.
Zeichnet nun einen Header-Bereich mit einer Höhe von 250 Pixeln über die gesamte Breite des Containers. Mit 50 Pixel Abstand, zeichnet ihr darunter drei Boxen mit einer Höhe von 200 Pixel ein. Die genauen Pixelwerte könnt ihr in der Eigenschaften-Leiste nummerisch angeben. Hilfreich ist sicher auch das Icon unten rechts in der „Canvas-Bar“. Mit dem hier versteckten Menü können Elemente aneinander ausgerichtet oder auf gleiche Höhe gebracht werden.

Wenn ihr die Shift/Umschalt-Taste drückt, könnt ihr per Klick mehrere Elemente auswählen. Markiert nun die drei unteren Boxen und vergebt in der Eigenschaften-Leiste ein padding von 20 Pixeln.

Header gestalten

Markiert den Header und wechselt in der Eigenschaften-Leiste in den Bereich „Styling“. Im oberen Abschnitt könnt ihr Farben, Bilder und Verläufe hinzufügen. Wählt über das kleine Icon einen Verlauf aus und erstellt im sich nun öffnenden Dialog einen linearen Verlauf von Hellblau (#72D4FF) zu Dunkelblau (#04528B). Anschließend könnt ihr den Dialog schließen.

Im mittleren Abschnitt können Rahmen gestaltet werden. Um den Header mit einer Linie vom Inhaltsbereich abzutrennen, erstellen wir hier eine 5px starke, nach unten ausgerichtete Linie in Dunkelblau (#003053).

Boxen gestalten

Nun gestalten wir die Boxen. Markiert alle drei Elemente und vergebt ein helles Blau-Grau (#E9EDEF) als Hintergrundfarbe. Im Bereich „borders“ rundet ihr die Ecken um 5 Pixel ab.
Im unteren Bereich können Schatten gestaltet werden. Fügt einen Schatten hinzu und wählt Schwarz als Farbe. Im Auswahlmenü für die Farbe findet ihr rechts auch einen Regler für die Transparenz. Stellt hier einen Wert von ca. 30% ein. Als Weichzeichnungsgrad (Blurring) legt ihr 2px fest, den Abstand nach unten gebt ihr mit einem Pixel an.

Texte hinzufügen

Wählt das Textwerkzeug aus und bewegt den Cursor über eine der drei Boxen. Ein veränderter Rahmen bedeutet, dass ihr den Text innerhalb der Box erstellt. Reflow erzeugt dann also verschachtelte HTML-Elemente. Ihr könnt die Verschachtelung auch in der Canvas-Bar kontrollieren.
Zieht einen Textrahmen innerhalb der Boxen auf, passt mit dem Auswahlwerkzeug oder über den „Layout-Tab“ die Abmessungen an und schreibt ein wenig Beispiel-Text. Verfahrt so mit allen drei Boxen.

Schriften und Typografie

Wenn ihr einen Textrahmen ausgewählt habt, könnt ihr im „Styling-Tab“ der Eigenschaftenleiste den Text gestalten. Vergebt eine Schriftgröße von 0.9em und einen Zeilenabstand von 1.2em.
Im Bereich Typeface kann eine Schriftart gewählt werden. Über den Pfeil im Auswahlmenü habt ihr die Standard-Schriften der Browser zur Auswahl. Über den „T+“-Button links können Webfonts über die Adobe Edge Webfonts geladen werden. Wählt hier eine beliebige Schrift aus (erkennbar am blauen Haken) und verlasst das Menü. Anschließend steht die Schrift in der Auswahlliste ganz oben zur Verfügung. Vergebt für alle Texte einen Webfont.

Externe Bilder laden

In den Header unserer Beispielseite laden wir jetzt noch ein Logo. Klickt auf das Bild-Werkzeug und ladet eine Grafik. Als Beispiel könnt ihr auch das kulturbanause Logo verwenden. Die Grafik klebt nun vorerst am Cursor und kann per Klick positioniert werden.

Media Queries optimieren

Das Layout ist nun soweit fertig und alle Inhalte wurden positioniert. Jetzt ist es Zeit die Anpassung für andere Viewport-Größen zu übernehmen. Per Klick auf einen Bereich in der Media Query Leiste könnt ihr schon sehen wie sich das Layout verhält.
In der mittleren Ansicht sind die Textboxen zusammengedrückt was Auswirkung auf die Zeilenlänge hat. Die Boxen sind zu niedrig. Wählt die Elemente aus und passt die Höhe an. In der Eigenschaften-Leiste wählt ihr dazu den Wert „auto“. Auch der Header ist in der Tablet-Variante vielleicht ein wenig hoch. Hier verringern wir die Höhe auf 110px und rücken die Boxen entsprechend weit nach oben.

In der Smartphone-Ansicht wird die Zeilenlänge der Boxen dann endgültig zu kurz. Verschiebt die Boxen untereinander und erhöht die Breite auf 100%. Achtet darauf, dass auch hier die Höhe der Box auf „auto“ gesetzt ist. Den Abstand zum Header und den Abstand zwischen den Boxen geben wir mit 30px an. Somit wäre auch dieser Darstellungsfahler korrigiert.

Code exportieren

Über den Schieberegler könnt ihr nun alle Ansichten stufenlos testen. Wenn die Website in allen Viewport-Größen funktioniert, ist es Zeit den Code zu exportieren.
Der finale Code-Export scheint in dieser frühen Version von Reflow noch nicht integriert worden zu sein. Über „View → Preview in Chrome“ kann allerdings eine Vorschau gestartet werden.

This code is only meant for previewing your Reflow design.

Die Daten werden parallel in den /assets-Ordner im Projektordner gespeichert. Reflow erstellt eine HTML-Datei, sowie reflow.css und boilerplate.css.

Die Beispieldateien könnt ihr hier herunterladen oder online anschauen.

Demo anzeigen

Update: Edge Reflow Preview 2

Adobe hat die Preview 2 von Edge Reflow veröffentlicht. Die wichtigsten Features der neuen Version sind u.a. die Unterstützung von position:absolute;, position:fixed; und z-index, Inline-Text-Styling auf Basis von <span>, ein überarbeiteter Farbwähler, ein verbesserter Workflow sowie optimierte Performance.

Einen vollständigen Bericht der neuen Version findet ihr im Edge Reflow Blog.

Links / Quellen:

• Adobe Edge Reflow
• Englischsprachiges, offizielles Tutorial zu Edge Reflow
• Videos zum Thema Edge Reflow von Adobe TV

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Professionelles Webdesign ist längst auch optimiert für die Bedienung mittels Touch-Screen. Gerade im Bereich der mobilen Endgeräte existiert nahezu kein anderes Bedienkonzept. Da es auf einem Touch-Screen allerdings keinen Mouse-Over-Effekt gibt, muss unbedingt ein sinnvoller Aktiv-Zustand für Links integriert werden. Nur so ist sichergestellt, dass der Anwender eine Rückmeldung erhält, wenn er ein Element antippt. Umso ärgerlicher ist es, dass unter iOS Aktiv-Zustände ignoriert werden.

iPhone und iPad verwenden die „Tap-Highlight-Color“

iOS, das Betriebssystem von iPhone & Co., ignoriert die Pseudoklasse :active und blendet stattdessen eine halbtransparente, graue Überlagerung ein, sobald ein Link angetippt wird. Diese Darstellung nennt sich „Tap-Highlight-Color“.

Individuelle „Tap-Highlight-Color“ verwenden

Glücklicherweise gibt es einen Webkit-spezifischen Code, mit dem man die Farbe der Überlagerung beeinflussen kann. Mit folgendem CSS-Snippet ändert ihr die Farbe auf Rot und reduziert die Deckkraft auf 50%. Achtet darauf den Code als Eigenschaft des Standard-Links (a:link) zu verwenden. Die Anwendung auf :hover oder :active funktioniert nicht.

a {	
  color:blue;
  -webkit-tap-highlight-color: rgba(255,0,0,.5);
}

Die Darstellung sieht unter iOS dann so aus. Mit einer zum Design passenden Farbe ist das zumindest schon mal hübscher als der Standard.

Echte :active-Zustände wiederherstellen

Es ist auch möglich den echten Aktiv-Zustand des Links mit Hilfe von JavaScript wiederherzustellen. Insbesondere für beim Klick eingedrückte Buttons oder ähnlich ausgefeilte Interaktionen lohnt es sich etwas Zeit zu investieren.

Damit die Tap-Highlight-Color den Zustand nicht überlagert, sollten wir zunächst die Deckkraft der Überlagerung auf 0% reduzieren. Zusätzlich muss natürlich ein :active-Zustand vorhanden sein. Der Vollständigkeit halber zeigt der folgende Code auch den Mouse-Over-Effekt.

a {
  color:blue;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a:hover {color:green;}

a:active {color:red;}

Im Footer der Website binden wir nun folgendes JavaScript ein und holen somit den Effekt zurück. Beachtet bitte, dass eine Fallback-Lösung für ausgeschaltetes JavaScript vorhanden sein sollte.

<script type="text/javascript">
  document.addEventListener("touchstart", function() {}, false );
</script>

Wird der Link unter iOS nun angetippt, färbt er sich rot. Genau wie in der Desktop-Version also.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich freue mich euch mitteilen zu dürfen, dass ich auf der diesjährigen Webinale im Rahmen der "Responsive Web Days" einen Slot zum Thema "Das Web in Hi-DPI" belege.
Die Webinale findet vom 3.-5. Juni 2013 in Berlin statt und bietet höchst interessante Beiträge zu den Themen Design, Technologie und Business. Eine vollständige Liste der Vorträge findet ihr hier, eine Liste der Speaker gibt es hier zu sehen. Bis zum 4. April erhaltet ihr übrigens noch Early-Bird-Tickets.

Das Web in Hi-DPI

Offizielle Beschreibung des Vortrags: Neue, hochauflösende Bildschirme wie das Retina-Display von Apple stellen Webdesigner und Entwickler vor völlig neue Herausforderungen. Grafiken müssen nicht nur flexibel genug sein, um eine Anpassung der Website auf verschiedene Displaygrößen zu ermöglichen, auch die Auflösung unterscheidet sich je nach Ausgabegerät. Jonas Hellwig zeigt Ihnen, welche Möglichkeiten Sie mit Pixeln, Vektoren, Schriften und CSS3 haben, um Grafiken zu erstellen, die diesen Anforderungen entsprechen.

Über die Webinale

Offizielle Beschreibung der Webinale: Business, Design und Technologie sind die grundlegenden Pfeiler für den Erfolg im Web. Nur wer das Zusammenspiel dieser drei Disziplinen geschickt beherrscht, gehört zu den Gewinnern im World Wide Web und ist in der Lage, erfolgreiche digitale Geschäftsmodelle umzusetzen. Die webinale ist die Konferenz, die das Web ganzheitlich durchleuchtet und sich nicht nur auf einzelne Fragmente konzentriert. Der Konferenz gelingt somit der Brückenschlag zwischen Designern, Webentwicklern, Managern und Entrepreneuren und bietet damit ein ungeheuer lebendiges Forum für Inspiration, Networking und praktisches Know-how.

Die webinale liefert Antworten auf aktuelle Herausforderungen in E-Commerce, Social Media, Onlinemarketing, Mobile und vielem mehr – sie zeigt dabei auch stets Trends auf und liefert heute bereits die Antworten auf die Herausforderungen von morgen. Die Teilnehmer der Konferenz können in über 70 Sessions, Workshops und Keynotes von dem Wissen erfahrener und international renommierter Experten profitieren. Zu den Speakern gehören Hochkaräter der Webszene – Designer, Developer, Visionäre und Investoren, die ihr Wissen den Teilnehmern näherbringen und an einem lebhaften Dialog interessiert sind.

Links

• Weitere Infos zum Event
• Webinale-Website

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das Upload-Limit von WordPress ist mit 2MB recht gering. Sobald man mehr als Texte oder Fotos hochladen möchte, reicht das Volumen nicht mehr aus und der Upload über die Mediathek wird verweigert. Mit einer kleinen Anpassung in der .htaccess kann die Begrenzung erhöht werden.

WordPress Upload-Limit über .htaccess erhöhen

Erstellt zunächst eine Sicherungskopie der .htaccess-Datei und fügt anschließend folgenden Code am Ende des Dokuments ein. Hiermit wird das Upload-Limit auf ca. 25 MB erhöht.

php_value upload_max_filesize 25M
php_value post_max_size 25M

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mit den Widgets von WordPress lässt sich eine Website sehr einfach individualisieren und erweitern. Selbst das simple Text-Widget ermöglicht durch die Eingabe von HTML-Markup recht umfangreiche Anpassungen. Ärgerlich in diesem Zusammenhang ist lediglich, dass Widgets keine individuelle ID besitzen und daher auch nicht gezielt angesprochen werden können. Mit folgendem Mini-Snippet erweitert Ihr Widgets um die fehlenden Angaben.

Unterschiedliche Klassen & IDs für WordPress-Widgets

Damit ein Theme Widgets nutzen kann, muss in der functions.php eine widgetized Sidebar definiert werden. Hierbei wird nicht nur der Name der Sidebar und eine optionale Beschreibung festgelegt, es kann auch angegeben werden ob eine bestimmte Code-Struktur um das Widget herum erstellt wird. Genau hier setzt das Snippet an. Sucht in der functions.php nach dem entsprechenden Abschnitt und passt euren Code um die fehlenden Komponenten an.

// widgetized sidebar
if ( function_exists('register_sidebar') )
  register_sidebar(array(
    'name' => 'Sidebar', // Name der Sidebar 
    'description' => __('Hier steht die Beschreibung der Sidebar'), // Beschreibung der Sidebar
    'before_widget' => '<div id="%1$s" class="widget %2$s">', // Code der vor Widgets ausgegeben wird. Hier wird die individuelle ID und eine CSS-Klasse eingefügt. 
    'after_widget' => '</div>', // Code der nach Widgets ausgegeben wird
    'before_title' => '<h2>', // Code der vor dem Titel ausgegeben wird
    'after_title' => '</h2>', // Code der nach dem Titel ausgegeben wird
));

Am Beispiel eines Text-Widgets sieht das Markup nach der Anpassung in etwa so aus:

<div id="text-1" class="widget widget_text">
  <h2>Titel des Widgets</h2>
</div>

Mit einer ID und zwei CSS-Klassen, sollte man ausreichend Möglichkeiten haben das Element individuell und objektorientiert zu stylen.

Links / Quellen

• via Text Widget with different Class – WordPress-Forum
• Widgetizing WordPress – WordPress Codex

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im Web hat sich in den letzten Monaten viel getan und die Anforderungen an moderne Websites haben sich verändert. Flexible und zukunftssichere Lösungen sind gefragt und stellen den Workflow so mancher Agentur auf den Kopf. Im Rahmen der medien[plan]tage in Bremen freuen wir uns daher auf zwei interessante Tagesseminare zu aktuellen Webdesign-Themen.

Seminar: Photoshop CS6 und CSS3 für Webdesigner

7. Februar 2013 in Bremen

Beschreibung

In diesem Seminar lernen Sie, wie Sie ihre Grafiken in Photoshop CS6 so erstellen, dass sie den modernen Anforderungen des Internets gewachsen sind. Anhand verschiedener Praxisbeispiele erarbeiten wir die neuen Funktion der Version CS6. Sie lernen kennen, wo die Grenze zwischen Photoshop und CSS3 verläuft und optimieren Grafiken für den Einsatz im Web. Immer mit dem Anspruch, zeitsparend, zukunftssicher und vor allem optisch ansprechend zu arbeiten.

Details zu diesem Seminar

Seminar: Responsive Webdesign

8. Februar 2013 in Bremen

Beschreibung

In diesem Workshop lernen Sie die Grundlagen des Responsive Webdesign kennen und erfahren, unter welchen Voraussetzungen sich ein Responsive Design anbietet. Natürlich erfahren Sie auch, welche alternativen Herangehensweisen es gibt.
Neben den theoretischen Grundlagen werden wir ein Beispielprojekt gemeinsam – von der Idee über die Konzeption bis hin zur Programmierung – praktisch umsetzen. Sie lernen daher ganz genau, mit welchen Schwierigkeiten Sie es bei zukünftigen Projekten zu tun bekommen können und welche Lösungsansätze es gibt.

Details zu diesem Seminar

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.