Tag: mobile-web

LayoutIt!: Interface Builder für Bootstrap-Projekte

Wer heutzutage eine moderne Website in HTML, CSS und JavaScript umsetzen möchte, muss dabei eventuell nicht nur alte Webbrowser unterstützen, sondern die Seite in der Regel auch für verschiedene Bildschirmauflösungen und Geräte optimieren. Responsives Design ist dank CSS3 leicht umzusetzen, muss aber dennoch gut geplant und durchdacht werden. Etwas Abhilfe hierbei können verschiedene Frameworks schaffen, wie beispielsweise Twitters Bootstrap-Framework. Hiermit stehen solide HTML- und CSS-Bausteine bereit, die durch JavaScript-Plugins erweitert werden können. Zudem werden ältere Browser durch Shims unterstützt.
Nun gibt es für das Bootstrap-Framework auch einen Interface Builder, mit dem sich die Grundkomponenten per Drag 'n' Drop auf eine Arbeitsfläche ziehen und anschließend exportieren lassen. Die Web-Anwendung LayoutIt! ermöglicht diesen Prozess und ist relativ einfach aufgebaut.

Der Editor kann direkt im Browser gestartet werden und setzt sich aus einer Spalte mit den verfügbaren Komponenten und einem Arbeitsbereich zusammen, in dem die Bausteine platziert werden. Diese können innerhalb des Arbeitsbereichs bewegt und wieder entfernt werden. Ein mit LayoutIt! erstelltes Bootstrap-Layout lässt sich schließlich exportieren und steht dann in Form von HTML-, CSS- und JavaScript-Dateien zur Verfügung.

Adobe Muse: Webdesign-Tool für mobile Websites

Seit über einem Jahr bietet Adobe nun sein neuartiges Webdesign-Werkzeug Muse an, mit dem sich Websites auch ohne Programmierkenntnisse erstellen lassen. Dabei kann auf eine solide Auswahl an Widgets (Accordions, Lightboxes, Kontaktformulare, Diashows, uvm.) zurückgegriffen werden. Die Benutzeroberfläche der Software ist an bestehende Print-Werkzeuge wie Illustrator oder InDesign angepasst, so dass ich Print-Designer leicht zurechtfinden dürften.
Das Programm hat inzwischen einige Neuerungen erfahren, zu denen auch die Umsetzung von mobilen Websites zählt.

So lassen sich mit Muse nun auch responsive Websites erzeugen, die entsprechend auf mobile Endgeräte und deren Bildschirmgrößen reagieren. Das Erstellen von mobilen Varianten einer Seite ist an das "alternative Layout" von InDesign angelehnt, was die Arbeitsweise erleichtern soll. Muse bietet zudem Multi-Touch-Unterstützung und integriert diverse jQuery-Plugins, die Touch- und Swipe-Gesten ermöglichen. Mittlerweile wurde das JavaScript-Framework "Spry" komplett durch jQuery ersetzt und auch der exportierte HTML-Quelltext wurde um Einiges verbessert.
Muse-Websites können entweder im HTML-Format auf einen eigenen Webserver hochgeladen oder bei Adobe per Business Catalyst gehostet werden. Muse kann für 18,44 EUR in der Creative Cloud abonniert werden.

Junior: HTML5-Frontend-Framework für mobile Apps

Für die Entwicklung von mobilen Webapps bieten sich verschiedene Frameworks an, vorzugsweise Kendo UI oder jQuery Mobile. Ein weiterer Ansatz kommt mit der HTML5-Bibliothek Junior, die auf Modernizr, Zepto, Lodash und Backbone aufsetzt.

Junior bietet also Swipe-Gesten, CSS3-Transitions, CSS-UI-Komponenten und eine ordentliche App-Struktur durch die Verwendung von Views und Routern, die durch Backbone bereitgestellt werden:

