Problem mit responsive design

kornyclown · 19.08.2012

Einige werden bestimmt schon andere Posts von mir kennen, da ich schon seit ein paar Wochen an meiner Seite bastel ().
Ich habe mir jetzt schon eine vielzahl von Tutorials angesehen, betreffend responsive Webdesign, bin jetzt aber wieder an einem Punkt der mich ratlos macht.

Zunächst einmal die wichtigen Code Stücke...

Die Links:

HTML:

<head>
<meta charset="UTF-8">
<title>Thomas Manz.de | VFX</title>
<link rel="SHORTCUT ICON" href="icon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="css/style_mobile_phone.css" />
</head>

Style Sheet Desktop:

Code:

@charset "UTF-8";
/* CSS Document */

@font-face { font-family: 'Ebrima'; src: url('../font/ebrima.ttf') format('truetype'); }
@font-face { font-family: 'Ebrima'; src: url('../font/ebrimabd.ttf') format('truetype'); font-weight: bold;}

html, body {height: 100%; margin:0; padding:0; 
    background: -moz-linear-gradient(left, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); 
    background: -webkit-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%); 
    background: -ms-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%); font-family: Ebrima, Arial, Verdana, sans-serif;}
h1 {font-size: 17pt; padding-left:15px;}
* {outline:none;margin:0;padding:0;}
img, a img {border: none;}
ul, ol { list-style:none;}


/****************     Background Elements     ****************/

#wrapper {width:800px; margin: auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; background: url(../images/background.jpg) repeat-y;}
#content {width:700px; height:100%; margin-left:48px;}
#content_home {width: 600px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-left:30px; margin-top:60px; padding-left:20px;}
#content_vita {width: 650px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-left:0px; margin-top:70px; padding-left:20px;}
#content_gallery {width: 650px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; margin-left:0px; margin-top:70px; padding-left:20px;}
#content_contact {margin-left: 20px; margin-top: 70px;}

/***********     Header and Navigation Elements     *******************/

