Responsives Design

[Carmen]

Hallo und guten Abend,

ich komme nicht wirklich drum herum, meine Kunden fragen schon warum die Seite nicht auf dem Handy gut zu bedienen ist. Habe ehrlich gesagt gehofft, dass ich mich vor diesem Schritt drücken kann. OK morgen werde ich das responsive Design umsetzten, dazu hätte ich an euch noch ein paar kleine Frage.

Es geht um diese Domain: http://friseursalon.bplaced.net/sl.html

Oben im Kopf habe ich eine Top Navigation mit 5 Punkten, darunter ein großer Slider mit mindestens 4 Bildern und darauf mein Logo.

Anschließend kommt der Content, hier sehe ich nicht wirklich das Problem.

Unter dem Punkt „Salon“ gibt es drei Bilder, diese lasse ich ab einer bestimmten Größe einfach untereinander darstellen

Der Punkt „Service“ beinhaltet nur Text, da ist es überhaupt kein Problem.

Bei „Partner“ sind ebenfalls nur Bilder, die ich untereinander darstellen lassen kann.

Bei „Kontakt“ werde ich die drei Boxen ebenfalls untereinander darstellen, die Icons vielleicht ausblenden und die Google Map? Weg oder lassen?

Nur was mache ich mit der Navigation und dem großen Slider, habt ihr eine gute Idee?

[Carmen]

Hallo,

bei der Navigation dachte ich an etwa dieses verhalten: http://friseursalon.bplaced.net/sl1.html

[Carmen]

Hallo,

kann es sein, dass mein Vorhaben hier http://friseursalon.bplaced.net/sl1.html mit der Navigation gar nicht geht? Ich habe jetzt ein Problem. Mit einem Klick auf Menü öffnen wird es zwar geöffnet, ich kann auch einen Punkt anklicken, die Seite scrollt automatisch nach unten allerdings wird das Menü nicht mehr geschlossen. Was könnte ich da machen bzw. wie kann ich das Problem beheben?

[Felix Riesterer]

Liebe Carmen,

kann es sein, dass mein Vorhaben hier http://friseursalon.bplaced.net/sl1.html mit der Navigation gar nicht geht?

warum sollte es das nicht?

Mit einem Klick auf Menü öffnen wird es zwar geöffnet,

Das kann ich unter der gegebenen URL nicht nachvollziehen.

ich kann auch einen Punkt anklicken, die Seite scrollt automatisch nach unten allerdings wird das Menü nicht mehr geschlossen.

Wo kann man das live und in Farbe sehen?

Was könnte ich da machen bzw. wie kann ich das Problem beheben?

Was hast Du denn wie technisch umgesetzt?

Liebe Grüße,

Felix Riesterer.

[Carmen]

Guten Morgen Felix,

warum sollte es das nicht?

Wenn ich auf den Punkt "Menü öffnen" klick, dann klappt diese zwar aus, klicke ich dann auf einen Punkt scrollt die Seite nach unten, wie sie auch soll, allerdings geht das Menü nicht wieder zu und da ist schlecht. Es sollte folgendes passieren:

• User klickt auf das Menü
• User wählt einen Punkt
• Navigation klappt zu und die Seite scrollt zum ausgewählten Bereich

Das kann ich unter der gegebenen URL nicht nachvollziehen.

Unter dieser URL http://friseursalon.bplaced.net/sl1.html musst du das Fenster kleiner ziehen auf Handy Größe, dann wechselt auch die Navigation so dass du das Verhalten nachvollziehen kannst.

Wo kann man das live und in Farbe sehen?

Wie gerade einen Punkt weiter oben schon geschrieben hier http://friseursalon.bplaced.net/sl1.html das Fenster bitte kleiner Ziehen auf Handy Größe.

[Felix Riesterer]

Liebe Carmen,

• User klickt auf das Menü
• User wählt einen Punkt
• Navigation klappt zu und die Seite scrollt zum ausgewählten Bereich

das sollte mit dem aktuellen Stand des Fiddles so funktionieren.

Unter dieser URL http://friseursalon.bplaced.net/sl1.html musst du das Fenster kleiner ziehen auf Handy Größe, dann wechselt auch die Navigation so dass du das Verhalten nachvollziehen kannst.

OK. Gefunden. Aber da hast Du ja noch immer diese vielen Klassen und das CSS ist nicht so wie im Fiddle.

Ja, in Webkit-Browsern funktioniert das Fiddle nicht. Einen Fix habe ich auch nicht gefunden, auch wenn das Problem mit Pseudoklassen und den Event-basierten Selektoren (:hover, :target etc.) bekannt ist.

Übrigens ist dieser ganze Thread eigentlich ein Doppelposting! Alles hängt mit Deinem ursprünglichen Thread "" zusammen.

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

