Webseite gestallten

[Klaus]

Hallo,

nachdem ich meine Scripte soweit fertig habe möchte ich mich an ein kleines Design wagen. Bis jetzt habe ich nur mit Photoshop gearbeitet. Mein Design geht in diese Richtung https://www.eversport.at Top Navigation inkl. Logo und Titelbild sowie das Suchfeld wird es bei mir auch geben. Wichtig ist mir, dass die Seite Mobil gut läuft.

Ich habe bis jetzt noch keine Seite, von daher kann ich nicht wirklich sagen mit welchen Geräten die User kommen. Das ganze wird ein Schlüsseldienst Verzeichnis.

In einigen Tutorials habe ich gelesen dass man erst mit einem Handy Design beginnen soll, wenn es auch gleichzeig vom Denken her etwas schwieriger ist. Deshalb möchte ich mich grob an das oben genannte Design halten.

Bevor ich loslege habe ich noch ein paar Fragen:

1. Wie groß sollte das Titelbild sein um auf ALLEN Geräten gut dargestellt zu werden?
2. Ist es Sinnvoll dieses mit width anzupassen oder lieber mit Media-Queries verschiedene Bilder zu laden?
3. Oben neben dem Logo, sollte bei mir eine Navigation sein. Schön groß aber nicht zu dominant. Gibt es eine Schriftgröße die man verwenden sollte?

Mein Ziel ist es bis Ende 2015 die Start-Seite fertig zu haben, ist dieses realistisch?

[Gunnar Bittersmann]

@@Klaus

Ich habe bis jetzt noch keine Seite, von daher kann ich nicht wirklich sagen mit welchen Geräten die User kommen.

Ich kann das sagen: Mit den verschiedensten.

1. Wie groß sollte das Titelbild sein um auf ALLEN Geräten gut dargestellt zu werden?

So groß wie nötig, so klein wie möglich.

1. Ist es Sinnvoll dieses mit width anzupassen oder lieber mit Media-Queries verschiedene Bilder zu laden?

Es ist sinnvoll, per srcset-Attribut (ggfs. auch per picture-Element) das für die jeweilige Viewportgröße passende Bild zu laden.

• Responsive Images in Practice Eric Portis, A List Apart
• Responsive Images Done Right: A Guide To <picture> And srcset Eric Portis, Smashing Magazine

1. Gibt es eine Schriftgröße die man verwenden sollte?

Mit 1em dürftest du nicht falsch liegen.

LLAP 🖖

[Klaus]

Hallo,

1. Wie groß sollte das Titelbild sein um auf ALLEN Geräten gut dargestellt zu werden? So groß wie nötig, so klein wie möglich.

hab mich für dieses Bild erstmal entschieden:
https://pixabay.com/de/handy-smartphone-schl%C3%BCssel-949095/

Dieses hat in der größten Version eine Auflösung von 4608px × 3456px reicht dieses um alle großen Bildschirme abzudecken, ohne dass ich links und rechts einen weißen Rand habe?

[Matthias Apsel]

Hallo Klaus,

Dieses hat in der größten Version eine Auflösung von 4608px × 3456px reicht dieses um alle großen Bildschirme abzudecken, ohne dass ich links und rechts einen weißen Rand habe?

Dafür reicht auch ein deutlich kleineres Bild. background-size existiert.

Bis demnächst
Matthias

[Klaus]

Hallo,

Dafür reicht auch ein deutlich kleineres Bild. background-size existiert.

warum reicht da auch ein deutlich kleineres Bild? Ich muss doch dafür sorgen dass dieses über die volle Breite geht. Also sollte ich erst einmal wissen wie groß in etwa der größte Bildschirm ist, den es derzeit in Gebrauch gibt?

[MrMurphy1]

Hallo,

das Grundproblem bei deinen Überlegungen ist, dass Hintergrundbilder vollkommen überflüssig sind. Je größer sie sind desto mehr bestraft du deine Besucher für den Besuch deiner Seite.

Hintergrundbilder sind nur für eine Art von Menschen wichtig: Webseitenschreiberlinge.

Gruss

MrMurphy

[Klaus]

Hallo,

sorry für die vielleicht harten Worte, aber so eine Aussage kann nur von jemanden kommen der von Grafikdesign / Webdesign NULL Ahnung hat! Gerade bei jungen Menschen ist ein Design mit vielen Bildern immer wichtiger / interessanter, siehe dazu auch aktuelle Tageszeitungen. Diese setzten immer mehr auf große (übergroße) Aufmacher. Umso größer umso besser.

