Das E-Book ist mit Version 1.1. etwas umfangreicher geworden, 55 anstelle von 51 Seiten. Wir haben nun Beispiele von anderen Apps aufgenommen, um zeigen, wie UI-Elemente dort verwendet werden. Darüber hinaus sind wir auch auf die Neuerungen eingegangen, die mit Android 4 (Ice Cream Sandwich) und iOS5 einhergehen.

Da die Zeit im Bereich Mobile sicherlich nicht stehen bleibt, wird auch Version 1.1. nicht die letzte Fassung bleiben. Wir würden uns in dem Zusammenhang natürlich freuen, wenn ihr uns Feedback bzw. Anregungen gebt, was euch gefällt, was wir vielleicht noch mit aufnehmen sollten. Ihr könnt entweder hier im Blog einen Kommentar hinterlassen, uns über Twitter, Facebook und natürlich gerne auch per E-Mail kontaktieren.

So und jetzt wünschen wir euch viel Spaß beim Lesen!

Heute, 5.12., sprechen unsere drei Gründer Halil, Manu und Benno im Coworking-Space Nürnberg im Rahmen der Veranstaltungsreihe “Founders at Work” über die Gründungsgeschichte von insertEFFECT. Es geht um Erfahrungen und Fettnäpfchen, tolle Zeiten und Wendepunkte.

Ort: Coworkig Space Nürnberg
Josephsplatz 8
Zeit: 19 Uhr
http://www.coworking-nuernberg.de/

Mehr Infos: http://www.coworking-nuernberg.de/coworking/founders-at-work-inserteffect/

Hier die Folien:

Der Webmontag fand in unserem Büro in Gostenhof statt.
Dies war der zweite Webmontag bei uns. Diesmal im neuen Büro mit neuer Dachterasse. Da der erste Webmontag sehr gut ankam (siehe www.machen.de/blog oder www.informatik-student.de oder http://id-o.de) gaben wir alles dafür, es wieder gut zu machen.

Um 17.00 Uhr wurden die Notebooks zugeklappt und 12 emsige Mitarbeiter fingen an das Büro auf den Kopf zu stellen. Schreibtische auseinander bauen, Monitore wegräumen, Getränke bereitstellen, Pizza bestellen und 20 Lümmels holen (Nein, Lümmels sind nicht die Informatiker die man aus ihrem Kellereck hervor holen muss. Lümmels sind diese L-förmigen Sitzkissen, die wirklich bequem sind, hat man denn mal die bequeme Sitzposition gefunden).

Emsiger Aufbau

Der erste Raum füllte sich dann langsam aber stetig, bis zum Beginn der Vorträge, mit etwa 50 - 60 Webmontag begeisterten und Neulingen auf.

Es wird voller.

Dann war alles besetzt.

Den ersten Vortrag hielten Benno, Manu und Hall, die drei Gründer von insertEFFECT mit ihrer Start-Up Story.
Lustig und spannend durften alle eine Zeitreise miterleben, wie es die insertEFFECT GmbH geschafft hat zu so einer Größe im Web Mobile Bereich zu werden. Die Folien können hier durchgeklickt werden. Der Charme und Witz der drei kommt dabei leider nicht so rüber.

insertEFFECT

Als wär es geplant gewesen war auch just nach dem Vortrag die Pizzalieferung da. Demnach gab es erstmal einmal etwas für den Magen.

Abendessen

Gestärkt mit Pizza und Keksen ging es weiter mit der nächsten Start-Up Story.

Man nehme eine Goldschmiedin, eine Designerin und einen Informatiker und erhält: amoonic.de (http://blog.amoonic.de/blog)
Das sind Sabine Beck, Olga Dick und Michael Nique. Sie erzählten von der Gründung ihres Unternehmens. Einer Website über die man sich Schmuck nach eigenen Wünschen gestalten und fertigen lassen kann. Jedes Teil ein Unikat, geschmiedet von einem befreundeten Goldschmiedemeister. Sie ließen uns an interessanten Stolpersteinen teilhaben, über die man bei einer Existenz-Gründung so fällt.

Amoonic

Gleich im Anschluss ging es weiter mit einem Vortrag von Michael Grosch von den Webkrauts (www.webkrauts.de) über Web-Fonts.
Er plauderte Webmontag-like aus dem Nähkästchen und teilte uns offen seine Erfahrungen im Bezug auf Web-Fonts mit. Die direkte Live-Vorführung der Änderung einer Schriftfamilie hat dann gezeigt, wie sich die Theorie in der Praxis anfühlt.

Web-Fonts

Mach doch mal lauter. Denn weiter gings mit Bastus Trump und gemäß seines Nachnamens zeigte er seinen Trumpf. (www.orphion.de)

Orphion: Ein Synthesizer mit unglaublich sensibler und ausgeklügelter Steuerung. Vorgestellt auf dem iPad und gekoppelt mit dem MacBook zauberte er Klangkörper, Terzen, Oktaven und schwingende Sounds aus den Boxen. Bei seiner Vorführung ließ er uns mit Hilfe der insertEFFECT Diskokugel in eine andere Welt abtauchen. Legato, Staccato, Allegro, alles ist möglich. Und nun auf der Suche nach einem Entwickler der die Herausforderung annimmt und… ein bisschen Zeit hat.

Orphion

Anschließend gab es noch ein paar Hinweise auf kommende Events und damit endete der vortragende Teil des Web Montags. Wieder viel gelernt und mitgenommen.

Mit Hintergrundmusik aus dem Orphion klang der Abend mit gelassenen und in Diskussionen vertieften Teilnehmern aus.

Hier noch ein paar Rückmeldungen via Twitter die auf unserer Twitterwall zu lesen waren:

migrosch Michael Grosch
Vielen Dank an @inserteffect für eine tolle Location für den heutigen #wmnue und spitzen Bewirtung #webmontag

novowebdesign novo.design
Danke @inserteffect für Pizza, Bier und top Location! #wmnue

spr2 Stefan Peter Roos
bestimmt +70 RT @norimberga: Danke @insertEFFECT für Location und Verpflegung. #wmnue

Und noch ein weiterer Blogeintrag zum Webmontag auf www.pohlaroid.de von Stefan Pohl.

Es hat uns jede Menge Spass gemacht. Wir hoffen euch auch. Bis zum nächstem Mal.
Euer insertEFFECT Team

Der kommende Webmontag Franken findet am 07.11.2011 in unseren Büroräumen statt. Es gibt Pizza, Getränke und interessante Vorträge:

• Sabine Beck, Olga Dick und Michael Niqué: “Erfahrungsbericht über die Gründung von amoonic.de”
• Michael Rohrmüller (PIXELMECHANICS): “Erfahrungsbericht einer SEO-Analyse - Ungewollter Traffic durch Bad-SEO oder ‘Wie eine chinesische Suchmaschine einen Server dicht macht.’”
• Florian Bailey: “Titel folgt noch”
• insertEFFECT: “Titel folgt noch”

Alle Plätze sind ausgebucht. Wenn ihr noch Lust habt vorbeizukommen, setzt euch beim Xing-Event auf “Vielleicht”, es werden noch Plätze freigeschaltet.

Wer noch nie etwas von einem Webmontag gehört hat, Infos gibt es hier. Dort heißt es: “Einzige Grundvoraussetzung sind Offenheit für neue Ideen sowie die Bereitschaft zu lernen und Wissen zu teilen.” Aber am besten ihr kommt vorbei, es lohnt sich!

Wir freuen uns auf euch und wieder einen tollen Webmontag. Bis dann!

Sketchbook Pro

+ Ideal für aufwendigere Skizzen
+ Hat sehr viele Zeichenwerkzeug (Bleistieft, Kulgelschreiber, Airbrush) und erweiterbar
+ Beherscht auch einfache Vektorformen wie Rechtecke und Kreise
+ Export als PSD-Datei incl. einzelnen Ebenen
Link zum App Store
Preis: 3,99 €

Procreate

+ Sehr einfache Bedienung, da sichs auf das Nötigste konzentriert wurde
+ Alle Funktionen direkt verfügbar und nicht in Menü gepackt
+ Einfache Pinseleinstellung
Link zum App Store
Preis: 3,99 €

Adobe Ideas

+ Einfache und schnelle Bedienung
+ Glättet die Zeichenlinien sehr gut. Somit sehen auch etwas verwackelte Zeichnungen sauber aus.
Link zum App Store
Preis: 4,99 €

Mein persönlicher Favorit ist Sketchbook Pro. Besonders der Export in Photoshop und die Vektorfunktionen haben’s mir angetan. Wer’s erstmal testen möchte, kann die kostenlose Express-Version laden.

insertEFFECT auf dem Webmontag 33 in Frankfurt

1. “Unity 3D” von Roman Engel

Roman Engel von daubit hat Unity3D vorgestellt, mit dem 3D-Spiele entwickelt werden können. Für mich leider zu technisch, aber eine gute Zusammenfassung gibt es auf Rhein-Main-Startups.

2. “Erfolgreiches Netzwerken & was der Überraschungseffekt damit zu tun hat” von Karim Mustaghni

Karim Mustaghni ist Entrepreneur und Head of Relations bei Hanse Ventures. In seinem Vortrag ging es darum, neue Kontakte zu knüpfen, sein Netzwerk stetig auszubauen und wie man dabei am besten vorgeht. Das wichtigste ist: Zuerst Geben und nicht Nehmen, d. h. stets zu überlegen, wie man anderen helfen kann.

3. “Tablet Usability auf dem iPad und seinen Geschwistern” von Benno

Der letzte Vortrag vor der Pause war dann von Benno. Es ging um die Usability-Do’s und -Don’ts von Tablet-Apps. Benno ging auf die typischen iPad-Benutzungs-Szenarios ein, wobei das iPad stellvertretend für Tablets steht. Wie werden iPad-Apps wirklich benutzt und worin liegt der Untschied zu mobilen Apps. Der Vortrag kam gut an, aber Yann von Lotum hat es in seinem Blogartikel treffend auf dem Punkt gebracht: “Lustig, wenn die erste Folie nicht lesbar ist und es um Usability geht.”

4. “Sell News - Make the News of Tomorrow” von Slawomir Rybarczyk

Am 15.01.2009 ging das Bild der Notwasserung des Airbus A320 im Hudson River um die Welt. Der Fotograf, der auf den Auslöser drückte, war Privatmann. Das Bild wurde von den Medien aufgegriffen, er erhielt dafür aber kein Geld. Die Auktionsplattform Sell News soll zukünftig Abhilfe schaffen, indem jeder seine Schnappschüsse vom Yeti, Ufos oder Nessi hochladen kann und dann das Bild / Video an den Höchstbietendenen verkauft. So soll das Ganze funktionieren:

Der Fotograf der Notwasserung hat übrigens einen sehr amerikanischen Weg gewählt, um doch noch Geld für das Bild zu bekommen: Er hat sämtliche Medien verklagt, die das Bild verwendet haben und laut Slawomir letztlich einen sechstelligen Betrag erhalten - ob dies vor oder nach Abzug der Anwaltskosten ist, wurde nicht gesagt.

5. “Corrigo - crowdsourced fact-checking” von Tobias Reitz und Kersten A. Riechers

Tobias Reitz und Kersten A. Riechers haben sich im Rahmen ihrer Diplomarbeit damit auseinander gesetzt, die Qualität von Online-Journalismus zu verbessern. So werden nach wie vor die meisten Fehler, die Nutzer melden, von den Redakteuren nicht korrigiert. Leider habe ich mir die Zahlen, die die beiden erwähnt haben, nicht gemerkt, aber es war wirklich erschreckend.

Um dies zu ändern, soll mit Corrigo (lat. ich berichtige) ein Plugin entwickelt werden, mit dem die betreffende Stelle oder Stellen markiert und für jedermann sichtbar gemacht werden. Als Beispiel haben sie einen Artikel aus Zeit Online gewählt, in dem ein Tweet des spanischen Ministerpräsidenten Zapatero erwähnt wurde, der jedoch nicht von ihm selbst, sondern einem Fake-Account abgesandt wurde.

In diesem Fall wurde dies berichtigt, d. h.  die betreffende Stelle gelöscht.

Noch ist das ganze nur ein Konzept. Jetzt suchen sie Entwickler, die ihnen bei der Realisierung helfen. Weitere Infos über dieses Projekt gibt es auf corrigo.org

6. “Timelapse” von Marc Schmidt

Zu Beginn der Veranstaltung hat Darren dem besten Vortragenden einen Getränkegutschein in Aussicht gestellt. Den besten Vortrag hatte nicht für mich Marc Schmidt. Er stellte sein wirklich zeitaufwändiges Hobby vor: “Time Lapse Frankfurt”, d. h. Zeitraffer-Videos von unterschiedlichsten Orten Frankfurts. Am besten schaut man sich die Videos selbst mal an und shared und liked sie.

Für dieses Video hat er 9.000 Bilder geschossen, ca. 28 Stunden allein mit der Aufnahme verbracht und noch mal so viel für die Bearbeitung investiert. Es hat sich definitiv gelohnt.

Und weil es so schön war. Hier noch eines:

PS: Der nächste Webmontag Nürnberg findet übrigens am 7.11. im insertEFFECT-Büro statt. Be there!

Wer noch Infos zu den Kameras und seine Erfahrungen beim Fotoshooting haben möchte, hier ist der Vortrag in voller Länge.

Es war ein krönender Abschluss. Last but not least das Zeitraffer-Video des Webmontages.

Gerade wo es viele Plattformen gibt, möchte man am liebsten alle bedienen. Und die Zeiten als es hieß „iPhone only“ sind auch schon fast vorbei. Oft heißt es jetzt:

Web App für iPhone und Android, und wenn’s auf anderen Plattformen auch noch läuft, umso besser.

So entschied sich auch Marktjagd für eine Web App -> m.marktjagd.de. Gemeinsam entstand das Konzept. Aus unserer Feder kommen Design und Umsetzung.

Marktjagd Mobile Startseite

Was nun die Vor- und Nachteile von Web App vs. Nativer App sind, darüber wollen wir uns heute gar nicht  auslassen. Das haben schon andere zur Genüge getan. Aber eine kurze Erklärung für den Laien, was denn nun eigentlich mit Web App gemeint ist und welche Technologien man einsetzen kann, wollen wir nicht vorenthalten.

Zum Thema Web App

Eine Web App benutzt oft Elemente und Konzepte aus nativen Apps, läuft jedoch im Mobile Web als „Mobile Website“ und wird manchmal auch als Hybrid-App im AppStore oder Android Market vertrieben. Viele Web Apps versuchen so nah am iPhone-Feeling wie möglich zu bleiben, vergessen dabei allerdings, dass das Medium ein anderes ist. Im Mobile Web sind eben nicht nur iPhones unterwegs, sondern auch Androids, Blackberrys, Nokias, Windows Phones, … Und Android Usern gefallen keine iPhone Web Apps. Auf dem Blackberry sieht die Web App dann auch nicht mehr so schön aus wie auf dem iPhone und auf dem Nokia kann man unter Umständen gar nichts mehr erkennen. Einige iPhone-Elemente sind auch gar nicht für’s Web geeignet. Eine fixe Tabbar an unteren Screenrand zum Beispiel macht oft mehr Probleme als sie löst.

Für Marktjagd waren die wichtigsten Plattformen erstmal Android und iPhone. Und das ganze im Mobile Web. Ob wir dafür eine eigene JS-Implementierung, den Progessive Enhancement Ansatz, fitml von Sevenval oder ein OSS-Framework verwenden, machen wir von den Anforderungen des Projekts abhängig. Im Fall Marktjagd fiel die Wahl auf jQueryMobile, ein Open Source Framework, das auf jQuery basiert und jede Menge Plattformen unterstützt.

Zum Thema jQueryMobile

Einerseits bietet jQueryMobile eine große Menge an UI-Elementen, die speziell für Mobile angepasst sind und eine eigene UI definieren. Andererseits hat jede Abweichung von den Vorgaben seinen Preis, der oft nicht gerade klein ist.

Dementsprechend war erstmal eine Menge Umdenken nötig. Denn was im Mobile Web möglich ist, ist oft zwar auch in jQueryMobile möglich, aber mindestens genauso oft mit einer ganzen Menge Mehraufwand verbunden.
Um jQueryMobile wirklich als Stütze und nicht als Hindernis in der mobilen Webentwicklung benutzen zu können, muss man sich über einige Dinge – sowohl bei der Konzeption als auch beim Design – im Klaren sein:

• Eckig vs. Rund: Ob Elemente rund oder eckig sein sollen, muss man vorher bestimmen. Beides lässt sich nämlich nur sehr schwer realisieren.
• Image Buttons: Bei Image Buttons sollte man sich am besten ganz nah ans jQueryMobile Vorbild halten, denn die Icons werden alle innerhalb eines Sprites geladen und müssen daher alle gleich groß sein.
• Icons-Platzierung in vorhandenen Elementen: Ist ein Icon in einem Element rechts oder links definiert, sollte man als Designer nicht versuchen, es besser zu wissen, sondern sich an die Vorgaben halten.
• Farben: Nicht wahllos neue Farben definieren, sondern bei einem einmal definierten Farbschema bleiben.
• Transitions: Weglassen. Funktioniert nichtmal auf dem Android richtig gut.
• Vorhandene UI-Elemente anpassen: Es lässt sich schwer von außen einschätzen, welche Elemente leicht zu ändern sind und welche einen enormen Entwicklungsaufwand nach sich ziehen. Es empfiehlt sich daher, einfach mal bei der Entwicklung nachzufragen oder im Zweifel keine Anpassung vorzunehmen.

Grundsätzlich gilt: Man sollte die UI-Demos von jQueryMobile als Mobile Web Designer genauso ernst nehmen wie die iOS Human Interface Guidelines als iPhone Designer. Denn auch wenn jQueryMobile keinen AppStore hat und Web Apps, die nicht gefallen, zurückweisen kann, so wird das Einhalten der UI-Vorgaben durch einen niedrigeren Entwicklungsaufwand und eine garantierte Kompatibilität zu allen von jQueryMobile getesteten Geräten belohnt.

Wie man auf der Mobile Website m.marktjagd.de sieht, haben wir ein sehr individuelles Design für Marktjagd angefertigt, dem man nur mit viel Insiderwissen ansieht, dass es sich um eine jQueryMobile Site handelt. Dass es so auch geht, haben wir damit bewiesen. Trotzdem lautet unsere Empfehlung: lieber an die Standards halten, wenn ihr eure Entwickler mögt

Die Marktjagd Mobile Web App

Worum geht’s nun bei Marktjagd eigentlich? Es geht um lokale Angebote stationärer Händler in der eigenen Umgebung finden. Prospekte durchblättern. Den Weg zum nächsten Geschäft finden.
Im Vergleich zu anderen Schnäppchen-Apps kann Marktjagd aber noch mehr. Man kann nicht nur Prospekte durchsehen, sondern auch tausende einzelne Produkte (mit Preis und Gültigkeitsdauer) einsehen. Nahezu jedes Feature der klassischen Website wurde auch in der mobilen Version umgesetzt. Und das ohne die Benutzerfreundlichkeit und die Übersicht einzubüßen.

Weiterführende Links:
Blogartikel von Marktjagd zur Mobile Web App
Pressemitteilung von Marktjagd
Marktjagd Mobile
jQueryMobile API Demo