Kategorien
Webdesign

Kostenloses Ebook: „Tablet Web Design Best Practices“ mit vielen guten Tipps

Man wird den Damen und Herren bei Mobify in Kanada keineswegs die Expertise in Sachen mobiles Webdesign absprechen wollen, auch wenn man sich möglicherweise mit dem Cloud-basierten Konzept Mobifys nicht so recht anfreunden kann. Vor einiger Zeit ließen besagte Damen und Herren ihrer Expertise freien Lauf und stellten ein Ebook mit 30 Tipps, ein besonderes Nutzererlebnis auf Tablets zu schaffen, zusammen. Sie nennen es "Tablet Web Design Best Practices". Das 25-seitige Heftchen gibt es völlig gratis gegen die Bekanntgabe einer E-Mail-Adresse.

tabelt-web-design-best-practices-page

Tablet Web Design Best Practices: 30 Ways to Create Amazing Web Experiences on Tablets

Den größten Nachteil des ansonsten liebevoll gestalteten und mit nutzwertigen Informationen versehenen Heftchens will ich gleich zu Beginn erwähnen, denn es ist sicherlich für manch Interessenten ein Showstopper. Man kann es sich anhand des Titels und des Herkunftslandes an sich schon denken, dennoch sei deutlich darauf hingewiesen: Tablet Web Design Best Practices ist in englischer Sprache verfasst. Nicht in schwierigem, technischen Englisch, sondern eher so auf Mittelschul-Niveau, aber immerhin.

Stellt diese Hürde für Sie kein Problem dar, erhalten Sie einen kompakten Ratgeber, der vielfach auf der Basis von Ergebnissen einer oder mehrerer Studien Design-Tipps gibt, die Hand und Fuß haben. Mobify greift dabei nach eigenen Angaben auf die Erfahrungen aus dem erfolgreichen Umsetzen einiger großer Websites, darunter Starbucks, aber auch auf diejenigen der rund 75.000 Designer und Developer, die mit den Mobify-Tools arbeiten, zurück.

So verwundert es nicht, dass unter den Tipps solche sind, auf die man bei intensivem Nachdenken auch selber kommen würde und andere, mit denen zumindest ich nicht sofort um die Ecke gekommen wäre.

Tablet Web Design Best Practices: Two Parts to Rule Them All

In zwei Teile gliedert sich das Ebook. Im ersten Teil werden Tipps gegeben, wie man bestehende Desktop-Websites so verändern kann, dass sie auch auf Tablets sinnvoll nutzbar werden. Im zweiten Teil wird der nächste Schritt getan. Hier geht es darum, wie man vorgehen sollte, um tatsächlich auf Tablets optimierte Websites zu erhalten. Zumindest der erste Teil ist für jeden Seitenbetreiber relevant und sollte auf jeden Fall bearbeitet werden.

tablet-web-design-book-bottom

Die Gründe dafür sind durchschlagend. Mit erwarteten Verkäufen von einer halben Milliarde Tablets weltweit in 2013 und 2014 ist es fahrlässig, deren Nutzer nicht zumindest sinnvoll zu bedienen. Das umso mehr, als Tablet-Nutzer bei Online-Einkäufen 20 Prozent mehr Umsatz bringen als der durchschnittliche Desktop-Besucher.

Auf der anderen Seite dieser Chance steht das typische Website-Layout mit seinen 12 Pixel-Schriften und den nicht auf Touch ausgerichteten Schaltflächen und Formularen. Jeder Tablet-Nutzer wird zustimmen: Auf den allermeisten Websites macht das Surfen keinen Spaß. Dabei ist der Anwendungsfall des Internet-Surfens mit Abstand der wichtigste auf Tablets. Sind wir uns einig, dass es Handlungsbedarf gibt?

