Problem mit responsive design

kornyclown · 19.08.2012, 16:20

Einige werden bestimmt schon andere Posts von mir kennen, da ich schon seit ein paar Wochen an meiner Seite bastel (www.thomasmanz.de).
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-Code:

<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, 17:43

Zitat:

Zitat von kornyclown

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, 18:11

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, 18:22

Zitat:

Zitat von cebito

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, 18:34

Zitat:

Zitat von kornyclown

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, 18:55

Zitat:

Zitat von cebito

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, 19:12

Zitat:

Zitat von kornyclown

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, 19:45

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, 11:44

Zitat:

Zitat von cebito

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, 03:06

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 (finden sich hier) zurückgreifen.

gruß

kornyclown · 21.08.2012, 15:00

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, 15:05

Zitat:

Zitat von kornyclown

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, 15:15

Zitat:

Zitat von kornyclown

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, 21:36

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, 14:23

Zitat:

Zitat von mindraper

... 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.

21.08.2012, 03:06	#10
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	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 (finden sich hier) zurückgreifen. gruß __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

21.08.2012, 15:00	#11
kornyclown Helper Themenstarter Registriert seit: 14.01.2008 Ort: Berlin Beiträge: 630 Verwendet: Atomsprengkopf, südamerokanische Indianerkultur, Fotoladen, Würfelbasis	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? __________________ Geändert von kornyclown (21.08.2012 um 15:05 Uhr).

21.08.2012, 21:36	#14
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	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ß __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug. Geändert von mindraper (21.08.2012 um 21:49 Uhr).

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Diskussion] Was ist responsive Webdesign?	wex_stallion	(X)HTML & CSS	18	10.08.2012 12:25
Responsive Webdesign - Vorschläge	pascal-bajorat	(X)HTML & CSS	4	12.07.2012 15:11
Slideshow Responsive Design Verpassen	Blurange	PHP und andere Scriptsprachen	6	13.05.2012 07:54
responsive Webdesign - Wieso Schriftgrößen in em?	Winkili	(X)HTML & CSS	11	12.12.2011 22:36

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Problem mit responsive design

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

19.08.2012, 18:11	#3
ullihantke Newbie Registriert seit: 15.08.2012 Beiträge: 70 Verwendet: CS5 (Mac) und CS6 (Windows)	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

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

Problem mit responsive design

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige