Gerade hier muss man viele Besonderheiten noch genauer betrachten als schon beim normalen Webdesign.

Probleme

Bevor man zu der typografischen Gestaltung einer Mobilen Website oder App kommt, stößt man auf einen haufen Probleme mit denen man sich befassen muss, zum Beispiel:

• Ganz andere Lichtverhältnisse
• lange Ladezeiten
• viele verschiedene Bildschirmgrößen und Auflösungen

Lösungen

Die Lösungsansätze zu diesen Problemen sind jedoch klar definiert:

• hoher Kontrast von Farbe zu Untergrund
• Verzicht auf Webfonts
• gute Spationierung (Spacing)

Lesbarkeit

Ein Smartphone oder Tablet Nutzer muss die Informationen die im präsentiert werden auch erfassen können, dazu hat er meist vom Smartphone oder Tablet selbst noch einige
Hilfen wie z.B. den Zoom. Aber wieso sollte man dem User das nutzen dieser Funktion zumuten, wenn man seinen Text auch von Anfang an so gut gestalten kann, dass das nutzen dieser Funktion überflüssig wird.

Man nehme einfach eine größere Schriftgröße bzw. die besser passende Schriftart.

Damit ist es aber noch lange nicht getan, unbedingt zu beachten ist der Abstand zwischen den einzelnen Buchstaben, Wörtern und Zeilen sowie die Länge der jeweiligen Zeilen, denn was bringt es wenn der Nutzer eine lange Zeile liest aber dann nicht automatisch beim Zeilensprung die nächste Zeile erwischt und sich erst wieder in den Text einfinden muss.

Passend zur aktuellen Jahreszeit ist es eines jeden Designers Pflicht den Kontrast auf mobilen Geräten so zu gestalten, dass selbst bei starkem Lichteinfall noch immer eine gewisse Lesbarkeit gegeben ist. Ein gutes Beispiel für hohen Kontrast ist schwarze Schrift auf weißem Grund.

Die Wahl der Schriftart

Um auch die Ladezeiten der Mobilen Seiten so niedrig wie möglich zu halten, sollte man überlegen auf Webfonts zu verzichten.

Desweiteren ist es ratsam eine Serifenlose Schriftart (Bildschirmschrift) zu nutzen, denn je kleiner die Schrift, desto schwerer sind Serifen zu lesen, Serifenlose Schriften sind bei verschiedenen Auflösungen nunmal einfacher zu handhaben.

em oder px 

Einer der wichtigsten Punkte ist jedoch die Wahl der Einheit in der die Schriftgröße angegeben wird. Bei den vielen Möglichkeiten, die Mobile Geräte im Bereiche der

Auflösung bieten ist das gar nicht so einfach.Das iPad 2 zum Beispiel hat eine Pixeldichte (dpi) von 132 dpi und das iPhone 4 eine von 326 dpi.

Aufgrund dieser Unterschiede kann man keine fixen Pixel Angaben bei der Schriftgröße machen, denn auf einem anderen Gerät mit höherer Pixeldichte würde die Schrift kleiner dargestellt als sie es sein sollte.

Es ist sehr ratsam auf die Größenangaben em oder % auszuweichen. Em an sich geht Standardmäßig von einer Schriftgröße von 16px oder 12pt aus, diesen Standardwert kann man aber auch anpassen.

Wenn man die font-size mit 1em definiert, kann man im weiteren Verlauf des Stylesheets sehr einfach die Größe ändern, da sich alle anderen em Einheiten auf die vorher definierte beziehen. 1.2em wären dann 120% der Originalgröße und 0.8em wären 80%, so kann man sicher sein, dass immer eine korrekte Größe angezeigt wird. Anders als bei der Pixel Angabe.

Am Schluss kann ich hierzu noch diese Seite empfehlen: http://pxtoem.com/
Hier kann man sich ganz leicht px in em und andersherum umrechnen lassen und erspart sich damit einiges an Mühe.

Für diese Tutorialreihe setze ich Grundkenntnisse in Flash und Actionscript voraus. Ursprünglich habe ich das Spiel selbst in meiner Ausbildungszeit zum Softwareentwickler Medieninformatik entwickelt und habe es nun wieder ausgekramt. Fangen wir erstmal ganz einfach an mit einer leeren Szene, die eine Initialklasse “Main.as” bekommt. Was benötigen wir noch? Ich denke ein Raumschiff für den Anfang, einen Laser und natürlich einen Asteroiden als Klasse, mit denen wir arbeiten können. Wer es unbedingt möchte, kann natürlich auch noch einen schönen Sternenhintergrund mit machen, der automatisch scrollt. Hierfür werde ich am Ende der Reihe nochmal ein Tutorial erstellen, wie dies funktioniert. Heute aber werden wir erstmal nur das Schiff auf die Bühne platzieren und ihm schießen beibringen.

