flexibles layout mit bildern

[bugfix]

moin,

vor ziemlich vielen jahren habe ich mir mühevoll eine eigene seite zusammen gebastelt, das ganze dürfte nicht mehr "up to date" sein, insbesondere, da durch die vielen mobile device(s) ein haufen monitor auflösungen dazu gekommen sind...

ich bin auf der suche nach einem layout, welches sich dynamisch an die monitorgrößen anpasst, das ganze soll natürlich einigermaßen sinnvoll sein, und in einem guß umsetzbar sein, x-verschiedene styles für jede monitorgröße bekomm ich zeitlich nicht unter einen hut

im moment verschwindet der großte teil des layouts aus dem screen, bei ungünstigen auflösungen, was mir wiederum zeigt, das mein layout ungünstig ist :( und alles ist dann nur durch irres scrollen erreichbar weil das ganze an festen größen hängt...

mir ist wichtig nur html und css einzusetzen, da ich nichts weiter zusammen stoppeln kann...

allerdings habe ich nichts gefunden, was meinem ästhetischen anspruch gerecht wird und gleichzeitig eine gewisse dynamik mitbringt...

lange zeit war mir das weitestgehend egal allerdings haben sich jetzt nicht nur die engsten verwandten zum glotzen eingefunden sondern auch kollegen, freunde, fremde

ich hoffe auf ideen was die seitengestaltung angeht und (erst mal) keine tipps zum coding...

danke schon mal im voraus hnd torsten

[MrMurphy1]

Hallo

Ohne irgendwelche Informationen vor dir zu der Website sind konkrete und seriöse "Ideen" (was immer du darunter auch verstehst) nicht möglich.

Besucher freuen sich über klassische Layouts (Header, Main (Inhalt), Footer) mit einer oder zwei Seitenleisten), da sie damit am einfachsten und schnellsten zurechtkommen. Versteckte Informationen oder Navigationen, die erst nach einer Aktion vom Besucher sichtbar werden, sollten vermieden werden.

was meinem ästhetischen anspruch gerecht wird

Wenn Webseitenersteller sich austoben müssen geht das fast immer zum Nachteil seiner Besucher. Erstellst du die Webseite für dich? Oder doch für eine Besucher? Die deine ästhetischen Ansprüche nicht teilen?

mir ist wichtig nur html und css einzusetzen, da ich nichts weiter zusammen stoppeln kann...

Nur HTML und CSS reichen für die meisten Probleme vollkommen aus. Allerdings sind sie in den letzten Jahr sehr vielseitiger und damit anspruchsvoller geworden. Um aktuelle Seiten zu erstellen ist deshalb viel Erfahrung und Wissen notwendig, auch ohne JavaScript oder PHP.

Gruss

MrMurphy

[bugfix]

danke für die schnelle reaktion...

Ohne irgendwelche Informationen vor dir zu der Website sind konkrete und seriöse "Ideen" (was immer du darunter auch verstehst) nicht möglich.

ich dachte meine seite durch die angabe der homepage beim erstellen des postings zu verlinken würde genügen, aber hier ist der link gern nochmal link-> :)

Besucher freuen sich über klassische Layouts... (usw) Versteckte Informationen oder Navigationen, die erst nach einer Aktion vom Besucher sichtbar werden, sollten vermieden werden... Wenn Webseitenersteller sich austoben müssen geht das fast immer zum Nachteil seiner Besucher. Erstellst du die Webseite für dich? Oder doch für eine Besucher? Die deine ästhetischen Ansprüche nicht teilen?

die frage ist berechtig und ich hab sie mir damals auch gestellt, schlussendlich ein klein bisschen von beidem, eine ordentliche portion "selbstverwirklichung" und "austoben" ist da natürlich dabei und die mehr oder minder versteckte navigation, die ich absichtlich eingebaut habe, schütz mich hoffentlich davor, dass mein chef oder HR manager mal was von dem liest, was mir so aus der tastatur hoppelt... ;-) es ist tasächlich so, dass die besucher nicht von allein hinter die idee der navigation kommen, und das ist super so gg

mir ist klar, dass die seite von crawlern, spidern und anderem getier bekrabbelt wird und alles auf ewig ins netz gebrannt ist, dieses risiko ist aber der irrsinnige nervenkitzel, den ich mir gönne ;-)

