Responsive Webseite

    Hallo zusammen,


    ich habe zum ersten Mal eine Webseite aufgebaut. Nun sollte sie noch responsiv werden.


    http://www.blickpunkt-grafikdesign.de


    Die Parallax Banner werden auf dem Computer in mobiler Bildschirmbreite richtig dargestellt. Allerdings auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom, auch der Parallax Effekt funktioniert nicht.

    Was habe ich falsch gemacht?


    Auch mit dem responsiven Menü komme ich noch nicht so ganz zurecht wie ich das optimal programmieren kann.

    Am liebsten wären mir diese drei Striche, wenn man auf diese klickt sollten sich links oder rechts die unterschiedlichen Menüpunkte öffnen.


    Über ein paar Ratschläge und Tipps würde ich mich freuen.


    Gerne dürft Ihr mir auch Verbesserungsvorschläge schreiben.

    Zitat

    auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom

    Kann ich nicht reproduzieren (Samsung S4, Android, Opera). Hast Du das Problem schon hiermit gelöst?:

    Code
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Zitat

    auch der Parallax Effekt funktioniert nicht.

    Anscheinend ist der Browser-Support für background-attachment:fixed noch mangelhaft:

    http://caniuse.com/#search=background-attachment

    Zitat von Sempervivum

    Kann ich nicht reproduzieren (Samsung S4, Android, Opera). Hast Du das Problem schon hiermit gelöst?:

    Code
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Anscheinend ist der Browser-Support für background-attachment:fixed noch mangelhaft:

    http://caniuse.com/#search=background-attachment

    Das habe ich schon probiert, hat leider nichts gebracht.


    Ein repsonsives Menü habe ich jetzt auch gefunden. Bin noch an der Arbeit 🙈

    Für mich ist die Darstellung auf meinem Handy (jetzt Chrome) bzgl. der Bilder soweit OK und ich dachte, Du hättest das Problem inzwischen schon gelöst. Kannst Du näher beschreiben, was Du mit

    Zitat

    Allerdings auf dem Smartphone kann man nichts erkennen, als hätte man das Bild zu nah rangezoom

    meinst? Da das Parallax nicht funktioniert, ist bei den Bilder natürlich oben/unten etwas ab geschnitten.

    Zitat

    Ich habe ein iPhone, da kann man gar nichts von dem eigentlichen Bild erkennen.

    Das ist ein wichtige Information. Dann kann ich leider nicht helfen, weil ich kein Apple-Gerät habe. Nur mutmaßen: Möglicherweise streikt der Browser bei diesem Element, wenn eine CSS-Eigenschaft unbekannt ist? Ich empfehle, zunächst alle erweiterten CSS-Eigenschaften für das HG-Bild wegzulassen und zu prüfen, ob es dann angezeigt wird.

    Es gibt dazu auch mehrere Diskussionen bei Stackoverflow:

    https://www.google.de/search?c…d=opera&ie=UTF-8&oe=UTF-8

    Zitat

    Ich frage mich warum das Parallax nicht funktioniert, auf anderen Webseiten klappt es doch auch

    Das könnte daran liegen, dass man häufig unter Parallax etwas anderes versteht als einen fixierten Hintergrund, nämlich dass sich der Hintergrund ebenfalls verschiebt, nur langsamer als der Inhalt. Siehe z. B. hier:

    http://pixelcog.github.io/parallax.js/

    Das ist dann meistens mit Javascript realisiert.

    Sempervivum dann muss ich mir da noch was anderes überlegen. Danke schon mal für deine Hilfe.


    Ich habe noch eine Frage zu dem responsiven Menü. Wenn ich rechts auf die Balken klicke öffnet sich die Menübar. Wenn ich dort dann auf z.B. Leistungen klicke öffnet sich die Seite, allerdings muss man die Menübar erst wieder schließen um das zu sehen. Ich denke der Kunde wird damit erstmal nicht klar kommen.

    Was muss ich programmieren, dass sich die Menübar wieder schließt sobald man einen Link angeklickt hat?

    Leider habe ich keine einfache Lösung mit CSS gefunden, um das Menü wieder zu schließen. Dieses kleine Javascript tut es jedoch:

    Code
        <script>
        $(".nav-container a").on("click", function () {
            $("nav input#nav").trigger("click");
        });
    </script>

    Da es jQuery benutzt, musst Du es hinter den Einziehen von jQuery platzieren, am besten vor dem schließenden </body>.


    Eine Alternative wäre, das Menü nicht mit absoluter Positionierung, floating etc. aus dem Fluss herauszunehmen. Dann würde es nach oben verschwinden, wenn der Browser zu dem betr. Anker springt.

    Ich habe nochmal im Internet geforscht aber anscheinend gibt es keine Lösung für mein Problem.

    Wenn ich über Dreamweaver die Echtzeitvorschau auf meinem iPhone auswähle wird mir die Seite korrekt angezeigt. Sobald ich sie auf meinen Webspace hochladen nicht mehr.

    Kann es mit dem Webspace etwas zu tun haben?

    Habe mir mal zum testen Mozilla Firefox als App geladen. Dort sieht es gleich aus wie in Safari , die Bilder zu nah rangezoomt.


    Anbei nochmal die zwei Bilder im Vergleich.

    Evtl. weiß hier noch jemand weiter ?!


    html-seminar.de/woltlab/attachment/1217/html-seminar.de/woltlab/attachment/1218/

    Ich habe dieses gefunden:

    https://stackoverflow.com/ques…ackground-image-with-ios7

    und die Lösung der DEMO aus der ersten Antwort übernommen, zunächst nur für "about" und "services". Funktioniert einwandfrei:


    CSS:

    Dies muss man bei allen Alternativen der Mediaqueries machen.


    JS:

    Kleiner Nachteil noch: Das Seitenverhältnis der Hintergrundbilder wird verzerrt. Kann ich aber noch mit wenigen zusätzlichen Berechnungen beheben.

    PS: Ernüchterung:

    Ein anderer Thread bei Stackoverflow:

    https://stackoverflow.com/ques…lls-with-the-page-on-ios7

    sagt:

    Zitat

    Mobile browsers try to save battery wherever they can. That's why mobile browsers delay the execution of JavaScript while you are scrolling. iOS in particular does this very aggressively and completely stops JavaScript.

    aber auch:

    Zitat

    I would recommend looking into scrollr (https://github.com/Prinzhorn/skrollr). It's a parallax library allowing you to achieve the same effect. They have carefully considered issues with mobile devices too

    D. h. wenn die erste Lösung, die ich eben gepostet habe, auf dem iPhone nicht funktioniert, könnte man dieses testen.

    Sempervivum vielen Dank für deinen Lösungsvorschlag. Es geht...allerdings gefällt es mir so nicht.

    Die Bilder werden nun auf dem iPhone angezeigt sind aber sehr schmal und das letzte Bild wird meistens übersprungen.

    Auch auf dem Computer sieht es meiner Meinung nach nicht mehr so gut aus. Trotzdem danke ich dir für deine Bemühung und das du dich so für mich einsetzt.


    Das Beste wird wahrscheinlich sein, die PC-Ansicht so zu lassen wie sie war und das selbe Bild ohne scroll-Effekt extra nur die mobile Sicht einzusetzen. Habe das mal probiert aber irgendwie schaffe ich es nicht.


    Soweit bin ich gekommen:


    CSS
    @media (min-width: 320px)and (max-width: 599px) {
.bannerabout {
    display: none;
}

    Das habe ich bei jeder Banner Sektion gemacht.


    Nur wie bekomme ich jetzt an diese Stelle das Bild?


    Langsam nerve ich wahrscheinlich schon :wacko:

    Nein, Du brauchst nicht zu befürchten, dass Du nervst.


    Ich empfehle, den Container nicht ganz wegzuschalten, sondern nur das background-attachment:fixed erst ab einer bestimmten Breite einzuschalten, etwa so:

    Code
    @media (min-width: 600px) {
    .bannerabout {
        background-attachment: fixed;
    }
    /* usw. */
}

    Allerdings wäre es besser, hier ein feature detect zu verwenden und mit Modernizr zu prüfen, ob dieses feature vom Browser unterstützt wird.

    Edit: Erneut Ernüchterung: background-attachment:fixed wird offenbar von Modernizr nicht unterstützt und das Erkennen scheint generell problematisch zu sein:
    https://stackoverflow.com/ques…ckground-attachment-fixed


    PS: Hat denn mit dem Javascript der Parallax-Effekt auf deinem iPhone funktioniert? Liest man sich das Stackoverflow in #14 durch, so scheint das ja fraglich zu sein.

    Ok das schaue ich mir morgen noch einmal an. Vielen Dank.


    Du meinst wenn ich background-attachment: fixed bei den mediaqueries weg lasse dann sollte das Bild normal angezeigt werden, habe ich das richtig verstanden ? Besser gesagt kann ich statt fixed etwas anderes eingeben, denn in meiner css habe ich das background-attachement: fixed bereits im „Hauptteil“ geschrieben, sprich wenn ich es bei den mediaqueries weglasse bleibt es dort ja trotzdem bestehen. Verstehst du wie ich es meine? Weiß gerade nicht wie ich es besser ausdrücken kann.


    Der Parallax-Effekt auf dem iPhone hat funktioniert aber war nicht sonderlich schön. Die Bilder waren zu schmal und wurden erst breiter wenn man sozusagen schon fast drüber gescrollt war. Und ein bisschen gezuckelt hat es auch. Evtl sind die Bilder auch schlicht und einfach zu hochauflösend und das Handy ist damit überfordert sie dann im Zusammenhang mit dem Effekt vollständig zu laden, denn das letzte Bild wurde mir gar nicht angezeigt.

    Zitat

    Besser gesagt kann ich statt fixed etwas anderes eingeben, denn in meiner css habe ich das background-attachement: fixed bereits im „Hauptteil“ geschrieben, sprich wenn ich es bei den mediaqueries weglasse bleibt es dort ja trotzdem bestehen.

    Ja, Du kannst scroll angeben, dann ist der Parallax-Effekt weg und Hintergrund und Bild bewegen sich gleich.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden