Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Gastautor 7. Juli 2010

Media Queries: Mobile Versionen von Websites mit CSS3 erstellen

Rachel Andrew (Übersetzung Manuela Müller)

CSS 3 ist ein Thema, das Webdesigner und -ent­wick­ler nach wie vor begeis­tert und frus­triert. Wir sind begeis­tert von den Möglichkeiten, die CSS3 uns bie­tet und wel­che Probleme wir damit lösen kön­nen. Gleichzeitig sind wir frus­triert über die man­geln­de Unterstützung im Internet Explorer 8 – um älte­re Browser ein­mal ganz außen vor zu las­sen. Dieser Artikel demons­triert eben­falls eine Technik, die vom IE 8 nicht unter­stützt wird. Allerdings ist das auch völ­lig egal, da die vor­ge­stell­te Lösung am sinn­volls­ten dort ein­ge­setzt wird, wo es eine Menge Unterstützung gibt – näm­lich auf klei­nen mobi­len Geräten wie dem iPhone oder alles, was unter Android läuft.

Im fol­gen­den wer­de ich erklä­ren, wie Sie eine iPhone-Version Ihrer regu­lä­ren Website mit CSS 3 erstel­len kön­nen, die schon jetzt funk­tio­niert. Wir schau­en uns ein sehr ein­fa­ches Beispiel an und ich wer­de Schritt für Schritt erläu­tern, wie ich ein Stylesheet für Geräte mit klei­nem Display in mei­ne eige­ne Website ein­ge­fügt habe. An dem Beispiel kön­nen Sie nach­voll­zie­hen, wie ein­fach es ist, bestehen­de Websites um zusätz­li­che Stylesheets für mobi­le Geräte zu ergän­zen.

Media Queries

Wenn Sie jemals ein sepa­ra­tes Print Stylesheet erstellt haben, wer­den Sie mit dem Konzept ver­traut sein, wie ein bestimm­tes Stylesheet unter gege­be­nen Bedingungen ins Spiel kommt – um beim Beispiel des Print Stylesheets zu blei­ben – eben dann, wenn die Seite gedruckt wird. Diese Aufgabe wird in CSS 2 durch media types gere­gelt.

media types ermög­li­chen es Ihnen, die Ausgabe von Stylesheets einem bestimm­ten Medientyp zuzu­ord­nen.

Die Media Queries in CSS3 grei­fen die­ses Konzept auf und bau­en es wei­ter aus. Anstatt nach einem bestimm­ten Medium zu schau­en, kön­nen Sie mit media queries die Eigenschaften und Fähigkeiten von Geräten und Ausgabemedien abfra­gen. Sie kön­nen die­se Abfragen dazu ver­wen­den, um alles mög­li­che zu über­prü­fen, so zum Beispiel:

  • Breite und Höhe (des Browser-Fensters)
  • Breite und Höhe des Geräts
  • Position – befin­det sich das Mobiltelefon im Querformat oder Hochformat?
  • Bildschirmauflösung

Wenn der Anwender einen Browser ver­wen­det, der media queries unter­stützt, kön­nen wir den CSS-Code ganz gezielt für bestimm­te Situationen schrei­ben. So kön­nen Sie abfra­gen, ob ein Anwender ein klei­nes Gerät wie ein Smart Phone ver­wen­det und dann ein pas­sen­des Layout lie­fern. Wenn Sie ein ent­spre­chen­des Beispiel in Aktion sehen möch­ten, schau­en Sie sich ein­mal die jüngst frei geschal­te­te Website der UK Web Conference an. dConstruct setzt auf der neu­en Website für die Konferenz 2010 media queries sehr effekt­voll ein.

dConstruct 2010 website on a desktop browser

So sieht dConstruct 2010 Website auf einem Desktop Computer in Safari aus.

dconstruct website on the iPhone

dConstruct 2010 web­site auf einem iPhone