Nur HTML und CSS reichen für die meisten Probleme vollkommen aus. Allerdings sind sie in den letzten Jahr sehr vielseitiger und damit anspruchsvoller geworden. Um aktuelle Seiten zu erstellen ist deshalb viel Erfahrung und Wissen notwendig, auch ohne JavaScript oder PHP.

das ist mir auch bereits aufgefallen ... fortschritt, oder?

hnd dt

[Matthias Apsel]

Hallo bugfix,

Ohne irgendwelche Informationen vor dir zu der Website sind konkrete und seriöse "Ideen" (was immer du darunter auch verstehst) nicht möglich.

ich dachte meine seite durch die angabe der homepage beim erstellen des postings zu verlinken würde genügen, aber hier ist der link gern nochmal link-> :)

Die Angabe der Homepage ist vordergründig die eigene Seite, deshalb schaut man da nicht so richtig drauf. Für die problematische Seite gibt es das Feld „problematische Seite“. :-p

PS: korrekte Groß- und Kleinschreibung macht einen Beitrag deutlich besser lesbar.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo bugfix,

ich dachte meine seite durch die angabe der homepage beim erstellen des postings zu verlinken würde genügen, aber hier ist der link gern nochmal link-> :)

Hey, die Seite kenn ich doch. Warum postest du nicht mehr unter deinem „alten“ Benutzernamen? Passwort vergessen? Brauchst du Hilfe dazu?

Bis demnächst
Matthias

[bugfix]

tach :)

Hey, die Seite kenn ich doch. Warum postest du nicht mehr unter deinem „alten“ Benutzernamen? Passwort vergessen? Brauchst du Hilfe dazu?

na das haut mich ja schon ein wenig vom hocker, ich hab mich vermutlich (zumindest gefühlt) seit ca. 2008 nicht mehr hier beteiligt... ich hoffe der hinterlassene eindruck verursacht kein grummeln in der magengegend.

mein benutzername war torsten, allerdings weiss ich nicht mehr welche mailadresse ich damals benutzt habe (hab einige ausprobiert) um mich anzumelden... das passwort is auch futsch.

danke für dein angebot, ich kann aber auch ganz gut mit dem aktuellen account leben :) bugfix... irgendwie witzig... das leben in ein wort gefasst.

hnd dt

das mit der groß- kleinschreibung tut mir leid, aber "mit" bin ich wirklich total unglücklich...

[Christian Kruse]

Hallo bugfix,

mein benutzername war torsten, allerdings weiss ich nicht mehr welche mailadresse ich damals benutzt habe (hab einige ausprobiert) um mich anzumelden... das passwort is auch futsch.

Schreib an [e-mail], dann können wir deinen alten Account umstellen auf die neue Adresse - sofern du das möchtest. Die alte Account-Adresse können wir dir dort natürlich auch mitteilen.

LG,
CK

[Matthias Scharwies]

Servus!

moin,

vor ziemlich vielen jahren habe ich mir mühevoll eine eigene seite zusammen gebastelt, das ganze dürfte nicht mehr "up to date" sein, insbesondere, da durch die vielen mobile device(s) ein haufen monitor auflösungen dazu gekommen sind...

ich bin auf der suche nach einem layout, welches sich dynamisch an die monitorgrößen anpasst, das ganze soll natürlich einigermaßen sinnvoll sein, und in einem guß umsetzbar sein, x-verschiedene styles für jede monitorgröße bekomm ich zeitlich nicht unter einen hut

Das musst du auch nicht! Das wichtigste beim responsiven Design: Verzicht auf (feste) Breitenangaben:

• mehrspaltige Layouts

• Layouts mit Flexbox

allerdings habe ich nichts gefunden, was meinem ästhetischen anspruch gerecht wird und gleichzeitig eine gewisse dynamik mitbringt...

ich finde Deine Seite gut und interessant, würde nur für kleinere Viewports auf Breitenangaben verzichten und diese in media queries packen (1. verlinktes Tutorial)

ich hoffe auf ideen was die seitengestaltung angeht und (erst mal) keine tipps zum coding...

Ach so ...

• awwwards.com

• Web Design Inspiration: Best web designs

