Vor einigen Tagen wurde ich per Mail gefragt, wie es möglich ist mobile Besucher dazu aufzufordern die Seite auf den Home-Screen eines iPhones zu speichern und ob dieser Vorgang eventuell sogar automatisiert werden kann. Mit diesem Beitrag möchte ich die Frage gerne öffentlich beantworten und im gleichen Zug die "Mobile Bookmark Bubble" als Tool und mögliche Lösung vorstellen.

Was ist die Mobile Bookmark Bubble?

Die Mobile Bookmark Bubble ist ein Script das unter iOS funktioniert, und Besucher dazu auffordert die Seite auf den Home-Screen des Geräts zu speichern. Soweit ich richtig informiert bin, erlaubt Apple es nicht einen solchen Vorgang zu automatisieren. Es kann also lediglich ein Hinweis geschaltet werden der den User zur Aktion auffordert und Hilfestellung bietet.

Die Optik lässt sich natürlich individualisieren, die Demo-Version sieht so aus:

Das Scripte und Beispiele findet ihr unter code.google.com/p/mobile-bookmark-bubble/source/browse. Wenn ihr das Beispiel direkt mit euerem mobile iOS-Gerät testen möchtet, so ruft folgende URL auf: http://mobile-bookmark-bubble.googlecode.com/hg/example/example.html

Die Mobile Bookmark Bubble ist übrigens Bestandteil der Mobile Boilerplate. Solltet ihr die Boilerplate noch nicht kennen, lohnt es sich auch hier einmal vorbeizuschauen.

• html5boilerplate.com/mobile
• code.google.com/p/mobile-bookmark-bubble

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich habe in der Vergangenheit bereits über verschiedene Tools geschrieben mit denen Ihr die Darstellung einer Website auf verschiedenen Endgeräten simulieren könnt. Nun möchte ich euch ein weiteres Tool für diesen Zweck vorstellen - es ist immer schön Alternativen zu kennen. Der Responsive Design Tester simuliert verschiedene Viewports und zeigt die mittels CSS3 Media Queries optimierten Layouts parallel an.

Mir gefällt die Darstellung besonders gut, alle relevanten Größen (inkl. der Landscape-Ansicht des iPad) werden auf einmal gezeigt und können gleichzeitig betrachtet und bewertet werden. Es sei allerdings erwähnt, dass auch dieses Tool nicht die geräteabhängigen Einstellungen berücksichtigt oder den User-Agent abfragt. Es wird lediglich der Viewport simuliert. Für eine professionelle Lösung kommt allerdings in der fortgeschrittenen Testphase eh immer nur ein echtes Testgerät in Frage. Das gilt sowohl für Browser als auch für mobile Endgeräte.

• Responsive Design Testing

Weitere ähnliche Tools habe ich bereits vorgestellt:

• Websites auf verschiedenen Endgeräten testen: Screenfly
• Mobile Websites online testen: Media Query Previewer für iPhone und iPad

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Ich möchte euch gerne ein weiteres Online-Tool vorstellen, mit dem ihr eure Website auf verschiedenen Viewports testen könnt. Der Dienst nennt sich Screenfly und simuliert eine Vielzahl an (mobilen) Endgeräten. Angefangen bei Desktop-Computern über Smartphones und TV-Geräte bis hin zu Tablets werden alle gängigen Devices abgedeckt.
Besonders gut gefällt mir, dass nicht nur die Apple-Geräte berücksichtigt werden, sondern eben auch Blackberry, Android und Co. Darüber hinaus lässt sich auch noch vom Portrait- in den Landscape-Modus wechseln.

Nachteilig ist allerdings, dass auch dieser Dienst lediglich den Viewport simuliert. Geräteabhängige Settings werden nicht berücksichtigt.

Screenfly does not mimic the behavior of the devices you select. For example, most mobile phones and tablets have a zoom feature that displays the entire page at once, even if it appears to be clipped off the edges of the screen here.

• Screenfly

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Media Queries und Responsive Web Design sind die aktuellen Buzzwords der Webdesign-Szene. Gemeint ist damit eine Website, die mithilfe der CSS-Technik "Media Query" für unterschiedliche Ausgabemedien und Displaygrößen optimiert wurde. Da die mobile Web-Nutzung rasant zunimmt, muss eine zeitgemäße Website auch auf Smartphones und Tablet-PCs eine gute Figur machen.
Wie ihr eine Website für iPhone, iPad & Co. optimiert, habe ich in einem früheren Artikel bereits beschrieben. Nun möchte ich euch ein Online-Tool vorstellen, mit dem sich die Darstellung auf iPhone und iPad simulieren lässt.

iOS Media Query Previewer

