Webdesign fürs iPad
02.02.2010 in: Browser, CSS und Webdesign • 52 Kommentare
Letzte Änderung: 08.04.2012, 15:37 Uhr.
Der Bettvorleger ist gelandet. Apple hat am Mittwoch das iPad vorgestellt, ein Gerät, das die Nachteile eines Notebooks mit denen des iPhones kombiniert: Kein USB-Anschluß, kein DVD- oder BlueRay-Laufwerk, kein UMTS. Multitasking, das Ausführen parallel laufender Programme, geht auch nicht. Das einzige, das glänzt, ist das Display in einer Auflösung von 768×1024 Pixeln.
Viele Beobachter geben sich jetzt enttäuscht. So ein Wirbel um ein so langweiliges Spielzeug? Mich hat das nicht überrascht oder gar enttäuscht. Ich mache mit Apple ohnehin keine Geschäfte.
Aber für den Markt freue ich mich: Die Geräteklasse wird durch Apple eingeführt und bekannt gemacht, und jeder Konkurrent kann den Pionier leicht ausstechen. Es genügt ein USB-Anschluß und die Option, daß der Kunde im Gegensatz zum iPad seine Akkus selber wechseln kann, wenn er möchte. Packt man noch ein richtiges, mattes Display drauf und eine UMTS-Verbindung, dann kommt sogar ein mobiles Gerät dabei heraus.
Als Designer freue ich mich auch: Die Bildschirmbreite von maximal 1024 Pixeln wird all jenen auf die Füße fallen, die bisher Festbreiten gemeißelt und damit das Web verschmutzt haben. Real werden die Benutzer dieses Spielzeugs lieber hochkant lesen, also nur 768 Pixel bereitstellen. Gute Layouts passen sich dem an, schlechte werden einfach nicht mehr benutzt.
Wer jetzt erst auf ein modernes Layout umstellt, mag dies bedenken:
- Auf einem Touchscreen sollten Links nicht zu dicht beieinander liegen. Finger treffen schlechter als eine Maus. Peter-Paul Koch hat dazu gerade ein bißchen geforscht: The touch action.
Das interessante Problem hierbei: Wer mit solchen Bildschirmmaßen kommt und doch eine Maus benutzt, der möchte keinen Platz für zusätzlichen Leeraum vergeuden. Vielleicht wird sich der iPad-Safari ja per Javascript zu erkennen geben, damit man den gezielt ansprechen kann.
Die Pseudo-Klasse:hoveroderonmouse*-Events werden nicht angesprochen. - Eine horizontale Navigation sollte am Seitenrand umbrechen, sonst verschwinden vielleicht wichtige Elemente rechts hinter dem Bildschirmrand.
- Bei Tageslicht liefert ein Spiegeldisplay schlechte Kontraste. Orangefarbene Links auf weißem Hintergrund beispielsweise dürften kaum noch zu erkennen sein.
Sehr lange Texte möchte sicher niemand auf weißem Hintergrund lesen. Hier kann man einen Styleswitcher anbieten, wenn das iPad keinen eigenen Regler mitbringt. -
Safari, der Webbrowser auf dem iPad, unterstützt Media Queries ein bißchen. Das kann man so ansprechen:
@media screen and (max-device-width: 1024px) { /* Horizontal */ } @media screen and (max-device-width: 768px) { /* Vertikal */ } @media screen and (max-device-width: 480px) { /* iPhone. Findet @media handheld nicht. */ }Opera und Firefox verstehen das natürlich auch, im Gegensatz zu Safari sogar nach einer IE-Expression.
* html textarea { border: expression( this.onfocus = function() { this.style.borderColor = '#27b'; }, this.onblur = function() { this.style.borderColor = '#888'; } ); } @media screen and (max-device-width: 768px) { /* Das liest Safari nicht. */ }Update 08.04.2012:
Natürlich ist die Sache nicht so einfach: Bis heute kann Safari unter iOS die korrekte Bildschirmbreite nicht ermitteln oder umsetzen. Mehr dazu unter: Improved version of JavaScript fix for the iOS viewport scaling bug. - Auf dem iPad gibt es kein Flash. Dafür sollte normalerweise schon längst eine Alternative bereitstehen, aber oft sieht die eher peinlich aus. Safari versteht Javascript und Canvas; wer das nutzt, kann auf Flash oft verzichten.
- Wenn der Safari als Mobilvariante installiert ist, dann kann er vielleicht kein
position:fixed.
Also die 3G-Modelle können UMTS.
@Pascal: Soweit ich das gelesen habe, sind die erst für Ende April angekündigt. Aktuell fehlt es noch.
Ich werde mir trotzdem eines zulegen. Wer braucht schon Flash? Und USB ist auch nicht unbedingt nötig, wenn das Teil per WLAN mit dem Heimnetz verbunden ist. Für mich wären das alles keie Nachteile.
@Wolfgang Wagner: Mir fällt kein einziger Verwendungszweck ein. Zum Lesen zu schwer und zu hell, für Filme zu klein und mangels Laufwerk und brauchbarer Festplatte nicht mobil genug (16 GB als »Normalversion«? Von welcher Resterampe wurden die denn gezogen?). Mangels USB-Anschluß kann man ohne zusätzliche Ausrüstung keine richtige Tastatur anschließen, und da der Akku schon wieder nicht auswechselbar ist, muß es im Urlaub zu Hause bleiben.
Dennoch werden sich Kunden finden, deshalb habe ich die Punkte oben mal aufgezählt. Davon profitieren ja auch die Nutzer richtiger Computer.
@Thomas Scholz: Es ist halt hauptsaechlich ein kleines, dekadentes Spielzeug ;-)
Francesco am 02.02.2010 · 17:59
@Thomas Scholz: Warum zu hell? Die Helligkeit kann doch nach Belieben eingestellt werden. Zu klein für Filme? Ich denke, wenn das iPad auf dem Schoß liegt, reicht die Größe vollkommen aus. Ich bin ja schon mit meinem iPod touch zufrieden, wenn ich damit im Zug Video-Podcasts anschaue. ;-)
Evtl. für dich kein Verwendungszweck, jedoch für viele andere schon: das iPad ist eine 1-A-Spielekonsole.
In diesen Tagen ist es eine wahre Herausforderung einen Blog zu finden, auf dem nicht über das iPad gestritten wird.
Wie immer bei Apples Produkten, das Geschrei um das Neue ist eben größer als der wirkliche Nutzen.
Wie Wolfgang Wagner schon schrieb:
kann ich dem nur zustimmen. Es ist ein nettes Spielzeug wie andere iDinge auch.
Solange das iPad nur mager mit externen Schnittstellen/Zugängen ausgestattet ist, bleibt es ein Bilderrahmen mit besonderer Bedienfunktion.
Sollte dann nur Apples Betriebssystem und nur besondere von Apple zugelassene „Apps” aus dem Apple-Sonstwas-Store darauf laufen, dann ist es für andere Umgebungen nutzlos. Und wenn der Akku leer ist, keine Steckdose weit und breit, das Netzteil vergessen, dann ist das Ding noch nicht einmal als Klemmbrett oder Schreibunterlage zu verwenden.
Auch wenn Apple öfters Vorreiter an Bedienkonzepten ist, bleibt mir das ganze System zu proprietär. Wer sich an Apple mit ketten will, darf das gerne tun.
Ich kenne Apples Produkte schon, so ist es nicht, aber dafür entflammen konnte ich nun doch nicht.
Ich besitze keinerlei Apple-Hardware, teils aus Kostengründen, teils wegen schlechter Hardwareausstattung und Umrüstbarkeit.
Kein iPod, weil die Audio-Qualität für Puristen zu schlecht ist, für dauerschallgetötete Jogger-Ohren reicht das teure Kästchen wohl.
Kein iPhone, weil ich keine Tausend Apps brauche, mich auch noch ohne Navi zurecht finde, schon ein handliches Mobiltelefon besitze und in der Lage bin ohne Zwicken und Spreizen meine Termine und Telefonkontakte zu verwalten.
Kein iPad, weil es albern ist, mit einem interaktiven Bilderrahmen nebst Telefonanschluss herum zu rennen, am besten mit einem eigenen Managertäschchen; in den Aktenkoffer will ich das Ding nicht stecken, so dick wie es aufträgt, und in die Blazertasche passt es auch nicht. Aber wer weiß, mit einer ‚Fridge App‘ würde ich das Ding an den Kühlschrank kleben und von dort dann den Füllstand desselben auslesen und im Internet dann Bier und Pizza bestellen oder wenn davon zu viel genossen, die begeisternden Ich-Darf-Produkte, natürlich mit WLAN-Verbindung zu meiner Waage names iWeight (oder war das jetzt dieses Wii-Dingens?), damit auch die Blockwarte meines Gewichts per Twitter wissen, wie schwerwiegend der Genuss einer Calzone sein kann.
Ich warte schon gespannt auf Apples iWindows®, ein hausfenstergroßes Gerät, welches dann in durchdesignten Einfamilienbungalows den Blick in die Außenwelt ersetzt. Was wären Glasfenster mit farbiger Interaktivität, ein neuer Markt, da bekämen Fensterfarben ein ganz neues Gesicht. Und ich kann dann bestimmen wie es Draußen aussieht! ☺
Ja, was wäre die Welt ohne iEyes, dem Retinaimplantat für die bessere Weltsicht nebst iSkin, der Haut mit interaktiver Kommunikation – ein Chamäleon wäre darauf eifersüchtig!
Die nächste Stufe in den Apple-Himmel wäre dann das iThink, ein kleiner Stöpsel im Ohr, der dann die Funktion des Großhirns übernimmt.
Aber vielleicht erschließt sich mir ja noch das Paradies auf Erden durch den Genuss eines angebissenen Apfels. Ich glaube, ich sehe das vielleicht zu verbissen, einem angebissenen Apfel (John Lennons Biss in Yoko Onos Apfel lässt grüßen!) so viel Nutzloses zuzutrauen.
Das war vielleicht doch zu sehr offtpic, ich konnte meine glossige Zunge nicht hüten.
Rob am 03.02.2010 · 11:40
Hallo zusammen...also ich halte nichts vom iPad..wie man hier lesen kann: Apple iPad...und es unterstützt ja noch nichtmal Flash...was will man dazu noch großartig sagen...
LG
@Rob: Die fehlende Unterstützung für Flash sehe ich zwar als großes Verkaufsproblem, aber aus der Sicht des Designers habe ich nichts dagegen. Das wird vielleicht den Weg für HTML5 und SVG etwas erleichtern.
Adobe hat bis heute keine Pluginversion für 64-bit-Systeme zustandegebracht, das Plugin könnte also derzeit nicht von Safari ausgeführt werden. Apple wiederum stellt keine API bereit, die Adobe nutzen könnte, um dem Plugin eine Hardwarebeschleunigung mitzugeben.
Die Frage ist: Wenn Adobe doch ein Plugin herstellt, das auf dem iPad läuft – wird Apple seinen Kunden die Installation erlauben? Beim iPhone hat das bisher nicht geklappt.
Auch das ist (für mich) ein guter Grund, die Finger von dem Ding zu lassen: Ich entscheide, was ich installiere, nicht der Verkäufer. Um mich auf Apples seltsame Politik, des »Du bezahlst es, aber uns gehört es weiterhin« einzulassen, bin ich einfach zu … vernünftig.
@GwenDragon:
Nun, das sehe ich jetzt nicht wirklich als ein Gegenargument. Wenn ich unterwegs bin, kann mir genau so der Akku des Handys, des Laptops oder der Digicam schlapp machen. Aber ich persönlich würde das iPad gar nicht unbedingt als mobiles Gerät nutzen. Höchstens im Urlaub. Und ich gehe nicht an Urlaubsorte, an denen es überhaupt keinen Strom gibt.
Nur meine persönliche Meinung. Ich will niemanden zu dem Teil bekehren, aber ich kaufe es mir trotzdem! :-)
Max Vähling am 03.02.2010 · 17:45
Ich habe das iPad bisher eher in bezug auf Medien wie eBooks o. ä. betrachtet - gewissermaßen als Verbesserung von iPhone und Kindle. Diese Tipps für "normales" Webdesign sind auf jeden Fall hilfreich.
Wobei ich mir bei den meisten sowieso wünschen würde, dass Webdesigner sie sich zur Erinnerung an den Bildschirm hängen - iPad oder nicht.
GwenDragon am 03.02.2010 · 18:00
Solange SVG sowie canvas auf den iGeräten nicht so laufen wie sie sollen, gibt es keinen Ersatz für Flash. Selbst wenn es Emulationen wie Gordon gibt.
Ben am 03.02.2010 · 20:02
Wir freuen uns über mehr Platz und du katapultierst uns zurück ins 800x600er Zeitalter. Visuell attraktive Seiten die so flexibel sein sollen um eine Breite von -800px zu unterstützen. Klar.
Da versteht man auch die Aussage nicht mehr. Auf der einen Seite ein Spielzeug das keiner braucht, auf der anderen Seite soll es Maßstäbe setzen, wenn es um die Gestaltung von Seiten geht. Da stimm ich nicht zu.
Flexibel ja. 1024 min Size nach oben offen und sinnvoll beschränkt. Ja. Kleiner als 1024 gestalten um Pseudo iPad Nutzer glücklich zu machen. Nein.
Nicht jede Seite ist just simpel aufgebaut wie deine. Ich kenn ehrlich gesagt auch keine renomierte Seite im Netz die unter 800x ohne Scrollbalken auskommt.
Hast recht. Alles Pfeifen. Am besten wir legen den Maßstab mal auf 320px fest, schließlich gibts mehr iPhone als iPad Nutzer. Nix.
Ben am 03.02.2010 · 20:03
Nachtrag. Mit «Maßstab» war natürlich die Aussage gemeint: das deiner Meinung nach schlechte Webentwickler & Designer Seiten nicht so flexibel gestalten, als das man selbige unter ein aktuelles Niveau skalieren könnte.
@Ben: Das ist einfach eine Kompetenzfrage. Jedes Layout kann man so erstellen, daß es bis auf 20em hinab skaliert, wenn keine überbreiten Grafiken im Inhalt vorkommen. Auch »Dreispalter«. Ein Layout, bei dem das nicht geht, halte ich gerade nicht für anspruchsvoll, sondern für billig.
Nochmal ganz deutlich: Nicht nur iPad-Nutzer profitieren davon, sondern jeder mit einem kleinen Monitor oder großer Schrift oder schlicht schmalerem Fenster. Wer die oben genannten Punkte berücksichtigt, verbessert seine Website (und vielleicht auch seine Fähigkeiten). Unsere Technik wird immer mobiler, die Bildschirme immer kleiner.
Wer das ignoriert, der wird bald ignoriert. Zu Recht.
Bei simpel und clean, ja. Bei anspruchsvoller, nein. Zeig mir doch bitte, ich mein «reden» und «umsetzen» sind zwei Paar Schuhe, eine Seite die anspruchsvoll ist und sich unter 800x ohne Scrollbalken skalieren lässt.
Ich halte deine Aussage oder besser gesagt den Kernpunkt für realitätsfremd. Nicht einmal Apple.com lässt sich so skalieren und auch keine mir bekannte andere große Seite.
Träume, Thomas, sind Schäume. Wenn zu mir ein Kunde sagt er möchte eine unter 800px skalierbare Seite, die aber die volle Darstellungsbreite aktueller Monitore genauso ausnutzt und gleichzeitig auch noch visuell anspruchsvoll ist, dann sag ich schlichtweg: geht nicht.
Geht schon. Geht immer. Aber da ist dann so eine extrem übertriebene Optimierung von nöten, wie es kein Kunde bereit ist zu zahlen. Btw. lieber Thomas, lassen sich alle Seiten die im 960grid liegen, auf dem iPhone ohne Scrollbalken betrachten. Für größere Darstellung gibts dann den Zoom.
Du willst mir anhand deiner These und der selbsternannten Elite-Auslese auch sicherlich erklären wie man Magazine wie Smashingmag und Co. auf deine Referenzierten 768px Breite skalieren lässt ;-) ohne Scrollbalken. Und ach ja, auch ohne das man einfach via JS dann entsprechende Teilbereiche komplett ausblendet, denn das wär ja Beschiss.
Ich weiss nicht was dich dazu befugt eine derart drastische Auslese an: «das ist Qualität» in dieser Branche, meiner Branche, festzusetzen. Das ist jetzt auch gar nicht bös gemeint. Nur lese ich von renomierten Vertretern ganz andere Sachen. Skalierbarkeit und flexibilität ist wichtig. Gar keine Frage. Aber als Referenz 768 und das iPad an den Haaren herbei zu ziehen, das nenne ich schlichtweg inkompetent.
Wenn du deine Aussage auf mobile Endgeräte beziehst, dann sei dir gesagt das es für die Seiten, die wirklich einen so enormen mobilen Zulauf haben, das eine Anpassung von nöten ist, User bei keiner Optimierung gar abspringen könnten, eine Layout/Template Versionen für selbige haben.
Also bitte. Lass die Kirche im Dorf. Ich kenn keine 10 Deutschen Webentwickler deren Seite attraktiv ist und gleichzeit so hoch skalierbar das ohne Scrollbalken dein Auflösungstraum erreichbar wäre. Nach deiner Meinung also alles Null-Checker, die bald der Vergangenheit angehören.
Kaum haben wir den grattligen IE6 mit viel Atemnot überstanden (bald), würde man uns aufbürden schon wieder nen technischen Spagat zu machen. Dein Standard für gutes Webdesign: optimiert für aktuelle Displaygrößen im Desktopbereich und fehlerfrei skalierbar bis in die Abgründe von Handhelds.
Danke & Bravo
Ben
Anonymous am 03.02.2010 · 21:34
Nachtrag: sollte deine These in einem Jahr auch nur in maginalen Ansätzen zu einem Qualitätsfaktor für Webseiten werden, fühl dich hiermit mit meiner besten Flaschen Wein beschenkt. Die schicke ich dir sauber Verpackt als Entschuldigung für meine Ungläubigkeit, sollte deine iPad-768-Webentwickler-und-960-Grid-sind-out-These wirklich wahr werden ;-)
@Anonymous:
Ich bezweifle irgendwie, daß du den Artikel oder die Kommentare wirklich gelesen hast. Den Bedarf für anpassungsfähige Layouts habe ich nicht allein am iPad aufgehängt; das wäre auch ein bißchen spät.
Ganz sicher hingegen bin ich mir darin, daß ich mich nicht auf diese Ebene hinabziehen lasse. Mir geht es um den Ausbau fachlicher Kompetenz, nicht um persönliche Angriffe.
Das Erstellen flexibler Layouts kann man lernen. Wenn man das noch nicht hinbekommt, so ist das keine Schande. Viel schlimmer finde ich es, wenn man das nicht lernen möchte. Dann muß man auch keine Zeit mit den Hinweisen vergeuden.
Hallo Thomas,
zu Deinem flexiblen Layout habe ich eine Frage:
Du benutzt eine maximale Breite von 60em für Deine Seite. Für Nutzer großer Bildschirme bedeutet das, die Schrift muss vergrößert werden, um Deine Seite in die Breite wachsen zu lassen.
Mich würde interessieren, wieso Du Dich gegen eine Skalierung des Inhalts – passend zur Größe des Browsers – entschieden hast. Hat das mit der hohen Zeilenbreite zu tuen, die entstehen würde?
Danke Dir für Deine Antwort und beste Grüße,
Andre
GwenDragon am 05.02.2010 · 12:01
Eine feste Breite von Inhalten bei 60em ist wohl mit den Breiten von Schreibmaschinentext im Bereich Presse bzw. Typografie zu vergleichen.
Es ist nicht sinnvoll Text über den ganzen Bildschirm fließen zu lassen, wenn zu viele Zeichen in einer Zeile stehen sinkt die Lesbarkeit.
Typefacts: Zeilenlänge
Typographie: Variable Textbreiten und Lesbarkeit
Multimedia-Systeme (bezogen auf Textsatz/-ausgabe)
@Andre: Wie GwenDragon halte auch ich sehr breite Zeilen nicht für angenehm lesbar. Ich glaube zwar gerne, daß es auch hier Ausnahmen gibt und manche Leute eben doch lieber bildschirmfüllende Texte lesen – aber ich kann nicht beide Interessen gleichzeitig bedienen.
Du kannst natürlich das Stylesheet einfach abschalten, um diesen Effekt zu erreichen.
Hallo GwenDragen,
hallo Thomas,
besten Dank für eure Antworten.
Hat mir geholfen!
Beste Grüße,
Andre
Thomas Hey'l am 07.02.2010 · 18:59
Meine zwei Cent:
Zeilen mit mehr als 40 em sind nicht mehr gut lesbar. Und die auch nur dann noch, wenn der Zeilenabstand groß genug ist. Wer meint, sich meine Website auf einem 1.920 Pixel-Bildschirm im Vollbild-Modus ansehen zu müssen - bitte, soll sie oder er jede Menge Hintergrund bewundern!
Das macht erst dann Sinn, wenn die Schriftgröße vier- bis fünffach vergrößert wurde. Warum drucken denn Zeitschriften und Illustrierte in schmaleren Spalten? Weil das Auge sonst den Halt verliert und der Anschluss an die nächste Zeile schwer fällt. Mir ist es wichtiger, dass die Inhalte bei vorgeschlagener Schriftgröße auch noch unter 640 Pixel Breite vollständig dargestellt werden (ohne waagerechte Schiebebalken).
Beste Grüße, Thomas
Zum Thema "flexibles" Layout:
Ich habe in meinem Firefox eingestellt: "Nur Text zoomen" !
Moderne Browser bieten dem User die Möglichkeit, selbst zu entscheiden, ob er die ganze Seite oder nur den Text zoomen will, weil ihm vielleicht doch die Zeilen zu lang sind. Ist ja eh alles Geschmackssache.
Mit Deiner Art der Seitengestaltung bevormundest Du mich, weil Du mir die Möglichkeit nimmst, nur den Text zu skalieren.
Soll keine Kritik sein, wollte Dir nur zeigen, dass es unterschiedliche Ansichten zum Thema gibt, und die Ansichten und Techniken der anderen nicht unbedingt das Netz verschmutzen, nur weil sie nicht Deiner Ansicht entsprechen.
@GE: Verstehe ich nicht. Du kannst doch den Text skalieren, wenn du möchtest. Generell sollte das kaum nötig werden, denn ich verwende genau die Schriftgröße, die du dir eingestellt hast.
GE am 07.02.2010 · 20:02
Hallo Thomas,
Du hast doch alles in em skaliert, oder? Es wird also auch dann die ganze Seite gezoomt, wenn ich "Nur Text zoomen" eingestellt habe. Mein FF macht das jedenfalls, obwohl ich "Nur Text zoomen" eingestellt habe.
Die Breite Deiner Seite wächst mit, wenn ich den Text vergrössere.
@GE: Ach so, ja stimmt. Das ist der oben angesprochene Kompromiß. Die Breite wächst so lange, bis der Bildschirm ausgefüllt ist.
Das kannst du also selbst bestimmen, indem du einfach die Breite dieses Tabs festlegst: In Opera mit Rechtsklick auf den Reiter und »Wiederherstellen«; bei Firefox kenne ich mich nicht aus.
GE am 07.02.2010 · 20:18
Naja, Thomas, habe ja eigentlich nix dagegen, wie Du es machst, nur gegen die Auffassung, dass andere das Netz verschmutzen ;-)
Wir haben ja alle das Problem der wieder kleiner werdenden Bildschirme/Displays. Wenn Du meinen Link verfolgst, kannst Du sehen, wie ich versuche, damit umzugehen. Spiele einfach mal mit der Fensterbreite und beobachte die Boxen rechts ...
Quasi ein "fixes Layout" mit floatenden Boxen, verschmutzt das nun das Netz? ;-)
@GE: Ich empfinde Layouts, die sich nicht dem Leser anpassen, sondern das Gegenteil verlangen, einfach als Zumutung. Natürlich bedeutet Design vor allem, gute Kompromisse zu finden. Wenn so ein Kompromiß jedoch in Papierlayout mündet und zu Gunsten der Bequemlichkeit des Autors ausfällt – über mehr reden wir ja nicht! – dann halte ich klare Worte für angebracht.
Ein bedächtiges: »Im Zweifel für den Leser!« bewirkt da leider gar nichts.
Das geht genau in die Richtung, die ich meine! Dir fehlen spaßigerweise nur 2 Pixel für 768px ohne Scrollbalken. ☺
@GE:
Interessant, dass so manche wie du die Formatierungen per CSS (Breite o. ä.) als Bevormundung sehen.
Wenn es dir nicht passt, überschreibe doch einfach mit einem Benutzer-Stylesheet das Ganze. Dann hast du das was du willst.
Wenn es danach geht, ist Webseiteninhalt überhaupt eine Bevormundung, weil er auch nicht anders gestaltet werden kann, selbst wenn es einem nicht passt.
Aber es gibt eben auch Nutzer, die gerne Webseiten als eine Art chinesische Wandzeitung sehen wollen – möglichst breit.
Wenn sowas im Print sinnvoll wäre (Oha! Wer leist schon Zeitung), wäre alle Zeitschriften oder Zeitungen eine Rollzeitung.
Ansichten sind Ansichtsache.
Hä? Wer hat denn so etwas geschrieben???
Auszeichnung der Breite in em empfinde ich als Bevormundung, mehr nicht. Diese Technik ist enstanden, als es noch keinen Seitenzoom gab, heute kann jeder aktuelle Browser so etwas selbst.
Kein Wunder, dass Du anonym bleiben willst ...
@ Thomas:
Naja, als dieses Layout entstanden ist, gab es noch keinen iPad, das geht halt bis runter auf 800px minus Scrollbalken. Muss der geneigte iPad-Nutzer sein Ding eben quer nehmen, wenn er mit 2 px scroll nicht leben kann ...
Ich habe mir schon lange mal vorgenommen (M)eine Webseite direkt fürs iPhone (iPad) zu entwickeln.
Da ich WordPress nutze liegt der Gedanken nahe direkt ein Theme dafür zu entwickeln.
Sollte ich meine Webseite besuchen müsste diese nur merken das ich mobil surfe und ggf. das Theme automatisch wechseln.
Ist das Technisch möglich?
Wenn ja, wie?
Danke!
@Nick:
Bitte nicht! CSS-Angaben für Mobilbrowser – ja. Optimierungen für einen Browser oder ein Gerät jedoch gelten ganz zu Recht als Unsinn.
Mit Media Queries kannst du solche Ergänzungen leicht nachrüsten; behalte aber im Auge, daß die meisten mobilen Leser nicht das iPhone verwenden.
Nico Brünjes hat auf Codecandies ebenfalls seine Meinung zu „Webseiten für das iPad“ hinterlassen.
Ein Punkt, den ich sehr interessant finde, und in letzter Zeit selbst bemerkt habe, ist der Einsatz von Hovereffekten. Auf dem iPhone bzw. iPod Touch wirken sie ganz anders, als auf dem Rechner.
Thomas, in Deiner Übersicht aller Artikel, kann man das sehr gut erkennen. Drücke ich mit dem Finger auf den Link, erscheint die Box mit der kurzen Zusammenfassung des Artikels inlusive Link. Erst beim zweiten „Tap“ auf den Link, werde ich zum Artikel weitergeleitet.
Ich finde dieses Verhalten sehr interessant und möchte diese Zusammenfassung auch auf dem iPhone nicht missen.
Wie denkt ihr darüber?
@Andre: Diese »Vorschau« blende ich auch bei
:focusein; das wird wohl die Aktion sein, die Safari interpretiert. Diese Tabelle ist ein gutes Beispiel für schwierige Elemente: Sie skaliert nur bis etwa 440px hinab, dann muß entweder der Browser sie zoomen bzw. umbrechen, oder der Leser muß scrollen. Daran kommt man nicht vorbei.Über einen Screenshot würde ich mich freuen.
Ich bin durch das XHTML-Forum auf diesen Beitrag aufmerksam gemacht geworden. Da ich selber einen iPod Touch besitze und ich auch vom iPad sehr angetan bin, sind für mich diese Tipps sehr wertvoll.
Vielen Dank, Thomas, für diesen Artikel. ☺
Andre am 11.02.2010 · 20:16
@Thomas Scholz: Habe Dir einen Screenshot erstellt, der zeigt, wie sich der Link verhält, wenn man ihn „mit dem Finger berührt“. Wenn Du den Link dann ein zweites Mal berührst, öffnet sich die Seite.
Ich begrüße dieses Verhalten – was wahrscheinlich daran liegt, dass ich Deine Seite kenne, und das Öffnen einer Hover-Box erwarte.
Was mir jetzt erst bewusst wird ist, das der Hover-Status für die „Touch-Devices“ im eigentlichen Sinne nicht existent ist. So deute ich auch die Aussage von Nico Brünjes.
Bezüglich „der Sorgen“ um Deine Übersichtstabelle habe ich ebenfalls zwei Screenshots für Dich: #1 und #2.
An „Automatische Telefonnummern-Erkennung in Skype und iPhone abschalten“ gut zu erkennen, was beim Drehen des iPhones in die zweite Zeile rutscht.
@Andre: Vielen Dank für die Screenshots. Sieht ja recht vernünftig aus … obwohl ich den Text nicht entziffern kann.
Das gemahnt mich an einen weiteren Punkt, den man beachten sollte: Für kleine Displays eine Schrift auswählen, die ATSUI (Apples Anti-Aliasing) nicht zu sehr »aufweicht«. Fürs iPhone ist die Liste sehr … überschaubar.
Dies kann man sogar mit dem Safari für Windows testen: Dort läßt sich unter »Einstellungen/Erscheinungsbild« das Apple-Anti-Aliasing auswählen.
Ich gebe mal meine Erfahrung mit dem Opera Mini mit 480 x 800 Bildpunkten zum Besten. Opera bietet zwei Darstellungsmodi an. Einmal die „Mobil“-Ansicht, in der das Handheld-Stylesheet interpretiert wird, oder, wenn keines vorhanden, ein solches simuliert wird. Die andere Möglichkeit ist, die Websites wie im normalen Browser darstellen zu lassen, allerdings dann unendlich klein – mann muss weit hereinzoomen und hin und her, auf und nieder scrollen – unbrauchbar.
Bei deiner „Alle Artikel“-Tabelle kommt es in der Mobilansicht wirklich dazu, dass man horizontal scrollen muss, es sei denn, ich halte das Gerät quer, aber das bedient sich dann mit einer Hand sehr schlecht. Vieleicht wäre hier eine Liste besser, die ggf. Umbrüche zulässt?
Diese Seite hat alles in allem ein sehr gutes Mobile-design. Einziges Manko: die Textarea hier ist sehr flach, was das nachträgliche Bearbeiten auf meinem HTC zur ziemlichen fummelei macht.
ich nehm mal an, dass das iPad (genau wie eben auch Mobile Safari auf'm iPhone) Webseiten zoomen wird - physical pixels vs "virtual" pixels. und mittles dem viewport meta kann man dem auch explizit nachhelfen...
Sascha am 14.02.2010 · 17:04
Es ist wirklich unglaublich wie viel das iPad in aller Munde ist. Mal sehen wie sich das neue Spielzeug verkauft. Besonders gespannt bin ich auf das UMTS Modell welches erst einen Monat später erscheint.
Ich habe diesen wirklich interessanten Artikel über Google gefunden. Wirklich interessante Ansätze. Was ich nur wirklich schlimm finde, ist dass man normal schon genug Probleme hat eine Webseite in allen Browsern gleich aussehen zulassen. Alte IE Versionen machen da meistens schon genug Probleme. Jetzt komme noch Handyversionen und Seiten für Iphone/Ipads dazu. Ich denke demnächst wird man als Designer mehr und mehr damit zutun zu haben die User mit ihren völlig unterschiedlichen Browsern und Geräten glücklich zu machen. Aber ansonsten wäre uns wohl schnell langweilig :)
@Carsten Weddig: Gleiches Aussehen darf kein Primärziel sein, finde ich. Gutes Aussehen schon eher. Das kann durchaus mal auf sehr unterschiedliche Ausgaben hinauslaufen. Die CSS-Eigenschaft
border-radiusbeispielsweise hatte für das Denken vieler Designer einen höheren Nutzeffekt als für die Ästhetik. ☺Hallo Thomas, da hast du auch wieder recht. Allerdings sollte eine Webseite egal womit man sie aufruft nach Möglichkeit eben nicht kaputt aussehen.
Alex am 12.04.2010 · 11:22
@Carsten Weddig: Ganz genau das sollte sich so mancher "Web-Designer" mal ausdrucken und prominent an seinem Arbeitsplatz anbringen.
Vernünftig mit CSS gearbeitet und man hat die halbe Miete. Hier und da eine klein Unschönheit was abgerundete Ecken o.Ä. angeht kann man verschmerzen. Aber ich finde es sollte mehr auf barrierefreiheit in Bezug auf die Geräte eingegangen werden.
Das Webseiten für bestimmte Geräte optimiert werden, okay, dass sie aber auf Inhalten bassieren, die nicht auf jedem Gerät funktionien, wie beispielsweise Flash, Pech!
Grüße Alex
555nasenzwerg am 28.05.2010 · 21:56
Hat denn jemand von Euch jetzt schon eins der ersten iPads?
Hm, ich glaube die Kritik ist nicht ganz gerechtfertigt. Das iPad spricht durch die Verkaufszahlen Bände und alle Besitzer die ich kenne - an der Zahl 5 - wollen es nicht mehr missen.
Als Webdesigner wird man nicht nur durch das fehlen von Flash zu "vernünftigen" Webdesign gezwungen. Viele Flash-Liebhaber werden jetzt direkt dagegen ansteuern, aber ein Plugin mit einem so hohen Stromverbrauch, welches noch nicht einmal in 64 Bit-Browsern läuft, ist nicht mehr zeitgemäß. Ferner werden sich jetzt missglückte Usability-Strategien ein wenig aufdecken, da der iPad-User ähnlich navigiert wie die beliebte Zielgruppe Silversurfer - vorwiegend auf Bilder klicken, Schwierigkeiten mit der Zielgenauigkeit haben, etc.
Das iPad stellt zwar kein Business-Instrument dar, ist aber für Technik- und Apfelliebhaber ein dankbarer Begleiter.
Ihr Wort in Users Ohr, aber das Festbreiten-Argument komm mir doch weit hergeholt vor...Ich glaube SO mächtig ist Aplle nicht, als dass das Ipad geeignet wäre annehmbare best practices zu befördern. Wir werden sehen ;-)
Wolfgang am 08.12.2010 · 05:04
Funktioniert denn der Quellcode aus dem Beitrag noch? Ich sehe keinen Unterschied...Gibt es so etwas wie einen Online-iPad-Emulator an dem man was testen kann ohne sich gleich eine Entwicklungsumgebung installieren zu müssen?
Freundliche Grüße,
Wolfgang
@Wolfgang: Hallo Wolfgang, einen iPad Simulator bekommst du mit dem iOS SDK geliefert: http://developer.apple.com/devcenter/ios/index.action
Du musst dich mit deiner Apple ID einloggen und kannst loslegen. Wenn du Probleme hast in den iPad Simulator zu kommen, sag bescheid.
Grüße Alex
@Wolfgang: Die Media Queries funktionieren noch. Die versteht auch der Desktop-Safari.