Die Bühne bekommt eine Größe von 800 x 500 Pixeln mit einem Schwarzen Hintergrund. Fangen wir also erstmal an mit dem Grundgerüst in der Main Klasse. Hier benötigen wir erstmal grundsätzlich 3 Variabeln, die da wären:

• Das Raumschiff
• Die Laser
• Die Asteroiden

Diese sollten in der gesamten Stage verfügbar sein und deshalb direkt am Anfang der Klasse als Public vars deklariert werden. Bei mir sieht das wie folgt aus:

public var theShip:TheShip;
public var gameOverlay:GameOverlay = new GameOverlay();
public var laserArray:Array = new Array();
public var asteroidArray:Array = new Array();

Hier werden später natürlich noch einige hinzu kommen, aber erstmal reicht das absolut aus. Was muss nun also im Konstruktor gemacht werden? Natürlich, wir müssen das Schiff erstellen, auf die Stage setzen und es auf die Mouse legen, damit wir es mit der Mouse steuern können. Also Objecte erstellen:

theShip = new TheShip(this);
stage.addChild(theShip);
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE,moved);
stage.addEventListener(MouseEvent.CLICK,fireLaser);

Wie man sieht, habe ich auch direkt schon 3 Eventlistener erstellt, die für später wichtig sein werden. In der MOUSE_MOVE Funktion steht folgendes drin, damit die Mouse im Bild nicht überall hingeschoben werden kann aber dennoch die ganze Zeit der Mouse folgt.

function moved(e:Event=null):void {
  if (stage.mouseX > 45 && stage.mouseX < 300) {
    theShip.x = stage.mouseX;
  }
  if (stage.mouseY > 75 && stage.mouseY < 425) {
    theShip.y = stage.mouseY;
  }
}

Und in der MOUSE_CLICK Funktion ist die Logik für das spawnen der Laser vorhanden.

function fireLaser(event:Event):void {
  var laserBlaster:Laser = new Laser(this);
  laserArray.push(laserBlaster);
  addChild(laserBlaster);
}

Wenn dies in der Main.as steht, sind wir auch schon hier quasi fertig. Jetzt müssen wir uns 2 Objekte in der Bibliothek erstellen. Einmal das Raumschiff, wofür ihr ein X-Beliebiges Bild eines Raumschiffes nehmen könnt und einen Laser. Diesen habe ich einfach als ganz kleines Oval gemacht. Wichtig ist, dass das Schiff den Namen TheShip bekommt und für den Export für Actionscript angeklickt ist. Als Klasse geben wir ebenfalls TheShip an. Beim Laser machen wir dies ebenso, nur dass hier der Name bei beidem logischer weise Laser ist. Wenn dies gemacht wurde, gehen wir in die Klasse TheShip, die MovieClip abstrahiert. Wir brauchen am Anfang nun erstmal nur die Referenz zur Stage und ich habe einen kleinen Tween noch gemacht, damit das Schiff am Anfang in die Szene fliegt.

Dies sieht wie folgt aus:

public class TheShip extends MovieClip {
  private var mainClip:MovieClip;
  var shipEntrance:Tween;

  public function TheShip(mainClip:MovieClip) {
    this.mainClip = mainClip;
    shipEntrance = new Tween(this,"x",Elastic.easeOut,-150,100,5,true);
    this.y = 250;
  }
}

Das war’s auch schon hierfür und wir gucken uns als letztes noch eben die Laserklasse an:

public class Laser extends MovieClip{
  private var mainClip:MovieClip;
  var laserShooting:Tween;

  public function Laser(mainClip:MovieClip) {    
    this.mainClip = mainClip;
    laserShooting = new Tween(this,"x",None.easeIn,mainClip.theShip.x,mainClip.theShip.x+1000,1,true);            
    this.addEventListener( Event.ENTER_FRAME, laserDispose );
}

  function laserHit() {
    var z:int =0;
    for (var i:int=0; i<mainClip.laserArray.length;i++) {
      if(mainClip.laserArray[i] == this){
        z = i;
        break;
      }
    }
    this.removeEventListener( Event.ENTER_FRAME, laserDispose );
    this.parent.removeChild(this);
    mainClip.laserArray[z] = null;
    mainClip.laserArray.splice(z,1);
  }

