Mobile Webseiten

From EditThis.info

Mit dem iPhone ist das "echte" Internet sichtbar. Trotzdem ist es sinnvoll speziell angepasste Webseiten für mobile Endgeräte aufzuschalten, da die Benutzerfreundlichkeit bei normalen Webseiten auf mobilen Endgeräten leidet und dies, dank dem heutigen Stand der Technologien, relativ gut behoben werden kann.


Contents

Arten von mobilen Webseiten

Momentan sieht man im Internet verschiedene Webseiten die für mobile Endgeräte angepasst wurden. Bei den Meisten ist ein es der folgenden Arten erkennbar:

Vergrösserte Navigation
In diesem Beispiel wurde die Navigation vergrössert, sodass sie auf den mobilen Endgeräten besser lesbar und auch besser anklickbar ist. Der Inhalt wurde ebenfalls vergrössert --> besser Lesbarkeit.

http://www.mobileawesomeness.com/listings/gallery/marco-santonocito/
3110.jpg

Aufklappbarer Content
Bei diesen Seiten werden die Navaitagionspunkte untereinander dargestellt. Bei klick auf einen Navigationspunkt wird der Inhalt aufgeklappt oder aufgeschoben. So kann viel platz gespart werden, was bei Webseiten für mobile Endgeräte sehr wichtig sein kann.

http://www.mobileawesomeness.com/listings/gallery/jozef-mak/
3074.jpg

Navigationsseite
Hier werden auf einer ersten Seite das Logo, vielleicht ein kurzer Eileitungstext und anschliessend eine grosse Navigation angezeigt. Die Navigation ist wie bei der vorherigen Methode gross und die Navigationspunkte sind untereinander angeordnet. Der Unterschied: hier wird bei einem Klick auf einen Navigationspunkt eine neue Seite aufgerufen auf der der Inhalt zu sehen ist. Auf dieser Seite befindet sich ebenfalls ein "zurück"-Link.

http://www.mobileawesomeness.com/listings/gallery/racks-by-the-tracks/
3058.jpg

Mehrere Links
Hier ist auf der Hauptseite keine wirkliche Navigation vorhanden. Sie besteht aus mehreren Links, die weiter in die Seite hineinführen. Sie ist die am wenigsten übersich aber für gewisse Themen die sinnvollste Variante. Zum Einsatz kommt sie z.B. bei Zeitungen, die die besten Schlagzeilen auf der Startseite haben wollen.

http://www.mobileawesomeness.com/listings/gallery/colorado/
3053.jpg

Design und Usability

Auflösung des iPhones

Wenn ein iPhone eine Webseite aufruft, nimmt es von der Seite eine Breite von 980px und rechnet diese auf 320px runter. Alles was nach 980px kommt wird abgeschnitten.

Diese Maximalbreite kann aber verändert werden. In einem <link /> Tag wird folgender Code eingefügt:

<link
 rel="stylesheet"
 media="only screen and (max-device-width: 480px)"
 href="link_to_iphone-optimized_css_file" type="text/css"
/>

Das Fenster würde somit 480px breit sein.


Wichtige Überlegungen und Tipps

Hier ein paar kurze Leitinformationen und Tipps, was man bei einer Webseite für mobile Endgeräte beachten sollte.


Informationen über die aktuelle Situation

Wichtig ist zuerst einmal die Information wie viele und welche mobilen Endgeräte zur Zeit auf das Internet zugreifen. Für diese Infos gibt es gute und umfassende Grafiken:

http://gs.statcounter.com/#mobile_os-CH-monthly-200809-200910

Diese Grafik zeigt das schweizer "iPhone-Imperium". Hierzulande hat das iPhone einen gewaltigen Vorsprung auf die Restlichen Smartphones. Desshalb ist es auch versändlich, dass einen grosser Teil der Optimierungen vor allem auf dem iPhone funktionieren müssen.


Vereinfachung

Das wichtigste an einer mobilen Webseite ist, dass sie einfacher und übersichtlicher daherkommt wie die richtige Webseite. Ansonsten macht eine mobile Seite gar keinen Sinn und man könnte auch auf der normalen Seite surfen.


Zugriff auf die normale Webseite

Der Benutzer muss einen Zugang zur normalen Webseite haben, da er vielleicht schon ein oder mehrere Male auf der Webseite war und dort eine ganz Bestimmte Information sucht, die vielleicht auf der mobilen Seite nicht existiert.


Scrollen nur in eine Richtung

Sinn und Zweck einer mobilen Webseite ist die Darstellung auf mobilen Endgeräten, ohne das darauf gezoomt oder gescrollt werden muss. Desshalb ist das ein ganz entscheidender Punkt. Man braucht keine mobile Webseite, solange diese genauso benutzerunfreundliche ist wie die normale Webseite.

mehr dazu beim Thema #Viewpoint


Popups vermeiden

Popups auf mobilen Endgeräten sind ärgerlich. Man wird aus der Seite herausgerissen und kommt nur mühsam wieder rein. Falls unbedingt ein Popup eingebaut werden muss gibt es immer noch die Option eine Warnmeldung davor zu schalten, damit der Benutzer selber entscheiden kann, ob er die Seite öffnen will.


Bildmenge verringern

Für die Ladezeiten ist es besser wenn nicht zu viele Bilder auf der mobilen Seite verwendet werden, da das Handyinternet nicht so schnell ist wie das "normale" Internet.


Navigation optimieren

