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

  • Baugerüst für Webapp
  • Beinhaltet Grunt & Bower
  • Task Runner
  • basiert auf Node.js
  • automatisiert im Hintergrund
  • Package Manager
  • Download und Integration 
  • zB. (jQuery)

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

workflow

  • 743
Loading comments...

More from Lisa Gringl