header {font-weight: bold;letter-spacing: 3px;color: #FFF; background-color: #000;width: 540px;height: 63px;margin-top:60px;}
#navMenu {position: relative; top: 8px;}
#navMenu ul {line-height: 25px;}
#navMenu li {list-style: none;float: left;position: relative;background: #000;}
#navMenu ul li a {font-size: 10pt;text-align:center;text-decoration: none;width: 180px;height: 25px; display: block;color: #FFF;}
#navMenu ul ul {position: absolute;visibility: hidden; top: 25px;}
#navMenu ul li:hover ul {visibility: visible;}

/*************************     Hover Effect     ************************/

#navMenu ul li a:hover {background: #FFF; color: #000;}
#navMenu ul li:hover ul li a:hover {background: #FFF;color: #000;}


/*********************************************     HOME CONTENT     ***********************************************/

/*************************     Portrait     ************************/
.picrow {width:600px; height:200px; margin-bottom:30px;}
.portrait {width:200px; height:200px; display:block; float:left;}
.portrait_1 { background:url(../images/me1.jpg) no-repeat;}
.portrait_2 { background:url(../images/me2.jpg) no-repeat;}
.portrait_3 { background:url(../images/me3.jpg) no-repeat;}

/*************************     Liste     ************************/

#content_home ul li { font-weight:bold; margin-left:30px; letter-spacing: 1px; margin-bottom:20px;}
#content_home ul li ul li { font-weight:normal; margin: 0 0 0 40px;}


/**********************************************      REEL CONTENT    ************************************************/
#content_reel {margin-top: 150px;}

/**********************************************      VITA CONTENT     ************************************************/

/*************************      Liste     ************************/

#content_vita ul li { font-weight:bold; margin-left:20px; letter-spacing:1px; margin-bottom:20px;}
#content_vita ul li ul li { font-weight:normal; margin: 0 0 0 30px;}


/*********************************************     GALLERY CONTENT     ************************************************/



#content_gallery ul li { font-weight: bold;}
#content_gallery ul li.gallery_element { position: relative; margin-bottom: 30px;}
#content_gallery ul li h1 { width: 650px; height:auto; border-width: 0 0 2px 0; border-style: solid; border-color: #000; position: relative;}
#content_gallery ul li ul { position: relative; margin-top: 5px; }
#content_gallery ul li ul li {font-weight: normal;}
/*.gallery_media {}*/
/*********************************************     CONTACT CONTENT      *************************************************/


#content_contact ul li { font-weight: bold; }
#content_contact ul li h1 { width: 650px; height:auto; border-width: 0 0 2px 0; border-style: solid; border-color: #000; position: relative;}
#content_contact ul li ul { position: relative; margin-top: 5px;}
#content_contact ul li ul li {font-weight: normal; }
#content_contact form { margin-top: 40px;}
#content_contact form table tr td#cm {font-weight:bold;}
#content_contact form table tr {font-weight: normal;}

Style Sheet Mobile:

Code:

@charset "UTF-8";
/* CSS Document */

@font-face { font-family: 'Ebrima'; src: url('../font/ebrima.ttf') format('truetype'); }
@font-face { font-family: 'Ebrima'; src: url('../font/ebrimabd.ttf') format('truetype'); font-weight: bold;}

html, body {height: 100%; margin:0; padding:0;
    background: -moz-linear-gradient(left, #cccccc 0%, #ffffff 20%, #ffffff 80%, #cccccc 100%); 
    background: -webkit-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%); 
    background: -ms-linear-gradient(left, #cccccc 0%,#ffffff 20%,#ffffff 80%,#cccccc 100%); font-family: Ebrima, Arial, Verdana, sans-serif;}
* {outline:none; margin:0; padding:0;}
h1 {font-size: 17pt; padding-left:15px;}
img, a img {border: none;}
ul, ol { list-style:none;}


/**********************         Background Elements          **********************/

#wrapper {width:400px; margin: auto; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; background: url(../images/background_mobile_phone.jpg) repeat-y;}
#content {width:303px; height:100%; margin-left:48px;}
#content_home {width: 303px; min-height: 100%; height:auto !important; height:100%; overflow: hidden !important; padding-left:20px; margin-top: 50px;}


/*****************         Header and Navigation Elements        ******************/

header {font-weight: bold;letter-spacing: 3px;color: #FFF; background-color: #000;width: 303px;height: 60;margin-top:40px;}
#navMenu {position: relative; top: 15px;}
#navMenu ul {line-height: 35px;}
#navMenu li {list-style: none;float: none;position: relative;background: #000;}
#navMenu ul li a {font-size: 13pt;text-align:center;text-decoration: none;width: 303px;height: 35px; display: block;color: #FFF;}

/**********      Hover Effect     ************/

#navMenu ul li a:hover {background: #FFF; color: #000;}
#navMenu ul li:hover ul li a:hover {background: #FFF;color: #000;}


/*********************************************     HOME CONTENT     ***********************************************/

/*************************     Liste     ************************/

#content_home ul li {font-size:10pt; font-weight:bold; letter-spacing: 1px; margin-bottom:20px;}
#content_home ul li ul li { font-weight:normal; margin: 0 0 0 40px;}

Im Desktop Style Sheet ist erstmal nur der "content_home" und "Home" Bereich interessant. Wie man vielleicht sieht, habe ich den komletten .picrow und .portrait Teil im "style_mobile_phone.css" weggelassen, da auf der Smartphoneversion dieses Element nicht auftauchen soll. Das ganze funktioniert so lange, wie ich den link zum Desktop Style Sheet im HTML Dokument auskommentiert habe. Sobald ich ihn wieder reinnehme wird dieses .picrow-Element wieder geladen, auch wenn die Browserweite unter 960px geht, obwohl doch der link sagt, dass bei unter 960px Weite auf das Style sheet zugegriffen werden soll, wo dieses Element nichtmal auftaucht. Warum wird es trotzdem geladen?

Um Unklarheiten keinen Nährboden zu geben,
in meinem link zum "style_mobile_phone.css" steht zwar media="screen..." aber nur damit ich es auf dem Desktop testen kann. Wenn ich der Meinung bin, das es auf dem Desktop gut aussieht und funktioniert werde ich dafür media="handheld....." einsetzen, um dann auch nurnoch die mobilen Geräte anzusprechen.

cebito · 19.08.2012

AW: Problem mit responsive design

kornyclown schrieb:
obwohl doch der link sagt, dass bei unter 960px Weite auf das Style sheet zugegriffen werden soll, wo dieses Element nichtmal auftaucht. Warum wird es trotzdem geladen?

Irrtum, deine CSS-Aufrufe bewirken, das wenn der Screen <= 960px ist die Angaben der style_mobile_phone.css die Angaben der style.css überschreiben. Wird in der mobilen css keine neue Angabe zu einem style, das in der normalen Variante vorhanden ist gemacht, wird auch nix überschrieben. Das Style aus der style.css bleibt somit erhalten.

Was heißt das für dich?

Du kannst mal schauen, was sich alles NICHT ändert, und dieses direkt aus der mobilen css rausschmeißen.
Du kannst bspw. deine .picrow etc styles selbst in ein Mediaquery packen, das schaut ob der Bildschirm > 960px ist, oder
diese Angaben in der anderen css überschreiben

ullihantke · 19.08.2012

AW: Problem mit responsive design

Ich würde dir gerne was zur Homepage sagen.

Finde sie so ansprechend schlicht, aber die drei Bilder harmonieren zusammen nicht. Irgendwas stört.

evtl. solltest du mal mit der Anordnung spielen, finde das mittlere Bild bringt Unruhe rein.

Zu deinem Problem kann ich leider keinen Sinnvollen Beitrag leisten. Sorry

kornyclown · 19.08.2012

AW: Problem mit responsive design

cebito schrieb:
Irrtum, deine CSS-Aufrufe bewirken, das wenn der Screen <= 960px ist die Angaben der style_mobile_phone.css die Angaben der style.css überschreiben. Wird in der mobilen css keine neue Angabe zu einem style, das in der normalen Variante vorhanden ist gemacht, wird auch nix überschrieben. Das Style aus der style.css bleibt somit erhalten.

Was heißt das für dich?

Du kannst mal schauen, was sich alles NICHT ändert, und dieses direkt aus der mobilen css rausschmeißen.

Du kannst bspw. deine .picrow etc styles selbst in ein Mediaquery packen, das schaut ob der Bildschirm > 960px ist, oder

diese Angaben in der anderen css überschreiben

Wie soll ich sie denn überschreiben? Soll ich dann quasi für die .picrow {visibility:hidden;} machen oder was?

cebito · 19.08.2012

AW: Problem mit responsive design

kornyclown schrieb:
Wie soll ich sie denn überschreiben? Soll ich dann quasi für die .picrow {visibility:hidden;} machen oder was?

Warum das? Du möchtest doch nur die styles zurücksetzen, nicht das ganze unsichtbar machen, wobei es dir bei visibility trotzdem den Platz beanspruchen würde, den du in der style.css angibst (breite, höhe). Um diese Werte zurückzusetzen, benutzt man den default-Wert, nämlich "auto".

kornyclown · 19.08.2012

AW: Problem mit responsive design

cebito schrieb:
Warum das? Du möchtest doch nur die styles zurücksetzen, nicht das ganze unsichtbar machen, wobei es dir bei visibility trotzdem den Platz beanspruchen würde, den du in der style.css angibst (breite, höhe). Um diese Werte zurückzusetzen, benutzt man den default-Wert, nämlich "auto".

Also angenommen ich kriege das hin meine Bilder mit visibility:hidden nicht mehr angezeigt zu bekommen und der Platz würde auch nicht verschwendet werden, würde ich damit noch lange nicht den Hovereffekt aus meiner Desktopversion überschrieben bekommen.
Gibt es für sawas nich nen Reset? Damit quasi am Anfang meiner "style_mobile_phone.css" alles erstmal auf Null gesetzt wird und ich ein völlig unabhängiges Design machen kann? Dieses Überschreiben macht doch alles nur unnötig kompliziert.

cebito · 19.08.2012

AW: Problem mit responsive design

kornyclown schrieb:
Gibt es für sawas nich nen Reset? Damit quasi am Anfang meiner "style_mobile_phone.css" alles erstmal auf Null gesetzt wird und ich ein völlig unabhängiges Design machen kann? Dieses Überschreiben macht doch alles nur unnötig kompliziert.

Nein, du machst es dir kompliziert. Wozu nochmal alles auf 0 setzen? Wenn du ein völlig anderes Design haben willst, dann ruf doch die style.css auch mit einer Mediaquery auf!

cebito · 19.08.2012

AW: Problem mit responsive design

Um dir das nochmal klar zu machen, könnte deine mobile css so aussehen

Code:

    #wrapper {width:400px; background: url(../images/background_mobile_phone.jpg) repeat-y;}
    #content {width:303px;}
    #content_home {width: 303px; padding-left:20px; margin-top: 50px;}

    header {width: 303px;height: 60px;margin-top:40px;}
    #navMenu {top: 15px;}
    #navMenu ul {line-height: 35px;}
    #navMenu li {float: none;}
    #navMenu ul li a {font-size: 13pt; width: 303px;height: 35px;}

    #content_home ul li {font-size:10pt; margin-bottom:20px;}

wenn du jetzt noch die entsprechend anderen Sachen in eine eigene Mediaquery packst

Code:

@media screen and (min-width: 961px){
    /*************************     Portrait     ************************/
    .picrow {width:600px; height:200px; margin-bottom:30px;}
    .portrait {width:200px; height:200px; display:block; float:left;}
    .portrait_1 { background:url(../images/me1.jpg) no-repeat;}
    .portrait_2 { background:url(../images/me2.jpg) no-repeat;}
    .portrait_3 { background:url(../images/me3.jpg) no-repeat;}
}

oder in eine Datei, die mit ebender Mediaquery aufgerufen wird, ist doch alles in Butter.

Und was hast du davon?

kleinere Dateien
weniger Wartungsaufwand
schnellere Änderungen möglich (bspw. Farben etc.)
mehr Übersicht!

kornyclown · 20.08.2012

AW: Problem mit responsive design

cebito schrieb:
Um dir das nochmal klar zu machen, könnte deine mobile css so aussehen

Code:

#wrapper {width:400px; background: url(../images/background_mobile_phone.jpg) repeat-y;} #content {width:303px;} #content_home {width: 303px; padding-left:20px; margin-top: 50px;} header {width: 303px;height: 60px;margin-top:40px;} #navMenu {top: 15px;} #navMenu ul {line-height: 35px;} #navMenu li {float: none;} #navMenu ul li a {font-size: 13pt; width: 303px;height: 35px;} #content_home ul li {font-size:10pt; margin-bottom:20px;}

wenn du jetzt noch die entsprechend anderen Sachen in eine eigene Mediaquery packst

Code:

@media screen and (min-width: 961px){ /************************* Portrait ************************/ .picrow {width:600px; height:200px; margin-bottom:30px;} .portrait {width:200px; height:200px; display:block; float:left;} .portrait_1 { background:url(../images/me1.jpg) no-repeat;} .portrait_2 { background:url(../images/me2.jpg) no-repeat;} .portrait_3 { background:url(../images/me3.jpg) no-repeat;} }

oder in eine Datei, die mit ebender Mediaquery aufgerufen wird, ist doch alles in Butter.

Und was hast du davon?

kleinere Dateien

weniger Wartungsaufwand

schnellere Änderungen möglich (bspw. Farben etc.)

mehr Übersicht!

Also ich hab deinen Code jetzt mal versucht so zu übernehmen aber irgendwie kommt da bei mir garnichts vernünftiges mehr bei raus. Ich muss auch ehrlich sagen dass ich mittlerweile von responsive Design so verwirrt bin dass ich wohl besser die Finger davon lasse.
Ich meine selbst wenn ich die .picrow mit deiner oben gezeigten Anweisung für Geräte ÜBER 961px einbinde, ist dadurch doch noch lange nicht die .picrow für Geräte UNTER 960px überschrieben. Warum sollte ich auch die .picrow expliziet für Geräte ÜBER 961px einbinden, die ist doch laut Desktop Style Sheet sowieso da. Es geht doch vielmehr darum Sachen die in dem Desktop Style Sheet stehen wegzulassen, wie beispielsweise die picrow oder den Hovereffekt.

mindraper · 21.08.2012

AW: Problem mit responsive design

hi

@korny: entschuldige bitte, aber das klingt für mich, als solltest du dich eingehend nochmal mit dem "c" in "css" auseinander setzen. letzten endes ist dein problem doch auf folgendes zurück zu führen:

in der desktop bezogenen css-datei (style.css) werden formatierungen für bestimmte elemente gesetzt. da diese datei IMMER geladen wird (da ohne media-query), werden ergo auch die formatierungen IMMER geladen. in der mobile bezogenen css-datei (style_mobile_phone.css), die mit media-query versehen wurde, werden neue formatierungen geladen, solange der viewport kleiner ist als 960px oder genau 960px groß (ansonsten wird die gesamte datei nicht geladen).

willst du nun ANDERE formatierungen als in style.css notiert auf mobilen geräten anzeigen, musst du die entsprechenden formatierungen in style_mobile_phone.css natürlich überschreiben, da ansonsten die formatierungen aus der style.css greifen (so arbeitet nun mal die kaskade).

ODER du versiehst style.css ebenfalls mit einem media-query (z. b. min-width: 961px). das würde dann bewirken, dass style.css NUR geladen wird, wenn der viewport mindestens 961px breit ist. für alles darunter wird ja die style_mobile_phone.css geladen. diese vorgehensweise würde allerdings voraussetzen, dass die formatierungen, die auf allen geräten gleich bleiben sollen, in BEIDEN css-dateien (oder wahlweise in einer dritten, die immer geladen wird) stehen.

noch eine andere sache zum schluss: sollte die ebrima kein open-source font sein und/oder du keine lizenz haben diese schriftart zu verbreiten, würde ich dir DRINGEND von deinem aktuellen einsatz von @font-face abraten. es ist kinderleicht, sich die schrift herunter zu laden von deiner website, wenn du sie so einbindest (komplexitätsgrad: bild kopieren) – man müsste nämlich nur in der adresszeile "http://www.thomasmanz.de/font/ebrima.ttf" eingeben und schon ist die schrift heruntergeladen. die lizenzfrage prinzipiell schonmal, weil es sich hier um einen true-type-font von (meines wissens nach) microsoft handelt. im zweifelsfall besser auf die google-webfonts () zurückgreifen.

gruß

kornyclown · 21.08.2012

AW: Problem mit responsive design

Also ich danke dir erstmal sehr für diesen Post, über das C in CSS hab ich so in der Tat noch nie nachgedacht. Wenn ich jetzt nach deiner Beschreibung gehe müsste es doch eigentlich auch gehen, wenn ich für die Desktopversion einfach sage media="screen" und für die mobile Variante media="handheld". Dann müsste das Skript doch die Desktopversion expliziet nur bei Bildschirmen und die mobile Version nur bei tragbaren Geräten laden. Ich meine so erspare ich mir meine Desktopversion auf eine bestimmte größe festlegen zu müssen.

Zu dem Font:
Also ich habe recherchiert und laut Wikipedia (http://en.wikipedia.org/wiki/Ebrima) ist Ebrima ein OpenType Font und diese können, ebenfalls laut Wikipedia (http://de.wikipedia.org/wiki/OpenType > Rechtliches), uneingeschränkt auf andere Betriebssysteme übertragen werden.
Ich bin nicht so routiniert im interpretieren von so Gesetzestexten aber für mich heißt das, dass ich den verbreiten darf.
Sollte ich das falsch interpretiert haben, bitte ich um Berichtigung.

Die Google Webfonts sind ausnahmlos frei oder auch an Bedingungen geknüpft?

cebito · 21.08.2012

AW: Problem mit responsive design

kornyclown schrieb:
müsste es doch eigentlich auch gehen, wenn ich für die Desktopversion einfach sage media="screen" und für die mobile Variante media="handheld". Dann müsste das Skript doch die Desktopversion expliziet nur bei Bildschirmen und die mobile Version nur bei tragbaren Geräten laden.

Nein, auch Mobiles haben einen Bildschirm.

Myhar · 21.08.2012

AW: Problem mit responsive design

kornyclown schrieb:
Wenn ich jetzt nach deiner Beschreibung gehe müsste es doch eigentlich auch gehen, wenn ich für die Desktopversion einfach sage media="screen" und für die mobile Variante media="handheld". Dann müsste das Skript doch die Desktopversion expliziet nur bei Bildschirmen und die mobile Version nur bei tragbaren Geräten laden.

Bevor du so einen Pfusch machst, setze dich lieber wirklich mit CSS auseinander. Ansosnten hast du in 1 Woche das nächste Problem, weil HandyX oder BrowserY etwas nicht so darstellen, wie du es willst. Bei einer ordentlichen Umsetzung hast du solche Probleme aber nicht.

mindraper · 21.08.2012

AW: Problem mit responsive design

hi

@korny: jain

media="handheld" war ursprünglich gedacht für sog. "feature-phones" (bspl: nokia communicator), die einen mehr oder minder starken rudimentären browser besitzen. smartphones hingegen besitzen i. d. r. browser, die beinahe (sofern man das vergleichen will) an ihre desktop-pendants herankommen. diese werden ebenfalls mit media="screen" angesprochen – schau doch einfach mal auf das media-query, mit dem du deine style_mobile_phone.css einbindest. dort schreibst du ja "media screen" + eine bedingung "and (max-width: 960px)". anders formuliert: "besitzt das gerät einen bildschirm UND die maximale breite ist [kleiner oder gleich] 960px, dann lade dieses stylesheet". hätten smartphones keinen "screen", würde das media-query nicht greifen

bzgl. der font-geschichte: im zweifelsfall würde ich wie gesagt auf die google-fonts umschwenken. mit schriften, die (mehr oder minder) an ein betriebssystem gekoppelt sind, ist die klärung von lizenz-fragen eine schwierige sache. nein, die google-webfonts unterliegen keiner einschränkung. der einsatz hat 2 vorteile:

1) die schrift liegt nicht bei dir auf dem server. bedeutet: FALLS es jemand schafft, eine schriftart herunterzuladen (was ich wirklich bezweifle), kannst du nichts dafür, sondern das ist dann im ernstfall googles bier.

2) du musst dir keine gedanken machen, wie du die schrift für unterschiedliche browser optimierst – unterschiedliche browser = unterschiedliche schriftformate (ttf wird glaub ich von allen unterstütz, ist aber bei einigen nicht unbedingt die erste wahl). fazit: weniger stress für dich. allein das ist schon m. E. nach ein totschlag-argument.

gruß

kornyclown · 22.08.2012

AW: Problem mit responsive design

mindraper schrieb:
... schau doch einfach mal auf das media-query, mit dem du deine style_mobile_phone.css einbindest. dort schreibst du ja "media screen" + eine bedingung "and (max-width: 960px)". anders formuliert: "besitzt das gerät einen bildschirm UND die maximale breite ist [kleiner oder gleich] 960px, dann lade dieses stylesheet". hätten smartphones keinen "screen", würde das media-query nicht greifen

Hm, ja das war mir grundsätzlich ja schon klar dass Smartphones auch mit screen angesprochen werden. Es war nur der Gedanke, wie ich es aus anderen Skripsprachen oder Programmiersprachen kenne. Dort bedeutet das bei Verbindungen von Bedingungen mit einem "and" Operator, BEIDE/ALLE Bedingungen True ergeben müssen, andernfalls gillt die gesamte Bedingungskette als False und ich hoffte dass ich somit auch einen gezielteren Zugriff auf meine Style Sheets bekommen könnte.
Also nachdem ich jetzt gelesen hab, dass "orentation:..." auch nur die Weite mit der Höhe vergleicht unabhängig vom benutzten Gerät, sehe ich irgendwie keine Möglichkeit mehr mobile Geräte von Desktopsystemen zu trennen.

mindraper · 23.08.2012

AW: Problem mit responsive design

hi

kornyclown schrieb:
Dort bedeutet das bei Verbindungen von Bedingungen mit einem "and" Operator, BEIDE/ALLE Bedingungen True ergeben müssen, andernfalls gillt die gesamte Bedingungskette als False und ich hoffte dass ich somit auch einen gezielteren Zugriff auf meine Style Sheets bekommen könnte.

ich sehe hier keinen unterschied zwischen css und anderen sprachen. @media screen and (...) = "gibt sich das device als screen-device aus UND werden folgende eigenschaften erfüllt, dann tue folgendes". wo ist jetzt für dich der unterschied?

kornyclown schrieb:
Also nachdem ich jetzt gelesen hab, dass "orentation:..." auch nur die Weite mit der Höhe vergleicht unabhängig vom benutzten Gerät, sehe ich irgendwie keine Möglichkeit mehr mobile Geräte von Desktopsystemen zu trennen.

jain. eine tatsächlich eindeutige trennung ist nicht möglich, aber es gibt mehr als genug indikatoren, die auf ein mobiles gerät hindeuten. kein einziger desktopbrowser sagt beispielsweise, dass "max-device-width" nur 320px sind (solange die auflösung am bildschirm höher ist, was wohl quasi IMMER zutrifft. auch ist mir kein desktopbrowser bekannt, der bei "device-pixel-ratio" einen anderen wert als 1 zurückgibt.

letzten endes spielt das aber auch gar keine rolle. deine seite sollte grundsätzlich so aufgebaut sein, dass sie IMMER "funktioniert", egal wo sie angezeigt wird. um es mal krass zu sagen: wenn dem nicht so ist, hast du etwas bei der konzeption falsch gemacht.
zusätzlich kommt noch hinzu, dass eine strikte trennung nach geräten gar nicht erwünschenswert ist – wer so denkt hat sich entweder nicht richtig mit dem thema responsive/adaptive webdesign auseinander gesetzt oder hat völlig falsche schlüsse daraus gezogen. es geht explizit NICHT darum, eine website für ein GERÄT zu optimieren, es geht darum die website GERÄTEUNABHÄNGIG zu machen. denn genau das ist ja eine der stärken des www – dass es von überall mit egal welchen tools genutzt werden kann (und wird).

gruß

kornyclown · 27.08.2012

AW: Problem mit responsive design

mindraper schrieb:
hi

ich sehe hier keinen unterschied zwischen css und anderen sprachen. @media screen and (...) = "gibt sich das device als screen-device aus UND werden folgende eigenschaften erfüllt, dann tue folgendes". wo ist jetzt für dich der unterschied?

Der Unterschied ist für mich, dass ich gerne hätte dass ein anderes .css geladen wird ohne das estwas überschrieben werden muss. Wenn ich also sage Desktopversion bei SCREEN und mobile Version bei SCREEN UND BLA da es ja zwei unterschiedliche Anweisungen sind wird jeweils nur eins geladen und ich muss keine bestehenden Werte überschreiben.

mindraper schrieb:
letzten endes spielt das aber auch gar keine rolle. deine seite sollte grundsätzlich so aufgebaut sein, dass sie IMMER "funktioniert", egal wo sie angezeigt wird. um es mal krass zu sagen: wenn dem nicht so ist, hast du etwas bei der konzeption falsch gemacht.
zusätzlich kommt noch hinzu, dass eine strikte trennung nach geräten gar nicht erwünschenswert ist – wer so denkt hat sich entweder nicht richtig mit dem thema responsive/adaptive webdesign auseinander gesetzt oder hat völlig falsche schlüsse daraus gezogen. es geht explizit NICHT darum, eine website für ein GERÄT zu optimieren, es geht darum die website GERÄTEUNABHÄNGIG zu machen. denn genau das ist ja eine der stärken des www – dass es von überall mit egal welchen tools genutzt werden kann (und wird).

gruß

Das es um Geräteunabhängigkeit geht ist mir ja prinzipiell klar aber die Konzeption sah vor dass die Navigation mit einem Hovereffekt übersichtlicher gahalten werden soll. Dieser Hovereffekt funktioniert auf mobilen Geräten aber nicht weil: keine Maus. Wenn ich jetzt also meine Seite mit diesem Hinblick konzeptioniere muss ich ja alles ohne Hovereffekt machen da es dafür ja keine Touchscreenalternative gibt. Heißt das, dass der Hovereffekt in Zukunft aussterben wird? Es geht mir hauptsächlich darum Maus- bzw. Cursor gesteuerte von Touchscreen gesteuerten zu trennen weil bis auf den Hovereffekt würde die Seite ja auch auf mobilen Geräten funktionieren, abgesehen davon das es etwas skaliert werden müsste.