Dynamische Website

[Neoaxizz]

Hallo Ihr lieben,

ich weiss, es ist nicht die feine Art beim ersten Post schon direkt eine komplexe Frage zu stellen, jedoch möchte ich ungern sinnlose Kommentare ins Forum posten, bevor ich zu meinem Anliegen komme.

Ich habe meine Website Reise Fotografie & Foto Reportagen leider mit Div-Order zugepflastert.
Daher ist meine Seite auch stock steif und ich muss meinen Content dem Design anpassen, was schwachsinnig ist.

Nach unendlichen Versuchen die CSS umzuschreiben, habe ich es Aufgegeben, da ich so nicht weiter komme.

Habt ihr vllt. einen Lösungsvorschlag, wie ich die Seite wieder Dynamisch bekomme?

Meine CSS

Bin für jede Hilfe Dankbar

Gruß Neo

[Basti]

Erstmal herzlich Willkommen hier, ich hoffe du wirst viel Spaß haben.
Übrigens ist es in keinster Weise schlimm, hier mit einer Frage in's Forenleben zu starten, dazu gibt es das Forum ja.

Jetzt zu deinem Anliegen.
Also dein Quelltext ist wirklich voll von div-Layern. Aber eigentlich sollte sich dein Layout doch super "variabel" umsetzen lassen, da im Grunde genommen doch nur ein Header und darunter zwei weitere Layer nötig sind.

Deshalb verstehe ich nicht, warum du so viele div-Layer gemacht hast und es dann nicht mehr "dynamisch" sein soll.

Wie lange beschäftigst du dich denn schon mit CSS und Layouts in CSS? Denn im Grunde ist dein Design wirklich nicht so schwierig, da ja noch nichtmals irgendwelche Grafiken im Design enthalten sind und alles schön über CSS Angaben geregelt werden kann.
Ansonsten kann ich dir mal das Tutorial zu dem Thema empfehlen, da wird nämlich genau das erklärt, was du für deine Seite benötigst:
- Div-Layer und CSS

Wenn's noch Fragen gibt kannst du dich ja melden

[Neoaxizz]

Vielen Dank für die rasche Antwort und die herzliche Begrüssung.

Mit CSS hab ich eigentlich nicht viel am Hut, da ich davon soviel verstehe, wie Schweine vom Fechten.

Ich habe mir die CSS zum größten Teil erstellen lassen, von jemandem der nur geringfügig mehr Ahnung hatte als ich.

Das ausprobieren bei mir ist genauso sinnvoll, als wenn man einer Frau sagt:
Bau mir mal kurz die Zylinderkopfdichtung aus.

Meine Versuche alles auf "auto" oder "100%" zu stellen war nicht wirklich erfolgreich, zumindest gab es nicht den erhofften Effekt.

Lese mir aber ersteinmal aufmerksam den von dir geposteten Artikel durch.
Vielen Dank vorerst.

[Persisteus]

Basti, ich denke, das ist nicht der Punkt. Schaun wir uns mal folgenden Quelltext an, der relativ oben steht:

Code: Alles auswählen

<div class="serie">
  <div><a href="/brasilien/kategorie-auswahl.htm"><img src="/hp_pic/foto-brasilien.jpg" alt="" width="60" height="60">
  Fotografie Brasilien
</div>

<div class="serie">
<div class="thumbserie"><a href="mexiko/kategorie-auswahl.htm"><img src="/hp_pic/foto-mexiko.jpg" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'" alt="Reise Fotografie Mexiko" width="60" height="60" border="0"></a></div><br><div align="left"><strong>Fotografie Mexiko</strong></div></div>

<div class="serie">
<div class="thumbserie"><a href="thailand/kategorie-auswahl.htm"><img src="/hp_pic/foto-thailand.jpg" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'" alt="Reise Fotografie aus Thailand" width="60" height="60" border="0"></a></div><br><div align="left"><strong>Fotografie Thailand</strong></div></div>

<div class="serie">
<div class="thumbserie"><a href="portugal/kategorie-auswahl.htm"><img src="/hp_pic/foto-portugal.jpg" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'" alt="Reise Fotografie aus Portugal" width="60" height="60" border="0"></a></div><br><div align="left"><strong>Fotografie Portugal</strong></div></div>

<div class="serie">
<div class="thumbserie"><a href="venezuela/kategorie-auswahl.htm"><img src="/hp_pic/foto-venezuela.jpg" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'" alt="Reise Fotografie aus Venezuela" width="60" height="60" border="0"></a></div><br><div align="left"><strong>Fotografie Venezuela</strong></div></div>