Und so beginnt das Ebook in seinem Teil 1 ganz praxisorientiert, fast schon hemdsärmelig und empfiehlt

  • Touch-Targets, also Elemente, die per Finger angewählt werden können, stets mindestens 44 x 44 Pixel groß zu machen,
  • auf durchgängige Touch-Bedienungsmöglichkeiten zu achten,
  • dafür zu sorgen, dass der Nutzer möglichst wenig schreiben muss,
  • kontext-sensitive Eingabemöglichkeiten zu schaffen und Auto-Correct oder automatische Großschreibung in Formularen auszuschalten,
  • die Standard-Textgröße und den Zeilenabstand zu erhöhen,
  • Icons als Font und Bilder auch in Retina-Auflösung einzubinden,
  • und vieles mehr.

In Teil 2 des Ebooks geht es dann darum, Web-Apps so zu gestalten, wie man das auch mit nativen Apps auf den jeweiligen Plattformen tun würde. Mit voller Optimierung auf die speziellen Möglichkeiten und Limitierungen eines Tablets.

Dazu gehören beispielsweise

  • dafür zu sorgen, dass Bilder in Seiten zoombar bleiben, ohne dass die komplette Seite zoomt,
  • die Navigation fest zu verankern, um sie persistent verfügbar zu halten,
  • ortsbasierte Möglichkeiten zu nutzen, um etwa logistische Fragestellungen leichter zu beantworten,
  • Schriftgrößen durch den Nutzer anpassbar zu gestalten,
  • viel mit Bildern zu arbeiten,
  • die Navigation absolut tablet-gerecht zu gestalten, etwa durch Auto-Hide oder Off-Canvas-Varianten,
  • besonders auf die sog. Hot Zones zu achten, diejenigen Bereiche, die man mit den Fingern besonders leicht erreichen kann auf einem Tablet,
  • und vieles mehr.

tablet-web-design-book-hot-zones

Natürlich, und wer würde das auch anders tun, verweisen die Autoren an vielen Stellen auf die entsprechenden Tools aus dem Hause Mobify und verlinken Tutorials, die zeigen, wie das Mobify-Konzept die entsprechende Umsetzung vorsieht.

Dennoch ist das Ebook nicht auf das Mobify-Konzept limitiert, sondern bietet durchaus allgemeingültige, dabei gute Tipps, die sicherlich den erfahrenen mobilen UI-Entwickler nicht aus den Socken hauen, aber Otto Durchschnittsseitenbetreiber und Feld-, Wald und Wiesen-Designer ein gutes Stück nach vorne bringen können – auf dem Weg in das Netz der Zukunft.

Abschließend will ich nochmal auf den Bezugsweg zurück kommen. Das Ebook steht, wie bereits erwähnt, kostenlos unter dem weiter unten genannten Link zur Verfügung. Um den Download zu ermöglichen, ist lediglich die Eingabe einer syntaktisch korrekten E-Mail-Adresse erforderlich, das ebenfalls vorhandene Feld "Name" kann ignoriert werden. Der Download wird zwar auch als Link per E-Mail zugeschickt, jedoch können Sie das Ebook schon unmittelbar nach Klick auf "Get the Guide Now" herunterladen. Die Gültigkeit der eingegebenen E-Mail-Adresse ist somit nicht Voraussetzung für den Download.

Links zum Beitrag

  • Downloadseite zum Ebook | Mobify
  • Startseite des Dienstes selber | Mobify
Kategorien
Apps Design HTML/CSS JavaScript & jQuery Programmierung

Fries: Kostenloses Framework für die Entwicklung von Android-Apps mit HTML, CSS und JavaScript

Fries von Jaune Sarmiento liegt seit wenigen Tagen in der Version 1.0 vor. Fries stellt ein Framework zur Entwicklung von Web Apps zur Verfügung, die dem Look and Feel der Android UI entsprechen. Verwender der 4er Linie von Android werden sich direkt heimisch fühlen, wenn sie sich die Demos ansehen. In der aktuellen Version ist Fries optimiert auf die Zusammenarbeit mit PhoneGap, kann also nativ wirkende Apps hervor bringen.

fries-homepage

Fries will nicht nur das Prototyping beschleunigen

Vorneweg sei erwähnt, dass Fries unter der liberalen MIT-Lizenz steht, mithin für private und kommerzielle Zwecke verwendet werden darf. Das Projekt wird auf Github gehostet, kann aber auch auf der eigens eingerichteten Demo-Website heruntergeladen werden.

