Erstellen Design von Websites [Archiv]

Daltimo

2007-07-11, 12:43:28

Dreamweaver habe ich, aber da ein ordentliches Design zu erstellen ist schwer. Hab mich schon im Internet umgeschaut um ein paar tut´s zu finden, so richtig fündig geworden bin ich allerdings nicht!?
Photoshop ist zwar ein gutes Programm, doch bin ich da nicht wirklich ein Meister, deswegen kommt es für mich nicht wirklich in Frage.

Sonst habe ich meine kleinen einfarbigen und normalen Seiten immer in "Phase5" geschrieben, für mich ein super Programm, doch für ein ordentliches Design nicht das richtige Programm.

Könntet ihr mir ein paar gute Tut Seiten geben für Dreamweaver oder mir erklären wie ich da ein ordentliches Design auf die Beine stelle?

tomtom

2007-07-11, 16:12:59

Ich verwende für das Design an sich meistens nur Photoshop. Das Design wird dann gesliced und sämtlichen HTML- und CSS-Code schreib ich dann in Phase5 (toller Editor imo). Wenn man (X)HTML und CSS beherrscht, braucht man Tools wie Dreamwaever gar nicht bzw. selten. Solche Programme erzeugen meiner Meinung nach teilweise zuviel überflüssigen Code, was man meistens selber eleganter lösen könnte. Aber da scheiden sich ja bekanntlich die Geister ;)

Grüße

Daltimo

2007-07-11, 16:18:24

Wenn man (X)HTML und CSS beherrscht, braucht man Tools wie Dreamwaever gar nicht bzw. selten.

Richtig, deswegen wollte ich auch nur das Design da machen, wobei das ja fast die eigentliche Seite ist. Kennst du ein Tut oder so wo das beschrieben ist wie man das mit Photoshop macht?

Gertz

2007-07-11, 17:24:21

Richtig, deswegen wollte ich auch nur das Design da machen, wobei das ja fast die eigentliche Seite ist. Kennst du ein Tut oder so wo das beschrieben ist wie man das mit Photoshop macht?
Klar. Such nach "Bunker" hier im Forum... in einem seiner beitraege ist nen link, zu einem Video..

Daltimo

2007-07-11, 17:40:03

Ja hab sie gefunden

Einmal:
http://www.talk-mania.com/forumdisplay.php?f=2

Zweimal:
http://www.sitepoint.com/article/design-website-photoshop

Gast

2007-07-12, 14:04:59

Ich frag mich nur wie man sich als Anfänger einfach mal so Photoshop leisten kann...
Designen lernt man leider nicht durch Tutorials, hab ich selber gemerkt. Angefangen bei einer Idee (kommt meistens beim Klobesuch), geht's bei mir los mit einer kleinen Skizze. Die wird dann in einem Bildbearbeitungsprogramm umgesetzt und verbessert. Ich benutze dafür Gimp ;). Wenn ich und der Kunde zufrieden sind, geht's an die Umsetzung mit Dreamweaver und Editor.

Daltimo

2007-07-12, 14:10:59

Ich hab mal eine Version von der Schule bekommen, deswegen habe ich es. Ich habe mir auch eine Skizze gemacht, werde das ganze wahrscheinlich mit Tabellen realisieren, das ist das was ich kann.

Das Design und alles versuche ich mit Hilfe von Dreamweaver zu realisieren, bzw. mit ein paar einfach erstellten Bildern.

Wollte nur mal gern wissen wie man mit Dreamweaver ein richtiges Design hinbekommt.

/dev/NULL

2007-07-12, 15:03:05

Dreamweaver taugt nur zum umsetzen, ein Design bekommt man damit nicht.. das entsteht in Deiner Fantasie und gelangt dann per Photoshop, Powerpoint oder Bleistiftskizze zu anschaubaren Ergebnissen.

Ich setze Webseiten meist mit Textpad und/oder RapidCSS/Htmlpad (http://www.blumentals.net/products/)
Aber das Design macht jemand anderes, dafür habe ich leider null Gespür.. nach 3 Tagen hab ich 2 Strichmännchen und häßliche Farben, meine Freundin setzt sich hin und nach 1 Stunde hat sie was schönes..

Meine Freundin ist Webdesignerin (ausgebildet, 5 Jahre Erfahrung und ...) die nimmt Photoshop und Dreamweaver.. produziert aber immer ein Table Design.. grausam, aber sie meint das geht schnell.. ist eben Designerin, keine Programmiererin.

Daltimo

2007-07-12, 16:12:56

Naja ich hab das jetzt extra so gemacht das ich nur eine Grafik benötige, sonst nur kleine die sich eigentlich einfach einbinden lassen sollten. Ich kann ja mal eine groppe Skizze anfertigen.

Daltimo

2007-07-12, 16:27:52

http://img412.imageshack.us/img412/1210/skizzear4.th.png (http://img412.imageshack.us/my.php?image=skizzear4.png)

Das ist in etwa meine Vorstellung. Sollte eigentlich machbar sein mit meinem Wissen. Erreichen wollte ich das ich mein CSS Wissen wieder anwende und das ich es noch erweitern kann.

Wie man sieht richtige Grafiken benötige ich eigentlich kaum.

Als Hilf und Grundlage habe ich mir mal ein Template runtergeladen und mir das mal richtig genau angeschaut. Auch dazu habe ich noch eine Frage:

<table width="728" align="center" cellspacing="0" cellpadding="0" border="0" >
<tr>
<td align="right" class="li" > </td><td >
<table align="center" width="700" cellspacing="0" cellpadding="0" border="0" id="top" >
<tr>
<td valign="top" ><span id="hpname">  Name der Homepage  </span></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td width="100%" valign="bottom" class="buleiste" >
<table id="menu2" width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="14%" ><a href="index.html" onfocus="this.blur()">Kontakt</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Home</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Preise</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Impressum</a></td>
<td width="14%"><a href="index.html" onFocus="this.blur()">Gaestebuch</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Shop</a></td>
<td width="14%"><a href="index.html" onfocus="this.blur()">Angebote</a></td>
</tr>
</table>

</td>
</tr>
</table>

Wie man sieht besteht die Seite nur aus Tabellen, welche Bewandnis hat aber die linke und die rechte Tabelle, das versteh ich nicht so recht? Was erreiche ich damit?

ezzemm

2007-07-13, 07:14:16

gr@fz@hL

2007-07-13, 09:56:27

Eine feine Seite für CSS ist auch css4you (http://www.css4you.de/). Und zum Designen einer Seite brauchts zu Beginn meiner Meinung nach nicht mehr als Bleistift, Papier, einer Idee und ein bißchen Spieltrieb, um das ganze in einem einfachen Editor (phase5 oder notepad++) umzusetzen. So lernt man wohl am meisten und stellt auch schnell fest, was geht und was nicht.

Daltimo

2007-07-13, 10:19:38

Ich kann dir nur abraten die komplette Struktur der Seite in Tabellen zu quetschen. Viel einfacher und eleganter geht das mit CSS.
Ich habe auch ne Weile gebraucht um mich von den Frames die ich immer genutzt habe loszusagen. Aber so schwer ist CSS nicht.

Schau mal hier: http://www.forum-3dcenter.org/vbulletin/showthread.php?t=160870&highlight=css

Ja ich hab auch ein Buch hier, da steht das am Ende auch drinnen wie man das macht. Wollte halt Anfangs das ganze mit Tabellen machen und nach und nach, die Seite tabellenfrei bekommen.

Obwohl kann ich ja auch gleich machen:rolleyes:
Nagut, dann fang ich ganz von vorn an....hehe

Daltimo

2007-07-14, 12:15:39

Wenn ich das ganze ohne Tabellen darstellen will, wie ihr mir es geraten habt brauche ich dann die Atribute wie padding, margin usw. richtig?

huha

2007-07-14, 12:24:48

Wenn ich das ganze ohne Tabellen darstellen will, wie ihr mir es geraten habt brauche ich dann die Atribute wie padding, margin usw. richtig?

Lies dir bei http://de.selfhtml.org mal das Kapitel über CSS durch, experimentiere ein bißchen mit einfachen Seiten rum und versuche die Konzepte zu verstehen.

Das Problem bei "Designern" ist, daß sie die technische Realität mißachten und deshalb furchtbare Seiten schreiben: Verschiedene Browser stellen verschiedene Dinge anders dar. Man kann jetzt versuchen, das Zeug mit dutzenden CSS-Hacks hinzubiegen oder man kann sich überlegen, wie man eine Seite bastelt, bei der es egal ist, ob ein Browser einen Text jetzt 5 Pixel weiter rechts anzeigt.
Natürlich kann man dann nicht seine 1337 P0t0sh0p sk1llz unter Beweis stellen und Seiten basteln, die mehr Slices haben als normale Bildschirme Pixel, aber dafür sehen die dann in mehr als einem Browser ordentlich aus ;)

Tabellenlayouts sind ungünstig. Arbeite dich in CSS ein, experimentiere und irgendwann hast du raus, wie du elegant Seiten mit CSS basteln kannst. Erst eine Tabellenseite zu erstellen und sie dann von ihren Tabellen zu befreien ist etwas, was ich mir freiwillig nicht antun würde, da lästig und weder lehrreich noch interessant. Man frickelt letztendlich so lange rum, bis es funktioniert.

-huha

dead.line

2007-07-14, 12:25:33

richtig.

das sind mit die wichtigesten attribute im CSS. (ich hab auch erstmal ne weile gebraucht um von den tables wegzukommen. und ich bin immer noch am lernen ^^ )

Also für den Site aufbau wie auf deiner skizze brauchste 2 oder 3 klassen.

Du kannst z.B. das Headbanner und die Navi Leiste in eine Klasse packen. (Bild als hintergrund setzen). Für den Content dann noch eine Klasse erstellen. Wirst aber höchstwahrscheinlich dann noch mehr klassen erstellen müssen, für z.b. überschriften in deinem content feld.

Daltimo

2007-07-14, 12:34:10

Ich hab das Buch hier (http://www.amazon.de/Cascading-Stylesheets-Anspruchsvolle-Websites-gestalten/dp/3898642488/ref=sr_11_1/302-9028735-6692026?ie=UTF8&qid=1184409160&sr=11-1), das ist echt richtig richtig gut. Ich denke damit werde ich das auch sehr gut lernen. Auch mal so nebenbei als kleine Buchempfehlung;)

dead.line

2007-07-14, 13:13:19

DanMan

2007-07-14, 15:09:02

Meiner Meinung nach ist das Hauptproblem der Leute, die Tabellen-Layouts immernoch bevorzugen, dass sie in ihrem "In-Boxen-denken" feststecken. Sie bauen sich ein Gründgerüst aus Tabellen und klatschen dann in die Tabellenzellen (was'n Wort...) ihre eigentlichen Inhalte.

Genau das ist aber bei CSS-basiertem Layout kaum mehr nötig. Man formatiert einfach die einzelnen Elemente direkt so, wie und wo sie sein sollen. Das ist ein fundamentaler Unterschied, den alt eingesessene Webentwickler nur sehr zäh begreifen. Sie packen trotzdem immer noch alles in Divs, auch wenn sie das betreffende Element direkt formatieren könnten.

rotalever

2007-07-14, 16:16:21

Möchte auch mal meinen Senf dazugeben..
Bin gerade dabei eine Webseite neu zu designen. Früher hatte ich immer Tabellen gemacht, jetzt wollte ich mal CSS anschauen. Soweit so gut... Alles fertig gemacht und im Firefox angeschaut und es sah gut aus. Dann im Opera angeschaut und es sah gut aus. Dann im IE5,5.1,6 Angeschaut und es sah scheiße aus... Ein wenig probiert, es hat nichts gebracht. Dann den CSS-Kram nach Tabelle konvertiert und ein paar Hacks (für das Dropdownmenu) mit Javascript und CSS und jetzt sieht es überall gleich aus. So viel zu CSS-Designs...

Die hier gepostete Seite funktioniert übrigens auch nicht mit IE5.x... Ich weiß dass der Browser veraltet ist aber es gibt noch genug, die ihn benutzen...

dead.line

2007-07-14, 17:00:50

Sie packen trotzdem immer noch alles in Divs, auch wenn sie das betreffende Element direkt formatieren könnten.

Stimmt, aber div's sind so schön einfach... Könntest du vllt die seite die ich oben schon mal gemacht hab, mal mit "richtigem" CSS erstellen, würde mich interessieren wie man das noch so hinbekommt.

Die hier gepostete Seite funktioniert übrigens auch nicht mit IE5.x... Ich weiß dass der Browser veraltet ist aber es gibt noch genug, die ihn benutzen...

...uhm....ist nicht IE6 bei WinXP dabei? Als standard? Zur Not einfach ein "This site is best displayed with IE6 / Firefox / Opera" plus link fürn download hinsetzen ^^

Weißt du wieviele noch den IE5 benutzen? (ist der nicht total veraltet? auch vom sicherheits standpunkt aus?)

rotalever

2007-07-14, 17:17:08

...uhm....ist nicht IE6 bei WinXP dabei? Als standard? Zur Not einfach ein "This site is best displayed with IE6 / Firefox / Opera" plus link fürn download hinsetzen ^^

Weißt du wieviele noch den IE5 benutzen? (ist der nicht total veraltet? auch vom sicherheits standpunkt aus?)
Also Sicherheit ist dem DAU ja bekanntlich egal... Aber du hast wohl recht, dass IE5 relativ veraltet ist und kaum mehr benutzt wird.
Trotzdem war es so, dass ich ein Layout erzeugt hatte, dass auch in IE6 nicht ging, aber in Firefox und Opera. Deshalb bin ich wieder auf Tabellen umgeschwenkt und der Endbenutzer sieht davon ja sowieso nichts. Und ein paar hacks muss man ja sowieso immer reinmachen ;-). Zum Beispiel wollte ich gepunktete Linien machen, die kann der IE<7 ja noch nicht...

huha

2007-07-14, 17:29:07

Hacks sind scheiße.
Man weiß nie, ob man nicht zukünftig mit den ganzen tollen Hacks nicht in irgendeinem Browser dafür sorgt, daß die ganze Seite zerstückelt wird. Klar, manches Mal geht's nicht ohne Hacks, aber es gibt durchaus die Möglichkeit, eine Seite elegant und ohne Gefrickel zu basteln, indem man sich vorher hinsetzt und überlegt, inwiefern bestimmte Elemente wirklich an bestimmten Plätzen sein müssen. Es tut übrigens auch der Usability gut, wenn man die Seite nicht so anlegt, daß alle Elemente riesengroß absolut positioniert sind. Viele Möchtegernwebdesigner haben mittlerweile 17" oder 19"-TFTs und dafür werden die Seiten dann geschrieben: Für Browser, die im Vollbild bei 1280x1024 laufen. Sowas ist grauenhaft, besonders deshalb, weil dadurch die Zeilen viel zu lang werden und nur noch schlecht zu lesen sind. Weil die Leute allerdings darauf bestehen, daß ihre Seite genau so aussehen muß, wie sie sich das vorstellen, hat man keine Chance, wenn man das Browserfenster einfach kleiner zieht--der Inhalt wird nicht kleiner, es kommen lediglich Scrollbalken.
Es gibt einige Leute, die ihr Browserfenster nicht die gesamte Zeit maximiert oder extrem breit gezogen haben, weil sie vielleicht mehrere nebeneinander haben oder drumherum noch andere Dinge zu tun, außerdem noch die mit 4:3-Laptops oder kleinen Bildschirmen, die meist 1024x768 als Auflösung verwenden.

Webdesign sollte meines Erachtens nach nicht als Ziel haben, möglichst schöne Seiten zu produzieren, sondern Seiten, die sich möglichst gut bedienen lassen. Dazu gehört zwar ein nettes Aussehen, das ist aber nicht primär das Ziel. Der erste Arbeitsschritt nach der losen Skizze sollte daher das Schreiben des HTML-Codes sein und nicht die Ausarbeitung der Graphiken und das Zurechtstückeln derselben mit Photoshop. "Form follows function" sollte--gerade beim Webdesign!--beherzigt werden. Dann kommen nämlich auch nette Seiten dabei raus, die gut aussehen und hinreichend flexibel sind, daß ich das Zeug auch auf einem Riesenbildschirm mit 350% Schriftgröße noch ordentlich angucken kann oder auf einem PDA.

-huha

d2kx

2007-07-14, 17:55:10

Daltimo

2007-07-14, 18:10:15

ich hab deine skizze mal in HTML + CSS gebracht. (hab nen footer dazu gepackt, aber den kann man ja einfach wieder rausnehmen)

@topic: ich hab hier jetzt nur Notepad++ und Firefox plus Firebug benutzt

http://img294.imageshack.us/img294/2387/csslayoutzn2.th.png (http://img294.imageshack.us/my.php?image=csslayoutzn2.png)

Im Anhang is die Datei plus Screenshot. Hab den css part mal in die html datei reingeschrieben (was ich sonst nicht mache) aber so haste nur eine file.

Der Quellcode ist vllt ein bischen umständlich... aber wie gesagt ich lerne ja auch noch ^^ (aber die seite sieht aus wie sie soll, und wird im IE6 und im FF gleich angezeigt...schon mal etwas ^^ )

So in etwa habe ich mir auch das ganze vorgestellt. Den Quellcode finde ich nicht unübersichtlich, ich fertige ihn auch so in etwa an.

Webdesign sollte meines Erachtens nach nicht als Ziel haben, möglichst schöne Seiten zu produzieren, sondern Seiten, die sich möglichst gut bedienen lassen. Dazu gehört zwar ein nettes Aussehen, das ist aber nicht primär das Ziel. Der erste Arbeitsschritt nach der losen Skizze sollte daher das Schreiben des HTML-Codes sein und nicht die Ausarbeitung der Graphiken und das Zurechtstückeln derselben mit Photoshop. "Form follows function" sollte--gerade beim Webdesign!--beherzigt werden. Dann kommen nämlich auch nette Seiten dabei raus, die gut aussehen und hinreichend flexibel sind, daß ich das Zeug auch auf einem Riesenbildschirm mit 350% Schriftgröße noch ordentlich angucken kann oder auf einem PDA.

Richtig der Meinung bin ich auch, meinetwegen braucht sie auch nur im Firefox und Safari gehen....hehe

Webdesign sollte meines Erachtens nach nicht als Ziel haben, möglichst schöne Seiten zu produzieren, sondern Seiten, die sich möglichst gut bedienen lassen. Dazu gehört zwar ein nettes Aussehen, das ist aber nicht primär das Ziel. Der erste Arbeitsschritt nach der losen Skizze sollte daher das Schreiben des HTML-Codes sein und nicht die Ausarbeitung der Graphiken und das Zurechtstückeln derselben mit Photoshop. "Form follows function" sollte--gerade beim Webdesign!--beherzigt werden. Dann kommen nämlich auch nette Seiten dabei raus, die gut aussehen und hinreichend flexibel sind, daß ich das Zeug auch auf einem Riesenbildschirm mit 350% Schriftgröße noch ordentlich angucken kann oder auf einem PDA.

Ich bin aber auch der Meinung das eine Seite optisch ansprechend sein sollte. Das Auge isst mit sagt man doch immer so schön und auch hier denke ich spielt das eine Rolle. Gehe ich auf ein Photoshop tut möchte ich auch eine ordentliche Seite haben, weil man schon daran mit sieht ob was an Wissen usw da ist oder nicht. Auch auf anderen Seiten spielen ordentliches Design und eine gut strukturierte Seite immer eine Hauptrolle, wobei zweiteres wohl das wichtigste bei einer Seite ist.

dead.line

2007-07-14, 18:16:32

Bei Frames z.B. kann man ganz einfach eine navigation.html nehmen und die muss man dann nicht für jede einzelne Seite (Home, Download, Über mich) bearbeiten. Bei Tabellen- und CSS-Seiten, wo alles auf eine .html gepackt ist, habe ich dann immer bei einer Änderung der Navigation z.B. in jeder .html-Datei dann die Navigation ändern müssen. Geht das irgendwie schöner?

obs schöner geht ist weiss ich nicht, aber man kann das sehr einfach per php hinbekommen selbst wenn man wie ich von php überhaupt keinen plan hat!

Du schreibst einfach deine Navigation in eine externe Datei. Am besten du schreibst eine komplette seite und dann nimmste den NAv part raus und packst ihn in eine externe datei. Benenn die wie du willst. z.b. nav..php.inc

Dann nimmste deine Site und platzierst genau da wo der Inhalt der nav datei hinsoll folgenden code.

<?php

include 'nav.php.inc';

?>

geht aber nur wenn du die seite wo du es reinpacken willst ne .php endung hat... afaik.

Sicherlich es gibt bessere Lösungen aber die beinhalten mehr php wissen xD

EDIT::

Ich bin aber auch der Meinung das eine Seite optisch ansprechend sein sollte. Das Auge isst mit sagt man doch immer so schön und auch hier denke ich spielt das eine Rolle. Gehe ich auf ein Photoshop tut möchte ich auch eine ordentliche Seite haben, weil man schon daran mit sieht ob was an Wissen usw da ist oder nicht. Auch auf anderen Seiten spielen ordentliches Design und eine gut strukturierte Seite immer eine Hauptrolle, wobei zweiteres wohl das wichtigste bei einer Seite ist.

ich denke das macht eine ordentlich Website aus: Ansprechendes Design, Browser "freundlich/unabhängig/flexible", und wie heißt das schöne wort: die usability!

Daltimo

2007-07-14, 18:24:12

Gut PHP ist sicher eine Möglichkeit, man kann das sicher auch mit "post" oder "get" machen, dadurch wird ja auch etwas übertragen. Eignet sich vorallem gut bei Gästebüchern.

huha

2007-07-14, 18:40:41

Wenn ich auf eine Seite gehe mit Anleitungen für ein Graphikprogramm, dann will ich sehen, daß der Mensch weiß, was er tut. Idealerweise ist die Zeilenlänge daher nicht zu lang und der Text schön groß, die Schritte sind übersichtlich gegliedert, stehen alle auf einer Seite und sind logisch zusammenhängend erklärt.
Ob die Seite nun graphisch extrem verspielt ist oder eher schlicht, ist mir in diesem Zusammenhang egal. Wenn ich Webseiten besuche, will ich Informationen. Wenn's nett aussieht: schön. Eine Webseite muß so gut aussehen, daß sie mich nicht abschreckt, die Informationen aufzunehmen. Die Abschreckung fängt an bei furchtbaren Farbkombinationen, ständigem Rumgeblinke irgendwo und bei zu winziger Schrift und zu langen Zeilen.
Ein Design sollte sich immer danach richten, wie die Information auf der Seite ideal zu übermitteln ist. Was nützt mir eine schöne Menügraphik an der Seite, die in 5 Stunden mühevoller Kleinarbeit in Photoshop gebastelt wurde, wenn deren Größe fest ist, daher nur 5 Menüpunkte untergebracht werden können und daher eine unübersichtliche Menüstruktur entsteht, wenn die Seite zwischendurch gewachsen ist?
Welchen Vorteil hat eine Seite, die ihren Inhalt mit wunderschönen Graphiken umschließt, wenn diese für eine Browsergröße entwickelt wurde, die höher als die meines Browsers ist und mich daher nur ein Dreiviertel der Textbreite lesen läßt?
Ich habe beides schon selbst erlebt und bleibe diesen Seiten fern. Eine Seite muß sich danach richten, was ich habe und will und nicht andersrum.

Der IE5 mag womöglich schlimm sein (wer haßt ihn nicht, der CSS-Seiten bastelt?), allerdings ist die Nutzerbasis immer noch groß genug, um ihn zu unterstützen, genauso der IE6. "Solang's in Firefox läuft" ist kein Ausspruch, der eines "Webdesigners" würdig ist--es muß in allen verbreiteten Browsern laufen, Punkt (oder zumindest in denen, in denen man es ordentlich testen kann--also die mit den Engines IE5/6, IE7, Gecko und Opera; Webkit läuft auf Windows nicht zuverlässig). Ein ordentlicher Designer macht seine Seite deshalb so, daß sich die Unterschiede bei der Interpretation bestimmter Attribute, die es zwischen den Browsern nunmal gibt, nicht auf die Benutzbarkeit der Seite auswirken und auch nicht auf das Design. Es ist problemlos möglich, ohne riesige Hacks Seiten zu programmieren, denen selbst das grauenvolle IE-Boxmodel nichts anhaben kann; manche Elemente sind dann vielleicht ein bißchen verschoben, aber sofern man sich nicht darauf verläßt, daß bestimmte Elemente pixelgenau positioniert sind (sollte man sowieso nicht machen), ist das absolut kein Problem.

-huha

rotalever

2007-07-14, 22:06:10

Lieber huha,
Deine Einstellung teile ich voll und ganz. Ich würde auch am liebsten frei skalierbare Seiten erstellen. Aber wenn dann wirklich in alle richtungen SKALIERT werden soll, dann machen es doch die Browser einem schwer. Denn wirkliches skalieren funktioniert afaik nur bei Text (Ok, Opera macht noch mehr, aber das ist Mist). Hätte man von Anfang an an sowas wie SVG, CSS, PNG, MNG, etc. gehabt und würden sich alle Browser mal an den gottverdammten Standard halten, dann hätten wir alle kein Problem mehr.
Nur ist es halt jetzt leider nicht so. Auf der einen Seite ist es richtig, dass man ja im Endeffekt nur die Informationen präsentieren will. Große Geschichten zeigen dies auch, wer ist schon so erfolgreich wie Google, Wikipedia, etc. deren Webseiten nun wirklich nicht sonderlich gestyled sind. Aber selbst diese sind nicht freiskalierbar... Ich denke man sollte immer auf eine Mischung achten. Ich habe zum Beispiel habe jetzt eine Seite mit fester Breite von 720px erstellt. Sicher, sie wird nicht auf einem PDA funktionieren, aber auf jedem PC. Vll. überlege ich mir noch, wie ich die Headergraphik so ändern kann, dass sie in die Breite skaliert, der Rest wäre kein Problem.

Und was solche Seiten mit viel Geblinkte angeht möchte ich lieber schweigen:biggrin:. Sowas wie Myspace etc. ist einfach nur schrecklich und ruckelt selbst auf einem nicht all zu alten System. Aber das ist glaube ich jedem Webdesigner klar.
Wenn es aber um Produktvermarktung geht ist ein ausgefallenes Design, mit vielen Grafiken doch sehr bei der Kundschaft erwünscht. Sie möchte eben ein Bling-Bling mit viel Flash und dem ganzen Zeug. Deshalb wird dies oft verwendet. Der usability trägt es natürlich nicht bei.

DanMan

2007-07-15, 02:34:00

Stimmt, aber div's sind so schön einfach... Könntest du vllt die seite die ich oben schon mal gemacht hab, mal mit "richtigem" CSS erstellen, würde mich interessieren wie man das noch so hinbekommt.
Das geht schon in Ordnung so. Nur die Navi hätte ich direkt als Liste definiert.
Webdesign sollte meines Erachtens nach nicht als Ziel haben, möglichst schöne Seiten zu produzieren, sondern Seiten, die sich möglichst gut bedienen lassen. Dazu gehört zwar ein nettes Aussehen, das ist aber nicht primär das Ziel. Der erste Arbeitsschritt nach der losen Skizze sollte daher das Schreiben des HTML-Codes sein und nicht die Ausarbeitung der Graphiken und das Zurechtstückeln derselben mit Photoshop. "Form follows function" sollte--gerade beim Webdesign!--beherzigt werden. Dann kommen nämlich auch nette Seiten dabei raus, die gut aussehen und hinreichend flexibel sind, daß ich das Zeug auch auf einem Riesenbildschirm mit 350% Schriftgröße noch ordentlich angucken kann oder auf einem PDA.

-huha
Das kann ich nicht unterschreiben. So kann nur ein Programmierer reden. Als Designer schränkt das viel zu sehr ein, und nur weil eine Seite ansprechend aussieht heißt das noch lange nicht, dass sie schlecht umgesetzt ist. Zuerst steht bei mir das Design, und dann schau ich, was sich davon umsetzen lässt, und was nicht.

rotalever

2007-07-15, 11:53:56

Das geht schon in Ordnung so. Nur die Navi hätte ich direkt als Liste definiert.
Macht es aber afaik komplizierter, wenn man es zentrieren will.

DanMan

2007-07-15, 15:51:42

Macht es aber afaik komplizierter, wenn man es zentrieren will.
Warum? Der Liste 'ne feste Breite geben, und dann margin:0 auto; - fertig.

huha

2007-07-15, 20:03:10

Das kann ich nicht unterschreiben. So kann nur ein Programmierer reden. Als Designer schränkt das viel zu sehr ein,

Ein Künstler kennt die Grenzen des Mediums, mit dem er arbeitet. Hat das dafür gesorgt, daß Kunstwerke schlecht sind? Nein.
Beim Webdesigner ist die Sache allerdings noch schwieriger, denn das Medium ist noch komplizierter.

und nur weil eine Seite ansprechend aussieht heißt das noch lange nicht, dass sie schlecht umgesetzt ist.
Hatte ich auch nicht behauptet. "Ansprechend" ist auch immer so eine Frage der Definition, aber viele meines Erachtens nach "überladenen" Seiten sind gräßlich gemacht.

Zuerst steht bei mir das Design, und dann schau ich, was sich davon umsetzen lässt, und was nicht.
Solange man schaut, was sich umsetzen läßt, spricht nichts dagegen, es so zu machen. Wichtig ist jedoch, gegebenenfalls ein wenig Design für Usability zu opfern, anstatt fest an seinen Ideen festzuhalten.

-huha

collapse

2007-07-19, 04:13:50

Hallo zusammen, ich möchte noch eine Frage anschließen.

Also zu Beginn habe ich mit Frames gearbeitet, dann Tabellen (lange) und dann meine letzte private mit CSS, ABER:

Bei Frames z.B. kann man ganz einfach eine navigation.html nehmen und die muss man dann nicht für jede einzelne Seite (Home, Download, Über mich) bearbeiten. Bei Tabellen- und CSS-Seiten, wo alles auf eine .html gepackt ist, habe ich dann immer bei einer Änderung der Navigation z.B. in jeder .html-Datei dann die Navigation ändern müssen. Geht das irgendwie schöner?

Achja, auch wenn ich nach Stunden mit Hacks es oft doch hinbekommen habe... ICH :: HASSE :: DEN :: INTERNET EXPLORER !!!111einhuntertelf. Das musste jetzt mal raus.

Das CSS einfach auslagern und dan mit den Befehlen im <head> einfügen:

<link REL="STYLESHEET" TYPE="text/css"
HREF="/generic.css" Title="TOCStyle">

However, another option is to use the following:

<STYLE TYPE="text/css">
@import url("generic.css")
</STYLE>

ps: bei mir hat nur die 2te richtig Funktioniert fragt mich nicht warum... cioaz

Daltimo

2007-07-21, 14:37:44

Sorry das ich die ganze Woche lang nicht geschrieben habe, war nicht da.

Hab mich aber etwas belesen und so langsam verstehe ich die Sache. Ich glaube man arbeitet bei einem tabellenlosen Design mehr mit den Rahmen also mit padding und alighn usw richtig?
Somit kann man auch so genau definieren wo was hin soll...

rotalever

2007-07-22, 15:01:54

Ich glaube man arbeitet bei einem tabellenlosen Design mehr mit den Rahmen also mit padding und alighn usw richtig?
Somit kann man auch so genau definieren wo was hin soll...
Man packt halt singemäße Abschnitte in Boxen und ordnet diese über das CSS anders als man es bei HTML direkt im Dokument über die Tabellen getan hat. Im Prinzip kann man leichter Designs änder, in der Praxis sind natürlich wieder ein paar mehr Handgriffe nötig.

Kinman

2007-07-23, 22:03:08

@huha:
In der Theorie hast Du Recht, in der Praxis siehts leider anders aus. Wenn ich einem Kunden form-follows-function sage, dann bringt mich mein Chef um :D

mfg Kinman

Sphinx

2007-07-24, 06:43:15

Zuerst steht bei mir das Design, und dann schau ich, was sich davon umsetzen lässt, und was nicht.

Solange man schaut, was sich umsetzen läßt, spricht nichts dagegen, es so zu machen. Wichtig ist jedoch, gegebenenfalls ein wenig Design für Usability zu opfern, anstatt fest an seinen Ideen festzuhalten.
-huha

Kann mich dem nur anschließen ~ bei all dem Design wahn den ich in den letzten Jahren miterlebt habe is Usability viel zu kurz gekommen.
Ein Visitor besucht eine Website und kann den Weg voller Bäume und Sträucher nicht zurückfinden geschweige denn sein Ziel durch diesen "Urwald".
Dann das Thema mit Werbung und Design als integriertes bestandteil eines ganzen "Kunstwerkes".
Ich muß zugeben das ich mich über all die Jahre von diesen Urwäldern (Überladenen Webseiten) auch hier und da inspirieren lassen habe ~ aber jedoch festgestellt das diese für einen Besucher einfach Overload² sind.
Ich finde im Web zahlreiche wunderschöne Blogseiten die Zeigen das manchmal wenig auch genial sein kann und dabei die Usability nicht zu kurz kommen kann. Da man seine Ziele und Wege meistens klar vor Augen hällt.

Design ist ein Allgegenwertiger Begriff dazu zählen nicht nur Graphische,Geflashte Web 2.0 Anwendungen sondern auch Kontraste,Farbgebungen,Farbtöne,Schriften, Anordnung von Links und Steuerungen innerhalb des ganzen Webprojektes.

Gast

2007-09-24, 06:44:18

Am besten macht man alles komplett in SVG, dann skaliert die Seite auch auf jedem Monitor.
Vom PDA bis zum 35" Fernseher.

Opera, Firefox, Konqueror, Safari und Seamonkey kommen damit schon klar,
wozu also sich mit dem IE rumärgern.

Und wenn man dann noch zum Designen die richtige Software benutzt, wie z.B.
Inkscape, dann wird die Webseitenerstellung mit SVG traumhaft.

Und da SVG im Quellcode vorliegt, kann man auch problemlos beliebigen Text mithilfe von PHP Scripten & CO einbetten.
Damit eignet sich SVG also auch für ein CMS.

Lediglich bei Fotos muß man noch auf PNG ausweichen, aber
das sollte klar sein, Fotos sind halt Fotos.

rotalever

2007-09-24, 11:12:33

Am besten macht man alles komplett in SVG, dann skaliert die Seite auch auf jedem Monitor.
[...].
Damit dann alles schön langsam ist oder wie? :|
Wenn du mir allerdings einen schnellen Renderer zeigst, bin ich einverstanden (und wenn es auch der IE kann).

DanMan

2007-09-24, 13:34:59

Damit dann alles schön langsam ist oder wie? :|
Wenn du mir allerdings einen schnellen Renderer zeigst, bin ich einverstanden (und wenn es auch der IE kann).
Don't feed the troll.... -.-

rotalever

2007-09-24, 13:48:40

Don't feed the troll.... -.-
Naja, im Prinzip hat er ja nicht Unrecht, die Grundidee, die dahinter steckt ist sehr sinnvoll. Nur ist es eben nicht sehr gut in der Praxis umsetzbar.

Flipper

2007-09-24, 13:53:00

"wozu also sich mit dem IE rumärgern."
weil >80 % Marktanteil?

"Lediglich bei Fotos muß man noch auf PNG ausweichen"
jpg/gif sind auch noch erlaubt.

Selbst wenn er mit der Grundaussage Recht hat soll er nicht so viel Stumpfsinn rundherum schreiben, wage ich jetzt mal zu behaupten *g*

DanMan

2007-09-24, 17:42:44

Naja, im Prinzip hat er ja nicht Unrecht, die Grundidee, die dahinter steckt ist sehr sinnvoll. Nur ist es eben nicht sehr gut in der Praxis umsetzbar.
Ich freu' mich auch schon einigermaßen auf svg, aber das zum jetztigen Zeitpunkt zu fordern ist komplett praxisfremd, denn selbst die Browser, die es unterstützen, tun das noch lange nicht zu 100%.

Was mich z.B. an SVG reizt sind die Typografischen Möglichkeiten. Im Speziellen das Einbetten von Schriften, wodurch man endlich auch wirklich andere Schriftarten benutzen könnte, ohne die direkte Änderungsmöglichkeit im Quelltext zu verlieren. Das ist ja das Problem mit Bildern.