<div class="serie">
<div class="thumbserie"><a href="reportagen/kategorie-auswahl.htm"><img src="/hp_pic/foto-reportage.jpg" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'" alt="Foto Feportagen aus aller Welt" width="60" height="60" border="0"></a></div><br><div align="left"><strong>Foto Reportagen </strong>aus aller Welt</div></div>

Hier sind viele unnötige Divs, sogar ein simpler Hover-Effekt wird mit JavaScript erzeugt! So viel Aufwand für 6 Links.
Da hilft nur noch eins: Komplett neu machen! Und keinen grafischen WYSIWYG-Editor benutzen, sondern alles selbst schreiben. Nur so kann man alles kontrollieren.

[Basti]

@Persisteus: Ja, das wollte ich damit eigentlich auch andeutetn, vielleicht hätte ich mich ein bisschen anders ausdrücken sollen.

Meiner Meinung nach war der Quelltext nämlich viel zu umfangreich und komplex für ein vergleichsweise simples Layout, deshalb wollte ich damit andeuten, dass er sich das Tutorial mal ansehen soll und dann die Grundstruktur, die dort angegangen wird, auch auf seine Seite anwenden kann.
Im Klartext heißt das natürlich, dass das ganze nochmal neu gemacht werden sollte, aber ich denke das lohnt sich dann auch.

[Neoaxizz]

Hallo Ihr lieben,

ich habe nun ein mal das Design meiner Website geändert und würde gerne eure Meinung dazu hören.

Ziel war es, die Seite Dynamisch zu bekommen, was mir damit gelungen ist, jedoch würde ich auch gerne wissen, ob die Usability sich verbessert hat oder ob ihr sie für "stressig" haltet.


Beste Grüße

Robin

Edit: Nochmal der Link... Reise Fotografie

[SilentStormer]

Jetzt arbeitest du mit Tabellen ... ob das so ein Fortschritt war? Davon abgesehen könnte man den Fließtext immer noch optimieren. Du definierst ja pro Absatz ein neues <p>, also viel Schreibaufwand. Es würde reichen, den ganzen Text als ein <div> zu definieren und die entsprechenden speziellen Formatierungen dann zB mit <span> zu erledigen.

[fluuu]

Hallo,

bin jetzt auch auf den Thread gestoßen und habe mir die Website angeschaut. Der Quelltext ist nach wie vor sehr umständlich, da könnte man sicher noch vereinfachen. In CSS sind nur zwei Farbangaben, allerdings zweimal die selbe Farbe. Tabellen-Layout ist technisch möglich wenn man kein CSS verwenden möchte.

Nun zum Design und zur Benutzerfreundlichkeit.
Schwarz und Grau ist für Fotowebsites seit Lightroom wohl moderner Standart, warum nicht, obwohl weiße Schrift auf schwarzem Grund für das Auge wesentlich anstrengender ist als schwarze Schrift auf Weiß.
Die Navigationsleiste ist ewig lang, ist da nicht eine verschachtelte Navigation sinnvoll?

In der Mitte der Seite sind die Länderfahnen und daneben steht Fotografie ... aber es gibt keine Fotos, nur ein You Tube Video. Was ist denn Deine Zielgruppe? Welche die noch nie etwas von Brasilien oder den anderen Ländern gehört haben?

Über die Navigation kommt man dann zu Fotos...
Oh nein, die Galerie besteht aus der allseits bekannten Fertigsoftware, vollautomatisch, steril und soft. Da schaue ich nicht mehr weiter.
Dein Versuch eine kommerzielle Website zu gestalten tut mir als Webdesigner und die Betohnung liegt auf kreativem Gestalten und Programmieren, im Herzen weh. Die Website hat keine eigenen Designideen, alles vom kommerziellen abgekupfert, da vergeht mir die Lust mich mit den Fotos zu beschäftigen, tut mir leid.

gruß fluuu

[Neoaxizz]

Ok, das war schmerzhafte Kritik!
Aber ohne diese komme ich wohl nicht weiter

Kurz zum Design:

Mittels CSS was zu basteln ist für mich schier unmöglich, da ich mich dabei zu wenig auskenne. Ergo versuche ich mich an schlichte und leichte Sachen zu halten.

