Der moderne Workflow -
vom Photoshop zum HTML
Workshop für Designer & Developer - Lisa Gringl
Warum Noch immer Photoshop?
Wunsch
-
Designer = Developer
-
Designen in HTML
Realität
-
Designer und Programmierer getrennt
-
Kunden können sich ohne Photoshop nichts vorstellen
-
Schwierigkeiten Designen während dem Coden
AGENDA
-
Webfonts
- Iconfont vs. SVG
- Sass & SMACSS
- Compass vs. Autoprefixer
- BEM
- Tools
- Yeoman
- Grunt
- Bower
- Hands on
- Extra Tools
Webfonts
Free:
-
Google Webfonts (Link)
-
FontSquirrel (@font-face Generator)
Kostenpflichtig (hosted/self-hosted):
-
Typekit (integriert in Adobe CC für Preview)
-
myFonts.com
-
Fontspring
-
...
Webfonts (Tipps)
Einbindung über @font-face:
@font-face {
font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }
IE Bug
src: local('☺') Iconfont vs. SVG
|
|
Iconfont |
SVG |
|
Darstellung |
Als Text interpretiert (anti-aliased) |
Vektor |
|
CSS Kontrolle |
Ein Element (Größe über font size) |
Einzelne Elemente modifizierbar |
|
Positionierung |
Wie Text (über Pseudo-Element), über line-height, vertical-align, word-spacing |
Behält die Größe, Normale Positionierung |
|
Fehler |
Cross Domain-Loading, Schriftenladefehler, Windows Phone Browser hat keinen Support, Chrome-Fallback Font Bug |
Wenn der Browser SVG unterstützt wird es normal angezeigt |
|
Semantik |
Über ein Pseudo Element (leeres <span>) |
<svg> Tag |
|
Erstellung
|
Erstellung einer eigenen Font etwas mühsam (Tools: IcoMoon, Pictos) |
SVG exportieren |
|
Browser Support |
Bis IE6 |
IE8-, Android 2.3- |
SASS & SMACSS
= Syntactically Awesome Stylesheet
=Scalable and Modular Architecture of CSS
Sass
-
CSS Preprocessor
-
macht CSS dynamisch
- Variablen, Funktionen, Mixins, ...
SMACSS
-
Guidelines für modulare Struktur
-
wiederverwendbar
-
skalierbar
Struktur SASS nach SMACSS
stylesheets/
|
|-- _base.scss # Partial Base Rules, can include all variables
|-- _layout.scss # Partial Layout Rules
|
|-- modules/ # Common modules
| |-- _all.scss # Include to get all modules
| |-- _message.scss # Module name
| |-- _buttons.scss # Etc...
| ...
|
|-- _state.scss # Partial State Rules
|-- _theme.scss # Partial Theme Rules
|
`-- main.scss # primary Sass file, include all Partials Compass VS. Autoprefixer
Autoprefixer
-
Postprocessor CSS
-
fügt Browser Prefixes hinzu
- basiert auf der Tabelle von Can I Use
-
CSS wird von alten Prefixes gesäubert
-
Input und Output Pfad setzten
-
auch mit Preprocessor anwendbar (Sass, LESS, ...)
- Debugging: Javascript-Console oder Console (Terminal)
- neues Projekt: Update von Autoprefixer
Compass VS. AutoPrefixer
Vorteile Autoprefixer:
-
Schneller als Compass
-
W3C Syntax
- Auswahl der zu unterstützenden Browser
- last 2 version, "Explorer 7"
BEM
= Block, Element, Modifier
-
Bennung der CSS Klassen
-
An objektorientierung angelehnt
-
Block (zb. nav)
-
Element (zb. nav__item)
- Modifier (zb. nav__item--active)
BEM
Vorteile
-
abstrakt & modular
-
Gut skalierbar
-
Gut wartbar
- an verschiedenen Stellen benutzbar
Nachteile
-
Lange Klassennamen
-
Ungewohnte Schreibweise (-- __)
TOOLs
|
|
|
|
|
|
Hands On
EXTRA Tools
Jekyll
-
Markdown Text in statische Websites & Blogs
-
erstellen von HTML Templates
-
HTML Partials (ohne PHP, etc.)
- Online-Import von PSD Files
-
Farben extrahieren in HEX Codes
-
Text und CSS kopieren
-
Größen messen
-
Web-optimierten Bilder speichern
THe Tools I Love in PS
Plugin GuideGuide
Schnelle und einfache Grids in Photoshop
generiert CSS aus Ebenen
vor allem für Farbverläufe, Schatten, ...
DAnke
{Happy Coding}
workflow
By Lisa Gringl