  function laserDispose( evt:Event ) {
    laserShooting.resume();
    if (this.x > 899) {
      this.laserHit();
    }
  }
}

Dies sollte nun alles soweit fertig sein. Die Logik dahinter ist wie folgt. Sobald ein Laser auftaucht, durch ein MOUSE_CLICK Event, wird dieser Anfangs in ein Array geschrieben in der Main.as. Im Konstruktor wird der Laser genau in der Mitte des Schiffes gespawned und wird mittels einem Tween gestartet. Wenn der Laser am Ende des Bildes angelangt ist, wird dieser mit der Funktion laserhit entfernt und auch aus dem Array in der Main gelöscht, damit es nicht zu doppelten Lasern oder Nullpointer exceptions kommt.

Wenn ihr dies alles richtig gemacht habt, sollte euer Raumschiff nun eurer Mouse folgen und beim Klicken schießen.

Hierfür reicht das heute erstmal, in den nächsten Wochen kommt dann immer wieder ein neuer Part. Als nächstes werden wir die Asteroiden dazu machen und die erste Kollisionserkennung verbauen. Eine Schöne Restwoche euch allen noch und vorab schonmal frohe Pfingsten, euer Mark!

Als weiteres Kernmerkmal soll das Erlebnis des Designstils und seiner verbundenen Einfachheit auf allen Endgeräten nahezu gleich sein – egal ob Smartphone, Tablet oder Desktop. Die Prägung des Metro Design Stils hat nicht nur Vorteile in der Bedienbarkeit von Produkten und Anwendungen, sondern durch die kontinuierliche Implementierung in zahlreiche Anwendungen wird der Benutzer an die Oberfläche und seinen Umgang damit gewöhnt, was das Erlebnis – gerade von neuen Produkten – deutlich vereinfacht. Der Endbenutzer muss damit nicht stetig neue Designkonzepte erlernen.

Wie bereits der Name “Metro Style Design” andeutet basiert die Gestaltung der Oberfläche auf Inspirationen von allgemein gültigen Typografien und Symbolsprachen wie man sie beispielsweise von Flughäfen, Bahnhöfen oder U-Bahn Stationen kennt. Kräftige Farben, einfache Symbole und abstrakte Unterteilungen erzeugen eine einfache und klare Designsprache, die nahezu keine Fehldeutungen zulässt. Reisende auf der ganzen Welt profitieren von dieser abstrakten Designsprache – unabhängig von lokal gesprochenen Sprachen oder kulturellen Eigenheiten. Das Metro Style Design oder auch Flat Design genannt nutzt diese Effekte um dem Benutzer eine simple und leicht zu bedienende Anwendung, Website, etc. zur Verfügung zu stellen.

Herausforderungen für Designer

Die Herausforderungen für Screendesigner sind beim Metro Style Design größtenteils in der Reduktion auf den Inhalt zu finden. Visuelle “Verschönerungen” sind nur mit Vorsicht einzusetzen und Usability in den Vordergrund zu stellen. Der Inhalt gewinnt als Designelement immer mehr Wertigkeit und wird gezielt in den Vordergrund gestellt. Typographie, Aufbau und Anordnung gewinnen deutlich mehr an Bedeutung und müssen abgewägt und passig ausgerichtet werden. Ein weiterer Gesichtspunkt spielt die Farbwahl. Klare Abgrenzungen, die Bedeutungen von Farben und die optische Abgrenzung von Farben können allgemeingültig eingesetzt werden. Das Metro Style Design (Auch Flat Design) genannt, nutzt zur Unterteilung von Inhalten gezielt Flächen und Farben.

Gelungene Beispiele für das Metro Style Design

Dazu muss man nur auf die Website von timeline.js gehen und das Google Spreatsheet Template benutzen (Step 1) und die jeweiligen Daten in die richtige Spalte setzen. Dann muss man dieses Speartsheet für das Web freigeben (Step 2). Hat man das getan erhält man einen Link. Diesen fügt man auf timeline.js ein. Danach bestimmt man noch die Höhe und Breite (Step 3) und zurück kriegt man einen iframe, der dann nur noch auf eurer Seite eingebunden werden muss.

Schon hat man seine eigene Timeline und das ohne großen Aufwand.

Als erstes solltet ihr euch um die Schriftarten kümmern. Zwei ganz gute OpenType Schriftarten für diesen Style sind OpenSans und SourceSansPro die man mit Google Fonts auch als Webschrift auf seiner Seite einbinden kann. Ich habe hier in diesem Tutorial “OpenSans” verwendet, also auf und downloaden.