Für mich sehen die großen Fotos alle gleich aus; da hat Deine Seite schon was ...

Herzliche Grüße

Matthias Scharwies

[bugfix]

tachschön,

@matthias-> deinen ausführungen entnehme ich, dass du glaubst man kann genau dieses existierende layout so umstricken, dass es in seiner form bestehen bleibt und trotzdem die dynamik erhält die ich anstrebe. bisher bin ich davon ausgegangen, dass das nicht möglich ist... (übrigens danke für die blumen! freut mich sehr, wenn du die seite mit "hat schon was" beschreibst!) ...und ich alles über den haufen werfen muss. ich selbst hab das ding schon eine million mal angeschaut und bin immer noch zufrieden damit. doof nur das sogar der konsument, der mich persönlich kennt versucht sich so etwas mit nem smartfon anzuschauen... das ist wohl der trend der heutigen schnellebigkeit... (falsches thema...)

Das musst du auch nicht! Das wichtigste beim responsiven Design: Verzicht auf (feste) Breitenangaben:

• mehrspaltige Layouts

• Layouts mit Flexbox

mehrspaltige layouts gabs schon "früher" der flexbox ansatz ist für mich völlig neu, dabei bin ich über den "Mobile first!" gedanken gestolpert... das würde vom ursprünglichen gedanken, der in dieser präsentation steckt nix mehr übrig lassen... abgesehen davon, dass ich noch nicht verstanden habe, welche möglichkeiten dahinter stecken vermute ich, dass ich bei der darstellung einiges "weglassen" muss... :(

ich finde Deine Seite gut und interessant, würde nur für kleinere Viewports auf Breitenangaben verzichten und diese in media queries packen (1. verlinktes Tutorial)

besteht dann trotzdem noch die möglichkeit, die "überlappung" der bilder aufrecht zu erhalten? die müssten sich doch dann "selbst" neu sortieren und schlißlich haben die thumbnails doch feste breiten... mein verständniss der technik und deren auswirkungen ist wohl nicht ausreichend ausgeprägt um eine ideee zu haben.

Für mich sehen die großen Fotos alle gleich aus

öhm, wie meinste das?

wenn ich die möglichkeit hab mein uraltlayout aufrecht zu erhalten, werde ich das mal versuchen :)

danke nochmal schönentachnoch torsten

[Matthias Scharwies]

Servus!

tachschön,

@matthias-> deinen ausführungen entnehme ich, dass du glaubst man kann genau dieses existierende layout so umstricken, dass es in seiner form bestehen bleibt und trotzdem die dynamik erhält die ich anstrebe. bisher bin ich davon ausgegangen, dass das nicht möglich ist...

Ja, ich glaube, d.h. ich weiß nicht, ob es genau so geht.

Ich würde die Bilder in eine Liste / mehrere Listen packen, in denen sie nebeneinander

#container {
    max-width: 880px; (lieber 55em, bei 16px Standardschriftgröße der Browser)
    z-index: 1;
}
li {
    display: inline;
    list-style-type: none;
}

dargestellt werden (ohne feste Position). Wenn die Zeile voll ist, bricht die Liste um und wird in der nächsten Zeile dargestellt. Durch die Anzahl der Listen/ Menge der Listenelemente kannst du die Anordnung bei 55em planen. Damit hast du die Ansicht für alle Desktops und Tablets im Landscape-Modus.

Bei kleineren Viewports würde die Listen anders umbrechen, d. h. das Design wäre erst mal weg. Ich würde dann versuchen, die Listen, bzw Bilder alle nebeneinander darzustellen. Das wäre immer noch besser als ein horizontaler Scrollbalken.

Versuch mal:

ul {
  display: inline;
}
 
@media (min-width: 32em)  {	
ul {
  display: block;
  }
}

die müssten sich doch dann "selbst" neu sortieren und schlißlich haben die thumbnails doch feste breiten...

Machen doch alle inline-Elemente; Wenn die Zeile voll ist, fangen sie in der nächsten Zeile an.

besteht dann trotzdem noch die möglichkeit, die "überlappung" der bilder aufrecht zu erhalten?

Das wäre ein Problem, evtl. mit negativen margins lösbar.

li {
  padding: 0;
  margin: -5px;
}

Für mich sehen die großen Fotos alle gleich aus

öhm, wie meinste das?

Auf den von mir verlinkten Design-Seiten sehen die Webseiten am besten aus, die aus einem großen Foto und sonst nichts oder nur 3 Links bestehen. Du bist Fotograf, hast also wsl. sogar solche Bilder, die Du verwenden könntest.

So was finde ich auch gut: Manuel Becker

Aber die typische Webseite einer Firma oder Schule (oder die Startseite des Wiki) benötigt m.E allerdings viel mehr Inhalt in Form von Text, Bildern und Links, sodass dort solche Konzepte mit großen Fotos m.E. nicht funktionieren.

wenn ich die möglichkeit hab mein uraltlayout aufrecht zu erhalten, werde ich das mal versuchen :)

danke nochmal schönentachnoch torsten

Herzliche Grüße

Matthias Scharwies

[bugfix]

moin,

meine güte, werde ich viel lesen müssen! man fängt zwar nicht beim urschleim an, fühlt sich aber wie ein lungenfisch bei dem der schwanz im html5 sumpf feststeckt... selbst das schöne alte mehrspaltige layout sieht mit dem neuen code recht seltsam aus...

ne kleine anmerkung zu den design-links, die du gepostet hast, da sind wirklich tolle layouts dabei, allerdings ist der anspruch dort immer neue aktuelle infos (text oder bilder) nachzuschieben (für google oder für die welt) das ist mein anspruch nicht... ich werde weiter unten dazu was sagen.

Ich würde die Bilder in eine Liste / mehrere Listen packen, in denen sie nebeneinander

#container {
    max-width: 880px; (lieber 55em, bei 16px Standardschriftgröße der Browser)
    z-index: 1;
}
li {
    display: inline;
    list-style-type: none;
}

dargestellt werden (ohne feste Position). Wenn die Zeile voll ist, bricht die Liste um und wird in der nächsten Zeile dargestellt. Durch die Anzahl der Listen/ Menge der Listenelemente kannst du die Anordnung bei 55em planen. Damit hast du die Ansicht für alle Desktops und Tablets im Landscape-Modus.

Bei kleineren Viewports würde die Listen anders umbrechen, d. h. das Design wäre erst mal weg. Ich würde dann versuchen, die Listen, bzw Bilder alle nebeneinander darzustellen. Das wäre immer noch besser als ein horizontaler Scrollbalken.

ohne eine änderung des layouts schaut das wirklich grässlich aus, außerdem kommt dazu,dass ich thumbnails im hoch und im querformat habe, was zu weiterer verwirrung führt, die richten sich alle an der "unterkante" aus und ich müsste dann einzelne listenelemente direkt formatieren, auch nicht schön, denn das ist das, was ich aktuell mit der absoluten positionierung mache... hm grübel vielleicht gibt es auch eine möglich keit die bilder "wie an einer perlenkette" mittig zu zentrieren, allerdings entsteht trotzdem dieser "willkürliche" zeilenumbruch...

Auf den von mir verlinkten Design-Seiten sehen die Webseiten am besten aus, die aus einem großen Foto und sonst nichts oder nur 3 Links bestehen. Du bist Fotograf, hast also wsl. sogar solche Bilder, die Du verwenden könntest.

jetzt hock ich mit geröteten wangen hier, fotograf bin ich nicht, nur hobbyknipser und auf meiner seite sammel ich einfach nur irgendwelche serien, die für mich als serie begreifbar und in irgend einer form wichtig sind. dieser auszug aus meinem knipserleben startet 2002 (so lange gibts das schon) und endet quasi mit mir in hoffentlich entfernter zukunft mit html24punkt3 :)

das bedeutet an der seite ändert sich nicht viel, tröpfchen für tröpfchen kommt da, kaum erkennbar ein bisschen inhalt hinzu. die layouts die du empfohlen hast leben von inhaltlicher aktualisierung und austausch, das muss ich um jeden preis vermeiden.

Aber die typische Webseite einer Firma oder Schule (oder die Startseite des Wiki) benötigt m.E allerdings viel mehr Inhalt in Form von Text, Bildern und Links, sodass dort solche Konzepte mit großen Fotos m.E. nicht funktionieren.

genau :)