[Matthias Apsel]

Hallo Klaus,

sorry für die vielleicht harten Worte, aber so eine Aussage kann nur von jemanden kommen der von Grafikdesign / Webdesign NULL Ahnung hat! Gerade bei jungen Menschen ist ein Design mit vielen Bildern immer wichtiger / interessanter, siehe dazu auch aktuelle Tageszeitungen. Diese setzten immer mehr auf große (übergroße) Aufmacher. Umso größer umso besser.

Hast du MrMurphys Aussage verstanden? „Je größer [die Hintergrundbilder] sind, desto mehr bestraft du deine Besucher für den Besuch deiner Seite.“ Es muss viel viel Datenvolumen für lediglich ein Hintergrundbild übertragen werden. Ein Bild, das keinerlei Inhalte transportiert, mehrere MB (bei deiner Planung von 4000 x 2000 Pixel) für einen Schlüsseldienst??

Bis demnächst
Matthias

[Klaus]

Hallo,

Hast du MrMurphys Aussage verstanden? „Je größer [die Hintergrundbilder] sind, desto mehr bestraft du deine Besucher für den Besuch deiner Seite.“ Es muss viel viel Datenvolumen für lediglich ein Hintergrundbild übertragen werden. Ein Bild, das keinerlei Inhalte transportiert, mehrere MB (bei deiner Planung von 4000 x 2000 Pixel) für einen Schlüsseldienst??

ich habe die Aussage sehr wohl richtig verstanden. Ist es meine Seite oder ist es die Seite von MrMurphys? Wenn in meinem Design ein großes schönes Titelbild vorkommt (was später auch für Werbung genutzt wird / werden kann) dann ist es so. Außerdem hat man soweit ich weiß mit Media-Queries die Möglichkeit Bilder in einem Handy Format erst gar nicht laden zu lassen. Bei einer Desktop Auflösung brauchen wir uns um ein paar MB keine Gedanken machen.

[Matthias Apsel]

Hallo Klaus,

Außerdem hat man soweit ich weiß mit Media-Queries die Möglichkeit Bilder in einem Handy Format erst gar nicht laden zu lassen. Bei einer Desktop Auflösung brauchen wir uns um ein paar MB keine Gedanken machen.

Oh wohl. Manchmal bin ich mit meinem Laptop über mein Handy im Internet. Du kannst von der Größe des Browserfensters nicht auf die Art der Verbindung rückschließen.

Bis demnächst
Matthias

[Der Martin]

Hallo,

Hast du MrMurphys Aussage verstanden? „Je größer [die Hintergrundbilder] sind, desto mehr bestraft du deine Besucher für den Besuch deiner Seite.“ Es muss viel viel Datenvolumen für lediglich ein Hintergrundbild übertragen werden. Ein Bild, das keinerlei Inhalte transportiert, mehrere MB (bei deiner Planung von 4000 x 2000 Pixel) für einen Schlüsseldienst??

vollkommen einverstanden: Für ein Bild, das lediglich der Gestaltung dient, also einfach nur hübsch aussehen soll, sind mehrere MB Datenvolumen ein absolutes No-Go. Dabei denke ich nicht nur an die Mobil-Besucher mit eventuell geringer Bandbreite oder vertraglich limitiertem Datenvolumen. Auch beim Surfen an einem Desktop-PC ist es zumindest störend, wenn visuelle Elemente (Bilder) erst mehrere Sekunden verzögert eintrudeln.

Allerdings bietet ja gerade JPEG die Möglichkeit, die Dateigröße auf Kosten der Qualität sehr stark zu reduzieren. Da lässt sich also auch ein 8MPx-Bild so weit komprimieren, dass es nur noch etwa 200kB groß ist und der Qualitätsverlust trotzdem kaum auffällt. Erst recht, wenn's nur Hintergrund ist.

Außerdem kann man auch die Bildauflösung deutlich reduzieren und das Bild dann mit background-size, wie du schon zweimal erwähnt hast, auf die gewünschte Größe skalieren.

So long,
 Martin

[1unitedpower]

Hintergrundbilder sind nur für eine Art von Menschen wichtig: Webseitenschreiberlinge.