Fries bringt im entpackten Zustand gerade mal runde 470 KB auf die Waage, wovon die eigentlichen Framework-Bestandteile nochmal 100 KB weniger benötigen. Der Rest wird von Beispiel-HTML-Dateien belegt. In Version 1 verwendet Fries die offiziellen Android-Icons, was den authentischen Look der mit Fries erstellten Apps garantiert.

Fries setzt auf HTML, CSS und JavaScript, das Framework besteht im Wesentlichen aus CSS-Dateien und einigen Funktionalitäten, die mit JavaScript realisiert sind und als entsprechende Script-Dateien vorliegen. Fries ist modular aufgebaut. Jede Funktion steckt in einer eigenen Scriptdatei, die erforderlichenfalls von einer korrespondierenden CSS-Datei ergänzt wird. So ist die kollaborative Entwicklung weiterer Features einfach möglich, Sarmiento selber hat auch schon ein gutes Dutzend Ideen für weitere Funktionen.

Die Grundfunktionalität, also das „Übereinanderladen“ der einzelnen Seiten einer App wird vom JavaScript Stacks.js geleistet, das Sarmiento aus Ratchets Push.js entlehnte. Push.js ist nur für iOS tauglich. Stacks.js also sorgt nun für das Laden der Seitenelemente, wie auch der Inhalte über Ajax.

Fries: Simples Komponentensystem mit klarer Aufgabenteilung

Der Aufbau einer Fries-App ist von der Theorie her simpel. Alle Befehlselemente werden in ein Div der Klasse page gepackt, alle Inhaltselemente werden in ein Div der Klasse content geschrieben. Stacks.js kümmert sich um Zuordnung und erforderliche Ladevorgänge. Zusätzlich sorgt es für die Android-typischen Übergangseffekte mittels CSS3 Transforms.

Grundsätzlich kann eine Fries-App via Web-Server ausgeliefert werden, was während der Entwicklungsphase sicherlich der gängigste Weg sein dürfte. Ist die Entwicklung abgeschlossen, empfiehlt es sich spätestens, die App nach Adobe PhoneGap zu überführen, weil dadurch verschiedene Beschränkungen umgangen werden können. Die wichtigste dürfte dabei der Umstand sein, dass sich der Android-Browser nicht komplett wegblenden lässt, so dass die eigene App nicht den vollen Bildschirm nutzen könnte. Das ist nicht kritisch, aber wirkt nicht so professionell, wie es könnte. Zudem unterstützt PhoneGap alle gerätespezifischen APIs, die Android bereit stellt.

Derzeit bietet Fries fertige Komponenten für Action-Bars, Tabs, Schaltflächen, Listen und Formulare. Mittels der Komponente Spinners lässt sich eine Auswahlliste platzsparend unterbringen.

fries-spinners
Spinner im Einsatz

Alle Komponenten können auf der Demo-Website im Einzelnen getestet werden. Wie erwähnt steht Fries unter MIT-Lizenz, PhoneGap unter Apache-Lizenz zum kostenlosen Download bereit. Damit bilden die beiden Projekte ein Team, das den ambitionierten Entwickler ohne zusätzliche Kosten in die Lage versetzt, professionell wirkende Apps im Android Look & Feel zu erstellen.

Wenn ich jetzt noch verstünde, was die Assoziation Fries, zu deutsch Fritten, bedeuten soll, dann bliebe für mich keine Frage offen…

Links zum Beitrag

Kategorien
E-Business Rechtliches

Smartphone-Apps als Herausforderung für Datenschutz und Sicherheit

Smartphones sind aus unserem Leben nicht mehr wegzudenken und unser ständiger Begleiter in der modernen Geschäftswelt. Laut einer aktuellen Umfrage des Branchenverbandes BITKOM hat jeder dritte Deutsche ein Smartphone. Schätzungen zufolge werden in diesem Jahr mit einem Anteil von 55 Prozent erstmals mehr Smartphones als sonstige Handys verkauft.