Der iOS Media Query Previewer simuliert die Darstellung einer Website auf dem iPad und dem iPhone. Einfach die gewünschte URL eingeben, Enter drücken und schon könnt ihr sehen ob eure Website auf iPhone und iPad auch wie gewünscht angezeigt wird.

• iOS Media Query Previewer

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das Apple Touch Icon erscheint immer dann wenn Ihr innerhalb von iOS (also auf dem iPhone, iPod oder iPad) eine Website auf dem Home-Screen abspeichert. In einem früheren Beitrag habe ich bereits erklärt wie Ihr das Apple Touch Icon erstellt und welche Voraussetzungen das Icon erfüllen muss damit es auch auf dem Retina-Display des iPhone 4 hübsch aussieht. Nun möchte ich erneut ein Update nachschieben und erklären wie Ihr den automatisch von iOS hinzugefügten Glanz auf dem Icon verhindern könnt.

Icon ohne Glanz erstellen

Für gewöhnlich genügt es wenn Ihr das Apple Touch Icon einfach unter dem Dateinamen "apple-touch-icon.png" im Root der Website ablegt. iOS-Devices suchen in diesem Verzeichnis automatisch nach dem Icon und greifen auf die Datei zurück, sobald ihr eine Website zum Home-Screen hinzufügen möchtet.

Bei der Gestaltung des Icons müsst Ihr den typischen "App-Icon"-Glanz nicht selbst hinzufügen. Auch das übernimmt iOS für Euch. Wenn Ihr den Glanz jedoch nicht mögt oder einen eigenen, individuellen Glanz herstellen wollt, so könnt Ihr das dem iPhone-System ebenfalls mitteilen.

Erstellt zunächst wie gewohnt eine Datei mit den Abmessungen 129x129 Pixel und gestaltet auf dieser Arbeitsfläche das Icon. Diese Größe entspricht zwar nicht dem Retina-Display, führt aber auf dem iPhone 4, iPod, iPad und dem "normalen" iPhone zu sehr hochwertigen Ergebnissen. Anschließend speichert Ihr die Datei unter dem Namen "apple-touch-icon-precomposed.png" im Root eurer Website ab.

Im <head> der Website sollte das Icon nun noch einmal explizit aufgerufen werden. Das erreicht Ihr über folgendes Code-Snippet.

<link rel="apple-touch-icon-precomposed" href="http://www.absoluter-pfad ... /apple-touch-icon-precomposed.png">

Das war's auch schon. Ab sofort wird für Eure Website das Icon ohne Glanz aufgerufen.

Verschiedene Icons für iPad, iPhone etc. verlinken

Ihr habt auch die Möglichkeit verschiedene Icons für verschiedene Endgeräte anzubieten. Hierbei werden einfach mehrere Links eingebunden die jeweils über ein individuelles size-Attribut verfügen. So könnt Ihr auch die perfekten Abmessungen für die verschiedenen Geräte berücksichtigen.
Meiner Meinung nach ist das allerdings nicht nötig, wenn Ihr wie oben beschrieben das Icon in der Abmessung 129x129 Pixel erstellt. Es bietet Euch allerdings die Option völlig unterschiedliche Icons bereitszustellen.

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

Weitere Infos findet Ihr auch in der offiziellen Guideline von Apple: Apple Documentation

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das Web ist längst mobil geworden und moderne Websites müssen nicht nur auf dem Monitor, sondern auch auf unzähligen Ausgabemedien eine Top-Figur machen. Zwar rufen die meisten User Websites noch über einen Computer auf, aber die Zugriffe über mobile Endgeräte wie iPad, Smartphones und portable Spielekonsolen steigt stetig an. Wie soll man da eine Website für all diese Geräte optimieren können? Mit CSS3 Media Queries ist das gar nicht so schwierig.
In diesem Beitrag möchte ich Euch die Vor- und Nachteile dieser Technik erklären und an einem praktischen Beispiel zeigen wie schnell Ihr auch Eure Website für Smartphones und Tablet PCs optimieren könnt.

Von CSS2 Media Types zu CSS3 Media Queries

Media Queries bieten die Möglichkeit CSS-Inhalte für bestimmte Medien auszugeben. Sie haben also eine ähnliche Funktion wie das media-Attribut (auch als media-type bezeichnet) mit dem Ihr bestimmen könnt für welches Ausgabemedium, z.B. den Monitor oder Drucker, ein Stylesheet verwendet werden soll.

Die bisherige Einbindung eines Stylesheets unter Berücksichtigung des Media-Types sieht so aus:

<!-- Attribut "Screen" für die Bildschirmansicht -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

<!-- Attribut "Print" für die Druckausgabe -->
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

Ihr könnt auch bestimmte Bereiche innerhalb des CSS-Dokuments entsprechend kennzeichnen. In diesem Beispiel wird nur die Bildschirmansicht berücksichtigt.