Ich sehe jedoch jetzt schon über Google Analytics, dass die Umstellung der Seite mir einen kleinen Vorteil zwecks Besucher - vor allem aber in Bezug auf Listung in den Serps gebracht hat.

Zweck der Homepage:

Ich habe die Seite nicht für mich erstellt, sondern für meine Freundin. Ich versuche Ihre Reise Fotografie zu präsentieren, denn wer will schon, dass seine Erinnerungen im Schrank alt werden.

Werbung habe ich auf die Seite eingebaut, um die Kosten für den Webspace wieder reinzubekommen und um später via AdWords zu werben.

Aufbau:
Es ist relativ schwer eine Fotoseite zu erstellen, die NUR Fotos beinhaltet. Ohne Text kann auch keine Listung bei Google erreicht werden. Ich möchte dem Nutzer auch etwas mehr bieten als nur Fotos. Er soll über das jeweilige Land ein Paar wichtige Informationen bekommen und sich ein eigenes Bild über das Leben dort machen können.

Die Fotos sind zum grössten Teil Dokumentationen sozialer Themen (was kaum ein Fotograf noch macht) ergo soll das Land nicht nur als Reiseland gesehen werden, sondern auch die Missstände, die dort herrschen.

Wie also kann ich ein Design erschaffen, dass es mir ermöglicht, die Menuführung zu vereinfachen und Fotos anschaulich zu präsentieren?
(Das ist nicht trotzig gemeint, sondern eine ernste Frage)

Beste Grüße

Robin

Edit: was ich vergass... Danke für eure Kritik und Hilfe!!!

[fluuu]

Dein Anliegen ist gut mit dem Thema und die Fotos selbst sind auch nicht schlecht.
Hier in der westlichen Welt etwas Versöhnliches mit armen Ländern und Verständnis für das Fremde zu erregen ist o.k. aber doch nicht mit Eckdaten wie sie in jedem Lexikon stehen oder mit kommerzieller Standartsoftware.

Warum ist die ganze Seite nicht aus der Sicht Deiner Freundin als Reisende und Dokumentarfotografien aufgemacht. Sie ist es, die ihre Sicht auf uns Betrachter vermittelt. Das ist doch das Spannende, ihre persönliche Sicht, wie bei einem Buchautor und nicht diese anonyme und unpersönliche Form des Allerweltsdesigns wie bei Programmen die als Werkzeug dienen. Erwähne Deine Freundin als reisende Autorin und schon kommst Du ganz automatisch auf ein Design das zu ihrem Wesen passt, individuell und persönlich. Die Fotos und das Thema haben es verdient, sie sind gut.

Kann Dir keine Vorschläge machen, kenne Deine Freundin nicht, überdenke das alles noch einmal und setz Dich womöglich hin und seniere darüber wie diese Fotos von Deiner Freundin individuell präsentiert werden könnten.
Im Moment ist es ein Design als unpersönlicher Standart wie es Fotoprogramme als Werkzeug haben aber nicht die Präsentation von Fotos Deiner Freundin mit dem Thema arme Länder auf der Welt.

Wenn Du das soweit wie bisher hinbekommen hast, dann schaffst Du auch etwas anderes, brauchst blos eigene kreative Ideen zum Gestalten.
Nun weiß ich nicht wieweit Deine Freundin selbst präsent sein möchte, meine Freundin möchte überhauptkeine Website, nicht erwähnt werden, selbst das Fotografiertwerden hängt von der Stimmung ab.
Bin selbst der extrovertierte Fotograf bzw. Webdesigner und erzähle gerne Geschichten, egal in welcher Form.
Versuche die Geschichte Deiner Freundin als Weltenbummlerin per Website mit ihren Fotos zu erzählen...

gruß fluuu

[Neoaxizz]

Ich danke dir vielmals.

So Meinungen und Informationen bringen mich weiter.
Mit den Texten schreiben, damit ihre Sichtweise zum Ausdruck kommt ist eine klasse Idee, mal schauen, wie sich so etwas Zeit technisch unterbringen lässt.

Bis heute habe ich das ganze auf diese Art noch nicht betrachtet. Ich persönlich denke eigentlich immer, das die Meinung anderer wenig zählt und daher auch wenige Menschen persönliche Betrachtungsweisen durchlesen etc. Bilder sagen halt mehr als Worte dachte ich immer.

Aber nun gut. Versuche ich das ganze mal so anzugehen.
Vielen dank von meiner Seite und auch von meiner Freundin.

Beste Grüße

Robin