Wie Sie an den bei­den obi­gen Abbildungen sehen, wur­de die Website nicht ein­fach an die Größe des klei­ne­ren Displays ange­passt, son­dern das kom­plet­te Layout wur­de für den ein­fa­chen Zugriff mit einem klei­nen Ausgabemedien opti­miert.

Viele von Ihnen wer­den jetzt ver­mut­lich den­ken, dass dies ein iPhone-Layout ist. Ist es aber nicht. Das Layout wird exakt so auf mei­nem Android-Mobiltelefon ange­zeigt. Mit dem Einsatz von Media Queries und dem Abfragen der Geräte-Eigenschaften ver­sorgt die dConstruct-Site alle Arten von Geräten – sogar sol­che, an die die Entwickler mög­li­cher­wei­se noch gar nicht gedacht haben!

Media Queries zum Erstellen eines Stylesheet für Mobiltelefone verwenden

Wir legen los und schau­en uns zunächst ein sehr ein­fa­ches Beispiel an. Die fol­gen­de Abbildung zeigt ein schlich­tes Zweispalten-Layout.

Simple example in a browser
Die Ausgangssituation

Um das Lesen auf einem Telefon zu erleich­tern, habe ich mich dazu ent­schlos­sen, das kom­plet­te Design zu ver­ein­fa­chen und die Inhalte in einer ein­zi­gen Spalte anzu­ord­nen. Weiterhin soll der Header wesent­lich klei­ner sein, damit die Anwender nicht lan­ge scrol­len müs­sen, bevor sie an die eigent­li­chen Inhalte gelan­gen.

Methode 1 – Alternative im Hauptstylesheet

Media Queries kön­nen Sie auf ver­schie­de­ne Weisen ver­wen­den. Eine Methode ist es, den alter­na­ti­ven CSS-Code direkt in das zen­tra­le Stylesheet ein­zu­bin­den. Um klei­ne Geräte anzu­spre­chen, ver­wen­den wir die fol­gen­de Syntax:

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

	}

Wir kön­nen die alter­na­ti­ven Werte für klei­ne Displays und Geräte mit gerin­ger Breite inner­halb der geschweif­ten Klammern ein­fü­gen. Indem wir die Kaskade ver­wen­den, kön­nen wir ganz ein­fach alle ande­ren Deklarationen über­schrei­ben, die wir vor­her in unse­rem CSS-Code für Desktop-Browser notiert haben. Solange die­ser Abschnitt an letz­ter Stelle im Stylesheet steht, wer­den alle vor­her­ge­hen­den Regelungen über­schrei­ben.

Um das Layout zu linea­ri­sie­ren und eine klei­ne­re Header-Grafik zu ver­wen­den, füge ich den fol­gen­den Code hin­zu:

	@media only screen and (max-device-width: 480px) {
		div#wrapper {
			width: 400px;
		}

		div#header {
			background-image: url(media-queries-phone.jpg);
			height: 93px;
			position: relative;
		}

		div#header h1 {
			font-size: 140%;
		}

		#content {
			float: none;
			width: 100%;
		}

		#navigation {
			float:none;
			width: auto;
		}
	}

Im vor­her­ge­hen­den Code ver­wen­de ich ein alter­na­ti­ves Hintergrundbild, redu­zie­re die Höhe des Headers, set­ze die zuvor für das zwei­spal­ti­ge Layout dekla­rier­ten Floats auf none und über­schrei­be die ursprüng­li­che Breite. Diese Vorgaben wer­den nur bei einem Gerät mit klei­nem Display ange­wen­det.

Simple example on a phone

So sieht mein simp­les Beispiel auf einem iPhone aus.

Methode 2 – Link auf separates Stylesheet setzen

Den spe­zi­fi­schen Code für klei­ne Geräte inli­ne zu notie­ren, mag ganz gut sein, wenn Sie nur gerin­güfi­ge Änderungen vor­zu­neh­men haben. Wenn Sie jedoch grö­ße­re Änderungen vor­neh­men oder aus Gründen der Übersichtlichkeit die Stylesheets für Desktop-Browser und Browser klei­ner Geräte tren­nen möch­ten, emp­fiehlt sich ein Link auf ein sepa­ra­tes Stylesheet.