@media screen {
  h1 { background:red; }
}

CSS3 Media Queries gehen hier noch einen Schritt weiter. Neben der Art des Ausgabemediums könnt Ihr auch festlegen für welche Auflösung, Bildschirmgröße, Ausrichtung oder Farbdarstellung ein Stylesheet gelten soll. Dabei habt Ihr nach wie vor die Wahl ob Ihr Media Queries bei der Einbindung des CSS-Dokuments verwendet, oder ob Ihr bestimmte Abschnitte innerhalb der CSS-Datei definiert. Auf die Unterschiede beider Varianten gehe ich später noch einmal im Detail ein.

Wenn Ihr die entsprechenden Rahmenbedingungen kennt, so könnt Ihr also beispielsweise ganz gezielt ein Stylesheet für die Darstellung der Website auf dem iPad im Querformat erstellen. Oder Ihr optimiert die Website für alle modernen Smartphones (iOS, Android). Oder für Bildschirme mit stark reduzierter Farbdarstellung, oder oder oder ...

Welche Werte könnt Ihr mit Media Queries abfragen?

Mit Media Queries lassen sich erstaunlich viele Eigenschaften abfragen. Damit die späteren Beispiele leichter verständlich sind möchte ich hier einmal einige Optionen auflisten. Diese fünf Eigenschaften sind die wichtigsten wenn es um das Ansprechen mobiler Endgeräten geht.

width

Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media handheld and (min-width: 20em) { ... }

height

Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media screen and (max-height: 700px) { … }

device-width

Breite des Mediums (Smartphone-Bildschirm, Monitorgröße etc. )
Beispiel: @media screen and (device-width: 800px) { … }

device-height

Höhe des Mediums (Smartphone-Bildschirm, Monitorgröße etc.)
Beispiel: @media screen and (device-height: 400px) { … }

orientation

Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
Beispiel: media all and (orientation:portrait) { … }

Wenn Ihr es ganz genau wissen wollt, so findet Ihr die oben genannten Beispiele sowie alle zur Verfügung stehenden Eigenschaften und den sehr komplexen Syntax auf der Website des W3C.

• W3C - Official Specs

Wie können Medien Queries verwendet werden?

Wie ich zu Beginn bereits erklärt habe könnt Ihr Media Queries auf zwei Arten verwenden.
Zunächst könnt Ihr direkt bei der Verknüpfung des CSS-Dokuments im <head> Eurer Website die entsprechenden Angaben machen und somit verschiedene Stylesheets für verschiedene Endgeräte einbinden.

Wenn Ihr also eine CSS-Datei für die Desktop-Version Eurer Website anlegen möchtet und eine für die iPhone-Version, dann kann das Ganze so aussehen.

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

Zur Info: Smartphones und Tablet-PCs melden sich als screen bei einer Website an. Der Media-Type handheld ist für diese Geräte also nicht geeignet.

Alternativ könnt Ihr auch bestimmte Bereiche innerhalb eines CSS-Dokuments mit Media Queries ansprechen. Im folgenden Beispiel wird der body auf dem iPhone rot eingefärbt.

only screen and (max-device-width: 480px) {
  body {background:red;}
}

Ich persönlich empfehle die zweite Variante da Ihr nur ein CSS-Dokument laden müsst. Somit vermindert Ihr HTTP-Requests und beschleunigt die Ladezeiten Eurer Website.

Die Website für iPhone und iPad optimieren

Nun möchte ich Euch gerne anhand eines Beispiels zeigen wie Ihr mithilfe von Media Queries eine simple Website für die Desktop-Darstellung, für das iPad und für das iPhone optimieren könnt.
In diesem Beispiel erstellen wir eine sehr simple Website mit einem Header, einem Content-Bereich sowie zwei Sidebars. In der Desktop-Version befinden sich beide Sidebars nebeneinander. In der iPad-Version steht in der Breite zu wenig Platz zur Verfügung, daher rutscht die eine Sidebar unter den Content. In der iPhone-Version werden dann alle Inhalte untereinander dargestellt.

Ich erkläre Schritt für Schritt wie ich vorgegangen bin. Das fertige Beispiel findet Ihr hier.

Demo-Seite anzeigen

HTML-Grundgerüst

Der HTML-Aufbau des Beispiels ist denkbar einfach. Innerhalb eines umschließenden <div> habe ich den Header, den Content und die Sidebar eingebunden. Ganz unten seht Ihr noch einen Div mit Inline-CSS. Dieser dient dazu die späteren CSS-floats wieder aufzuheben. Die Lösung mit Inline-CSS dient nur der Übersichtlichkeit des Beispiels und ist kein guter Code!

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Websites mit CSS3 Media Queries für iPhone, iPad, Android &amp; Co. optimieren</title>
</head>