Mindestens ebenso populär wie die Smartphones sind die Apps, die schnell über einen in das Betriebssystem integrierten Online-Shop bezogen und direkt auf dem tragbaren Gerät installiert werden können. Was jedoch noch wenige wissen ist, dass zahlreiche Apps datenschutzrechtlich bedenklich sind, da sie personenbezogene Daten ohne unser Wissen an den App-Anbieter übermitteln. Dieser kann aufgrund der so ermittelten Daten Personen- und Nutzerprofile erstellen, die er an die Werbewirtschaft verkaufen kann.

app-67760_640

Welche Daten werden beim Herunterladen einer App erhoben und verarbeitet?

Wenn der Nutzer aus einem Online-Store eine App herunterlädt und diese beispielsweise auf seinem Smartphone installiert, werden personenbezogene Daten des Nutzers sowohl vom Online-Store Betreiber als auch vom App-Anbieter erhoben und verarbeitet. Dabei unterscheidet man zwischen automatisiert und vom Nutzer selbst übermittelten Daten.

Vom Nutzer eingegebene Daten

Zu den Daten, die der Nutzer selber eingibt, gehören beispielsweise seine Anmeldedaten. Um beim iTunes Shop (iphone) oder bei Google Marketplace (Samsung Smartphone) einkaufen zu können, muss der Nutzer sich beim jeweiligen Shop-Betreiber registrieren. Dafür muss er seine personenbezogene Daten wie Name, E-Mail Adresse etc., angeben, die dann an die App-Anbietern weitergeleitet werden.

Außerdem kann der App-Anbieter Daten des Nutzers erheben und speichern, die der Nutzer während der Verwendung der App erzeugt. Ein Beispiel dafür sind die Warenbestellung und die Games-Stores sowie Kommunikationsinhalte, wenn der Nutzer mit anderen App-Nutzern über die App kommuniziert.

Automatisiert übermittelte Daten

In einigen Fällen erhebt der App-Anbieter eine Kennziffer, die sogenannte UDID (unique device identifier). Damit kann der App-Anbieter Smartphones oder iPads eindeutig identifizieren und zusätzlich Nutzerstatistiken erstellen.

Bei zahlreichen Apps wie beispielsweise Google, Hotelbewertungen und Reise- und Navigations-Apps werden Informationen zum Standort der Nutzer erhoben. Außerdem können Apps wie etwa Facebook und WhatsApp auf alle lokal gespeicherten Daten zugreifen und Adressbücher und Kalendereinträge des Nutzers auslesen.

Anwendbarkeit Deutschen Datenschutzrechts

Grundsätzlich sind deutsches Datenschutzrecht und die Spezialvorschriften des Telekommunikationsgesetzes sowie des Telemediengesetzes anwendbar, wenn ein App-Anbieter in Deutschland Daten erhebt und verarbeitet. Häufig sind es jedoch ausländische Unternehmen, die Apps anbieten. Hier ist es in der Praxis sehr schwierig, deutsches Datenschutzrecht gegenüber ausländischen App-Anbietern durchzusetzen.

recht-paragrafen

Umsetzung der Vorgaben für App-Anbieter

Grundsätzlich sollten sich App-Anbieter und Entwickler von Apps an den einschlägigen Gesetzen orientieren und die Betroffenenrechte wahren. Nur dann werden sich langfristig die geschaffenen Lösungen durchsetzen und vom Nutzer akzeptiert werden.

So ist beispielsweise gem. § 13 Abs.1 TMG der App-Anbieter verpflichtet, zu Beginn des Nutzungsvorgangs über die Art, den Umfang und die Zwecke der Erhebung und Verwendung personenbezogener Nutzerdaten (…) in allgemein verständlicher Form zu unterrichten. Die Transparenz, die mit dieser Regelung geschaffen werden soll, wird jedoch leider nicht erreicht, wenn die Datenschutzerklärung etwa zu spät erfolgt oder schlichtweg zu lang formuliert ist.