Um ein sepa­ra­tes Stylesheet für klei­ne Geräte nach Ihrem Hauptstylesheet ein­zu­fü­gen und das Kaskadieren zum Überschreiben der Deklarationen zu nut­zen, ver­wen­den Sie den fol­gen­den Code:

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

Media queries testen

Sofern Sie ein iPhone und/oder ein Android-Handy oder ein ande­res Gerät mit einem media-que­ries-unter­stüt­zen­den Browser besit­zen, kön­nen Sie den CSS-Code selbst tes­ten. Allerdings müs­sen Sie den Code irgend­wo hoch­la­den, um ihn anzei­gen zu kön­nen. Was tun Sie jedoch, wenn Sie die ent­spre­chen­den Geräte nicht besit­zen und lokal tes­ten möch­ten?

Online-Dienste nut­zen

Eine her­vor­ra­gen­de Website, die Sie beim Entwicklungsprozess unter­stützt ist ProtoFluid. Im Formular rechts oben kön­nen Sie Ihre URL ein­ge­ben (kann auch eine loka­le sein) und das Design anschlie­ßend in einer Vorschau anzei­gen, so wie es auf einem iPhone, iPad und einer Reihe ande­rer Geräte dar­ge­stellt wür­de. Das fol­gen­de Bildschirmfoto zeigt die bereits bekann­te dConstruct-Site in der iPhone-Vorschau von ProtoFluid.

dConstruct site in ProtoFluid

Die dConstruct-2010-Website in ProtoFluid

Sie kön­nen auch Ihre eige­ne Fenstergröße ein­ge­ben, falls Sie die Darstellung Ihrer App oder Website für ein ganz bestimm­test Gerät tes­ten – vor­aus­ge­setzt Sie ken­nen die Abmessungen des Displays.

Unsere wei­ter oben ver­wen­de­te Media Query müs­sen Sie für das Testen mit ProtoFluid ein wenig ändern, um sowohl max-width als auch max-device-width ein­zu­bin­den. Damit kommt die Medienabfrage auch ins Spiel, wenn ein Anwender einen Desktop-Browser mit einem sehr klei­nen Fenster nutzt.

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

	}

Nachdem Sie Ihren Code ent­spre­chend ange­passt und die Seite im Browser neu gela­den haben, zie­hen Sie doch ein­fach mal das Browserfenster klei­ner und schau­en Sie, was pas­siert. Die Regel Media Queries reagiert, sobald der Viewport Ihrem vor­ge­ge­be­nen Wert von 480 Pixeln ent­spricht.

Das wirk­lich Schöne an ProtoFluid ist, dass Sie beim Optimieren Ihres Designs auch Tools wie FireBug nut­zen kön­nen – etwas, wor­auf Sie ver­zich­ten müs­sen, sobald die Site oder Anwendung auf dem iPhone ist.

Natürlich soll­ten Sie Ihr Layout auf so vie­len ver­schie­de­nen Geräten wie mög­lich anzei­gen las­sen und aus­pro­bie­ren. Trotzdem macht ProtoFluid das Entwickeln und Testen wesent­lich ein­fa­cher.

Hinweis: Wenn Sie ver­mei­den möch­ten, dass das Layout Ihrer Website ver­än­dert wird, sobald ein Anwender die Größe des Browser-Fensters redu­ziert, kön­nen Sie die Vorgabe für die maxi­ma­le Breite aus Ihrer Media Query ent­fer­nen, bevor Sie die Website frei schal­ten. So stel­len Sie sicher, dass das alter­na­ti­ve Layout nur bei der Abfrage mit Browsern klei­ner Geräte gezeigt wird, nicht jedoch bei klei­nem Viewport von Desktop-Browsern.

Eine bestehende Seite umbauen

