Webentwicklung auf dem iPad

Das iPad scheint sich auf den ersten Blick für alles andere, nur nicht für das produktive Arbeiten zu eignen. Wer indes ein paar Euro investiert und sich einen Eingabestift und eine Bluetooth-Tastatur anschafft, verwandelt das Gerät schnell in einen mobilen Arbeitsplatz.

Ideen sammeln

Am Anfang des Designs stehen die ersten Ideen und flüchtige Skizzen. Das iPad eignet sich ideal dafür, um allein oder in kleiner Runde die ersten Entwürfe zu konzipieren. Zeichnen können Sie auf dem Display des Geräts natürlich auch unmittelbar mit Ihren Fingern.

Mehr Spaß macht es allerdings, wenn Sie sich einen Eingabestift (Stylus) anschaffen. Damit stellt sich schnell das natürliche Zeichengefühl ein. An Grafikprogrammen für das iPad herrscht im iTunes Store kein Mangel. Zu den preiswerteren, aber dennoch guten Vertretern gehört hier Penultimate, das bereits für 80 Cent zu bekommen ist.

Das Programm organisiert Ihre Zeichnungen in Form von Notizbüchern. Die Bedienung ist selbsterklärend und es stehen Ihnen ausreichend Farben und Stiftstärken für Skizzen zur Verfügung. Ihre Werke können Sie einzeln oder als Notizbuch versenden. Wie bei immer mehr Apps bietet auch diese Software die Option an, auf Dropbox für den Datenaustausch zuzugreifen.

Eine größere Palette an Werkzeugen bietet Ihnen Noteshelf, das für knapp 5 Euro zu haben ist. Es unterscheidet sich in der Bedienung nur unwesentlich von Penultimate.

Nutzer, die sich bereits für die Cloud-Angebote von Adobe freigeschaltet haben, greifen am besten gleich zu Adobe Ideas . Das Programm ermöglicht das Anlegen von Skizzen im Vektorformat, die sich dann problemlos auch in anderen Adobe-Desktop-Programmen weiterbearbeiten lassen.

Allerdings rangiert die Software am oberen Ende des Preissegments. 8 Euro kostet die Anwendung, was interessant ist, da sie zunächst kostenfrei angeboten wurde.

Wireframes und Mockups zeichnen

Nach den allerersten Skizzen werden die gesammelten Ideen meist in die Form von Mock-ups, also einem Grundbauplan für die einzelnen Seiten, gebracht. Solche Seitengerüste (Wireframes) könnten Sie auch mit einfachen Zeichenprogrammen anlegen, schneller geht dies aber mit Spezialanwendungen, da hier bereits Formen und Vorlagen integriert sind.

iMockups ist über iTunes für knapp 7 Euro zu bekommen. Die Software bietet einen reichhaltigen Grundstock an Grafikprimitiven und Formen, mit denen Sie schnell eine Bildschirmseite skizzieren können.

Mit einem doppelten Tippen auf ein Element lassen sich stets dessen Eigenschaften aufrufen, um Farben oder die Größe zu verändern. Elemente oder auch Seiten verlinken Sie bei Bedarf miteinander, sodass ein regelrechtes Modell der späteren Site entsteht. Die Arbeitsergebnisse exportieren Sie entweder als PNG- oder PDF-Datei.

Ratgeber: SEO-Tools im Vergleich

Als besonderes Bonbon steht auch der Export als BMML-File zur Verfügung. Dieses Format kann dann etwa mit dem sehr guten Balsamiq Mockup auf dem Desktop gelesen und weiter bearbeitet werden. Zum gleichen Preis bietet auch Adobe mit seinem Proto eine App an. Sie wartet mit der Besonderheit auf, dass sich die Daten als interaktives Projekt in Form eines ZIP-Archivs versenden lassen.

Allerdings trübt sich der zunächst positive Eindruck etwas, je länger man mit der Version arbeitet. Neben kleineren Fehlern beim Gruppieren von Objekten, die wahrscheinlich in einem der nächsten Releases automatisch behoben sein dürften, stört die Umsetzung einiger Grundfunktionen.