OK. Gefunden. Aber da hast Du ja noch immer diese vielen Klassen und das CSS ist nicht so wie im Fiddle.

Stimmt, aber nur aus dem Grund, weil es im Google Chrome bei mir noch nicht funktioniert. Beim IE würde ich sagen ok darauf kann ich verzichten, aber der Chrome ist erst seit ein paar Wochen zu meinem liebling geworden :)

Ja, in Webkit-Browsern funktioniert das Fiddle nicht. Einen Fix habe ich auch nicht gefunden, auch wenn das Problem mit Pseudoklassen und den Event-basierten Selektoren (:hover, :target etc.) bekannt ist.

Das heißt also, wenn ich dein Beispiel nutzen möchte müsste ich damit leben, dass es im Google Chrome erstmal nicht geht und der User keine Navigation zu sehen bekommt?

Übrigens ist dieser ganze Thread eigentlich ein Doppelposting! Alles hängt mit Deinem ursprünglichen Thread "" zusammen.

Finde ich ehrlich gesagt nicht, deshalb habe ich einen neuen Beitrag begonnen, denn hier geht um die Frage wie kann ich die ganze Seite responsive umsetzten da meine User schon motzen warum meine Seite auf dem Handy nicht gut zu bedienen ist.

[Felix Riesterer]

Liebe Carmen,

Das heißt also, wenn ich dein Beispiel nutzen möchte müsste ich damit leben, dass es im Google Chrome erstmal nicht geht und der User keine Navigation zu sehen bekommt?

das ist zugegeben keine optimale Lösung, da gebe ich Dir absolut Recht. Leider ist Chrome kaputt. Und Google will das auch so. Sehr schade.

Felix Riesterer.

[Carmen]

Hallo Felix,

das ist zugegeben keine optimale Lösung, da gebe ich Dir absolut Recht. Leider ist Chrome kaputt. Und Google will das auch so. Sehr schade.

und meine Version kann ich auch nicht lassen, denn die klappt nicht mehr zusammen. Es klappt einfach gar nichts. Ich trete den ganzen scheiß einfach in die Tonne, erstelle eine weiße Seite mit meiner Telefonnummer und Mail Adresse das sieht auf jedem Gerät gut aus und dann wars das für mich.

[Carmen]

Hallo,

eine Frage zu meinem Slider, den ich so einbinde:

      <div id="maximage">
          <img src="img/slider/header/bild1.gif">
          <img src="img/slider/header/bild2.gif">
          <img src="img/slider/header/bild4.gif">
      </div>

Auf dem Handy finde ich diesen eigentlich überflüssig, wenn ich nun die Bilder einfach auf display:none setzte, werden diese dennoch geladen, richtig? Also entsteht Traffic obwohl nichts zu sehen ist, finde ich nicht ganz OK für den user. Was kann ich hier machen?

Sollte es wichtig sein, ich nutze diesen Slider: http://www.aaronvanderzwan.com/maximage/2.0/

[Ole]

Hi

Was kann ich hier machen?

Sie dann eben nicht laden bzw. im Rahmen von progressive enhancement sie erst laden, wenn sie angezeigt werden sollen.

Das geht zum Beispiel via RESS oder via JS.

Gruß Ole

[Carmen]

Guten Abend,

ich bin nun den ganzen Tag an meiner Seite gesessen und denke ich kann euch etwas zeigen, was sagt ihr zu diesem Ergebnis? http://friseursalon.bplaced.net/sl1.html#closed zufrieden? Es geht um das responsive Design.

Was ich leider nicht hinbekommen habe, ist dass wenn man die die Navigation klickt, einen Punkt gewählt hat scrollt man zwar in den richtigen Bereich, allerdings bleibt die Navigation offen, was ich persönlich sehr schade finde :/ Leider funktioniert die Lösung vom Felix nicht im Chrome, daher kommt diese für mich leider nicht in Frage. Ich weiß zwar jetzt schon dass meine User meckern werden, aber ich hab keine Idee :/

Der nächste Punkt ist noch, dass der Slider auch bei einer kleinen Auflösung alle Bilder zieht, finde ich zwar sehr schade, aber auch das kann ich leider nicht ändern. Die Lösung von verstehe ich leider nicht und weiß daher nicht, wie ich diese anwenden muss. Meine User müssen eben damit leben dass die Bilder auf dem Handy schlicht weg scheiße aussehen und enorm viel Traffic verursachen. Kann ich leider nichts ändern.

[Felix Riesterer]

Liebe Carmen,

Der nächste Punkt ist noch, dass der Slider auch bei einer kleinen Auflösung alle Bilder zieht,

dafür gibt es eine mMn sehr einfache Lösung:

Der Slider benötigt zwingend JavaScript, um zu funktionieren. Du kannst mit JavaScript die verfügbare Anzeigebreite vermessen und dann ab einer Mindestbreite den Slider per JavaScript nachladen lassen, anstatt ihn fest im Dokument zu notieren.

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

dafür gibt es eine mMn sehr einfache Lösung: Der Slider benötigt zwingend JavaScript, um zu funktionieren. Du kannst mit JavaScript die verfügbare Anzeigebreite vermessen und dann ab einer Mindestbreite den Slider per JavaScript nachladen lassen, anstatt ihn fest im Dokument zu notieren.

so kann ich erfahren, wie Breit mein Fenster ist: alert($("#home").width()); lass ich dieses Ausführen bekomme ich auch die richtigen Werte angezeigt. Aber den Rest mit dem Nachladen verstehe ich leider nicht.

[Carmen]

Hallo Felix,

so kann ich erfahren, wie Breit mein Fenster ist: alert($("#home").width()); lass ich dieses Ausführen bekomme ich auch die richtigen Werte angezeigt. Aber den Rest mit dem Nachladen verstehe ich leider nicht.

Meinst du mit Nachladen dieses? http://mizine.de/html/html-mit-javascript-jquery-nachladen/#

[Felix Riesterer]

Liebe Carmen,

Meinst du mit Nachladen dieses? http://mizine.de/html/html-mit-javascript-jquery-nachladen/#

ich meine damit, dynamisch ein <script>-Element in den <head> zu schreiben. Aber jQuery könnte dir mit getScript() dabei helfen es noch einfacher zu gestalten. Mit getScript kannst Du eine Funktion für den Erfolgsfall definieren, die Dir Deinen Slider initialisiert.

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

ich meine damit, dynamisch ein <script>-Element in den <head> zu schreiben. Aber jQuery könnte dir mit getScript() dabei helfen es noch einfacher zu gestalten. Mit getScript kannst Du eine Funktion für den Erfolgsfall definieren, die Dir Deinen Slider initialisiert.

ich habe gehofft, dass ich es einfacher machen kann und zwar so:

if ($(window).width() > 800) {
	$("#maximage").append(" <span>Test</span>.");
}

Allerdings reagiert er darauf nicht und ich kapiere JavaScript leider 0.

[Carmen]

Hallo,

so wurde es zwar funktionieren

if ($(window).width() > 800) {
document.getElementById("maximage").innerHTML = "<img src=\"img/slider/header/bild1.gif\"><img src=\"img/slider/header/bild2.gif\"><img src=\"img/slider/header/bild3.gif\">";	}

aber dafür geht mein Slider nicht mehr. Ich muss einfach damit leben dass die Bilder die ca. 5 MB groß sind immer geladen werden. Ich kann jetzt allerdings auch nicht wegen einer Funktion JavaScript lernen und meine Arbeit vernachlässigen.

[Felix Riesterer]

Liebe Carmen,

ich habe gehofft, dass ich es einfacher machen kann und zwar so:

> if ($(window).width() > 800) {
> 	$("#maximage").append(" <span>Test</span>.");
> }
> 

was soll das bewirken? Wenn das Fenster (also nicht <body>?) breiter ist als 800 Pixel, dann willst Du dem Element mit der ID "maximage" ein <span>Test</span> verpassen? Und das soll genau was bezwecken?

Allerdings reagiert er darauf nicht und ich kapiere JavaScript leider 0.

Na, da lässt sich doch etwas machen. Wenn Du Webseiten verkaufst, dann solltest Du auch JavaScript besser verstehen.

Ich habe folgenden Code nicht getestet, aber er könnte funktionieren:

/* <script src="js/jquery.maximage.js"> im <head>
 * und $('#maximage').maximage() am Ende des <body>
 * wird ersetzt mit: */
if ($("body").outerWidth(true) > 800) {
    jQuery.getScript(
        "http://friseursalon.bplaced.net/js/jquery.maximage.js",
        function () {
            $('#maximage').maximage();
        }
    );
}

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

Ich habe folgenden Code nicht getestet, aber er könnte funktionieren:

/* <script src="js/jquery.maximage.js"> im <head>

>  * und $('#maximage').maximage() am Ende des <body>
>  * wird ersetzt mit: */
> if ($("body").outerWidth(true) > 800) {
>     jQuery.getScript(
>         "http://friseursalon.bplaced.net/js/jquery.maximage.js",
>         function () {
>             $('#maximage').maximage();
>         }
>     );
> }

danke für deinen Code, aber damit ist mein Problem nicht gelöst. Dann wird zwar da Javascipt nicht mehr ausgeführt allerdings die großen Bilder sind weiterhin im Quelltext vorhanden und das möchte ich ja eigentlich unterbinden, dass eben auf einem kleinen Gerät nur ein Bild zu sehen sind und die anderen gar nicht geladen werden.

[Felix Riesterer]

Liebe Carmen,

allerdings die großen Bilder sind weiterhin im Quelltext vorhanden

Das ist ja der Unsinn! Warum schreibst Du sie nicht mit dem JavaScript hinein, das auch Deinen Slider startet?

if ($("body").outerWidth(true) > 800) {
    jQuery.getScript(
        "/js/jquery.maximage.js",
        function () {
            $("#maximage").append(
                '<img src="/img/slider/header/bild2.gif">'
                + '<img src="/img/slider/header/bild4.gif">'
            ).maximage();
        }
    );
}

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

if ($("body").outerWidth(true) > 800) {

>     jQuery.getScript(
>         "/js/jquery.maximage.js",
>         function () {
>             $("#maximage").append(
>                 '<img src="/img/slider/header/bild2.gif">'
>                 + '<img src="/img/slider/header/bild4.gif">'
>             ).maximage();
>         }
>     );
> }

vielen vielen vielen Dank, es funktioniert wunderbar. Ohne deine Hilfe hätte ich das nie hinbekommen.

[Carmen]

Hallo,

ich bin noch an verschiedenen Bildern auf meiner Seite, diese sind in der großen Ansicht recht, groß (auch von mir gewollt) in der kleinen Mobilen Ansicht sollten diese allerdings ausgetauscht werden. hab gelesen das geht mit:

<img src="small,jpg"
     srcset=large.jpg 1024w, medium.jpg 640w, small.jpg 350w alt="Test Bild">

Laut http://caniuse.com/#search=srcset sieht es ganz übel aus, rot soweit das Auge sehen kann :/ Gibt es noch eine alternative? Oder muss ich alle Bilder JavaScript austauschen, in etwa, wie im Beispiel vom Felix

[Felix Riesterer]

Liebe Carmen,

Oder muss ich alle Bilder JavaScript austauschen, in etwa, wie im Beispiel vom Felix

zur Zeit, ja. Hat der Code überhaupt gefunzt™?

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

zur Zeit, ja. Hat der Code überhaupt gefunzt™?

wie bereits geschrieben hat es wunderbar funktioniert, vielen Dank nochmals für deine Hilfe!

Ok, dann werde ich das nun etwas umändern, dass ich den Bereich "Partner" die Bilder auch dementsprechend austauschen kann.

[Felix Riesterer]

Liebe Carmen,

Ok, dann werde ich das nun etwas umändern, dass ich den Bereich "Partner" die Bilder auch dementsprechend austauschen kann.

und was wird aus der Navi? []

Liebe Grüße,

Felix Riesterer.

[Carmen]

Hallo Felix,

und was wird aus der Navi? []

ups, sorry das ist mir total unter gegangen. Danke dass du auch dafür eine Lösung gefunden hast. Ich werde diese im laufe des Abends hier http://friseursalon.bplaced.net/sl1.html hier einbauen. Ich kämpfe gerade noch damit dass das Bild auf einem kleinen Gerät nicht als cover angezeigt wird, wie wenn der Slider laufen würde. Muss schauen an was das liegen könnte.

Außerdem bin ich in kleinen größten mit den runden Bildern unter "Salon" noch nicht 100% zufrieden, die sind einfach nicht zentriert. Kann aber auch nicht für alle 20px unterschied einen neuen Mediaquery schreiben :/

[Matthias Apsel]

Om nah hoo pez nyeetz, Carmen!

Außerdem bin ich in kleinen größten mit den runden Bildern unter "Salon" noch nicht 100% zufrieden, die sind einfach nicht zentriert. Kann aber auch nicht für alle 20px unterschied einen neuen Mediaquery schreiben :/

mach die margin-Angaben in %. Und wenn nicht mehr alle 3 nebeneinander passen, setze das margin auf Null.

Matthias

[Gunnar Bittersmann]

@@Carmen:

Laut http://caniuse.com/#search=srcset sieht es ganz übel aus, rot soweit das Auge sehen kann :/

Du bist rot-grün-blind? Bei WebKit/Blink ist da jede Menge Grün.

Und da sollte sich auch ein Polyfill finden lassen.

LLAP

[Carmen]

Hallo,

Und da sollte sich auch ein Polyfill finden lassen.

ich habe eins gefunden, hast du damit Erfahrung? http://scottjehl.github.io/picturefill/

[Gunnar Bittersmann]

@@Carmen:

ich habe eins gefunden, hast du damit Erfahrung? http://scottjehl.github.io/picturefill/

Nö, das nicht. Aber der Autor von dem Ding hört sich gut an.

LLAP