Das vor­her­ge­hen­de Beispiel ist sehr ein­fach gehal­ten, um die Technik zu demons­trie­ren. Sie kön­nen die­ses Beispiel aller­dings auch dafür ein­set­zen, um eine bestehen­de Website um eine zusätz­li­che Version für klei­ne Geräte zu ergän­zen. Eines der über­zeu­gends­ten Verkaufsargumente für CSS-Layouts war ja gera­de die Fähigkeit, alter­na­ti­ve Versionen eines Designs zu ermög­li­chen.

Es folgt ein klei­nes Experiment mit mei­ner Firmen-Website, deren Layout ich mit­hil­fe der beschrie­be­nen Technik umbau­en wer­de.

Das Desktop-Layout

Meine Firmen-Website hat zur Zeit ein mehr­spal­ti­ges Layout. Die Startseite ist etwas anders gestal­tet – ansons­ten han­delt es sich um drei Spalten mit fes­ter Breite. Das Design ist schon ein paar Jahre alt, so dass wir beim Erstellen Media Queries noch nicht berück­sich­tigt haben.
edgeofmyseat.com website in Safari on the desktop
Meine Website in einem Desktop-Browser

Das neue Stylesheet einbinden

Da vie­le Änderungen erfor­der­lich sind, um das Layout zu ver­ein­fa­chen, wer­de ich ein sepa­ra­tes Stylesheet erstel­len und Media Queries dafür ver­wen­den, um das neue Stylesheet nach dem aktu­el­len Stylesheet zu laden – aber nur dann, wenn die abge­frag­te maxi­ma­le Breite weni­ger als 480 Pixel beträgt.

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

Zunächst erstel­le ich eine Kopie des bestehen­den Stylesheets und spei­che­re sie unter dem Namen small-device.css. Anschließend über­schrei­be ich Schritt für Schritt bestimm­te Regeln und lösche alles, was ich nicht benö­ti­ge.

Den Header verkleinern

Meine ers­te Änderung: Das Logo soll auf einem klei­nen Display schön dar­ge­stellt wer­den. Da es als Hintergrundbild ein­ge­bun­den ist, kann ich in die­sem Stylesheet ohne Probleme eine ande­re Bildquelle für das Logo ange­ben. Zudem ver­wen­de ich ein wei­te­res Hintergrundbild mit einem kür­ze­ren obe­ren Bereich, über dem das Logo plat­ziert ist.

	body {
		background-image: url(/img/small-bg.png);
	}

	#wrapper {
		width: auto;
		margin: auto;
		text-align: left;
		background-image: url(/img/small-logo.png);
		background-position: left 5px;
		background-repeat: no-repeat;
		min-height: 400px;
	}

Das Layout linearisieren

Als nächs­te grö­ße­re Aufgabe ver­ein­fa­che ich das Layout und stel­le es ein­spal­tig dar. Das Layout für die Desktop-Version wird über floats rea­li­siert. Ich muss daher nur den Parameter der Eigenschaft float auf none set­zen und die Breite auf auto. Nun wer­den die Spalten ein­fach nach­ein­an­der statt neben­ein­an­der dar­ge­stellt.

	.article #aside {
		float: none;
		width: auto;
	}

Aufräumarbeiten

Danach kann es gleich an die Optimierung via ProtoFluid und Firebug gehen. Es sind ledig­lich klei­ne Änderungen erfor­der­lich, um Ränder und Innenabstände auf pas­sen­de Werte zu set­zen, da die ursprüng­li­chen Spalten nun unter­ein­an­der, nicht neben­ein­an­der, ange­ord­net sind.

Ich erle­di­ge das, indem ich inner­halb von ProtoFluid mit Firebug her­um­spie­le, und die Werte so lan­ge ände­re, bis ich mit dem Ergebnis zufrie­den bin. Anschließend kopie­re ich den CSS-Code in das Stylesheet.

The mobile layout on ProtoFluid
Testen und Optimieren via ProtoFluid

Auf dem iPhone testen

