Sonstiges

mobile Webnutzung: flexible Layouts

so mal eine Frage wegen Asus EEE, iPhone und Nokia N 800, alles prima Geräte, um von unterwegs surfen zu können. iPhone hat sich bereits über 2 Mio verkauft, Asus will sein Teil rund 5 Mio 2008 loswerden, wie es mit Nokias Verkaufszahlen zum Internettablet aussieht, weiß ich nicht. Und es soll ja auch noch andere Geräte geben. Hauptnutzer dürfte wohl das Geek/Nerdvölkchen sein, die Masse muss sich noch gedulden (günstige Geräte, einfache Bedienung, niedrigere Datentarife). Und so kommen wir zu den Blogs, die nicht selten genau von diesem Völkchen gelesen werden.

Wer ein starres Layout hat (gefixt auf sagen wir mal 1.000 Pixel), zwei Sidebars links mit rund 400 Pixeln Breite und dazu auch noch eine feste Schriftart, dem wird es der mobile Nutzer nicht danken. Ausweg? Alles umkehren? Das wäre doof, da man sein hübsches Layout uU zerschießt. Zudem will sich nicht ein jeder die Arbeit machen. Immerhin kann man über eine variable Schriftgröße nachdenken, dass dürfte per CSS kein Problem sein. Denn so können wenigsten die Firefox-Nutzer etwas besser skalieren/zoomen. IE7- und Operanutzer haben dahingegen kein Problem, die können so oder so stufenlos zoomen, egal was der User auf seiner Webseite eingestellt hat. Bequemer wärs natürlich, man bietet einen Templateswitcher ein (bei WordPress gibt es genügend) mit einem passenden, flexiblen Template. Grafikarm, schont die Leitung, insofern der Datentarif volumenbasiert wäre, mit dem der User auf deine Webseite zugreift. Noch besser wäre es, wenn der User nicht switchen müsste, sondern der Webserver erkennt, dass da einer mit einem schmalen Monitörchen auf die Webseite zugreift. Blöd nur, dass die Geräte keine universelle Kennung „Achtung, mobiles Gerät, mach dich dünne“ haben, oder?

Ja, ja, ich weiß, für Webdesigner ein alter Hut. Letztlich aber ist es auch für mich ein alter Hut, da schon längts mehr als die Hälfte meiner Leser per RSS meine „Inhalte besuchen“, da spielt das Design nun wirklich keine Rolle mehr. Auf wen schießt man sich also ein? Die Direktleser mit Standardgeräten, auf Leser mit Minigeräten oder aber RSS-Leser? Wie soll man diese doofe Mixtur lösen? Oder soll man den User darauf hinweisen, dass er eben in den Textmode via Browserfunktion umschalten möge? Dann sieht alles gleich besch… aus.


Neue Stellenangebote

Growth Marketing Manager:in – Social Media
GOhiring GmbH in Home Office
Senior Social Media Manager:in im Corporate Strategy Office (w/d/m)
Haufe Group SE in Freiburg im Breisgau
Senior Communication Manager – Social Media (f/m/d)
E.ON Energy Markets GmbH in Essen

Alle Stellenanzeigen


Über den Autor

Robert Basic

Robert Basic ist Namensgeber und Gründer von BASIC thinking und hat die Seite 2009 abgegeben. Von 2004 bis 2009 hat er über 12.000 Artikel hier veröffentlicht.

