Mobiles Webdesign (ohne spezifische OS)

[Elcrian]

Hallo zusammen,
ich habe mich vor einiger Zeit mal mit dem Design mobiler Applikationen und Websites beschäftigt, hab das Thema aber leider nicht mehr großartig verfolgt, ist ca. ein 3/4 Jahr her.

Was wäre aus eurer Sicht die heute technisch sinnigste Umsetzung für eine mobile Form einer Webpräsenz?

Mein Stand ist, dass jQuery Mobile (i.e. HTML, JS, CSS) die beste Wahl war, da es via UserAgent zum einen als normale Webpräsenz nutzbar ist und außerdem eingebunden in ein WebView massenkompatibel auch für Android, iOS und Windows Phone zu verwenden ist, in Form einer App. Dort könnte man das WebView mit einem OS-abhängigen Framework umgeben. Somit hätte man eine Seite die in 3 verschiedenen Sprachen (in Objective-C bei iOS und Java bei Android) ohne großen Anpassungsaufwand funktionieren würde.
Mit HTML5 kann man ja auch einiges machen, u.A. habe ich GPS, Canvas-Funktionen, sowie native Multimedia-Unterstützung im Kopf.

Aber gibt es da noch andere empfehlenswerte Frameworks oder Ansätze, eventuell etwas was auf C# oder GWT basiert?
Ich würde sonst wieder einen Blick auf jQuery Mobile mit HTML5 + CSS als Layout/Markup & für Grundfunktionen sowie JS für erweiterte Funktionen werfen, mit Aptana als IDE.

Wäre da sehr an Meinungen und ggf. Links interessiert.

 

[Madman1209]

Hi,

ich entwickle viel mit Sencha Touch. Wäre vielleicht auch mal einen Blick wert für dich.

VG,
Mad

 

[catmoney]