Zuerst stellt ihr die Hintergrundfarbe auf #f3f3f3;

Als zweites erstellt ihr ein 250px breites und 380px hohes Rechteck mit dem “Abgrundeten Rechteck Werkzeug”. Dafür stellt ihr einen Radius von 4px ein, macht ein Rechtsklick und wählt “auswahl erstellen” aus.

Diese Auswahl füllt ihr mit einer weißen Farbe und gibt der Fläche eine Kontur und Schlagschatten. Die Kontur hat die Farbe: #dad9d9 und den Schlagschatten Einstellungen könnt ihr diesem Bild entnehmen:

Jetzt wollen wir das Teaserbild erstellen. Dafür macht ihr ein Rechtsklick auf das Objekt und wählt “Auswahl laden” aus. Wenn man  ”Alt” gedrückt hält kann man mit einer neuen Auswahl die man zieht (mit dem Rechteckswerkzeug) die Auswahl verkleinern. So sieht das dann aus:

Für das Bild erstellen wir einen neuen “Ordner” und geben diesem eine Ebenenmaske.

Dort fügst du nun ein beliebiges Titelbild ein und kannst dank der Ebenenmaske das Teaserbild noch anpassen.

Beim Text haben wir einmal die Überschrift in OpenSans, Regular, 24px, Farbe #1a1a1a und dem Subtext in 14px, Farbe#8c8c8c und einem Zeilenabstand von 20Pt. Das sieht dan ungefähr so aus:

Weiter geht es dann in Teil 2 (1-2Wochen)

Passwörter als Kommandozeilenparameter sind immer ein potentielles Sicherheitsleck, da sie in der Ausgabe von ps, top, htop, etc. für alle Nutzer eines Systems zu sehen sind.

openssl erlaubt die Angabe eines Dateideskriptors als Passwortquelle, in Kombination mit einem FIFO und bash-I/O-Umleitung können wir programmatisch das Erscheinen des Passwortes in den Systeminformationen vermeiden.

• Einen FIFO erzeugen

  mkfifo fifoname

• Den Dateideskriptor 9 auf den FIFO umleiten

  exec 9<>fifoname

• Das Passwort in den FIFO schreiben

  echo $pass >&9

• openssl aus dem Dateideskriptor 9 das Passwort lesen lassen mit dem Parameter

  -pass "fd:9"

• Aufräumen, d.h. den Dateideskriptor 9 wieder freigeben, den FIFO entfernen

  exec 9<&-
  exec 9>&-
  rm $PWD/fifoname
       

Zusammenfassen können wir das in zwei Funktionen zum Ver- und Entschlüsseln von übergebenen Daten:

openssl_encrypt() {
    local pass="$1"
    local text="$2"
    local fifo="$(rand_str 10 true)"
    /usr/bin/mkfifo $PWD/$fifo
    exec 9<>$PWD/$fifo
    echo $pass >&9
    echo "$text" | openssl bf -e -a -salt -pass "fd:9"
    status=$?
    exec 9<&-
    exec 9>&-
    rm $PWD/$fifo
    return $status
}

openssl_decrypt() {
    local pass="$1"
    local text="$2"
    local fifo="$(rand_str 10 true)"
    /usr/bin/mkfifo $PWD/$fifo
    exec 9<>"$PWD/$fifo"
    echo $pass >&9
    echo "$text" | openssl bf -d -a -salt -pass "fd:9"
    status=$?
    exec 9<&-
    exec 9>&-
    rm $PWD/$fifo
    return $status
}

Die rand_str Funktion stammt aus der Shell-Bibliothek von Chris F.A. Johnson:

rand_str() {
    local length=$1
    local ascii=$2
    local result=""
    [ -z "$ascii" ] && ascii=true
    local range=94
    local offset=32
    if [ "$ascii" == "true" ]; then
        range=61
        offset=65
    fi
    for i in $(seq 1 1 $length); do        
        result+="\\0$(printf "%03d" "$(dec2oct $(($RANDOM % $range + $offset)))")"
    done
    echo -e "$result"
}

dec2oct() {
    local quotient=$1
    local remainder=
    local octal=
    while [ $quotient -ne 0 ]
    do
        remainder=$(( $quotient % 8 ))
        octal="$remainder$octal"
        quotient=$(( $quotient / 8 ))
    done

    echo $octal
}