<body>

<div id="container">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="sidebar1">sidebar 1</div>
  <div id="sidebar2">sidebar 2</div>
  <div style="clear:both;"></div>
</div>

</body>
</html>

CSS-Code der Desktop-Anzeige

Wir beschäftigen uns zunächst mit der Desktop-Anzeige der Website. Den nachfolgenden CSS-Code habe ich im <head> des Dokuments eingebunden. Ich verwende zunächst einen CSS-Reset und weise anschließend den Seitenelementen Ihre Grundeigenschaften zu.

Auffällig ist vielleicht, dass ich dem #container eine feste Breite zugewiesen habe. Innerhalb des Containers habe ich dann alle Elemente mit %-Breiten definiert. Diese Technik hat für mich den Vorteil, dass ich in der Desktop-Version mit festen Werten arbeiten kann. In den späteren mobilen Versionen ändere ich dann die Breite des Containers und passe das Verhältnis der Inhalte aneinander an.

DIe Angabe von Prozentwerten ist wichtig um nicht nur iPhones und iPads anzusprechen sondern auch andere Smartphones und Tablets die mit sehr ähnlichen Abmessungen arbeiten. Die Angabe fixer Pixelwerte kann leicht zu Fehldarstellungen auf diversen Geräten führen und wir können ja nicht alles testen und anpassen.

* {
	margin:0;
	padding:0;
	color:white;
}

#container {
	margin:30px auto;
	width:960px;
}

#header {
	width:100%;
	background:#80c9e3;
	margin-bottom: 2%;
	height:150px;
}

#content {
	float:left;
	width:56%;
	margin-right:2%;
	background:#3f90ae;
	height:800px;
}

#sidebar1 {
	float:left;
	width:20%;
	margin-right:2%;
	background:#2e6a80;
	height:800px;
}

#sidebar2 {
	float:left;
	width:20%;
	background:#153a48;
	height:800px;
}

CSS-Code der iPad-Version

Wenn die Desktop-Version der Website steht können wir mit Media-Queries jetzt die iPad-Version optimieren. Dazu füge ich unterhalb meines bisherigen CSS-Codes den entsprechenden Media Querie ein und überschreibe alle Eigenschaften die ich verändern möchte.
Um das iPad gezielt ansprechen zu können müsst Ihr natürlich wissen welche Abmessungen das Gerät bzw. der Bildschirm hat. Diese Werte könnt Ihr der Liste am Ende dieses Tutorials entnehmen.

Bitte beachtet, dass ich in diesem Beispiel die Eigenschaft width anstelle von device-width verwende. Das hat für mich den Vorteil, dass ich das Verhalten meiner Website testen kann indem ich die Größe des Browserfensters verändere. device-width wirkt sich auf die Größe des Bildschirms aus - das Beispiel wäre dann also nur auf einem iPad sichtbar.

Ich spreche also zunächst alle Viewports bis zu einer Breite von 1024 Pixeln an und vergebe anschließend einige neue Eigenschaften. Der Content wird breiter und Sidebar 2 erhält eine Breite von 100%.

@media only screen and (max-width: 1024px) {

#container { width:100%; }

#content { width:78%; }

#sidebar1 {
	width:20%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
}

}

CSS-Code der iPhone-Version (inkl. Smartphones mit Android etc.)

Die Smartphones lassen sich nach dem gleichen Prinzip ansprechen. Auch hier müsst Ihr lediglich die Abmessungen kennen und anschließend den CSS-Code anpassen.
DIe iPhone-Version dieses Beispiels sieht wie folgt aus und wird unterhalb des iPad-Codes eingebunden:

@media only screen and (max-width: 480px) {

#content {
	width:100%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar1 {
	width:100%;
	height:200px;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
	margin-top:2%;
}
}

Zoom deaktivieren, Skalierung festlegen

Smartphones ermöglichen es dem User in der Website zu zoomen. Das macht nur dann Sinn wenn die Dektop-Version auf dem Handy angezeigt wird. Bei einer optimierten Version ist der Zoom eher störend. Über einen <meta>-Tag kann der Zoom deaktiviert werden.
Darüber hinaus kann (und sollte) die minimale und maximale Skalierung festgelegt werden.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Das war auch schon alles.

Demo-Seite anzeigen

Nach exakt diesem Prinzip habe ich auch die Anpassung an die verschiedenen Endgeräte für meine eigene Seite umgesetzt. Ich habe mich auch dafür entschieden den Viewport (width) und nicht die Größe des Endgeräts abzufragen (device-width). Außerdem verwende ich eigene Abmessungen und nutze nicht exakt die iPad und iPhone-Werte. Aber das ist alles Geschmacksache und abhängig vom Projekt.
Da in den Kommentaren zum Relaunch meiner Seite von Lukas die Frage gestellt wurde wie ich die verschiedenen Anpassungen umgesetzt habe, hoffe ich sehr die Frage mit diesem Artikel nun beantwortet zu haben.

Und das sind die wichtigsten Formate

Damit Ihr nicht lange suchen müsst findet Ihr hier die Media Queries der wichtigsten Endgeräte.

Wenn Ihr diese Liste ergänzen könnt (Android, Windows Phone, Nokia, etc.) dann schreibt doch bitte einen Kommentar.

iPhone / iPod Touch

@media only screen and (max-device-width: 480px) {}

iPhone mit Retina Display

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }

iPad

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {}
oder:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {}

Browser-Unterstützung

Der native Browser-Support für Media Queries beschränkt sich auf die folgenden Browser-Versionen: Chrome, Safari 3+, Firefox 3.5+, Opera 7+, Internet Explorer 9. Das insbesondere ältere Browser die Technik nicht interpretieren können halte ich aber für nicht sonderlich schlimm. Wenn Ihr Media Queries für die Anpassung an mobile Endgeräte einsetzt, könnt Ihr nämlich auf einen sehr umfangreichen Support bei den mobilen Browsern zurückgreifen.
Solltet Ihr dennoch für einen veralteten Desktop-Browser Media Queries einsetzen müssen, so hilft Euch sicher folgendes jQuery-Plugin um die Technik per JavaScript nachzurüsten.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die mobile Version von WordPress für iPhone, iPod Touch und iPad hat einen Update auf die Version 2.7 erfahren.
Auf den ersten Blick gefallen mir die neuen Features und das leicht überarbeitete Interface sehr gut. Ich habe auch das Gefühl, dass die Performance und vor allem die Stabilität der App sich deutlich verbessert haben. Insgesamt wurden folgende 117 Tickets in dieses Update integriert.

Überarbeiteter Editor

Ein weiteres neues Feature ist der Artikel-Editor. Hier finden sich nun einige Icons in der Fußleiste über die Ihr Einstellungen vornehmen könnt, Multimedia-Daten in den Artikel integrieren könnt oder eine Vorschau anzeigen lasst.

• ios.wordpress.org

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Neben dem Favicon gehört das WebClip-Icon (auch Apple Touch Icon genannt) mittlerweile zum Must-Have einer guten Website. In einem älteren Artikel habe ich erklärt was genau man machen muss und worum es sich hier überhaupt handelt.

Nun schiebe ich ein wichtiges Update nach: Seit dem iPhone 4 mit seinem brillianten Retina-Display muss das Apple Touch Icon nämlich in höherer Auflösung vorliegen, sonst sieht es so aus wie auf folgendem Screenshot.

Höhere Auflösung für das Apple Touch Icon auf dem Retina Display

Damit das Icon auch auf dem Retina-Display hübsch anzusehen ist muss es nicht wie bisher in einer Abmessung von 60 x 60 Pixeln sondern in 129 x 129 Pixeln Größe vorliegen! Ansonsten bleibt alles beim Alten. Das Icon muss als PNG unter dem Namen "apple-touch-icon.png" im Root Eurer Website liegen.

Tipp: Wenn Ihr das Icon aktualisiert dauert es ein wenig bis das iPhone es merkt. Um diesen Vorgang zu beschleunigen könnt Ihr die Grafik direkt im mobilen Browser aufrufen. Anschließend ist der Cache geleert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wenn Ihr für Eure Website zusätzlich eine iPhone-optimierte Version erstellt habt, so steht Ihr vor der Wahl ob standardmäßig alle iPhone-User auf diese mobile Seite weitergeleitet werden sollen oder ob der Besucher selbst entscheiden darf welche Website er besuchen möchte. Eine der vielfältigen Möglichkeiten ist das nachfolgende Script. Bindet einfach folgenden JavaScript-Code in den <body> Eures Dokuments ein und ruft die Funktion anschließend über onLoad beim Laden der Seite auf.

JavaScript für den <body>

Fügt folgendes Script in Euer Dokument ein und passt die URLs und die Info-Nachricht entsprechend an.

<script type="text/javascript">
function ios_redirect() {
	if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
		var question = confirm("iPhone optimierte Version anzeigen?")
	if (question){
		window.location = "http://www.hier-der-pfad-zur-iphone-optimierten-website"; // user klickt auf OK
	}else{
		window.location = "http://www.hier-der-pfad-zur-standard-website"; // user klickt auf cancel
}}}
</script>

onLoad-Befehl für den öffnenden <body>-Tag

Innerhalb des öffnenden <body>-Tags muss die Funktion aufgerufen werden.

<body onLoad="ios_redirect();">