Die Navigation einer mobilen Seite muss viel grösser und übersichtlicher sein als diejenige der normalen Seite. Diverse Beispiele sind bei #Arten von mobilen Webseiten aufgelistet.


Kein Flash

Bei Flash macht uns Apple einen Strich durch die Rechnung, da das iPhone nicht flashfähig ist. Und da in der Schweiz die iPhones stark in der Überzahl sind, währe es sehr unklug Flash auf einer Seite einzubauen oder eine mobile Seite mit Flash zu programmieren.

Programmierung

Weiche für iPhones

Man muss bei der Programmierung einen wichtigen Grundsatzentscheid fällen. Wird das CSS für mobile Endgeräte speziell angepasst, sodass der Inhalt der selbe bleibt oder wird eine Weiche eingebaut, die iPhones auf eine andere Seite bringt. Wenn man sich für die neue Seite für iPhones entscheidet wird folgendes Javascript eingefügt:

<script>
if(navigator.userAgent.toLowerCase().indexOf('iphone') > -1)
location.href = 'iphone.html';
</script>

Wenn man das CSS anpassen möchte hat man mit den Media Queries gute und vielseitige Möglichkeiten.


Media Queries

Per link-Tag einbinden

Damit die Webseite erkennt wenn sie von einem mobilen Endgerät aufgerufen wird, wird eine CSS-Weiche (Media Query) eingebaut:

<link href='css/480.css' media='only screen and (max-width: 480px), only screen and (max-device-width: 480px)'
rel='stylesheet' type='text/css'>


per CSS einbinden

Eine andere Möglichkeit ist die direkte einbindung im CSS:

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  body { background: pink; }

}

Hier noch ein gutes Beispiel in dem auch Media Queries verwendet wurden: http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign



per Javascript Browser abfragen

Link um die Mobileseite zu verlassen

<a href="deineurl.ch&no_mobile_id=1">Mobilesite verlassen</a>

Makro im Demandit erstellen

Setzen Wert: Bedingung isDefined('no_mobile_id')

variables. temp

  1. setVariable('session.no_mobile_id',1)#

Cfif im Bericht Achtung: Am Ende des Scripts URL für die richtige Weiterleitung ändern

<nl_start_loop />
<cfif not isDefined('session.no_mobile_id')>
<script type="text/javascript">
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://trm.netlive.ch/');
</script>
</cfif>	
<nl_end_loop />

Ausrichtung

1	/* Portrait */
2	@media screen and (orientation:portrait) {
3	    /* Portrait styles */
4	}
5	/* Landscape */
6	@media screen and (orientation:landscape) {
7	    /* Landscape styles */
8	}

Ansicht auf dem iPhone

Viewpoint

Allgemein

Der Viewpoint gibt dem iPhone an wie breit und hoch (je nach Wunsch) die Webseite dargestellt werden soll. Er wird als Meta-Tag mitgegeben.

<meta
 name="viewport"
 content="width=320"
/>

Man geht hier davon aus das der Benutzer das iPhone senkrecht hält, wenn er die Seite aufruft. Die Webseite würde nun 320px breit dargestellt.


Zoom beeinflussen (iPhone)

Der Zoom kann beim iPhone ebenfalls über den Viewpoint beeinflusst werden, der auch hier über einen Meta-Tag mitgegeben wird.

<meta name = "viewport" content = "
 width = 1100,  <!-- Die Seite soll auf 1100 Pixel skaliert werden -->
 user-scalable = yes,  <!-- Darf der User zoomen? yes/no -->
 initial-scale = 0.4,  <!-- Minimaler Skalierungsfaktor -->
 maximum-scale = 1 <!-- Maximaler Skalierungsfaktor. Hier 100% = scharfe Pixeldarstellung -->
"/>

Natürlich gibt es noch eine Menge mehr solcher Einstellungen zum Viewpoint. Diese kommen direkt von Apple und sind hier zu downloaden: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf

<meta name="viewport" content="width=device-width" />


vCards

-erklärungen zu den vcards-


Icon für den Homescreen

Falls ein Benutzer eine mobile Webseite auf seinem iPhone speichern will, kann er das mit wenig Aufwand tun. Die Sache des Designers ist es dann, zu schauen, dass der Benutzer auch ein anständiges Icon bekommt.

Grösse: 136 x 136 px
Einbetten:

<link rel="apple-touch-icon" href="/Pfad zum Icon/iphoneicon.png" />


Tools

Um zu überprüfen ob die CSS-Weiche greift oder der Viewpoint richtig zum einsatz kommt gibt es ein realativ gutes Firefox Add-On:

https://addons.mozilla.org/de/firefox/addon/user-agent-switcher/

Über das Menu Extras/Default User Agent kann ausgewählt werden was der Browser anzeigen soll. Der vorteil für Webdesigner: Man hat nicht nur das iPhone zur auswahl sondern auch den IE bis Version 6.


Mobilesite testen: http://www.ready.mobi/launch.jsp?locale=en_EN


Browserweiche für alle Handys: http://detectmobilebrowser.com/

Quellenverzeichnis

Wissen

http://kulturbanause.de/2008/09/websites-fur-das-iphone-erstellen-und-optimieren/
http://webdesign.weisshart.de/iphone_css.php
http://www.drweb.de/magazin/media-queries-mobile-version-von-websites-mit-css3-erstellen/
http://www.drweb.de/magazin/mobile-webdesign/
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/

Beispiele

http://www.mobileawesomeness.com/listings/gallery/30/1/

Your Ad Here
Personal tools