26 Kommentare

  • Die tatsächliche Breite der Seite ist dank der neuen Generation von Browsern mit Zoomfunktion (aktueller Opera, FF 3) imo weniger ein Thema als das Verhältnis Navigation/Grafiken/Werbung/usw. zu tatsächlichem Content. Außerdem sollte auf einen schmalen Header, hohe Kontraste und – wie du schon schriebst – variable und default angemessen große Schriften geachtet werden.

    Über einen Template-Swicher habe ich auch schon nachgedacht, wird bei mir immer mehr ein Thema (schon jetzt 5% Besucher mit 800x480px). Automatisiert wäre das natürlich klasse, aber auch ein Dropdown-Klick mehr oder weniger sollte ja niemanden umbringen.

    Tolle EeePC-Review, btw!

    Ciao
    Johannes

  • naja, dem iphone ist die auflösung egal auf die die seite optimiert wurde. das zoomen klappt wunderbar. doppelt den textparagraphen antippen und er wird auf gut lesbare größe gezoomt. klar, über rss geht das sogar noch besser.

  • Robert, Robert … die Grafiken des Templates sind nicht das Problem beim Traffik, die werden nur einmal geladen. Es sind die Illustrationen zu den Beiträgen, die iPod-Ton-Beiträge und vlogs -> Videopost die das surfen fett macht und mit Volumentarifen teuer. Grafiken sind allenfalls in Bezug auf die Skalierung ein Problem. Sie tun es nicht. Man kann allenfalls für gängige Viewportmaße darauf achten, dass die Grafik nicht seltsam aussieht, doch selbst dem sind grenzen Gesetzt, wenn Sidebars und Histories nicht nur horizontal sondern auch vertikal vorhanden sind und das Fenster mit der Maus auf eine x-beliebige krumme größe zusammengeschoben wurde.

    Irgendwo hört das Design auf und der Userk(r)ampf beginnt. Es gibt nur sehr wenige Designraster, die wirklich alles mitmachen und dennoch nicht spartanisch aussehen. Wäre ein Wettbewerb wert. Dazu aber müssten die Teilnehmer so ein geekiges Teil haben und möglichst noch eine Reihe Typen kennen, die dieses Geekige Teil im Alltag einsetzen und diverse Nutzereinstellungen verwenden, wenn es wirklich gut werden soll. Im Moment wüsste ich nicht, was der User am Ende noch an Desktopoptionen benötigt um Terminkalender, Mail-/SMS-Benachrichtigungen, etc. im schnellen Zugriff zu haben, die die Größe des Viewports beeinflussen.

  • gibts schon fürs iphone:

    „The iWPhone WordPress Plugin and Theme automatically reformats your blog’s content for optimized viewing on Apple’s iPhone and iPod touch. It detects the iPhone/iPod touch’s User Agent and serves up the content with the special theme only to iPhone and iPod touch visitors, all other browsers will view your WordPress blog with your current theme.“

    http://iwphone.contentrobot.com/

  • Mal ne blöde Frage: Welche Auflösungsangabe verschickt das iPhone eigentlich an die Webbrowser? Eigentlich hat es ja eine unendliche Auflösung (wegen Zoom). Jedoch wurde ich bei nem Speedport 700 Router Interface wegen meiner geringen Auflösung schonmal ausgesperrt.

  • eigentlich gibt es für automatischen css-wechsel das media=xxx attribut, allerdings scheinen die wenigsten handhelds zur zeit auf media=handheld anzusprechen. und yup, firefox kann endlich auch richtiges zoom (beta 3).

    „In HTML können über das media-Attribut separate Stylesheets für unterschiedliche Ausgabemedien aufgeführt werden, jedoch liegt die Entscheidung darüber, welche Angaben verwendet werden, allein beim Browser/Ausgabegerät. Aktuell ignorieren leider noch viele mobile Ausgabegeräte die Angabe media=“handheld“ und greifen stattdessen auf das Standard-Stylesheet der Seite zu, das über media=“all“ oder media=“screen“ eingebunden wird.“ (selfhtml)

  • Als Nutzer vom Nokia E90, aergere ich mich oefter ueber Seiten die automatisch zur mobile-version wechseln.
    Es wird also schon erkannt mit welchem Gerät man auf die Seiten zugreift. Bei einer Bildschirmbreite von 800 Pixeln kann und will ich jede Seite im vollen Design geniessen.

  • Bei Handys funzt das doch auch, mit WP mobile Plugin. So auf meinem Blog gelöst. Nur Text bisher, keine CSS Anpassung. Aber lesen kann man mit Palm, Nokia N-Series etc.

    Es müsste doch eine analoge Lösung für die mobilen „Mini-Surfer“ geben, oder wie?

  • Wieso nicht einfach eine Mobile Version parallel anbieten? So wie Google es mit dem Reader vormacht? Dann muss man weder automatisch noch händisch das Template wechseln.

  • Auf das Thema muss ich mal wieder anspringen 😉

    Der typische Webnutzer kommt zurzeit noch verhältnismäßig selten mit mobilem Webdesign in Berührung. Gründe dafür sind, dass wir hierzulande ziemlich gut mit Desktop-Computern und Festnetzinternet ausgestattet sind, dass mobile Endgeräte noch wenig Verbreitung finden, dass wir als Nutzer keine praktischen Vorstellungen davon haben, wie wir die kleinen Dinger eigentlich nutzen sollen (Japaner wissen das z.B. längst) und dass sowohl Inhaltsanbieter als auch Website-Entwickler noch nicht breitenwirksam erkannt haben, welche Dynamik da gerade entsteht oder entstehen könnte, wenn es um mobiles Internet geht.

    Die Zahlen sagen aber bereits folgendes:
    1. Der PC ist in 30 Jahren auf eine Verbreitung von geschätzen 850 Millionen Geräten weltweit gekommen. Das Mobiltelefon hat’s in 35 Jahren auf geschätzte 2,7 Milliarden geschafft.
    2. In Kenia ist die Zahl der mobilen Geräte in den letzten fünf Jahren von 1 Million auf 6,5 Millionen angewachsen. Die Zahl der Festnetztelefonanschlüsse ist bei etwa 300.000 geblieben.
    3. Indien ist das Land mit dem am schnellsten wachsenden Markt für mobile Geräte. China hat bereits mehr als 300 Millionen (!) Mobile-Nutzer.
    4. Westeuropa hat 2006 die Marke von 100% der Mobiltelefoneinheiten zur Zahl der Bevölkerung überschritten, sprich: mehr Handys als Menschen.

    Die Zahlen stammen aus Cameron Molls Buch »Mobile Web Design«, das zurzeit als eins der Referenzwerke zum Thema gilt, auch wenn es lediglich die Absicht hat, einen groben Einstieg/Überblick zu liefern und die Basics anzusprechen. Cameron beschreibt in seinem Buch die vier Möglichkeiten, die ein Inhaltsanbieter hat, um sein Webangebot mit mobilen Inhalten zu versorgen:

    1. Gar nichts machen und es dem Gerät überlassen, den Content zu fressen
    2. Bildmaterial und Styling reduzieren, um Traffic zu verringern, den nötigen Platz zur Darstellung zu verringern und desktopspezifische Styles zu vermeiden.
    3. Zusätzliche Handheld-Styles verwenden, also die bestehenden Inhalte möglichst mobiltauglich ausgeben. Also quasi Methode 2 als Premium-Edition.
    4. Inhalte anbieten, die speziell auf mobile Ausgabegeräte optimiert werden. Also nicht nur an den Styles drehen, sondern auch am Content selbst schrauben.

    Grundsätzlich ist natürlich die vierte Methode die beste, erfordert allerdings auch am meisten Aufwand und eigene Infrastrukturen. Und wenn wir in deinem Lieblingsbereich, den Blogs, bleiben, kann man recht sicher sagen: wir sind als Otto Normalblogger technisch und konzeptionell noch nicht weit genug für Methode 4. Zurzeit bleiben uns die ersten drei Methoden, die allsamt darauf bauen, den gleichen Inhalt, der für den Desktop vorgesehen ist, auch auf mobile Geräte zu drücken. Entscheidend für die Ausgabe sind lediglich die Styles und die Fähigkeiten der Geräte selbst, diese zu interpretieren und umzusetzen.

    Um jetzt also auf deine technischen Fragen zurück zu kommen, wie man sein Blog zurzeit am besten mobiltauglich macht: ein Layout verwenden, das es mobilen Ausgabegeräten einfach macht. Etwa dadurch, dass es von Haus aus flexibel/flüssig ist, oder auch dadurch, dass es sich durch einen Styleswitch in irgendeiner Form schmaler und kleiner machen kann. Wer es dann noch schafft, große Inhalte zu vermeiden, eine sinnvolle Navigation auch für kleine Geräte bereitzustellen und sauber genug zu arbeiten (Webstandards olé!), um Darstellungs- und Funktionsfehler zu vermeiden, der hat eine recht gute Basis für die Generation von Mobiles, die gerade an den Start geht.

    Viele Grüße
    _Dirk

  • Achso, eins noch: der Artikel bei SELFHTML, der eben schon verlinkt wurde, betrifft allein die eben beschriebene Methode 3: separate Handheld-Styles bei gleichbleibenden Inhalten für alle Endgeräte.
    Er ist zudem von 2005 und damit nicht mehr ganz aktuell. Die Erkennung von mobilen Geräten beispielsweise lässt sich deutlich treffender machen (wenn auch umfangreicher) als dort beschrieben, und auch die Grundproblematik, dass seinerzeit viele Mobiles nicht auf Handheld-Styles ansprachen, verliert immer mehr an Bedeutung.

    Das iPhone gibt sich übrigens nicht als Mobile aus, sondern als »großer« Computer. Allerdings versteht der Safari darauf bereits CSS3, so dass man sog. Media Queries verwenden und damit etwa sowas erfragen kann: wenn Viewport kleiner als x Pixel, dann bitte Stylesheet y verwenden.

  • @Dirk:
    Tja, schöner Vortrag, sehr schön, aber bei SELFHTML könntest Du auch was bewirken. Die sind auch nicht mehr ganz up to date.

  • Zu den Verkaufszahlen der Nokia Internet Tablets:

    Auf der Amazon Topsellerliste im Bereich PC stehen auf Platz 1 das N800, auf 5 und 6 (und 13,14 und 20) das Asus EEE, auf Platz 7 das N810. Die Bildschirmgröße 800*400 breitet sich also rasant aus. Unter anderem soll das N810 nun auch in Schulen eingesetzt werden
    http://www.trainingzone.co.uk/cgi-bin/item.cgi?id=178137&d=680&h=608&f=626&dateformat=%25e-%25h-%25y

    Wer mal sehen will, wie scheiße ein Blog aussehen kann, dem empfehle ich die Blogbar in Fullscreen auf einem 22″ iMac…
    Da bekommt man Depressionen, ohne von Alphonso angepisst zu werden.

  • @Marnem
    mit dem IMac22″ bist du doch nicht Mobil oder habe ich etwas verpasst?
    und nun scherz bei seite: auch wenn ich die Preispolitik von Steve Jobs und Co. nicht mag – ist ein IPhone (abgesehen von T-komiker-Tarife) immer noch das non-plus-ultra Gerät. danach kommtder Asus eee und dann Nokia… wie war das mit politisch Korrektheit ? kaufst du noch Nokia :))) hehe

  • Mit dem iMac bin ich nicht mobil, der Punkt ist aber, dass auch er eine untypische Auflösung benutzt. Die Blogbar zb sieht auf dem N800 ganz vernünftig aus, hat auf dem iMac aber einen 1000 Pixel breiten schwarzen Rahmen…

    Nokia macht mit seiner Werksschließung schon das richtige und nichts anderes, als hunderte andere Unternehmen auch. Einzig das gerade Wahlkampf ist, macht den Unterschied.

    Zum Thema iPhone: Das iPhone wäre um eine 800er Auflösung gotts froh, denn mit dessen winz-display lässt sich doch keine einzige Webseite sinnvoll nutzen. Abgesehen davon, dass das möchtegernPhone ein closed source system ist. Von Skype, Flash oder gar einer Office-Anwendung ganz zu schweigen…
    Das iPhone ist doch nur der Ferrari unter den Handys: Nicht alltagstauglich, fehlerhaft und schnittig im Design. Dazu überteuert, unflexibel und ein Statussymbol als Schwanzverlängerung.
    My 5 Cents

    PS: Diesen Kommentare habe ich im Bus auf einem N800 geschrieben und mittels UMTS geposted

  • Sky (#14), dankesehr! SELFHTML ist sicherlich nicht mehr ganz aktuell, jedoch hat sich in Sachen HTML und CSS seitdem auch nichts getan, so dass die Basis der Dokumentation noch immer praxistauglich ist. Aber natürlich ist drumrum einiges passiert (Ajax, Frameworks, Microformats, u.v.m.), und das soll natürlich auch in SELFHTML beackert werden. Hinter den Kulissen wird fleißig gewerkelt, und es wird in diesem Jahr sicherlich noch ein Update der Doku geben.

    Marnem (#18), das iPhone schafft es durch seine Zoomtechnik (in Verbindung mit dem sehr hochauflösenden Display) ziemlich überzeugend, »große« Websites auch in dem kleinen Display funktionieren zu lassen. Hast du’s mal benutzt? Man kommt damit erstaunlich gut klar.
    Aus Usabilitysicht ist das iPhone ein verdammt großer Schritt zum mobilen Web. Zusammen mit der Breitenwirkung, die es bereits hatte (»Huch, ein Telefon, das überall Internet kann«), war das eine kleine technische Revolution.

  • @19
    Ich weiß ja nicht, aber 480*320 sehe ich nicht als hochauflösend. Die Dots per Inch ist hoch, aber bei dieser Displaygröße auch nichts wert.
    Ja, ich hab das iPhone in der Hand gehabt und fand diesen Zoom Kram extrem nervig. Versuch mal dieses Blog auf dem iPhone anzusehen. Da rubbelst du dir alleine durch das horizontale scrolling jeder Zeile den Finger wund…
    Usability und das iPhone sind doch wohl zwei getrennte Welten. Das Adressbuch zu öffnen erfordert in einem normalen Handy 2 Schritte (Tastensperre raus, Adressbuch aufrufen) und im iPhone 5 (Display aktivieren, Tastensperre raus, Homescreen aufrufen, Telefoniefunktion aufrufen, Adressbuch aufrufen)…
    Technische Revolution? Das Nokia N95 kam 3 1/2 Monate vor dem iPhone auf den Markt und kann alles (bis auf den Touchscreen), was das iPhone kann. Zusätzlich GPS und UMTS.
    Wir können uns darauf einigen, dass das iPhone mit seinem Hype dazu geführt hat, dass mehr Menschen über mobiles Internet nachdenken. Das wars dann aber auch schon.

    Lesetipp:
    (iPhone-User der ersten Stunde und Apple-Fan, inzwischen N95 User, über seine iPhone Erfahrungen)
    http://www.atmasphere.net/wp/archives/2008/01/17/a-couple-of-days-with-the-iphone-has-me-right-back-to-the-n95

  • Marnem, was ein Gerät kann, interessiert nur beim Quartettspiel. Usability betrifft das, was der Benutzer (machen) kann.

    Ich nehme dir gerne ab, dass du und hunderttausend weitere Nutzer mit dem iPhone nicht klar kommen. Es ist nur sehr auffällig, dass ein Großteil aller anderen Nutzer ziemlich begeistert von dem Ding sind, und es hat sich gezeigt, dass das iPhone in weiten Teilen intuitiv bedienbar ist; auch von Nutzern, denen bisher der Bezug zu mobilen Geräten fehlte.

  • […] dann, dass die 800er-Auflösung wieder stärker vertreten sein wird, wenn ich den Kommentar von “Majoran” bei Robert Basic korrekt interpretiere. Ich persönlich habe eine starke Präferenz zum 1280×960-Fenster […]

  • Also beim iPhone sieht ein Blog von WordPress eigentlich recht ordentlich aus und aud das Handling ist überschaubar. Guckst du hier: [deleted]

  • Hey,
    man weiß ganz genau was für ein Gerät ankommt und teilweise sogar von welchem Provider etc.pp. ist alles über den User Agent auslesbar.
    Insofern kann man über eine Browserweiche alles auf die mobil optimierte Blogsite umleiten.