Mobiles Internet. Hermann Schwarz, Omar Youssef 5.Mai 2010

Größe: px

Ab Seite anzeigen:

Download "Mobiles Internet. Hermann Schwarz, Omar Youssef 5.Mai 2010"

Lieselotte Reuter
vor 5 Jahren
Abrufe

1 Mobiles Internet Hermann Schwarz, Omar Youssef 5.Mai 2010

2 Mobiles Internet Vier von fünf Handy-Besitzern können mit ihrem Gerät ins Internet gehen (Quelle: BITKOM 2007) 2008 gab es in Deutschland 107,4 Millionen Mobilfunkanschlüsse statistisch besitzt jeder fünfte Deutsche zwei Handys oder Mobilfunkkarten (Quelle: BITKOM 2008) Bereits 10,4 Mio. Menschen gehen mobil online (TNS Infratest 2008) Mobiltelefone sind zu einem ständigen Begleiter geworden hohe Erreichbarkeit unabhängig von Ort und Zeit

3 Mobiles Internet Warum im mobilen Internet einsteigen? Anzahl der mobilen Nutzer im Internet verdoppelt sich monatlich Für eine Vielzahl von Nutzer ist mobiles Internet fester Bestandteil des täglichen Lebens SEMPORA-Studie: Strategieberatung SEMPORA Consulting Studie: trotz Marktdynamik haben viele Unternehmen die marktstrategischen Potenziale des mobilen Internets für den Erfolg nicht erkannt. Befragung von Entscheidungsträger - Einschätzungen der Marktentwicklung, strategischen Potenzialen des mobilen Internet, aktuellem Anwendungsstand, Erfolgsfaktoren und Hürden

4 SEMPORA-Studie 70% smartphones werden klassische Mobiltelefone in kurzer Zeit verdrängen 97% Anzahl der Internetzugriffe über Smartphones in kurzer Frist rapide steigen Frühzeitiger Eintritt im mobilen Internet: 87% Wettbewerbsvorteile 68% Geschäftsmodell stark an Relevanz gewinnen wird 96% Neuartige Geschäftsmodelle hervorbringen 61% Umsatzentwicklung analog zum Stationären Internet 65% Marketing und Vertrieb gleiche Bedeutung wie Stationäres Internet

5 SEMPORA-Studie Obwohl Wichtigkeit der Smartphone-Kanäle für Marketing und Vertrieb erkannt, fehlen die Aktivitäten. 60% keine ausreichenden Kenntnisse zu den Erwartungen ihrer Kunden an das mobile Internet 60% Auswirkungen des mobilen Internets auf das eigene Geschäftsmodell 43% keine klare Chancen und Risiken des Mobilen Business für das eigene Unternehmen Studie: Obwohl Thema strategisch relevant eingestuft, keine Gedanken zur Mobilen Stategie des Unternehmens gemacht 45% der Befragten sind im mobilen Kanal aktiv Mehr als 80% der Nichtnutzer planen den Eintritt in 2 Jahren Aus Konsumentensicht stufen die Unternehmen als wichtig ein: Anwendungen zur Kommunikation(97%) Ortsbasierte Informationen & Dienste (96%)

6 SEMPORA-Studie Benutzerfreundlichkeit (Usability) und die Schaffung eines klaren Endkunden-Mehrwertes werden als die zentralen Erfolgsfaktoren im Mobilen Internet genannt.

7 Handheld-CSS Hermann Schwarz, Omar Youssef 5.Mai 2010

8 Handheld-CSS Wer hat auf seine Webseite von einem mobilen Gerät geschaut? Viele Portale haben Ihre mobilen Nutzer nicht in Betracht gezogen CSS notwendig, um die Seite für die mobilen Geräte lesbar zu machen

9 Handheld-CSS Beschränkungen Handhelds haben einen kleinen Bildschirm Auflösung 120 Pixel horizontales Scrollen (Eingabestift) Download teuer und langsam Prozessor langsam Arbeitsspeicher kleinen Viele Benutzer würden Bilderladen im Browser ausschalten

10 Handheld-CSS Folgen dieser Beschränkungen für den Designer einspaltiges Design und floats vermeiden Optimierung des HTML-Codes Minimum an dekorative Bilder verwenden, plugins und Bilder für die Navigation meiden gute alternative-texte für die Bilder schreiben Vermeidung von dynamischen Effekten, die eine Maus oder Tastatur für die Navigation erfordern

11 Handheld-CSS Skalierung keine Pixelangabe größer als 5px(schlechte Skalierung) bei höhere Größen: besser Prozent oder ems verwenden Breitenangabe Breiten von margins, padding und border(rahmen) verringern, damit diese auf den kleinen Bildschirm passen. 1em Einrückung ist viel auf den schmalen Bildschirmen deshalb margins und padding in der horizontalen Ausrichtung sollten nicht mehr als ein 1em betragen margin in Prozentangabe läßt sich auf vielen Bildschirmen besser skaliern als mit em- Angabe.

12 Handheld-CSS Mobile CSS in 5 Minuten

13 Mobile CSS in 5 Minuten 1. Schritt CSS-Datei für mobile Geräte im <head>-tag einfügen <link rel="stylesheet" href=" type="text/css" media="handheld" /> Problem mit Windows Mobile Browser <link rel="stylesheet" href=" type="text/css" media="screen" /> <link rel="stylesheet" href=" type="text/css" media="handheld" />

