Kritik zu erstem Entwurf

[Waegi]

AW: Kritik zu erstem Entwurf

Ich melde mich nochmal kurz, was würdet ihr als opitmale Grundmaße für eine Website verwenden? Also von der Breite her und das Headerbild, ich bin mir da sehr unschlüssig, für die Breite habe ich schonmal etwas von ca. 1200 Pixeln gehört, jedoch sehe ich viele, die so bei knapp 1000 maximal liegen. Also mit der Breite meine ich das gesamte Außenmaß, also den äußersten Rand und dann evlt. noch wie breit der Contentbereich ungefähr sein könnte.

Wäre über eure Hilfe sehr erfreut, da ich mir das sehr unschlüssig bin.
Gruß Waegi

 

[Raphale]

AW: Kritik zu erstem Entwurf

Hi Waegi,

Also ich hatte ne vorgabe von 960 px breite... die war auch gut für alle Geräte (tablet/smartphone/desktop)!

Allerdings wird heutzutage am meisten die 1920px auflösung benutzt (Dekstop) da siehts dann schon mickrig aus

(mein Tipp: )
Versuchs mal mit Liquid design

Ab da bin ich auf Responsiv design umgestiegen, um jedem Gerät eine angepasste Breite zu bieten

1920px = Content 1200px
1920< (max-1920px=Standart)= 940px

LG
Raphaele

 

[Waegi]

AW: Kritik zu erstem Entwurf

Hi Raphale,

erstmal danke für deine Antwort, hab ich dich also richtig aufgefasst, dass du eher zu 1200 als Breite für den Content tendierst, das heißt die website an sich noch breiter? Und dann eben durch Responsive Design das je nach größe des Monitors anpassen lassen?

Und was genau meinst du mit Liquid Design, das steht ja für flüssiges Design, das nicht fix ist, müsste ja aber sozusagen dann das selbe wie Responsive Design sein.

mfg Waegi

 

[Raphale]

AW: Kritik zu erstem Entwurf

Also eins mal vorweg!

Ich bi nselber anfänger! aber soweit ich mich da reingefummelt habe...

Ist liquid = content und inhalt mit Prozent angaben in der Breite.

Und Responsive = media querries (@media screen/handheld/min-width/max-width.. etc.)

Arbeite selber zum erstenmal mit Responsive..mit liquid hab ich mich noch nicht auseinander gesetzt!

Wenn du eine Statische Website baust(wie die hier das Forum) passen die Geräte die Auflösung selber an (tablet)..nachteil: beim smartphone müsste man rumzoomen oder eine handheld css schreiben.

Hier im Forum ist es z.B. 1240 px Content...finde ich angehnehm und ausreichen!

Hoffe alle Angaben sind richtig und Helfen dir
Wenn du dich für responsive oder liquid entscheiden willst kann ich dir gerne ein paar links schicken zum lernen! oder hier mal ein Beispiel für repsonsive = http://owltastic.com/

MFG Raphael

 

[Waegi]

AW: Kritik zu erstem Entwurf

Achso ok, danke für die Antwort, soweit ich das bis jetzt immer verstanden habe ist responsive insgesamt das, dass sich durch das skalieren die Elemente der jeweiligen Breite des Mediums anpasst, also dass sich das automatisch anpasst, durch die Prozent- und EM-Angaben in der CSS. Bin zur Zeit auch daran, das Tutorial zum Responsive Webdesign von Pascal Bajorat durch zu machen, da geht es bis jetzt halt hauptsächlich darum, dass man mit den Prozentangaben und em-Angaben für die Schrift arbeitet, bin noch nicht ganz durch.

Aber dankeschön für deine Hilfe mal, ich warte noch auf weitere Antworten, und was die anderen dazu meinen.

Mfg Waegi

 

[Myhar]

AW: Kritik zu erstem Entwurf

Ist liquid = content und inhalt mit Prozent angaben in der Breite.

Und Responsive = media querries (@media screen/handheld/min-width/max-width.. etc.)

Das kann man so nicht sagen. Liquid heißt flüssig und bedeutet, dass die breite/höhe nicht fix vorgegeben ist. Liquid ist also responsive, responsive muss aber nicht liquid sein. Obwohl, wenn man responsive ordentlich umsetzt, sollte es "liquid" gemacht werden. Deshalb stellt sich die Frage, ob man es responsive oder liquid macht meiner Meinung nach nicht.

Wenn du eine Statische Website baust(wie die hier das Forum) passen die Geräte die Auflösung selber an (tablet)..nachteil: beim smartphone müsste man rumzoomen oder eine handheld css schreiben.

Nein, das Handy passt die Auflösung nicht an. Sie rendern sie in einer fixen Auflösung und zoomen ganz hinaus. Der Nachteil ist, dass man hineinzoomen muss und die Benutzung der Seite sehr mühsam wird.
Auch sollte man die breaking Points (Die Punkte, an denen das responsive Layout umspringt) nicht an Geräteauflösungen sondern an den Inhalt der Seite anpassen.
Für gute Beispiele schau auf mediaqueri.es, öffne eine beliebige Seite und verkleinere deinen Browser auf einen beliebigen Wert. Du wirst sehen, dass der Inhalt passt... Da wird im Idealfall nicht auf ipad, etc. Rücksicht genommen. Dort passt die Seite einfach

 

[Waegi]

AW: Kritik zu erstem Entwurf

@Myhar, wie meinst du das mit dem liquid und responsive jetzt, ich hab bis jetzt nur etwas von responsive gehört, was genau ist da jetzt der Unterschied zu liquid?

Und was denkst du wäre eine gute Grundauflösung für die Website.

mfg Waegi

 

[Myhar]

AW: Kritik zu erstem Entwurf

Liquid heißt auf deutsch flüssig und wird im Bezug auf Webdesign dann verwendet, wenn ein Element keine fixen Breiten hat, sich der Breite also anpasst. Gibt man einem Element eine feste Breite (zB 1000px), dann ist es nicht mehr flexibel (es ist nicht mehr "flüssig/liquid").
Responsive Design kann man sehr wohl auch mit nicht "liquiden" Elementen umsetzen, indem man einem Element zB einmal 1000px, bei einem anderen media-query 700px etc. an Breite gibt. Man kann und sollte auch, da das der Sinn von responsive ist, den Elementen eine variable Breite geben (100%, 70%, etc.).
Analog gilt das natürlich auch für die Höhe. So viel zur genaueren Erläuterung zwischen responsive und liquid.

Bezüglich der Grundauflösung: Wie schon einen Post vorher geschrieben gibt es die nicht. Die media-query points sollen sich nach deiner Website richten und nicht umgekehrt. Auch hängt es davon ab, welchen Weg der Gestaltung du gehst.
Fängst du mit mobile (kleine Version) zuerst an und arbeitest dich zur großen Version hin? Oder umgekehrt? Meistens wird ja, wenn nicht ein bestehendes Design angepasst werden muss, mit mobile angefangen. Und dann werden die breaking points danach gesetzt, wann das Design welche verlangt. Die Navigation besteht aus 7 Navigationspunkten und ist mal mindestens 1100px breit? Dann ist eine gute "Grundauflösung" 1100px und du musst unter dieser Auflösung dir eine alternative für deine bestehende Navigation überlegen. Hast du nur 3 Navigationspunkte, welche zusammen mindestens 400px breit sind, dann sind die 1100px für dich sinnlos.
Also hör auf, nach der richtigen und endgültigen Auflösung zu suchen und arbeite an einem guten Grundkonzept, dann ergeben sich die Auflösungen von alleine.

 

[Waegi]

AW: Kritik zu erstem Entwurf

Erstmal zu der Erklärung, danke dafür, bisher hab ich das aus den Tutorials, die ich hier als Videos hatte und auch selbst an Erfahrung gesammelt hab, dass Responsive Webdesign, so gestaltet wird, dass sich die Elemente automatisch an die Breite des Mediums anpasst, heißt also, dass ab einem bestimmten Punkt das umbricht, zum Beispiel die Sidebar wegfällt, die Navigation dann untereinander ist und so weiter.

Zu dem wegen der Auflösung, es war einfach so, ich bin mir da sehr unsicher, und hab gedacht, ich frag zur Sicherheit mal nach, was so empfohlen wird, wenn du jetzt meinst, man sollte nach der Navigation gehen, jedoch wenn die Navigation nur 400px breit ist, dann alles so zu machen is ja auch ned gut, das heißt hab ichs so richtig verstanden, erstmal nach der Navigation schauen, wenn diese jetzt jedoch sehr schmal ist, dann pass ich den Content entsprechend von der Breite her an, also dass er breiter ist, und nicht nur 400px, weil 400px, sind ja relativ wenig im Content.

mfg Waegi

 

[Myhar]

AW: Kritik zu erstem Entwurf

Man sollte nicht nur nach der Navigation gehen. Man soll nach dem gesamten Content gehen. Hat man zwei Spalten, wobei eine Spalte eine kleine Nebenspalte ist? Und macht die kleine Nebenspalte unter 200px Breite keinen Sinn? Wie klein darf dann die Hauptspalte werden, damit sie nicht zu klein wird im Verhältnis zur kleinen Spalte? Reichen 500px für die Hauptspalte aus? Wenn ja, dann ist ein breaking-point bei 500+200=700px.
Sind die beiden Spalten jedoch gleich breit, dann ist ein breaking-point wohl bei 500+500=1000px.
Die von mir verwendeten Zahlen (in diesem und im letzten Post) sind natürlich nur irgendwelche Zahlen. Das erwähne ich deshalb, nicht dass du dich jetzt auf die frei erfundenen 400px von mir stürzt

Ich hoffe, ich habe es jetzt verständlich erklärt, was ich meine.

 

[Waegi]

AW: Kritik zu erstem Entwurf

Danke, weil ich war mir halt unklar, was so ne Obergrenze wäre, egal ob man Responsive oder nicht macht, da es ja doch noch einige mit etwas kleineren Bildschirmen gibt, für die es auch ohne Umbruch und ausblenden mancher Elemente angezeigt werden soll. Deshalb habe ich halt gefragt, da gings mir eher um die Obergrenze so, da ich mir damit nicht so sicher war, wie das gehandhabt wird, da ich das ja nicht oft mache.

mfg Waegi

 

[Raphale]

AW: Kritik zu erstem Entwurf

wenn deine Zielgruppe unter full hd auflösung (1920p) surft...

würde ich dir empfehlen...den Content UM die 1000px breite darzustellen (min 900 max 1280) ist perfekt für laptop/tablets/kleine bildschirme.... wenn es dir dann zu klein ist auf full hd (1920px) dann benutz einfach ein media querrie ( @media all/screen and (min-width:1920px){#content {with:1400px;}})

Hoffe das hilft ^^

MFG Raphaele

 

[Waegi]

AW: Kritik zu erstem Entwurf

Ok, danke für die Information, werde mal schauen, die 1200px kamen mir schon breit vor, werde wahrscheinlich so im Bereich von 1000-1100px gehen, danke für die Antwort.

Mfg Waegi

 

[kiryx]

AW: Kritik zu erstem Entwurf

Finde auch das das Bild oben zu groß ist! Dadurch das darunter auch noch sehr viel Text ist wirkt das ganze überladen.
Etwas weniger von beiden und schon ist es deutlich übersichtlicher!

Die Farben sind Geschmackssache, aber wenn es zum Beispiel Farben sind die zu der Firma gehören unumgänglich.

 

[Zeusfeld]

AW: Kritik zu erstem Entwurf

Servus Waegi,

hier ein paar kleine Verbesserungen die ich mir vorstellen könnte:

• Verzichte auf den Rahmen beim Textbereich
• schwarze Schrift auf weißen Grund halte ich nicht für optimal im Web, probiere doch mal einen dunklen Grauton, das sollte besser wirken.
• Erhöhe doch mal den Abstand zwischen den Textzeilen.
• Bei den Überschriften würde ich mit einer zweiten Schriftart arbeiten.
• Bei Navi und Footer sehe ich folgendes Problem: Gerade bei Widescreen Monitoren mit einer hohen Auflösung sieht es doof aus, wenn diese Bereiche (deren Hintergrund) "unendlich" nach links und rechts laufen. Ich empfehle dir bei der gewünschten maximalbreite einen schönen optischen Cut zu machen, damit die Webseite noch wie aus einem Guss wirkt.

Ich hoffe ich konnte dir ein paar Ideen mit auf den Weg geben =)



BG
Benjamin

 

[Waegi]

AW: Kritik zu erstem Entwurf

Hallo Zeusfeld,

Vielen Dank für deine Antwort, jedoch werde ich mir ein neues Design überlegen, was ich auch schon eine Seite weiter vorne geschrieben hab, weil das Design eigentlich nicht viel Wiedererkennungswert haben, was auch mein Vater ncoh meinte.

Mfg Waegi

 

[Waegi]

AW: Kritik zu erstem Entwurf

So, ich wollte mich jetzt nochmals melden, und zwar habe ich mir ein paar Gedanken über ein neues Design gemacht, habe etwas mehr an die alte Website angeknüpft, was meinem Vater auch schon mehr gefallen hat. Dabei ist dann auch das hier rausgekommen:



Im rechten Bereich des Contents, soll der Text folgen, im grünen dazu dann die Bilder, so ist es zur Zeit geplant, ich bin auch schon daran die Seite in HTML und CSS umzusetzen, bis jetzt klappt es sehr gut, sobald sich mal richtig was vorzeigen lässt, kommt hier natürlich nen Link rein.

mfg Waegi

 

[Raphale]

AW: Kritik zu erstem Entwurf

1000 mal besser!!! Bin mal gespannt wie es mit Inhalt und Bildern aussehen wird !

viel glück und lg

Raphaele

 

[Waegi]

AW: Kritik zu erstem Entwurf

Dankeschön, muss das aber von der Breite her noch ein bisschen anpassen, da die 1100 doch zu breit sind.

Mfg Waegi

 

[Merline]

AW: Kritik zu erstem Entwurf

Superschick, gefällt mir sehr!
Ich bin gespannt, wie's weitergeht, halt uns auf dem Laufenden!