• var AppRouter = Jr.Router.extend({
• routes: {
• '': 'home',
• 'about': 'about',
• 'details': 'details'
• },
•  
• home: function(){
• var homeView = new HomeView();
• this.renderView(homeView);
• },
•  
• details: function() {
• var detailsView = new DetailsView();
• this.renderView(detailsView);
• }
• });

Ein dokumentiertes Beispiel findet sich hier, das einen Einblick in eine Junior-Anwendung gewährt.

QUOjs: JavaScript-Library für mobile Projekte

Wer Websites oder Anwendungen für mobile Geräte entwickelt, wird nicht immer den vollen Funktionsumfang einer klassischen JavaScript-Bibliothek benötigen. In der Regel reichen Selektor-, CSS- und Ajax-Funktionalitäten aus, um ein mobiles Szenario zu realisieren. Interessant für mobile Projekte sind dann schließlich verschiedene Gesten wie Touch, Swipe oder Tap. Genau hier kommt das Mikro-Framework QUOjs ins Spiel, das mit Funktionen für Touch-Gesten ausgestattet ist.

Global kommt bei QUOjs der Namespace "$$" zum Einsatz, der aus anderen Bibliotheken bereits bekannt sein dürfte. Ein paar Beispiele für QUOjs-Code:

• // Selektoren
• $$("article").sibblings().last();
• $$("article").children().first();
•  
• // Tap-Event
• $$("p").tap(function() {
• // CSS-Anpassungen
• $$("span", this).style("color", "red");
• });

QUOjs kommt zudem mit gängigen Ajax-Funktionalitäten und bietet auch diverse Umgebungsvariablen wie "isMobile" oder "browser" an, mit denen sich das Endgerät des Benutzers feststellen lässt.

Webdesign: Retina-Grafiken für iPad/iPhone ausliefern

Mit der Einführung des "Retina Displays" steht bei neueren iPhone- und iPad-Modellen die vierfache Menge an Pixeln zur Verfügung. Das iPad 3 kommt so beispielsweise mit einer Bildschirmauflösung von 2048×1536 Pixeln und bietet eine entsprechend höhere Bildqualität, die sich in erster Linie bei HD-Videos bemerkbar macht.
Auch im Web kann das eine Umstellung bedeuten, denn Grafiken können jetzt mit der doppelten Größe ausgeliefert werden, so dass mehr Details geboten werden können. Bei der Entwicklung von nativen iOS-Apps können Retina-Grafiken einfach durch den Dateinamen kenntlich gemacht werden und so muss lediglich der Suffix "@2x" angehängt werden. Wer diese Lösung auch auf Websites einsetzen möchte, kann sich Retina.js ansehen: Die JavaScript-Lösung überprüft, ob eine Retina-Version einer Grafik existiert und tauscht diese entsprechend aus.

Eine weitere Lösung, bei der noch PHP zum Einsatz kommt, wäre Retina Images. Hier besteht der Vorteil darin, dass nur eine Grafik an den Benutzer ausgeliefert wird und zudem Fallbacks bestehen, wenn JavaScript oder Cookies deaktiviert sind. Das PHP-Skript wertet die vorliegende Information über die Bildschirmauflösung aus und liefert die bestmögliche Größe aus. Zu beachten ist, dass img-Grafiken die Attribute "width" und "height" und CSS-Background-Images das Attribut "background-size" besitzen müssen. Downloads und Informationen finden sich wieder bei GitHub.

Remote-Tilt: Bewegungssensor im Browser simulieren

Wer sich im Browser mit der Entwicklung von Anwendungen beschäftigt, die auf den Beschleunigungsmesser (Accelerometer) des Smart-Phones zugreifen, wird womöglich Schwierigkeiten haben, die Anwendung zu testen: Bei der Verwendung eines echten Geräts fehlen wichtige Entwicklerwerkzeuge des Browsers und ein Debugging geht eher schleppend voran. Eine logische Brücke zwischen Smart-Phone und Browser, welche die Bewegungsdaten überträgt (also als Proxy agiert), könnte mit JavaScript realisiert werden.
Kein Geringerer als Remy Sharp hat genau dieses Bindeglied entwickelt und es unter dem Namen Remote-Tilt veröffentlicht.