14 Mobile CSS in 5 Minuten 1. Schritt iphone ignoriert auch media= handheld So kann man (min-device-width: 481px) und (max-device-width: 480px) benutzen, um CSS für das iphone zu screen and (min-device-width: 481px) { } #box { float: left; screen and (max-device-width: 480px) { } #box { position: absolute; }

15 Mobile CSS in 5 Minuten 2. Schritt: ältere Browser ignorieren die Eigenschaft handheld Dies kann zu verheerenden Auswirkungen führen auf das Aussehen der Seite in älteren Browser Um dies zu vermeiden, wird jede mobile-spezifische CSS innerhalb 's handheld { }.selector-01 { padding: 0; margin: 0; }.selector-02 { padding: 0; margin: 0; }

16 Mobile CSS in 5 Minuten 3. Schritt: jeden Platz nutzen padding und margin um die Tags <html> und <body> entfernen 3-Pixel padding ist ausreichend einen weißen Hintergrund und eine kontrastreiche Textfarbe, Schrift sans-serif und dezente Schriftgröße und Zeilenhöhe. html, body { font: 12px/15px sans-serif; background: #ffffff; padding: 3px; color: #000000; margin: 0; }

17 4. Schritt: floats Mobile CSS in 5 Minuten lineare Erscheinung, einspaltig Verwendung von floats bei kleiner Auflösung führt z.b. zum horizontalen und vertikalen Scrollen sehr vorsichtig würde man zu den mobile styles folgendes hinzufügen: * { float: none; }

18 Mobile CSS in 5 Minuten 5. Schritt: keine width explizite Angabe von width für den Inhalt [in px oder ems] im mobilestylesheet sollte man meiden. Es kann in bestimmten Geräten funktionieren und in vielen nicht, weil man horizontal scrollen muss. Deshalb die width-angaben für Inhalt nur in Prozent oder ganz meiden (Ausnahme für Layout-Zwecke z.b. kleine Graphik)

19 Mobile CSS in 5 Minuten 6. Schritt: Unordnung vermeiden alles einfach halten Fragen: Welche Inhalte sind für mein mobile-user wichtig? Wonach suchen die mobile-user? Welche Infos benötigen sie? Haben die mobilen Nutzer die Zeit/Interesse für alle Inhalte auf meiner Seite? Welche Elemente sind überflüssig? Gibt es ein ganzer Bereich von meiner Seite, der nicht angezeigt werden soll? Nur das Nötigste und Wichtigste zeigen. Beispiel: einen kleinen LOGO, einen kleinen footer und ein Suchfeld Nicht benötigte Elemente verstecken(z.b. Footer, Seitenleiste): #sidebar, #footer { display: none; }

20 Mobile CSS in 5 Minuten 7. Schritt: Mehr mobile Umstylingstips A. heading-texte sind stark übergewichtig und lassen sich abschwächen z.b.: h1, h2, h3, h4, h5, h6 { font-weight: normal; } B. Bilder kontrollieren Bildbreite maximal die Breite eines mobilen Gerätes: z.b. max-width für alle Bilder im div-content auf 250px setzen: #content img { max-width: 250px; }

21 Mobile CSS in 5 Minuten 7. Schritt: Mehr mobile Umstylingstips C. Zentrierung von headings, footer und anderer Informationen sei nützlich z.b.:.center { width: 100%;!important; text-align: center; } D. Links sind die wichtigsten Elemente auf einer mobilen Seite leichte Erkennbarkeit von Links schlecht gestylte Links sind nutzlos Links sollten unterstrichen und unterschiedliche Hintergrundfarbe haben z.b: a:link, a:visited { text-decoration: underline; color: #0000CC; } a:hover, a:active { text-decoration: underline; color: #660066; }

22 Mobile Anwendungen mit Titanium Appcelerator entwickeln Hermann Schwarz, Omar Youssef 5.Mai 2010

23 Titanium-Appcelerator Today you need to be in three places at once: Online, On-phone, and Ondesktop Appcelerator: Kalifornisches Softwareunternehmen Titanium Appcelerator: Entwicklung von Desktop- und Mobile-Anwendungen Entwicklung mit Hilfe von Webtechnik: HTML, CSS und JavaScript Java-Script-API zum Zugriff auf native Device-Funktionalität Aktuele Version Erzeugten Applikationen 5-Mal schneller als frühere Versionen Ladezeit der Applikationen in weniger als 3 Sekunden (auf dem Gerät)

24 Titanium-Appcelerator Anwendungen für die mobilen Betriebssyteme iphone und Android Entwicklung unter: Windows, MacOS und Linux Open-Source-Bausteine (Webkit, Google Gears und Chromium) Performance von Titanium-Apps vergleichbar mit Performance von Appleund Google(Android)-Apps Community-Version: kostenlos und Opensource Professionalversion: 199 $ pro Entwickler und Monat

25 Titanium-Appcelerator

26 Titanium-Appcelerator

Ähnliche Dokumente

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände...

1 Definition der Selektoren Einbinden der CSS 3 Möglichkeiten Farbangaben Schriftformatierung Abstände... CSS GRUNDLAGEN 1 Definition der Selektoren... 2 2 Einbinden der CSS 3 Möglichkeiten... 2 3 Farbangaben... 4 4 Schriftformatierung... 4 5 Abstände... 4 6 Box Modell... 5 7 Links... 5 8 Eigene Klasse definieren...