Nachdem ich das sepa­ra­te Styhlesheet erstellt und auf den Server hoch­ge­la­den habe, möch­te ich es natür­lich auch auf einem real exis­tie­ren­den Zielgerät tes­ten. Ein Aufruf mit dem iPhone zeigt mir, dass die Website nach wie vor aus­ge­zoomt – über die vol­le Breite – ange­zeigt wird, anstatt auf mei­ne gute les­ba­re ein­zel­ne Spalte zu zoo­men.

Ein Blick in die Website für Safari-Entwickler gibt mir des Rätsels Lösung. Ein Meta-Tag im Header der Website, das die Breite des Viewports vor­gibt, schafft Abhilfe:

<meta name=“viewport” content=“width=device-width” />

Nach dem Einfügen des Metatags wird die Seite kor­rekt im ein­spal­ti­gen Layout auf dem iPhone ange­zeigt.

edgeofmyseat.com on the iPhone
Dank Metatag sieht die Website nun auch auf dem iPhone gut aus.

An die­sem schlich­ten Umbau kön­nen Sie nach­voll­zie­hen, wie ein­fach es ist, Ihrer Website eine mobi­le Version zu spen­die­ren. Beim Erstellen einer ganz neu­en Webpräsenz mit Media Queries wür­de ich von vorn­her­ein etwas ande­res vor­ge­hen und auf die fol­gen­den Aspekte ach­ten:

  • geeig­ne­te Reihenfolge der Spalten berück­sich­ti­gen,
  • so oft wie mög­lich und wo sinn­voll Hintergrundbilder ver­wen­den, da sie leicht per CSS zu wech­seln sind,
  • gege­be­nen­falls flu­id images ein­set­zen.

In unse­rem Desktop-Layout gibt es auf der Startseite einen Content Slider für Arbeitsproben. Auf einem Touch-Screen-Gerät ist die­ser Content Slider nicht ein­fach zu bedie­nen. Daher prüf­te ich mit­hil­fe von JavaScript, ob die Größe des Browser-Fensters sehr schmal ist und der Bildwechsler des­halb nicht gestar­tet wird. Das Script war ohne­hin schon so geschrie­ben, dass der Effekt – das Laden des Sliders zu stop­pen, immer dann aus­ge­löst wird, wenn eine Arbeitsprobe auf dem Bildschirm ange­zeigt wird. Das schien eine ganz pas­sa­ble Lösung für Anwender mit klei­nen Geräten zu sein. Mit etwas mehr Code konn­te ich eine alter­na­ti­ve Version des Image Sliders für die Anwender mobi­ler Geräte erstel­len, so dass die Art der Interaktion den Gegebenheiten eines Touch Screens bes­ser ange­passt ist.

Tutorials und Ressourcen

Obwohl die­se Technik noch rela­tiv neu ist, gibt es bereits zahl­rei­che her­vor­ra­gen­de Tutorials zum Einsatz von Media Queries. Wenn Sie wei­te­re gute Tutorials oder Referenzen ken­nen, pos­ten Sie die Links doch bit­te in den Kommentaren.

Weitere Inspirationen

Wenn es Sie inter­es­siert, was man mit Media Queries sont noch anstel­len kann, schau­en Sie sich doch ein­mal auf Hicksdesign um. John Hicks ver­schafft dank Media Queries nicht nur Anwendern mobi­ler Geräte eine bes­se­res Anwendererlebnis, son­dern auch den­je­ni­gen Zeitgenossen, die am Desktop PC mit klei­nen Browser-Fenstern arbei­ten.

Bei Simon Collison kann man wei­te­re inter­es­san­te Beispiele für den Einsatz die­ser Technik sehen.

Probieren Sie es selbst aus

Der Einsatz von Media Queries ist ein guter Ansatz, um CSS 3 in Ihrer täg­li­chen Arbeit zu ver­wen­den. Denken Sie dar­an, dass Media-Queries-fähi­ge Browser auch eine Reihe ande­rer CSS-3-Eigenschaften unter­stüt­zen. In Ihren zusätz­li­chen Stylesheets für klei­ne Geräte kön­nen Sie daher unbe­sorgt wei­te­re CSS-3-Eigenschaften ver­wen­den, um bei Ausgabe auf einem SmartPhone, iPad oder sons­ti­gem mobi­len Gerät ele­gan­te Effekte zu erzie­len.