Der Aspekt der realistischen Umgebung macht das Tool dabei so nützlich. PSDs und Screenshots aus dem Browser präsentieren Projekte ohne echten Kontext. PlaceIt integriert ein Design in ein von euch zu wählendes Gerät. Ihr könnt die Seiten so besser präsentieren und für Kunden wird es leichter die Beschaffenheit des Designs nachzuvollziehen – Einfach drei Produkt-Screenshots von einem Handy, einem Tablet und einem Notebook/Desktop erstellen und schon erscheint euer Projekt in allen maßgeblichen Umgebungen. Wer möchte, kann die so erstellten Screenshots auch noch über die üblichen Kanäle sharen.

Die Features von PlaceIt im Überblick

• Produkt-Screenshots in realistischen Umgebungen erstellen
• Unterstützung der maßgeblichen Devices
• Screenshots per Bildupload oder denkbar einfach
• via URL-Eingabe
• Social Sharing der Produkt-Screenshots

Hier gehts zu PlaceIt

Dazu habe ich mich zweier Stockphotos bedient, welche hier zu finden sind:
http://malleni-stock.deviantart.com/art/Austria-Stock-50-260136905
http://www.sxc.hu/photo/1158936

Wir öffnen das Bild der Person in Photoshop und stellen es frei.

Nun wenden wir eine Korrektur Ebene über unserem Foto an. Wir nehmen Helligkeit & Kontrast und stellen folgende Werte ein, um einen möglich hohen Kontrast zu erzielen. Dem ganzen wird per Rechtsklick noch eine Schnittmaske zur unteren Ebene hinzugefügt.

Diesen Schritt müssen wir bei allen anderen Ebenen auch einhalten, da wir unsere Änderungen nur auf der Foto Ebene sehen wollen, nicht auf dem Hintergrund.

Jetzt fügen wir unsere Landschafts Bild ein und schneiden in einer Ebenenmaske schon einmal den Teil ab den wir vom eigentlichen Foto auch behalten wollen. Also den Kopf.

Nun wenden wir wieder eine Schnittmaske an und das Bild hat die Konturen der Person

Aber noch hat die Landschaft zu satte Farben, um das zu ändern fügen wir eine Farbton & Sättigung Korrektur ein, auf welcher folgende Einstellungen in einer Schnittmaske übernommen werden.

Nun werden wir auch unserem Landschaftsbild eine Helligkeits und Kontrast Korrektur verpassen, um auch hier die Kontraste etwas zu erhöhen.

Dem Landschaftsbild verpassen wir jetzt noch einen Blaustich indem wir eine Blau gefärbte Ebene als Schnittmaske anlegen und den Ebenenmodus auf Weiches Licht stellen und hier die Deckkraft etwas anpassen.

Zum Schluss senken wir noch die Deckkraft der Landschaftsebene um ein paar Details der Person durscheinen zulassen, wie z.B. die Jacke und deren Schatten.

Bei dem Tool handelt es sich um ein kick-off Werkzeug für Frontend-Projekte, mit dessen Hilfe sich auf Grundlage von Bootstrap mittels Drag & Drop ein Interface-Template zusammenstellen lässt. Dieses Template kann dann als Grundlage für die eigentliche Seitenumsetzung genutzt werden.

Es befindet sich zwar aktuell noch in einer Beta-Version, aber bietet schon jetzt die Möglichkeit, sich aus drei vorgegebenen Basis-Templates, eines als Grundlage auszuwählen. Auch ist es möglich, mit einem komplett leeren Template zu arbeiten und das Interface nach seinen eigenen Vorstellungen aufzubauen.

Das grundlegende Motto von Bootstrap 3 lautet: Mobile first. Das Framework wird  standardmäßig responsive und fluid sein und sich so für die Darstellung auf mobilen Endgeräten anpassen. Bisher war es notwendig die für diese Funktionalität notwendigen Dateien nachträglich zu integrieren. Damit ist die Ausrichtung auf den mobilen Markt ganz klar vorgegeben.

Wie auch andere Frameworks in aktuellen Version wird auch Bootstrap auf den IE7 Support verzichten. Bei einem ungefähren weltweiten Marktteil von 1.3% ist diese Entscheidung mehr als verständlich. Genau wird der Support für den Firefox 3.6, der einen ähnlichen Markanteil besitzt, eingestellt.

Eine weitere coole Neuerung ist die Umstellung von den PNG-Glyphicons auf die @font-face Glyphicons. Damit sind alle Icons als Schrift verfügbar und können flexibel in Farbe und Größe gestaltet werden.

Das war für heute mein erster Ausblick. Sobald Bootstrap 3 offiziell verfügbar ist werde ich hier im Blog berichten und weitere Veränderungen und Features vorstellen. Die aktuelle Entwicklung lässt sich auch bei Github verfolgen.