Wenn nun ein Besucher die Website mit dem iPhone aufruft erhält er eine System-Nachricht. Hier kann er wählen welche Version aufgerufen werden soll - also entweder die normale Seite oder die für das iPhone erstellte Website.

Fazit

Ich finde die Umsetzung ist eine sehr komfortable Lösung um dem Besucher die volle Freiheit bei der Benutzung Eurer Website zu überlassen. Allerdings habe ich im Hinterkopf, dass die Abfrage eines Besuchers mittels userAgent nicht die optimale Lösung ist. Wenn Ihr hier ein paar ergänzende Informationen beisteuern könnt bin ich Euch sehr dankbar.

Der Artikel wurde von diesem Beitrag inspiriert.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Mozilla hat die Application Firefox Home im App Store veröffentlicht. Hierbei handelt es sich allerdings nicht um einen vollwertigen mobilen Browser sondern vielmehr um eine Programm zum Synchronisieren der Browser-Einstellungen. Zum surfen muss der mobile User nach wie vor auf mobile Browser wie Safari oder Opera zurückgreifen.
Nichts desto trotz ist Firefox Home ein Schritt in die richtige Richtung.

• Firefox Home im AppStore

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Nachdem die iPhone-Application zu Photoshop.com bereits seit etwas längerer Zeit für den US-Amerikanischen Markt verfügbar ist, kann die App nun seit einigen Tagen auch über den deutschen AppStore bezogen werden. Sehr praktisch um von unterwegs mal das ein oder andere Bild zu bearbeiten. Ganz nebenbei können natürlich viele Social-Features von Photoshop.com über die App genutzt werden.

• Photoshop.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die Suchmaschine Wolfram Alpha habe ich vor einiger Zeit bereits vorgestellt, um genau zu sein mit der Launch der Seite. Nun ist die entsprechende iPhone-App erschienen - für den Schnäppchenpreis von 40 Euro! Das Preis-Leistungs-Verhältnis möchte ich hier nicht diskutieren, wer Wolfram regelmäßig einsetzt wird sicherlich auch den Preis für die Anwendung bezahlen.

• Wolfram Alpha iPhone-Application

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gestern ist Version 2 der iPhone-Application WordPress erschienen. Da es sich um eine komplett neue Version handelt, kann die alte App deinstalliert werden. Es wird folglich auch kein automatisches Update angekündigt. Eine Übersicht der neuen Funktionen findet Ihr hier.

• WordPress 2 for iPhone

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

In seinem Artikel WordPress-Blogs auf dem iPhone erläutert Martin Sauter wie sich mit WordPress angetriebene Blogs hinsichtlich der Nutzung auf dem iPhone optimieren lassen. Sehr lesenswert!

• WordPress-Blogs auf dem iPhone

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress für das iPhone wurde nun in Version 1.3 veröffentlicht. Neben verbesserter Geschwindigkeit und einem Live-Modus, sollen angeblich viele Bugs entfernt worden sein. Ich merke ehrlich gesagt keinen Unterschied zur Vorgängerversion, bei mir läuft die App nach wie vor extrem instabil und fehlerhaft. Habt Ihr ähnliche Probleme?
Achtet auch darauf, dass die Application im AppStore fehlerhaft unter Versionsnummer 1.2 aufgeführt wird.

WordPress for iPhone

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Das iPhone stellt das "echte" Internet dar, soviel wissen wir schon aus der Werbung. Doch es gibt auch diverse Websites die extra für das iPhone geschrieben oder zumindest optimiert wurden.
Experten und Web-Pioniere sind sich einig: Die Zukunft des Internets ist mobil. Höchste Zeit also sich mit diesem Thema auseinander zu setzen. In diesem Artikel erläutere ich einige Funktionen hinsichtlich des iPhones.

Dieser Artikel ist aus dem Jahr 2008 und wurde inzwischen durch andere Beiträge ergänzt. Wenn Ihr lesen möchtet wie Ihr eine iPhone und iPad-optimierte Version Eurer Website mit CSS3 erstellt so wechselt bitte zu folgendem Tutorial: iPad und iPhone optimierte Websites mit CSS3

Gleiche Lady, anderes Kleid

Grundvoraussetzung für "Handy"-optimierte Internetseiten ist semantischer XHTML-Code sowie eine vollständige Trennung von Content und Design mittels XHTML und CSS. Das Outfit der Seite wird komplett über CSS angesprochen, die Inhalte (XHTML) bleiben unverändert. Quellen zu diesem Thema gibt es genug, daher gehe ich hier nicht weiter darauf ein.

CSS-Media-Attribut zur Ansprache von mobilen Endgeräten?