Hintergrundbilder und -videos sind ein wichtiger Buildingblock für gelungenes Storrytelling. Unter den Awwwards Siegern finden sich viele gute Beispiele dafür. Das Datenvolumen spielt natürlich auch eine Rolle, aber es ist ja nicht so, als gäbe es keine technischen Maßnahmen, um den damit verbundenen Problemen entgegen zu wirken. Das eine Extrem ist hier nicht besser als das andere.

[Matthias Apsel]

Hallo Klaus,

Dafür reicht auch ein deutlich kleineres Bild. background-size existiert.

Also sollte ich erst einmal wissen wie groß in etwa der größte Bildschirm ist, den es derzeit in Gebrauch gibt?

Nein. background-size existiert.

Bis demnächst
Matthias

[Klaus]

Hallo,

Nein. background-size existiert.

was bringt mir die CSS Eigenschaft - background-size - wenn das Bild einfach zu klein ist und ich links und rechts einen weißen Rand habe bzw. das Bild nicht den ganzen Inhalt ausfüllt? Oder reden wir gerade aneinander vorbei?

[Matthias Apsel]

Hallo Klaus,

Nein. background-size existiert.

was bringt mir die CSS Eigenschaft - background-size - wenn das Bild einfach zu klein ist und ich links und rechts einen weißen Rand habe bzw. das Bild nicht den ganzen Inhalt ausfüllt?

Hast du den verlinkten Artikel gelesen?

Btw. Bedenkst du auch, dass die Browserfenster ganz unterschiedliche Formate haben können? Ein Hintergrundbild ist wirklich nicht mehr zeitgemäß. Es wird zudem vom Inhalt überdeckt, stört also ggf. auch beim Lesen, weil sich Text auf einem einfarbigen Hintergrund wesentlich besser erfassen lässt. Wenn du dann also deine Inhalte in einfarbige Kästen steckst, verdeckst du noch mehr von deinem Hintergrundbild.

Konzentriere dich auf dein Kerngeschäft. Das heißt übersichtliche Vorstellung der Leistungen des Schlüsseldienstes, denn du möchtest ja letztendlich neue Kunden aquivirieren. Und die kommen nicht wegen des schicken Hintergrundes und schon gar nicht, wenn sie wegen des schicken Hintergrundes einen Haufen inclusiv-Volumen verpulvern.

Bis demnächst
Matthias

[Klaus]

Hallo,

Konzentriere dich auf dein Kerngeschäft. Das heißt übersichtliche Vorstellung der Leistungen des Schlüsseldienstes, denn du möchtest ja letztendlich neue Kunden aquivirieren. Und die kommen nicht wegen des schicken Hintergrundes und schon gar nicht, wenn sie wegen des schicken Hintergrundes einen Haufen inclusiv-Volumen verpulvern.

schau dir mal bitte diese Seite von meinem Hoster an: https://www.checkdomain.de/ jetzt denken dir das schöne große Bild oben weg, würde die Seite dann noch immer ansprechend aussehen? Ich sage nein.

[1unitedpower]

Ein Hintergrundbild ist wirklich nicht mehr zeitgemäß.

Da zeichnet sich mir ein anderes Bild:

Nummer 6 und 7 der Top 10 Webdesign Trends 2015 von Sitepoint: HD Backgrounds und Expressive Photography

Auch bei den 2015/16 Trends von Awwwards tauchen Hintergrundbilder/-videos gleich mehrfach auf: Hero Images, Background Animations/Videos

The Next Web hat interessanter Weise einen gegenläufigen Trend festgestellt: Absence of large header background images, aber auch dort tauch dann Fotografie später wieder auf.

[1unitedpower]

Dieses hat in der größten Version eine Auflösung von 4608px × 3456px reicht dieses um alle großen Bildschirme abzudecken, ohne dass ich links und rechts einen weißen Rand habe?

4K Bildschirme und Fernseher sind heute schon durchaus üblich. Wenn äußere Ränder unerwünscht sind, kann man das Bild auch teilen und die Zwischenräume auffüllen, dass kommt natürlich sehr auf das Bild an. Das Stichwort hierzu lautet Content-Aware Scaling.

Im Wikipedia zu Seam Carcing gibt es ein gutes Beispiel dafür. https://en.wikipedia.org/wiki/Seam_carving. Allerdings wird hier das original Bild geschrumpft statt vergrößert.