Obwohl heute in mobilen App-Stores ein Button „Rechtliches“ eingebaut ist, kommt es in der Praxis kaum vor, dass der Nutzer die Nutzungsbedingungen und die Datenschutzerklärung wirklich anklickt und abruft. Hier ist es sinnvoll, andere Lösungen zu integrieren. Die Datenschutzerklärung sollte besser erreichbar und für den Nutzer jederzeit abrufbar sein, zum Beispiel durch die Einbindung eines Links.

Es ist jedoch nicht nur vorgeschrieben, über die Erhebung der Nutzerdaten zu unterrichten, sondern der Nutzer muss vor der Erhebung und Verwendung seiner Daten durch den App-Anbieter auch seine Einwilligung erteilen. Gem. § 13 Abs. 2 TMG kann die Einwilligung elektronisch erklärt werden, wenn der Diensteanbieter sicherstellt, dass

  1. der Nutzer seine Einwilligung bewusst und eindeutig erteilt hat,
  2. die Einwilligung protokolliert wird,
  3. der Nutzer den Inhalt der Einwilligung jederzeit abrufen kann und
  4. der Nutzer die Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen kann. Die Umsetzung der gesetzlichen Regelungen ist für beide Seiten sinnvoll: Der App-Anbieter kann besser nachweisen, ob die Einwilligung wirklich vom Nutzer erteilt wurde und gleichzeitig hilft es dem Nutzer, besser nachzuvollziehen, welche Einwilligung er erteilt hat.

Recht auf Löschung von Daten

Der App-Nutzer hat grundsätzlich einen Anspruch auf Auskunft und Löschung seiner Daten nach dem Bundesdatenschutzgesetz. Das heißt, der App-Anbieter muss auf Verlangen des Nutzers Auskunft über die zu seiner Person gespeicherten Daten geben. Auf Verlangen des Nutzers müssen diese vom App-Anbieter gelöscht werden.

Ein Löschungsanspruch kann sich jedoch auch ergeben, wenn die personenbezogenen Daten für die Erfüllung des Zwecks nicht mehr erforderlich sind (gem. § 35 Abs.2 BDSG). Das bedeutet, sie müssen zum Beispiel gelöscht werden, wenn der Nutzer die App löscht. Allerdings wird dies dem App-Anbieter in den seltensten Fällen bekannt werden. Hier sollte überlegt werden, ob nicht eine regelmäßige Löschung nach einem bestimmten Zeitraum, indem der Nutzer die App nicht benutzt hat, empfehlenswert wäre.

Fazit: Es gibt zwar zahlreiche Vorschriften und Datenschutzgesetze, die von App-Anbietern eingehalten werden müssten. Häufig werden diese jedoch von App-Anbietern ignoriert. Die Entwicklung geht zunehmend dahin, dass die App-Nutzer kritischer werden, mehr Bewusstsein für den Datenschutz entwickeln, unsichere Apps nicht mehr auswählen oder zunehmend ganz darauf verzichten. Daher ist App-Anbietern zu raten, sich mehr um das Thema Datenschutz zu kümmern und die bestehenden Regelungen des Datenschutzes schon in der App-Entwicklung zu beachten.

Die Autorin:

Mira M. Martz ist Rechtsassessorin und und war nach Ihrem zweiten Staatsexamen mehrere Jahre in der Unternehmenskommunikation in Berlin tätig. Stationen waren unter anderem zwei Bundesverbände und die Kommunikationsagentur Doebler PR. Bei der Rechtsanwaltskanzlei Schürmann Wolschendorf Dreyer ist sie für die Kommunikation und das Marketing zuständig.

Die Kanzlei Schürmann Wolschendorf Dreyer betreut namhafte nationale und internationale Unternehmen, Freiberufler und Kreative im Urheber- und Medienrecht, Gewerblichen Rechtsschutz, IT- und Datenschutzrecht sowie den angrenzenden Rechtsgebieten des Handels-, Gesellschafts- und Steuerrechts.

Auf der Kanzlei-Website Medien und Marken erscheinen regelmäßig Fachaufsätze zu Rechtsfragen aus dem digitalen Themenspektrum.