Normalerweise wird Handys, PDAs, Smartphones etc. mittels dem "media='handheld'"-Attribut eine optimierte CSS-Datei zugewiesen. Da sich das iPhone jedoch nicht als Handy bei der Seite anmeldet, sondern als Computer hilft uns dieser Weg hier nicht viel weiter. die Lösung heißt CSS3!
Der Browser des iPhones ist Safari 3 Mobile. Safari Mobile unterstützt dank Webkit viele CSS3-Attribute und so kann das Phone schon im HTML-Head der Seite direkt angesprochen werden:

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

Wir legen also eine neue CSS-Datei an, verlinken diese entsprechend und optimieren sie hinsichtlich des iPhone-Screens.

Wichtig an dieser Stelle! Das iPhone lädt ALLE eingebetteten Stylesheets: Die optimierte CSS-Datei muss also als letztes im HTML-Head auftauchen!!

Wer nicht im Besitz eines iPhones ist, kann sich mit folgenden Links eine iPhone-Simulation herunterladen:

• Für Mac-User: www.marketcircle.com/iphoney/
• Für Windows-Safari-User: iphonetester.com

Bildschirmabmessungen- und Umrechnungen des iPhones

Das iPhone stellt Internetseiten für gewöhnlich im Hochformat dar. Dabei wird die dargestellte Seite in der horizontalen oberhalb von 980 Pixeln Breite (1024er-Optimierung) abgeschnitten und der entsprechende Teil von 980 Pixeln auf 320 Pixel geschrumpft.
Dreht man das Telefon so wird der "Landscape-Mode" aktiviert. Die Seite kippt und passt sich der horizontalen Darstellung (480 Pixel Breite) an. Die Auflösung beträgt immer 160 dpi.

Die Pixelabmessungen des iPhone-Screens betragen also:

• Im Hochformat: 320px x 356px
• Im Querformat: 480px x 208px

Durch den oben beschriebenen CSS3-Code-Snippet weisen wir der Seite ein maximale Breite von 480 Pixeln zu.

Und wenn die Seite schmaler oder breiter als 980 Pixel ist?

Das iPhone kennt den sog. Viewport. Über eine weitere META-Zeile im HTML-Head übermitteln wir die Darstellungsbreite:

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

In diesem Fall wird davon ausgegangen, dass der iPhone-User das Handy senkrecht hält (320px Breite) wenn er die Seite aufruft. Zur Wiederholung: Das iPhone "nimmt" sich also die Seite und schneidet alles was sich außerhalb von 980 Pixeln Breite befindet ab. Die übrig gebliebenen 980 Pixel werden auf 320 Pixel heruntergerechnet (vorausgesetzt das iPhone wird senkrecht gehalten). Der mittels META-Befehl übergebene Wert bezieht sich nun auf die geschrumpften 320 Pixel (100% der iPhone-Darstellungsbreite).

Den iPhone-Zoom beeinflussen

Das iPhone kann Websites heran- oder herauszoomen. Dieses Verhalten kann ebenfalls über den Viewport beeinflusst werden. Hier ein Beispiel von meiner Seite:

<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 -->
"/>

Weitere Einstellungsmöglichkeiten über den Viewport findet Ihr am Ende dieses Artikels als PDF-Download.

Texte für das iPhone optimieren

Texte sollten mindestens eine Schriftgröße von 18 Pixeln haben. So wird auch ohne zoomen eine optimale Lesbarkeit garantiert.

Links für das iPhone optimieren

Das iPhone hat einen Touch-Screen. Logische aber oft unbeachtete Schlussfolgerung ist, dass keine :hover-Zustände möglich sind. Das gilt übrigens für jeden Touch-Screen.
Ergo muss die Webseite so optimiert werden, dass Links auch ohne :hover eindeutig als solche zu erkennen sind. Bei der iPhone-Version meiner Seite habe ich demzufolge alle Links unterstrichen und die :hover-Zustände bei Überschriften etc. entfernt.
Wird ein Link auf dem iPhone geklickt/getippt so wird dieser standardmäßig grau umrahmt. Diese Rahmenfarbe kann mittels Webkit und CSS3 angepasst werden:

a {
 -webkit-tap-highlight-color:rgba(200,0,0,0.4); /* R,G.B,Alpha */
}

iPhone-Applications verlinken

Viele Informationen einer Website schreien beinahe danach direkt mit Handy-Funktionen verknüpft zu werden. So können Telefonnummern per Fingertipp direkt angerufen werden; ein Klick auf die E-Mail öffnet das Mail-Programm des iPhones und Adressen werden in Google Maps angezeigt.
Um diese Funktionen zu verwenden, müssen (in diesem Blog bereits mehrfach angesprochene) Mikroformate verwendet werden. Diese "verwandeln" simple Zeichenketten in - für den Browser - verständliche Informationen.

Mehr zu Mikroformaten findet Ihr in meinen älteren Beiträgen:

• XFN (XHTML Friends Network) Microformat
• vCard mittels Microformat “hCard” erstellen

Formularfelder für das iPhone optimieren

Wird über das iPhone ein Formular angeklickt, so zoomt das Gerät an das Input-Feld heran und öffnet automatisch die Touch-Screen-Tastatur. Somit verringert sich der sichtbare Bereich auf mickrige 320 x 140 Pixel. Demzufolge sollten Formulare so angepasst werden, dass sie in dieser Darstellungsbreite vollständig zu erfassen sind. Submit-Buttons sollten mindestens 40x40 Pixel betragen um eine problemlose Interaktion zu ermöglichen.

Zusätzlich kann dem Input-Feld ein Befehl übergeben werden der die automatische Rechtschreibkorrektur bzw. Großschreibhilfe des iPhones aktiviert oder deaktiviert. Der Codefetzen sollte selbsterklärend sein:

<input autocorrect = "on"/>
<input autocorrect = "off"/>

<input autocapitalize = "on"/>
<input autocapitalize = "off"/>

WebClip-Icon hinzufügen

Internetseiten lassen sich auf dem iPhone per Favoriten-Funktion direkt auf den Home-Screen befördern. Um dort auch ein hübsches Icon zu präsentieren sollte der Webdesigner ein sog. WebClip-Icon hinterlegen. Wie das geht erkläre ich in einem früheren Artikel.

Fazit

Das iPhone kann das ganz normale Internet darstellen. Doch trotzdem können Websites für das Endgerät noch optimiert werden. Ob und in welchem Umfang dies geschieht ist jedem selbst überlassen. Ich für meinen Teil habe mittlerweile fast 100% meiner Desktop-Internet-Anwendungen auf das iPhone übertragen und freue mich über jede Seite wo der Webmaster sich die Mühe gemacht hat mir eine besonders einfache Informationsaufnahme zu ermöglichen.

An dieser Stelle möchte ich ausdrücklich erwähnen, dass ich meine eigene Seite größtenteils für das iPhone umgeschrieben habe. Eine vollständige Optimierung ist mir momentan aus Zeitgründen nicht möglich. Also nicht motzen :D

Mobile Zukunft?

Hat Euch dieser Artikel weitergeholfen? Wie steht Ihr zum Thema mobiles Internet? Nutzt Ihr das Web vom Handy aus und wenn in welcher Form?
Ich freue mich über zahlreiche Erfahrungsberichte!

Als letztes verweise ich noch auf die Apple-PDF zum Thema iPhone-Optimierung.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Kleine Icons zur bildhaften Kennzeichnung von Internetseiten haben sich in den letzten Jahren großer Beliebtheit erfreut. Das Favicon als Markierung von Lesezeichen oder der Browser-URL kennt wohl mittlerweile jeder. Doch was genau ist ein WebClip Icon? Die Lösung ist ganz einfach. Das Favicon im iPhone und iPod Touch!

Damit das iPhone anstelle eines automatisch generierten Icons ein schönes, vom Webseitenbetreiber erstelltes, Icon anzeigt muss nicht viel getan werden. Im Folgenden erkläre ich in aller Kürze was getan werden muss.

Wo erscheint das Icon denn überhaupt?

Das WebClip Icon wird erst dann sichtbar, wenn ein iPhone oder iPod Touch Benutzer sich dazu entscheidet eine Website nicht in den Favoriten von Safari zu verwalten sondern ihr einen ehrenvollen Platz auf dem Home Bildschirm zuzuweisen.
Sofern kein WebClip Icon vorhanden ist, erstellt das iPhone automatisch ein passendes. Dieses zeigt jedoch nur eine stark verkleinerte Ansicht der gesamten Website. Ich für meinen Teil wollte solch ein hässliches Icon nicht auf dem Home Bildschirm platzieren, also muss ein WebClip Icon her.

WebClip Icon erstellen

Erstellt eine neue Datei mit den Abmessungen 60x60 Pixel und gestaltet Euer Icon. Beachtet hierbei bitte, dass die gesamte Arbeitsfläche zum Icon generiert wird.
Der große Vorteil liegt darin, dass Ihr weder die abgerundeten Ecken einbringen, noch die Spiegelungen hinzufügen müsst. Dies geschieht alles im iPhone selbst.
Die fertige Grafik speichert Ihr nun unter dem Dateinamen "apple-touch-icon.png" in den Root Eurer Seite ab. (Hinweis: Bei WordPress muss das Icon in der selben Hierarchieebene liegen in der sich auch die wp-config.php-Datei befindet.)
Das wars. Ihr benötigt im Gegensatz zum Favicon keine Codeschnipsel im Seitenhead oder ähnliches. einfach nur das Icon erstellen, hochladen fertig.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.