Bei Remote-Tilt handelt es sich also um eine JavaScript-Datei, die nur auf der Seite eingebunden werden muss, die getestet werden soll. Anschließend kann über ein Popup-Fenster ein Simulator gestartet werden, der sich dreidimensional rotieren lässt. Alternativ kann auch ein echtes Endgerät verwendet werden, das eine URL mit einem bestimmten Key aufrufen muss und dadurch die Daten des Beschleunigungsmessers und Gyro-Sensors an den Browser übermittelt. Auf der Seite von Remote-Tilt finden sich verschiedene Anwendungsbeispiele, die demonstrieren, wie das Skript in Aktion aussehen kann.

Responsive Webdesign: Workflow und Best Practices

Viele Web-Projekte werden schon jetzt auf die Zukunft vorbereitet: Durch den Einsatz von CSS3 und "Media Queries" lässt sich eine Website für verschiedene Auflösungen optimieren. Endgeräten mit einer kleineren Auflösung bzw. Fenstergröße kann dadurch ein angepasstes Design geliefert werden, das den Ansprüchen des zur Verfügung stehenden Platzes gerecht werden kann. Die Kunst des "responsiven" Webdesigns ist dennoch nicht ganz einfach, da die Konsistenz des Designs beibehalten werden sollte. Bildelemente sollten möglichst nicht nach oben hin skaliert werden und eine größere Menüstruktur lässt sich nicht in allen Auflösungen gut darstellen.
Wer auf der Suche nach einem beispielhaften Workflow für responsives Webdesign ist, könnte bei Couchable.co fündig werden: Dort wurde vor einiger Zeit ein ausführlicher Artikel veröffentlicht, der einen gängigen Arbeitsfluss für die Erstellung von dynamischen Web-Layouts veranschaulicht.

So werden die verschiedenen Auflösungen behandelt, für die es gilt, Optimierungen zu erstellen. Weiterhin werden bestimmte Eckpunkte behandelt, die wichtig für ein flexibles Layout sein können. In dem Artikel werden abschließend diverse Frameworks genannt, darunter auch das Test-Tool von Matt Kersley, mit dem sich eine Website in verschiedenen Breiten betrachten und testen lässt.

Overthrow: Polyfill für dynamische Scroll-Bereiche

Das CSS-Attribut "overflow" bietet schon lange die Möglichkeit, Container mit einem Scrollbalken zu versehen, so dass deren Inhalt explizit in diesem Bereich gescrollt werden kann. Voraussetzung ist, dass die Höhe des Inhalts über die festgelegte Größe des äußeren Containers hinausragt. Mit "overflow:auto;" werden die Scrollbalken eingeblendet. In Desktop-Browsern kein Problem, auf mobilen Geräten nur teilweise möglich: Moderne Smartphone- oder Tablet-Browser, die etwa mit einer aktuellen WebKit-Engine ausgestattet sind, können das CSS-Attribut problemlos verarbeiten. In Verbindung mit der Eigenschaft

• -webkit-overflow-scrolling: touch;

wird auf dem mobilen Endgerät das dynamische Scrollen (durch Beschleunigen und Abbremsen) aktiviert. Leider ist das Feststellen der "Overflow"-Eigenschaften des Zielbrowsers nicht ganz einfach. Abhilfe schafft hier ein Skript wie Overthrow, das die notwendige Erkennung durchführt.

So kann das gewünschte Container-Element einfach mit "overflow:auto;" versehen werden und in Browsern, in denen die Eigenschaft nativ nicht unterstützt wird, kommt das Overthrow-Skript zum Tragen. Hier wird das Verhalten simuliert, so dass der gewünschte Effekt auf allen Browsern ermöglicht wird. Die Demo-Seite zeigt Overthrow in Aktion und bei GitHub steht das Skript zum Download bereit.