Über Kommentare zu Ihren Erfahrungen mit Media Queries und ande­ren CSS-3-Techniken freu­en wir uns!

(mm), (tm)

11 Kommentare

  1. Hallo, dan­ke für das Tutorial. Kann man das zen­tral über ein CSS Stylesheet regeln? Das man erst ein zen­tra­les CSS Sheet lädt und dann je nach Endgerät das ent­spre­chen­de Sheet gewählt wird?

    if mobi­le mobile.css else desktop.css

    So in der Art, ich hof­fe Ihr ver­steht was ich mei­ne. Danke.

  2. Das gan­ze noch­mal, offen­bar wird hier das grö­ßer/klei­ner-Zeichen nicht gemocht. Muss man dann selbst hin­zu­fü­gen:

    Das gan­ze ist gut und schön, man muss aber beden­ken: Wenn man PHP ein­setzt, wird der PHP-Code dann aus­ge­führt, wenn man Variablen Werte zuweist, und zwar auch dann, wenn man den Code in einem Bereich defi­niert, den man per media que­ries eigent­lich aus­ge­schlos­sen hat

    Als Beispiel die Datei weiche.php:

    html
    head
    link rel=“stylesheet” type=“text/css” href=“weiche.css”
    /head
    body
    ?
    $grosser_bildschirm=‘Leerstring’;
    ?
    div id=‘kleinerbildschirm’
    ? echo “php wird aus­ge­fuehrt”; $grosser_bildschirm=‘Wert wur­de geaen­dert’; ?
    /div
    ?
    echo $grosser_bildschirm;
    ?
    /body
    /html

    Die CSS-Datei wäre:

    #klein­er­bild­schirm
    {
    font-weight:bold;
    }

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

    #klein­er­bild­schirm {
    display:none;
    }
    }

    Wenn man nun weiche.php lädt und das Fenster größer/kleiner zieht, sieht man, dass der Wert für $grosser_bildschirm in jedem Fall geän­dert wird, das echo wird aber nur aus­ge­ge­ben, wenn die Bildschirmbreite klei­ner 1024 ist.

  3. Proto Fluid ist kein ver­läß­li­ches Tool. Es nimmt ja nicht ein­mal den User Agent des Gerätes an, das es simu­liert (machen lei­der die wenigs­ten Simulatoren), wes­we­gen es auch Mobileseite grund­setz­lich gar nicht erkennt. Auch Media Queries liest es falsch aus. Proto Fluid ist nicht mehr als ein ska­lier­ba­rer Bilderrahmen, der etwas völ­lig ande­res dar­stellt als das rea­le Gerät.

    • Media-Queries schei­nen sehr mäch­tig zu sein. Aber heut­zu­ta­ge muss es doch sicher eine ein­fa­che­re Lösung geben? Ich mei­ne eine sepa­ra­te Seite erstel­len las­sen um nicht den gan­zen Code in der nor­ma­len Homepage ver­än­dern zu müs­sen. Oder?

      • @Elias: Aber hier geht es doch genau um den Programmier-Ansatz einer mobi­len Version einer Website ;-) Aber nach kur­zem Suchen bin auch http://www.mobilonso.com gestos­sen. Ich den­ke das ist doch so etwas wonach du suchst, hof­fent­lich.

      • Ich ken­ne das Problem Elias, habe mich durch dive­re Foren und Berichte gekämpft aber dann auf­ge­ge­ben ;) Wir haben nun eine Lösung für unse­ren Gastrobetrieb von http://mobileview.ch , soweit sehr gut. Bin sicher es gibt ver­schie­dens­te Anbieter sol­cher Lösungen. Mobilonso habe ich mir auch ange­schaut, aber dann für eine Lösung im eige­nen Land ent­schie­den ;-).

    • Ja, so ist es. Genaugenommen sind mir auch kei­ne ande­ren Emulatoren bekannt, wel­che die Darstellung auf der ech­ten Hardware halb­wegs rea­lis­tisch zei­gen. Ist ja auch klar, denn es feh­len Aspekte wie z. B. die jewei­li­ge Pixeldichte und die diver­sen Macken der ver­schie­de­nen Mobilbrowser-/Mobilbetriebssystemversionen.

      Wie auch immer, die­sen Artikel sah ich auch schon in der engl. Originalversion. Er wur­de offen­sicht­lich stumpf über­setzt, anschei­nend von jeman­dem ohne Sachverstand bzgl. die­ser Materie. Ohnehin scheint es mir bei IT-Blogs nicht sel­ten ähn­lich zu sein wie bei den Reiseführern – vie­le schrei­ben von­ein­an­der ab bzw. offe­rie­ren mit eini­gen Formulierungsumstellungen ledig­lich alten Wein in neu­en Schläuchen. So kann man dann den immer glei­chen Unsinn wie die Empfehlung unbrauch­ba­rer Emulatoren gleich tau­send­fach lesen. Seit die “VG Wort” auch Online-Artikel ver­gü­ten muss (Anmeldung vor­aus­ge­setzt, min­des­tens 1.500 Worte und 1.500 Clicks jähr­lich), liegt die Motivation zur Veröffentlichung von noch mehr Müllcontent halt sehr hoch – Hauptsache, es wird häu­fig genug auf­ge­ru­fen.

      Und auch sonst bie­tet die­ser Artikel im Übrigen kei­ner­lei neue Infos.

      • Werter Andreas! Es gibt neben Müllcontent auch Müllkommentare. Deiner ist ein Paradebeispiel dafür. Anders als du will ich aber ger­ne begrün­den, war­um ich das so sehe:

        Diese Übersetzung hier ist eine Übersetzung eines Artikels von Rachel Andrew, der zuerst auf unse­rem Familienmitglied Smashing Magazine erschien und dann von Manuela Müller (sei­ner­zeit tätig für die Smashing Media) für Dr. Web über­setzt wur­de. Wir schrei­ben unse­ren Content nicht von irgend­wo ab. Es dürf­te aller­dings nicht ver­wun­dern, dass die­ser Artikel dem Original kei­ner­lei neue Infos bei­fügt. Zu guter Letzt gilt es noch zu berück­sich­ti­gen, dass der Beitrag vier Jahre alt ist und gera­de bezo­gen auf die mobi­le Entwicklung aus heu­ti­ger Sicht logi­scher­wei­se alles ande­re als Top of the Pops ist.

  4. Daaaanke :-)
    Hab vor kur­zem erst mit einem Kumpel dar­über dis­ku­tiert, ob man denn nicht für die mobi­len Browser sei­ne Webseite mit ein­fa­chen Dingen gleich etwas ver­bes­ser kann.
    Ein paar div’s weni­ger soll­ten es sein – genügt schon. Die die eh nicht so wich­tig sind (Werbung, etc) ein­fach aus­blen­den.
    Ich dach­te da sofort auch an die media tags, man kennt das ja vom dru­cken her.
    Aber auch er mein­te, dass das per media tags wohl nicht geht.
    Jedes Phone hat ja auch sei­ne eige­ne Auflösung.
    Wieder was gelernt – das mach­ma *ggg* ;-)

  5. @ Gotisch: ja, im quer­for­mat sieht man die nor­ma­le Ansicht – ist aber auch gut so, weil der Screen ja brei­ter ist als die ange­ge­be­nen 480px.

    Auf der Seite gibts aller­dings ein paar Fehler, wenn man die Seite im Querformat löd und dann ins hoch­for­mat wech­selt und umge­kehrt. Das liegt aber an dem ver­wen­de­ten java­script-code und nicht direkt an den media que­ries.

    MfG
    ScaraX

  6. Also auf mei­nem Android tele­fon mit stan­dard­brow­ser sehe ich manch­mal noch die ganz nor­ma­le sei­te… scheint doch nicht so ganz zu klap­pen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.