Mobile Web Experience » Mobile Webseiten erstellen

Tutorial: Auf eine iPhone optimierte Seite umleiten

Nils — Sat, 18 Jul 2009 08:06:36 +0000

Durch die Dichte an iPhones sollte man als guter Webmaster eine iPhone optimierte Webseite anbieten. Wenn man WordPress oder andere CMS einsetzt ist das meistens mit ein paar Mausklicks erledigt. Etwas kompliziertet wird es, wenn man eine selbst gebaute z.B. PHP Seite hat, aber zum Glück ist es mit diesem HowTo auch kein Hexenwerk.

Als erstes muss man sich eine Datei namens webkit_xl.zip herunterladen. In der zip Datei befindet sich eine js Bibliothek, die automatisch zwischen den unterschiedlichen auf webkit basierenden Applikationen unterscheidet, also den mobilen Safari erkennt.
Folgender Code muss dann in die enstprechende PHP Datei eingebunden werden – sorry das es sich hier um ein Bild handelt. Ich konnte das script nicht direkt einbinden, WordPress hat das falsch interpretiert.

Und das war’s schon!
Es wird also mit Hilfe der webkit_version_xl.js der mobile Safari erkannt und auf http://www.meinSeite.de/iPhone_Optimierte_URL weitergeleitet. Schön!

Mobile Screen Size Test

Nils — Fri, 23 Jan 2009 08:04:57 +0000

Wie mittlerweile schon mehrfach hier erwähnt, ist es eine große Herausforderung – naja, sagen wir besser ein riesiges Problem – mobile Seiten auf die diversen Handy-Bildschirm Auflösungen zu optimieren.
Abhilfe schafft ein Testtool, dass nach Eingabe einer beliebigen URL, diverse Auflösungen simuliert. Das Tool wurde von Erich Holzbauer entwickelt und ist hauptsächlich für .mobi Seiten gedacht.

Von einer Mini-Auflösung (128×160) bis hin zur iPhone Auflösung 480×320 können Seiten getestet werden.
Super Tool um kurz einen neuen .mobi Auftritt zu überprüfen! Danke Erich!

Via: moblog.ch

Mobile Web Design

Nils — Tue, 20 Jan 2009 09:27:54 +0000

Ein sehr interessanter Artikel bei mobiForge widmet sich dem Thema “Effective Design for Multiple Screen Sizes”. Ein Problem mit dem man früher oder später konfrontiert wird, wenn man für mobile Geräte designed.
Sehr interessant finde ich die Übersicht der Bildschirmauflösungen – Pixel in der Höhe sind uninteressant, da ja gescrollt werden kann, die in der Breit dafür um so mehr:

Die meisten Endgeräte kommen mit 128, 240 und 176 Pixel. Die Geräte mit 320 Pixel Auflösung sind derzeit noch in der Minderheit – nur um die 5% bieten diese Auflösung an. Außerdem gilt es auch die variiert auch die ppi (pixels-per-inch) Darstellungsmöglichkeit der einzelnen Geräte zu berücksichtigen.

Auch interessant ist der im Artikel betrachtete mobile Auftritt von BBC. Hier wird gänzlich auf fixe Breitenangaben verzichtet – that’s the way to go!

Mobile Web Experience fürs iPhone

Markus — Thu, 20 Nov 2008 22:19:08 +0000

Um zu verdeutlichen, welche Chancen und Möglichkeiten im mobilen Web liegen, ist die Seite mobilewebexperience.com nun auch für alle gängigen mobilen Browser von Safari bis hin zu Opera mini optimiert. Surfen Sie die Seite einfach mit Ihrem Mobiltelefon an und überzeugen Sie sich selbst von den Vorzügen einer mobilen Präsenz.

Die mobilen Berater unterstützen und beraten Sie gerne wenn es darum geht, Ihren Internetauftriff speziell für mobile Browser aufzubereiten und zielgruppenspezifisch mit allen Tools und Methoden aus dem mobile Marketing zu vermarkten.

Serendipity für das iPhone und andere mobile Endgeräte optimieren

Markus — Tue, 18 Nov 2008 09:34:24 +0000

Wer ein Blog auf Serendipity Basis betreibt, kann mit dem Plugun “Serendipity Mobile Plugin / XHTML MP / iPhone” alle Inhalte optimiert für mobile Endgeräte ausgeben lassen. Das Plugin nimmt eine intelligente Browseranpssung der Inhalte für die weit verbreiteten Plattformen bzw. XHTML fähige mobile Browser vor. Das Plugin kann manuell und über SPARTACUS direkt aus Serendipity heraus installiert werden!

Auszug aus den Kernfeatures:

Valid XHTML MP 1.0 output
Sexy iPhone and iPod Touch output
5.0 out of 5.0 points at the dotMobi Ready Check!
Remove all images OR
Scale images to a fixed width OR
Perfectly fit images to the device’s display width using an optimized WURFL XML
Redirect mobile devices to another host
Always output mobile version on a specific host
Remove user defined HTML elements from DOM
Remove user defined HTML attributes from DOM elements
Accesskey enabled navigation including categories
Mobile sitemap generator with ping functionality
Rewrite Wikipedia.org links to the mobile wikipedia (wikipedia.7val.com)
Simple debug output, password protected
XHTML MP template included, other mobile templates selectable
iPhone template included

Download Plugin