Ich nutze seit längerem Bootstrap von Twitter (http://www.catmoney.de/website-themes-gestalten-mit-dem-bootstrap-framework/) , was ebenfalls bereits als responsives Layout zur Verfügung steht.

Dann wäre vielleicht noch ein Blick auf www.initializr.com nicht schlecht, wenn's um schlanken Code gehen soll

 

[ice-breaker]

Es ist eben die Frage ob du ein Framework willst (Jquery Mobile, Sencha Touch) oder eben als Responsive Layout alles selber machen willst. Letzteres ist nicht wirklich viel mehr Arbeit aber du hast eben ein eigenes Design und siehst nicht wie jede andere Jquery Mobile Seite aus. Twitter Bootstrap hilft dann dabei eine gute Basisstruktur zu haben, die du nur noch stylen musst.

 

[Elcrian]

Hallo,
vielen Dank für die Anregungen. Habe darüber hinaus noch das in die gleiche Kerbe wie Bootstrap schlagende HTML5-Boilerplate gefunden. Gefällt mir beides sehr gut, da es ja einfach die Standard HTML und HTML5-Elemente mit einer netten CSS wrapped und einem das Kümmern um Responsive und grundsätzliches Design abnimmt - schon sehr cool.

Ich habe mir aber auch Sencha Touch in die IDE geworfen und mal dort etwas rumprobiert und bin mir nun nicht wirklich sicher, wo da die Vorteile der wesentlich anspruchsvolleren und viel mehr Einarbeit fordernden Entwicklung sind.
Also etwas dämlich gefragt: Was kann Sencha Touch Framework effektiv mehr als ein HTML5-Wrapper wie Bootstrap?

 

[Daaron]

Hinsichtlich Webseiten geht nix über das gute alte D.I.Y.
Schreib sauberes Markup bzw. such dir ein CMS, das sauberes Markup anlegt (Contao, am besten noch mit Holy Grail Plugin, gibt z.B. recht ordentlichen Code). Fütter es dann mit flexiblen CSS-Deklarationen inklusive dem exzessiven Gebrauch von Media Queries.

JavaScript kann, muss aber definitiv nicht. Was man über CSS lösen kann sollte man auch über CSS lösen.

 

[ice-breaker]

Sencha Touch ist ein HTML-Framework welches eine ähnliche Oberfläche zu nativen Anwendungen realisiert. Also z.B. Listen [1] usw. Eine normale HTML-Oberfläche hat das natürlich nicht, da musst du es selbst bauen oder lassen. Wenn es um eine mobile Webseite geht, würde ich es persönlich auch noch nicht so wie ein App aussehen lassen.

Bootstrap ist aber mehr als ein "HTML-Wrapper" da es gleich noch weitere HTML-"Bibliotheken" wie Sencha Touch anbietet, die für Webanwendungen sinnvoll sind, aber z.T. selbst mit CSS sehr viel Arbeit sind. So z.B. die Buttons mit Icons. Oder einfach eine gute Struktur für die Navigation vorgibt, deren Verhalten sich durch CSS-Klassen dann sehr leicht modifizieren lässt (horizontal vs. vertikal, normal oder mitscrollend usw.)

[1] http://docs.sencha.com/touch/2-0/#!/guide/list

 

[catmoney]

@Elcrian:
Übrigens baut initializr.com auf HTML 5 Boilerplate auf.

 

[Elcrian]

Hallo,
ich habe das damals nie weiter verfolgt und will mich endlich mal ranwagen an das Thema. Habe mich die Tage etwas mehr in Frameworks eingelesen, die in irgendeiner Form für native Apps taugen. Im Endeffekt bleibt es da bei folgenden Kandidaten:

PhoneGap - HTML5/CSS/JS als Webview automatisch in einer nativen App, inkl. nativer API-Calls. Recht langsam, da nur HTML5 in Webview (jedenfalls in a nutshell), brauch daher auch Sencha, Bootstrap oder jQuery
Rhomobile - Ruby/JS/HTML, dafür aber von Motorola mit erstaunlich wenig Support und Referenzen. Komme ich (kann kein Ruby und bin kein Unix- und Git-Experte) aber so spontan gar nicht mit klar
Appcelerator Titanium - JS, nativ als App übersetzt. Wird mit Abstand am interessantesten, kostet leider aber. :/
MoSync - ähnlich wie Titanium?!

Hat jemand noch andere Ideen oder Erfahrungen mit solchen Frameworks?

 

[Madman1209]

Hi,

ich möchte dich nur noch auf folgende Studie hinweisen: Kendo UI Survey

Ergebnis: reine Webapps sind absolut im kommen! Wenn also die nativen API-Geschichten nicht unbedingt gebraucht werden verzichte darauf und mache lieber eine reine Webapp. "Plattformübergreifend" ist da ein absolutes Totschlagargument

Bin auch mit Sencha Touch bisher extrem gut gefahren, auch als reine Webapp.

VG,
Mad

 

[Elcrian]

Danke, sehr interessant!

Werde mich dann mal intensiver (wieder) in HTML5, JS und CSS einlesen, eventuell mal ein Buch zulegen.

 

[Madman1209]

Hi,

kann man nur empfehlen. Macht vor allem richtig Spaß und der Erfolg stellt sich (zumindest zu Beginn) recht schnell ein.

Wie gesagt, meine Empfehlung bleibt Sencha Touch in der neuesten Version. Die von dir angesprochenen Produkte sind grundsätzlich aber auch nicht schlecht, das muss man auch sagen!

VG,
Mad

 

[Elcrian]

Kannst du (oder natürlich auch wer anders ) eine gute Anlaufstelle empfehlen, wenn man sich etwas mehr en detail einlesen kann? Ich habe zwar sicherlich vor einiger Zeit einiges mit HTML und CSS sowie ab und an mal JS gemacht, aber es scheint sich ja so einiges geändert zu haben (zumal es bei mir früher immer eine Bastelei war).

 

[Madman1209]

Hi,

das würde ich ganz stark davon abhängig machen, was genau du in welcher Umgebung vorhast. Wenn du z.B. mit Titanium arbeitest wirst du ein ganz anderes Vorgehen und auch ein ganz anderes "Programmierverfahren" wählen müssen als wenn du mit Sencha oder jQuery arbeitest.

Grundsätzlich würde ich die Tutorials durcharbeiten, die die jeweilge Umgebung dir anbietet, einfach um in den "Flow" reinzukommen der da genutzt wird.

HTML5 und CSS3 mit JavaScript generell würde ich sagen: HTML5 Rocks einfach mal ansehen, "klassisches" HTML natürlich bei SelfHTML und CSS3 einfach mal bei Google einwerfen, da finden sich etliche Seiten.

VG,
Mad

 

[ice-breaker]

PhoneGap - HTML5/CSS/JS als Webview automatisch in einer nativen App, inkl. nativer API-Calls. Recht langsam, da nur HTML5 in Webview (jedenfalls in a nutshell), brauch daher auch Sencha, Bootstrap oder jQuery

Es ist langsamer als eine native Oberfläche, stimmt. Aber gerade durch den Einsatz von Sencha, Bootstrap oder jQuery wird es erst richtig langsam. Am schnellsten ist eine Apache Cordova Anwendung (so heisst das mittlerweile) wenn du wirklich so "browsernah" wie möglich arbeitest. Jquery hat Unmengen Abstraktionen drinne, die selbst gebastelte Sizzle Selector Engine brauchst du z.B. auf Grund von document.querySelector nicht. Sizzle wird benötigt weil es in alten Browsern laufen muss, du hast aber ein sehr fixes Gebiet, brauchst diese alten Fallbacks also nicht. Auch Bootstrap beinhaltet Unmengen Fixes für Browserquirks für DESKTOP-Browser, entwickelst du für einen Desktop-Browser? Und ich denke über Sencha muss man nicht viel sagen, was da alles dahintersteckt...
Am besten wird sich deine Cordova App anfühlen, wenn du auf möglichst viele Frameworks verzichtest und möglichst auf Basis der nativen Browserfunktionen arbeitest.
Und nebenbei noch 10 Tipps
Das ganze kann immer gut gehen, wie bei Madman1209, kann aber genauso auch in die Hose gehen - wie bei einem Kunden. Da musste die Sencha Mobilapp dann noch auf uralt Androids laufen, die natürlich viel weniger Leistung als heutige Geräte haben und die Testnutzer einfach nicht mit der "snapiness" zufrieden waren, es sich wie ein Fremdkörper anfühlte.

Appcelerator Titanium - JS, nativ als App übersetzt. Wird mit Abstand am interessantesten, kostet leider aber. :/

Titanium Mobile kostet gar nichts Alles was du brauchst ist OpenSource und kostenlos, nur wenn du eben offiziellen Support willst oder einen der Peemium Services, dann kostet es. Aber man kann sehr gut ohne diese entwickeln. Die iOS-Variante funktioniert wirklich sehr super, von der Android-Variante gibt es geteilte Meinungen. Hält man sich aber an den neuen Aufbau von Titanium soll es gut funktionieren, nur die Art, wie man pre-1.5 entwickelt hat, soll wohl schnell zu Memory Leaks und Co. in Android führen.



Abschließend meine Meinung: Es gibt aktuell kein richtig oder falsch ob reines WebApp, WebApp in Cordova oder Titanium Mobile. Auch ob die WebApp möglichst frameworkfrei oder mit einem Monster wie Sencha entwickelt werden soll, ist immer eine Sache der Anforderung.
Überlege deine Zielgruppe (welche mobilen Betriebssysteme?), welche Geräte du unterstützen willst (alles seit dem iPhone 1.0? nur aktuelle? aktuelle und ältere langsamer?) und wie deine Verteilungsstrategie aussieht (WebApp vs. AppStore). Und dann welche der Entwicklungsvarianten dir am meisten zusagt. HTML - auch in Cordova - läuft sofort in vielen Systemen, ein deutlicher Pluspunkt, aber in allen auch verschieden effizient. Eine native App mit Titanium Mobile nur iOS und Android - dafür mit nativer Oberfläche.
Es ist immer ein Abwägen der Kompromisse, es gibt noch keine One-Fits-All Lösung.



@Madman1209: Man sollte bei solchen "Studien" aber auch nicht vergessen, dass diese von Kendo durchgeführt wurden, also mit der speziellen Zielgruppe von KendoUI-Kunden, also Enwicklern von WebApps. Appcelerator macht ja auch so eigene "Studien", und da kommt dann genau das Gegenteil raus, welch ein Wunder, da nehmen ja nativ-App-Entwickler teil. Also solche "Studien" sind mit Vorsicht zu betrachten, die Wahrheit wird irgendwo zwischen den Ergebnissen von Kendo als auch Appcelerator liegen.

 

[Madman1209]

Hi,

ist sicher richtig, ganz vorbehaltslos waren die Mannen sicher nicht. Aber die schiere Anzahl an Entwicklern ist eigentlich schon ein klares Anzeichen für (zumindest eine gewisse) Seriosität. Und ich kann auch bestätigen, dass die Kundennachfrage nach HTML5 oder "Webapps" deutlich gestiegen ist. Wirklich native Apps brauchen die wenigsten Unternehmen, und wenn man sich die Kosten ansieht , wenn es auf allen modernen Gerätschaften laufen soll und nativ geschrieben / migriert werden muss, dann führt fast kein Weg an einer reinen HTML5 "Webapp" vorbei in meinen Augen.

VG,
Mad

 

[ice-breaker]

Ja das ist immer so eine Sache. Eine Firma für die Entwicklung nativer Apps, wird eine andere Aussage treffen, du verstehst worauf ich hinauswill?
Imho gibt es aktuell beide Richtungen, und beide sind ähnlich stark vertreten. Nur problematisch wird es dann immer, wenn der Kunde zwar eine WebApp will, diese aber Funktionen von nativen Apps haben soll....


Meine Meinung ist da eben folgende: Der Kunde will das, womit er am günstigen die meisten seiner Kunden erreicht. Ob WebApp oder natives App ist den meisten da egal, der Preis bestimmt. Nur reine WebApps, die nicht durch Lösungen wie Cordova auch in einem AppStore landen können, interessieren die wenigsten, denn das man WebApps auf dem HomeScreen ablegen kann, wissen die wenigsten.
Wie gesagt, alles meine Meinung, und absolut unvorbehaltslos irgendeiner Meinung, ich präferiere nichtmal selbst eine der anderen Lösung.

 

[Madman1209]

Hi,

Meine Meinung ist da eben folgende: Der Kunde will das, womit er am günstigen die meisten seiner Kunden erreicht.

Absolut richtig Ich sehe das auch voll und ganz wie du. Wir machen als Firma nur sowohl native als auch Webapp-Entwicklung, und wenn den Leuten der Unterschied erst einmal vermittelt wird sind die meisten eigentlich eher für die Webapp, einfach weil sich viele Probleme im Keim ersticken lassen.

Aktuelles Beispiel: Eine native Android-App für einen Kunden. Tablet Anwendung. Jetzt sollen die Damen im Büro die auch ohne Tablet auf dem "normalen PC" nutzen können. Oh und der Herr im Aussendienst in Hamburg hat kein Android Gerät sondern ein iPad - aber das ist doch kein Problem, ist ja auch ein Tablet, oder?

Hätte man von Haus aus gesagt und gewusst, dass es auf mehreren oder allen Plattformen laufen können muss wäre die native Android-App sofort in der Versenke verschwunden. Und wirkliche native-API Geschichten sind kaum drin. Hätte man bestimmt anders lösen können.

Wie gesagt, alles meine Meinung, und absolut unvorbehaltslos irgendeiner Meinung, ich präferiere nichtmal selbst eine der anderen Lösung.

Finde ich auch immer klasse mit dir zu "diskutieren", weil es einfach sachlich und vorbehaltslos klappt und der TE am Ende vielleicht auch einen anderen Blickwinkel auf die Dinge kriegt! Danke dafür!

VG,
Mad

 

[ice-breaker]

Ok, dein Beispiel ist interessant. Habt ihr dem Kunden mal vorgeschlagen, die WebApp zusätzlich von mit Apache Cordova verpackt in die AppStores stellen zu können? Der Mehraufwand ist ja sehr gering, aber der Kunde gewinnt dabei ja zusätzlich den "Vorteil" einer App im AppStore. Wenn ja würde mich interessieren, wie er reagiert hat und ob es in Betracht wurde und wenn nicht, aus welchen Gründen - natürlich nur wenn es dir erlaubt ist. Ansonsten gebe einfach persönlich "deine" (Hint hint! xD) wieder, wobei die mich da auch interessiert, da du ja die WebApp sehr präferierst.

 

[Madman1209]

Hi,

naja, viel darf ich nicht drüber sagen Es geht auf jedenfall bei dem Projekt nur um Software, die vom Kunden selber eingesetzt wird. Sprich: In AppStores oder Markets taucht die App so oder so nicht auf. Soll bzw. darf sie gar nicht

Die Anforderung "auf allen möglichen Plattformen" kam wie gesagt auch erst danach, zu Beginn hieß es "ausschließlich Android, von HTML5 wollen wir nichts wissen, es muss möglichst performant sein". Die kosten für die Plattformportierungen waren dann jetzt auch zu hoch, weshalb der Vertriebsmann in Hamburg jetzt auch mit einem "innerbetrieblichen" iPad und mit einem "aussendienstlichen" Android Tablet in der Tasche rumfährt

Apache Cordova klingt - in meinen Augen, gerade was die nativen API-Calls angeht - nach dem Mittel der Wahl, in Kombination mit jQuery oder Sencha für die UI (wenn denn Desktop-Browser und sonstige "Schweinereien" unterstützt werden müssen) dürfte das (wenn ich mich jetzt weit aus dem Fenster lehne) die Zukunft in dem Markt sein. Kann also deine Empfehlung nur unterstützen.

Wobei ich sagen muss, dass wir bisher bei der WebApp Entwicklung bei uns noch nicht mit Apache Cordova gearbeitet haben - bisher ging es da meist um Statistiken, Auswertungen, Bilanzen etc. Native Dinge wie ein Accelerometer oder Kameras oder sonstige Dinge waren da schlicht nicht nötig

Aber ich werde mir Apache Cordova auf alle Fälle ansehen. Unser Chef interessiert sich auch immer für solche Themen, gerade wenn es um Webapps geht

VG,
Mad