Umstellung Website auf Responsiv

1 Monika (Gast)

Hallo Zusammen,
ich habe mal versucht meine private HP auf Responsive umzustellen...
Ich weiß, dass es so nicht optimal ist, aber so würde es mir gefallen.
Nun habe ich noch 3 mehr oder weniger Probleme bzw.Schwierigkeiten, vielleicht kann mir jemand helfen:

1. Index: Grafik wird unscharf: http://www.house-of-blue-eyes.de/MOBIL/index.html

2. Menu: Optik wäre so ok, aber...???: http://www.house-of-blue-eyes.de/MOBIL/home.html

3. Fotogalerie: ist es möglich die Bestehende so zu belassen, aber Responsive anzupassen? Wenn ja wie?: http://www.house-of-blue-eyes.de/MOBIL/KATZEN/SHANNON/fotogalerieshannon/index.html

Für Kritik bin ich immer offen.

2 Jörg Kruse

1. Index: Grafik wird unscharf: http://www.house-of-blue-eyes.de/MOBIL/index.html

Du könntest je nach Viewport unterschiedliche Hintergrundgrafiken einbinden. Bei kleinerem Viewport könnte der Schriftzug dann z.B. größer sein und dadurch lesbar bleiben

2. Menu: Optik wäre so ok, aber...???: http://www.house-of-blue-eyes.de/MOBIL/home.html

Bei kleineren Viewports sollten auch die mittleren Bilder untereinander angeordnet werden, sonst werden diese bei zuwenig Platz zusammengeschoben

3. Fotogalerie: ist es möglich die Bestehende so zu belassen, aber Responsive anzupassen? Wenn ja wie?: http://www.house-of-blue-eyes.de/MOBIL/KATZEN/SHANNON/fotogalerieshannon/index.html

Einen Hover-Effekt gibt es auf Touchscreens nicht. Da bräuchtest du eine Klick-Lösung. Es gibt ja responsive Lightboxen mit Galleriemodus - vielleicht findet sich ja was geeignetes, was du da einbauen könntest

3 Moni

Hallo Jörg,
danke für Deine Antwort, irgendwie konnte ich mich gestern nicht einloggen...
Wenn Du zeit hast verschiebe meinen Beitrag bitte in die richtige Kategorie.

Index: die Grafik wird vergrößert wegen contain und das möchte ich für normale Bildschirme eigentlich nicht.

Menü: habe ich heute mal noch bissel gebastelt, bin aber nicht zufrieden so

Fotogalerie ist Klickbar, geht am Ipad und auch Handy, dachte es gibt vielleicht eine Lösung dass die Bilder sich automatisch anpassen? Habe mir viele Galerien angesehen und die meisten verwenden Java was ich eigendlich nicht möchte...

Schönen Abend
Moni

Zitat von Jörg

1. Index: Grafik wird unscharf: http://www.house-of-blue-eyes.de/MOBIL/index.html

Du könntest je nach Viewport unterschiedliche Hintergrundgrafiken einbinden. Bei kleinerem Viewport könnte der Schriftzug dann z.B. größer sein und dadurch lesbar bleiben

2. Menu: Optik wäre so ok, aber...???: http://www.house-of-blue-eyes.de/MOBIL/home.html

Bei kleineren Viewports sollten auch die mittleren Bilder untereinander angeordnet werden, sonst werden diese bei zuwenig Platz zusammengeschoben

3. Fotogalerie: ist es möglich die Bestehende so zu belassen, aber Responsive anzupassen? Wenn ja wie?: http://www.house-of-blue-eyes.de/MOBIL/KATZEN/SHANNON/fotogalerieshannon/index.html

Einen Hover-Effekt gibt es auf Touchscreens nicht. Da bräuchtest du eine Klick-Lösung. Es gibt ja responsive Lightboxen mit Galleriemodus - vielleicht findet sich ja was geeignetes, was du da einbauen könntest

4 Jörg Kruse

Du kannst für #logo ein max-width definieren, so dass das Bild nur bis zu einer bestimmten Größe skaliert

Habe mir viele Galerien angesehen und die meisten verwenden Java was ich eigendlich nicht möchte...

Du meinst vermutlich JavaScript. Java und JavaScript sind zwei verschiedene Sprachen. Eine Java-Gallerie würde ich auch nicht empfehlen.

Normalerweise funktionieren Lightbox-Galerien auch ohne JavaScript, dann allerdings ohne Lightbox und sonstige Effekte. Bei einem Klick auf das Vorschaubild wird das große Bild dann einfach unter seiner URL geladen.

dachte es gibt vielleicht eine Lösung dass die Bilder sich automatisch anpassen?

Wenn du keine fertige Lösung einbauen möchtest, musst du diesen Automatismus selbst programmieren. Mithilfe von Media Queries kannst du in Abhängigkeit von der Bildschirmbreite CSS-Eigenschaften unterschiedlich definieren, z.B. die Breite des Thumb-Containers oder die Position des Vorschaubildes. Beispiel:

@media screen and (max-width: 480px) {
    #container_top .thumbs {
        width: 200px;
    }
}

5 Moni

Hallo Jörg,

danke, werde ich probieren mit meinem Logo, möchte es ja zentriert haben

Ja sorry ich meinte JavaScript bei den Galerien.
Habe ich mal versucht, mit der Fotogalerie, gar nicht so schlecht http://www.house-of-blue-eyes.de/MOBIL/KATZEN/BILLY/fotogaleriebilly/index.html

Menu: habe ich jetzt auch mal umgestellt, schaut so auch nicht schlecht aus, jetzt überlege ich ob es sinn macht, das Menu abzuspecken bzw. Untermenüs einzubauen.

Schönen Tag
Moni

Zitat von Jörg
Du kannst für #logo ein max-width definieren, so dass das Bild nur bis zu einer bestimmten Größe skaliert

Habe mir viele Galerien angesehen und die meisten verwenden Java was ich eigendlich nicht möchte...

Du meinst vermutlich JavaScript. Java und JavaScript sind zwei verschiedene Sprachen. Eine Java-Gallerie würde ich auch nicht empfehlen.

Normalerweise funktionieren Lightbox-Galerien auch ohne JavaScript, dann allerdings ohne Lightbox und sonstige Effekte. Bei einem Klick auf das Vorschaubild wird das große Bild dann einfach unter seiner URL geladen.

dachte es gibt vielleicht eine Lösung dass die Bilder sich automatisch anpassen?

Wenn du keine fertige Lösung einbauen möchtest, musst du diesen Automatismus selbst programmieren. Mithilfe von Media Queries kannst du in Abhängigkeit von der Bildschirmbreite CSS-Eigenschaften unterschiedlich definieren, z.B. die Breite des Thumb-Containers oder die Position des Vorschaubildes. Beispiel:
@media screen and (max-width: 480px) {
    #container_top .thumbs {
        width: 200px;
    }
}

6 Jörg Kruse

danke, werde ich probieren mit meinem Logo, möchte es ja zentriert haben

Zentrieren kannst du mit "margin:auto"

nach oben

Umstellung Website auf Responsiv

Beitrag schreiben (als Gast)

Verwandte Themen