So erzeugt gerade der Export als ZIP-Datei große Redundanzen, weil immer das vollständige Projekt exportiert wird. Etwas unverständlich ist, dass zwar eine Registernavigation als Schablone zur Auswahl steht, sich die Beschriftung der Register aber nicht ändern lässt.

Wie gut iMockups bereits ist, zeigt ein Vergleich mit dem preiswerteren Sketchypad. Darin sind zwar auch viele sehr hübsch anzuschauende Formen enthalten. Allerdings ohne die sehr hilfreichen Funktionen zum Ausrichten der Elemente untereinander. Denn iMockups blendet in diesem Fall automatisch Hilfslinien ein, sodass sich die Oberkanten von Objekten problemlos zueinander positionieren lassen.

Einschränkungen im Workflow

Das iPad wurde von Apple in erster Linie für den leichteren Konsum seiner Content-Angebote (Musik, Videos, Magazine und E-Books) und für das Surfen im Internet entwickelt. In vielerlei Hinsicht verhält sich das Betriebssystem iOS völlig anders als gewohnt.

Eine der wesentlichen Einschränkungen des Taschencomputers betrifft das Dateisystem und den Speicherplatz selbst. Es ist von den Entwicklern nicht vorgesehen, dass der Nutzer unmittelbaren Zugriff auf die Datei- und Ordnerhierarchie seines iPads erhält.

Das erschwert die Auswahl und das Einbinden der entsprechenden Dateien gleichermaßen. Das gilt auch für das Zusammenspiel zwischen verschiedenen Anwendungen. In erster Linie stehen in iOS der Versand per E-Mail oder die Anzeige mittels eines Betrachters im Vordergrund. Ein Austausch zwischen Programmen per Drag-und-Drop ist hier nicht vorgesehen. Das ist zugleich die Schwachstelle eines Workflows, der auf dem iPad basiert.

Ratgeber: So finden Sie das richtige Mockup-Tool

Gibt es für das Dateiformat keinen Betrachter, weiß das Betriebssystem damit auch nichts anzufangen. Die finalen Arbeitsergebnisse aus dem iPad also wieder herauszubekommen, ist damit teilweise etwas knifflig.

Eine Lösung für das Problem besteht in der Nutzung eines externen Dienstes wie Dropbox, der auch für das iPad angeboten wird. Viele Anwendungen prüfen inzwischen, ob die Dropbox-App installiert wurde, und stellen dann die Option zur Verfügung, Inhalte darin zu speichern.

Coding

Auch für die eigentliche Umsetzung und Programmierung von Websites finden Sie im App-Store einige Anwendungen. Aufgrund der von Apple sehr eingeschränkten Konnektivität kann die Arbeit mit zahlreichen Grafiken (je nach ausgewählter Software) allerdings eine etwas mühselige Angelegenheit sein.

Eine der besten Editoren für alle Programmiertätigkeiten könnte Diet-Coda sein. Das mit 16 Euro alles andere als preiswerte Programm speichert keine lokalen Dateien. Sie müssen also eine Verbindung zum Server oder einem Staging-Server einrichten und vor allen Dingen unterhalten, wenn Sie mit dem Werkzeug arbeiten wollen. Wer viel mit PHP oder Javascript arbeitet, dem wird die Software gute Dienste leisten.

An ihre Grenzen stößt die App aber dann, wenn es um die Integration von Medien und Bildern geht. Denn Diet-Coda kann weder Grafiken noch andere Dateiformate unmittelbar hochladen. Hier muss der Anwender den Umweg über einen FTP-Client gehen, mit dem zunächst die Bilder oder Medien auf den Server übertragen werden, um diese anschließend in seinem Projekt zu referenzieren.

Deutlich preiswerter ist Koder , das in Sachen Konnektivität nicht hinter Diet-Coda zurückstecken muss. Dateien, die Sie bearbeiten oder anlegen wollen, können per Webdav, Dropbox oder FTP (SFTP) ausgetauscht werden.

Das Programm legt aber auch einen lokalen Datenspeicher an, sodass Sie auch hervorragend offline weiter arbeiten können. Koder nutzt eine interne Vorschaufunktion für HTML-Seiten, die eine stetige Kontrolle des Arbeitsergebnisses erlauben.

Der eigentliche Editor selbst ist recht schlicht gehalten, ergänzt aber die Bildschirmtastatur um einige Kurzbefehle. Damit wird das Einfügen der Klammern und Anführungszeichen, wie sie im Quellcode so oft benötigt werden, vereinfacht. Auch das Setzen von Einrückungen für eine bessere Übersicht ist so schneller erledigt.

Koder setzt stark auf Snippets, liefert aber leider nur sehr wenige Beispiele dafür aus. Das schafft dem Entwickler zwar viele Freiheiten, erhöht aber den Aufwand für die Einrichtung der Software für den eigenen optimalen Arbeitsprozess.

So müssen Sie beispielsweise selbst zunächst das Grundgerüst für eine HTML-Seite als Snippet definieren, damit Sie es später jederzeit über das passende Menü aufrufen können. Abgesehen von dieser Einschränkung ist Koder aber ein solides Arbeitstier.

Wartung und Controlling

Derzeit gibt es leider noch keine App, mit der sich der endgültige Quellcode auf Fehler untersuchen oder sich die Darstellung für möglichst viele Browser überprüfen lässt. Mit Safari und Chrome für das iPad stehen zumindest schon einmal zwei recht gute Anzeigeprogramme zur Auswahl. Für die Überprüfung weichen Sie am besten auf einen Online-Service wie Adobe Browserlabs oder Adobe Shadow für mobile Browser aus.

Wer ein Template oder Seiten für Wordpress programmiert hat, wird sich über den offiziellen und kostenlosen Client für Wordpress freuen. Die App arbeitet sowohl mit Wordpress.com als auch eigenen Installationen zusammen und erfordert lediglich drei Angaben, um die Verbindung mit dem Server herzustellen.

Wenn Sie mehrere Installationen von Wordpress zu pflegen und zu überwachen haben, lohnt sich das Programm auf jeden Fall, da Sie alle Informationen und laufenden Arbeiten unter einer Oberfläche erledigen können. Mit der App schreiben Sie neue Beiträge und Seiten. Außerdem können Sie Kommentare beantworten und bearbeiten.

Diese grundsätzlichen Aufgaben erledigen Sie unter der nativen Oberfläche des iOS. Wenn Sie sich um die Aktualisierung von Plug-ins oder Template-Dateien kümmern müssen, lässt sich das Dashboard der jeweiligen Instanz aufrufen. Sie arbeiten dann wie gewohnt im Backend von Wordpress.

Am Ende des Entwicklungsprozesses steht natürlich auch die Erfolgskontrolle der Seiten. Für Nutzer von Google Analytics hält der App-Store hier einen wahren Leckerbissen bereit. Google Analytics für iPad ist der Name der durchdachten Anwendung. Sie fragt über eine verschlüsselte Verbindung die Daten eines Analytics-Benutzerkontos mitsamt aller Profile ab.

Über die Menüleiste wechseln Sie zwischen den verschiedenen Berichten. Einen Mehrnutzen gegenüber dem Besuch von Analytics im Browser bietet die App bereits durch die Speicherung der Berichte. Diese lassen sich als Lesezeichen im Programm anlegen. Dabei werden auch die Einstellungen hinsichtlich des Zeitraums oder Vergleichszeiträumen gespeichert. Mit einem Tap stehen diese dann wieder zur Verfügung.

Die Berichte können für die spätere Nutzung ohne Internetanschluss als PDF gespeichert werden, wahlweise auch in der Dropbox. Die App wird auch in einer Premiumvariante angeboten, die dann auf das Werbebanner am Rand des Programmfensters verzichtet.

Fazit

Wer sucht, der findet auch - so könnte das Motto rund um das Thema Webdesign auf dem iPad lauten. Mit den richtigen Apps und alternativen Eingabegeräten lässt sich mit dem Taschencomputer von Apple durchaus ernsthaft an Websites arbeiten. Gerade im Kreativprozess beim Skizzieren und Entwickeln neuer Sites spielt der kleine Begleiter seine Stärken aus.