internetshop - was ist zu beachten?

[Big-Havanna]

hallo zusammen.
da meine frage mehrer forumsparten umfasst, hab ich es mal hier gepostet.
ich habe vor, mich möglichst bald nach dem studium mit einem internetshop zu verwirklichen. warscheinlich werd ich diesen dann erstmal parallel zu arbeit laufen lassen, bis er hoffentlich gut anläuft.
meine frage an euch ist nun, weiß jemand, in welchen rahmen sich die ungefähren laufenden kosten für das betreiben der internetseite belaufen? (nur die laufenden kosten)
Und meine 2. frage ist, welche breite sollte die page haben, damit möglichst viel inhalt reinpasst, aber der user auch auf kleinen monitoren nicht seitwärts scrollen muss?
ich denke, es wird nicht notwendig sein, die page auch optimal für pda's anzeigen zu lassen, da diese ja eher zum informationsgewinn genutzt werden als zum shoppen


Ps:layout will ich selbst mit css hinbekommen. für php oder sonstigem was dann für die kaufabwicklung so nötig ist, hol ich mir dann professionelle hilfe^^

 

[Efchen]

welche breite sollte die page haben, damit möglichst viel inhalt reinpasst, aber der user auch auf kleinen monitoren nicht seitwärts scrollen muss?

Das ist einfach: Maximal 100%.

Aber die Größe des Monitors ist hier nicht ausschlaggebend, genausowenig wie die Auflösung (was ja oft als gleichbedeutend angenommen wird).

ich denke, es wird nicht notwendig sein, die page auch optimal für pda's anzeigen zu lassen, da diese ja eher zum informationsgewinn genutzt werden als zum shoppen

Das sagst Du am besten den Nutzern, die mit dem PDA shoppen.
Und wenn Du Dir das leisten kannst, solche Leute zu vergraulen, die dann per Mundpropaganda weitersagen, dass das bei Dir nicht geht, dann kannst Du das natürlich machen.

layout will ich selbst mit css hinbekommen.

Für Layout CSS zu nehmen, zeigt schonmal, dass Du Dich mit der Materie schon auseinander gesetzt hast, aber vergiss nicht, auch HTML richtig einzusetzen, also für die Semantik. Daran scheitern nämlich die meisten, weil sie solche seltsamen Dinge glauben wie "Layout macht man mit divs".

Viel Erfolg,
-Efchen

 

[Big-Havanna]

ja, das ist schon klar. erst text schreiben, dann das layout machen und später alles durchn w3c jagen..... mal ganz vereinfacht gesagt^^

kann mir nur nicht vorstellen, mit nem pda zu shoppen.. igrendwie komisch. ich will ja auch sehen, was ich kaufe.

ja, denn halt die auflösung. meine mich zu erinnern (kam glaub ich sogar von dir efchen) dass ich hier mal im forum gelesen habe, eine seite sollte eine pixelbreite von x nicht überschreiten, da sie sonst auf kleinen monitoren nicht ohne seitliches scrollen anzeigbar wäre.
würde halt lieber mit px arbeiten anstatt mit %

 

[Efchen]

ja, das ist schon klar. erst text schreiben, dann das layout machen und später alles durchn w3c jagen..... mal ganz vereinfacht gesagt^^

Kommt mir irgendwie bekannt vor der Spruch ;-)

kann mir nur nicht vorstellen, mit nem pda zu shoppen.. igrendwie komisch. ich will ja auch sehen, was ich kaufe.

Ich hab selber auch noch nie nen PDA benutzt, aber viele Leute haben unterschiedliche Gewohnheiten und Wünsche. Aber Du sagst das so, als könnten PDAs keine Bilder darstellen? Das ist wohl eher nicht so, oder? Und dann sieht man ja auch, was man kauft.

ja, denn halt die auflösung.

Die ist auch irrelevant.

Einzig der Viewport ist wichtig.

meine mich zu erinnern (kam glaub ich sogar von dir efchen) dass ich hier mal im forum gelesen habe, eine seite sollte eine pixelbreite von x nicht überschreiten, da sie sonst auf kleinen monitoren nicht ohne seitliches scrollen anzeigbar wäre.

Das kann nicht von mir kommen.
Zum einen weil das nicht nur bei kleinen Monitoren auftritt, sondern auch bei großen (ich hab nen 17"-Monitor, der ist größer als mein 19"), und auch bei großen Auflösungen, weil die ja alle nicht relevant sind, sondern nur die Größe des Viewports. Und wenn jemand mit einer 10.000x7.500px-Auflösung seinen Viewport nur auf 400x300 zieht, dann bekommt der auch viel eher Scrollbalken.

Und generell kann man so eine Aussage ja gar nicht treffen, weil man nicht weiß, wie groß die Viewports der Nutzer sind.

würde halt lieber mit px arbeiten anstatt mit %

Das ist im WWW aber eben nicht sinnvoll. Sowas kann man im Print-Design machen, wo die Größe des Papiers bekannt ist. Die Größe des Viewports in px ist aber nicht bekannt. Aber sie ist eben immer 100%.

 

[Big-Havanna]

ok, danke. denn muss ich mir das mit den prozenten nochmal durch den kopf gehen lassen und etwas ummodeln. meine überlegung bei den pixeln war nur zb. das banner, welches ganz normal oberhalb der page sein soll, hat ja eine bestimmte länge bzw. breite, nach der sich die page von den rändern her ja anpassen muss. daher fragte ich nach der pixelbreite.

und mit den pda's war das so nicht gemeint. natürlich stellen die auch bilder da, aber gerade beim onlineshoppen bin ich doch froh über große bilder in denen ich details erkennen kann

 

[neuroleptika]

.. natürlich stellen die auch bilder da, aber gerade beim onlineshoppen bin ich doch froh über große bilder in denen ich details erkennen kann

Ich finde es erstaunlich wie gut kleine Geräte Webseiten darstellen Können.
Ob eine fixe Seitenbreite angegeben wurde oder das Layout fluid ist scheint vielen egal zu sein.

 

[BraCay]

Das ist einfach: Maximal 100%.

Aber die Größe des Monitors ist hier nicht ausschlaggebend, genausowenig wie die Auflösung (was ja oft als gleichbedeutend angenommen wird).


Das sagst Du am besten den Nutzern, die mit dem PDA shoppen.
Und wenn Du Dir das leisten kannst, solche Leute zu vergraulen, die dann per Mundpropaganda weitersagen, dass das bei Dir nicht geht, dann kannst Du das natürlich machen.


Für Layout CSS zu nehmen, zeigt schonmal, dass Du Dich mit der Materie schon auseinander gesetzt hast, aber vergiss nicht, auch HTML richtig einzusetzen, also für die Semantik. Daran scheitern nämlich die meisten, weil sie solche seltsamen Dinge glauben wie "Layout macht man mit divs".

Viel Erfolg,
-Efchen

Wenn man nicht gerade Tabellen benutzt dann arbeitet man mit div-tags ;) Was allerdings Textformatierungen angeht ist natürlich net

Nun gut kommen wir zum Thema zurück. Was für mich in einem Internetshop relevant wäre, wären
1. Produktinformation (Qualität [Zustand], Preis, Wieviel ist vorhanden, sofern du die Ware bei dir schon bunkerst, Bild des Produktes)
2. Ausführliche und unkomplizierte AGB's
3. Ein Warenkorb
4. Ein Login-Bereich (am Anfang jedoch nicht nötig)
5. Vielfalt an Waren
6. Schlichtes Design, keine Aufwendigen Grafiken, jedoch macht es sich gut, wenn du Ecken abrundest (machste mit Bildern ;))

 

[Efchen]

meine überlegung bei den pixeln war nur zb. das banner, welches ganz normal oberhalb der page sein soll, hat ja eine bestimmte länge bzw. breite, nach der sich die page von den rändern her ja anpassen muss.

Nein, warum muss es das?

Wenn der verfügbare Platz kleiner ist, dann passt es sowieso nicht in den Viewport. Wenn das Bild eh nur Zierde ist, muss man sich fragen, ob es das wert ist, dafür horizontale Scrollbalken zu bekommen oder schneidet man das Banner dann einfach ab.
Und wenn der Viewport größer ist, dann kann man links und/oder rechts einfach eine Hintergrundfarbe definieren, die links und/oder rechts am Ende des Banners vorliegt. So sieht man dann nichtmal, dass das Banner eigentlich viel kleiner ist.

Wenn man nicht gerade Tabellen benutzt dann arbeitet man mit div-tags

Quatsch. Völliger Unfug, wenn ich das mal so direkt sagen darf. Tabellen benutzt man immer zum Auszeichnen tabellarischer Daten, div benutzt man zum Gruppieren mehrerer Tags. Beides benutzt man nicht fürs Layout! Layout mit divs ist genauso sinnfrei und falsch wie Layout mit Tabellen.

 

[Big-Havanna]

ok, die idee ist gut. mein banner ist eh an den rändern recht dunkel. dann kann man das schön mit der farbe optisch strecken.
aber sagt doch mal bitte ne ungefähre richtlinie fürs banner. selbst wenn ich es verkleinere. wie groß ,,darf" es denn noch sein (ohne Probleme zu machen)?
generell nehmen ja total viele internetshops keine rücksicht auf dieses problem. doch das soll bei mir nicht passieren!

also aus dem alter layout mit tabellen zu machen bin ich raus^^ es mit möglichst wenig divs zu machen fällt mir an einigen stellen noch schwer, aber das wird noch.

Ich finde es erstaunlich wie gut kleine Geräte Webseiten darstellen Können.
Ob eine fixe Seitenbreite angegeben wurde oder das Layout fluid ist scheint vielen egal zu sein.

ich muss mir mal nen pda probeweise ausborgen. damit ich mir das mal selbst ansehen kann

 

[Efchen]

aber sagt doch mal bitte ne ungefähre richtlinie fürs banner. selbst wenn ich es verkleinere. wie groß ,,darf" es denn noch sein (ohne Probleme zu machen)?

Maximal 100%.

Hier hab ich nen 1440px breiten Viewport. Zuhause hab ich nen Viewport von max. 1024px. Jemand mit nem Handy/PDA hat vielleicht 200px in der Breite Platz. Keiner von denen will horizontale Scrollbalken.
IMHO gibt es da keine Richtlinien. Jeder einzelne Mensch erwartet von Dir, dass Deine Website bei ihm richtig funktioniert, angenehm zu benutzen ist und gut aussieht. Wenn Du hergehst und Dich an einer angeblichen "Mehrheit" orientierst, wirst Du einige oder viele Menschen vor den Kopf stoßen. Die sind dann - zu Recht - sauer.
Niemand sagt, dass das einfach ist :-)

generell nehmen ja total viele internetshops keine rücksicht auf dieses problem. doch das soll bei mir nicht passieren!

Finde ich ne gute Einstellung. Wenn ein Shop bei mir schlecht aussieht, und ich ständig scrollen muss, dann muss der Shop schon irgendwas wichtiges zu bieten haben, was ich nur da kriege und sonst nirgendwo. Ansonsten bin ich weg und zahle u.U. sogar lieber ein paar Euro mehr woanders, wo ich mich nicht so abquälen muss. Viele Shops ignorieren dieses Wissen, manche können sich den Kundenverlust vielleicht sogar leisten.

Mach doch mal jemand ein banner, das am linken Rand klebt anstatt oben.

also aus dem alter layout mit tabellen zu machen bin ich raus^^ es mit möglichst wenig divs zu machen fällt mir an einigen stellen noch schwer, aber das wird noch.

Wenn Du 100% begriffen hast, wozu HTML eigentlich da ist und Dich danach strikt richtest, dann ist es eigentlich ganz einfach. Es ist ja nicht so dass Tabellen und divs BÖSE sind. Wie jedes andere Tag auch sollten sie aber eben nur da eingesetzt werden, wo sie hingehören.

ich muss mir mal nen pda probeweise ausborgen. damit ich mir das mal selbst ansehen kann

Ja, und nen Vorlesebrowser und dies und das...das nehm ich mir auch schon seit Jahren vor ... ;-)

 

[Big-Havanna]

ok, soweit zum der skalierung.
noch die finanzplanung:
warscheinlich gibt es da auch große unterschiede, aber mit wieviel euronen im monat muss man in der anfangszeit für das betreiben einer gewärblichen page rechnen?

undn och ne frage: gibts bei schriftarten nen copyright oder sowas? ich würde für das bannerpic ne etwas andere schriftart als standart nehmen. kann da der geistige schöpfer der schrift irgendwelche ansprüche erheben, oder sind die frei für alle verwendbar? gibts da was zu beachten?

 

[thuemmy]

Wieviel man für den Betrieb einer gewerblichen Seite zahlen muss, kann nicht einheitlich gesagt werden, da spielen zu viele Faktoren rein.

Zu Schriftarten ist zu sagen, dass es darauf sehr wohl einen Copyright geben kann, das ist von Schriftart zu Schriftart unterschiedlich. Es gibt aber Schriftarten-Shop, wo man sich Schrifarten kaufen kann. Wie die Lizenezn dort aussehen ist dann auch unterschiedlich.

Gruß thuemmy

 

[Big-Havanna]

ok, danke. dann muss ich nochmal gucken, wie es mit meiner schriftart aussieht.

 

[Big-Havanna]

also nur um das noch malabzuklären,denn ohne handfeste grundlage brauch ich garnicht erst anfangen, die page zu überarbeiten.
Ich sollte die Breitenangaben generell in % angeben (bei höhenangaben kann ich dann px nehmen, da ja sowiso vertikal gescrollt wird).
Also würde das mal auf meinem fall ganz vereinfacht heiten: zb. linke menüspalte 25%, textfeld 50% und rechte menüleiste 25% (nu beispiel). somit behält meine page immer die richtige form, auch wenn ich das browerfenster verkleinere (was ja dann einer veränderung des Viewports nahekomt, wenn man das so sagen kann und ich das richtig verstanden habe)

 

[Efchen]

Ich sollte die Breitenangaben generell in % angeben (bei höhenangaben kann ich dann px nehmen, da ja sowiso vertikal gescrollt wird).

Nein und nein :-)

Ganz so trivial ist es nun auch wieder nicht.

Ich würde z.B. viel mehr in "em" statt in "%" machen.
Was ist em? Eine Einheit, die sich auf die gewählte Schriftgröße bezieht.

Oft sieht man Buttons, die über eine Grafik gelöst sind. Diese haben eine feste Höhe.
Vergrößert man nun die Schrift, wird es alsbald passieren, dass die Schrift über diese Höhe hinausragt und über den Rand des Buttons geht. Würde man ein kachelbares Hintergrundbild verwenden und die Höhe in "em" angeben, würde sich das Element mit Veränderung der Schriftgröße automatisch in der Höhe verändern und sich der Schrift anpassen, so dass diese niemals aus dem Element herausragen kann.

Also würde das mal auf meinem fall ganz vereinfacht heiten: zb. linke menüspalte 25%, textfeld 50% und rechte menüleiste 25% (nu beispiel).

Da kommen dann so Gedanken ins Spiel wie große Viewports. Auf 800px breiten Viewports mag das gut aussehen, bei 1600px Breite nicht mehr so sehr. Und wenn Du dann noch Text in Deinem Content hast, der ist bei großen Breiten nicht mehr gut lesbar.

Jetzt wirds dann aber knifflig, denn CSS bietet zwar min-width und min-height, allerdings wird das von unserem Browserfreund der 6. Generation nicht (richtig?) interpretiert. Aus die Maus.
Fixe Seitenbreiten sind Mist, so oder so, weil horizontale Scrollbalken einfach nerven. Macht man eine Mindestbreite von irrigen 1024px, hauen Dir die Besucher mit kleinerem Viewport die Site um die Ohren. Machst Du sie nur 800px breit, fangen die mit 1600px breitem Viewport an zu stöhnen. Ideal wäre natürlich eine Mischung aus allem, px, Mindest- und Maximalbreite, Größenangaben in % oder em.

Aber an der Selle gibt es kein Patentrezept mehr.

somit behält meine page immer die richtige form, auch wenn ich das browerfenster verkleinere (was ja dann einer veränderung des Viewports nahekomt, wenn man das so sagen kann und ich das richtig verstanden habe)

Ja, hast Du. Und hast es auch richtig gesagt.

Aber, um nochmal auf "em" zurückzukommen, wenn Du alle Größen mit "%" schreibst, dann hast Du es gegen Viewport-Veränderung gesichert, aber bei Veränderung der Sxchriftgröße platzt Dir das Layout vermutlich aus allen Nähten :-D

Und hier empfiehlt Dir der eine, es so zu machen, der andere so, einer schwört auf mindestens 1200px breite Seiten ("sollen die sich doch nen neuen Monitor kaufen" - sorry, macht sicher niemand), andere machen alles in "em". Ich denke, hier muss jeder für sich alles mögliche durchprobieren und dann das Optimum finden.

Tatsache ist, passt es bei jemandem nicht, ist er angenervt. Text lesen mit horizontalem Scrollen ist so ziemlch das schlimmste, was es gibt, dicht gefolgt von 1000px breitem FLießtext.

Das ist sicher nicht die Antwort, die Du hören wolltest :-)

Gruß,
-Efchen

 

[Big-Havanna]

ne, is schon ok. im endeffekt weiß ich ja jetzt, was ich zu tun habe.


Ps: das mit dem nichtunterstützen der einzelnen browser und teilweise noch falschinterpretieren nervt total! deswegen versuch ich ja schon möglichst viel aus standartbefehlen rauszuholen und schnickschnack wegzulassen.

so, dann bastel ich mal erstmal weiter an der page^^

so nun mal nen beispiel für den grundaufbau. vorab:
-die boxen haben nur unterschiedliche farben, damit man sie jetzt besser auseinanderhalten kann
-nur die boxen wo text drinnen steht, sieht man nachher noch (bannerbox ist dann nur ein kleines pic drinen.

page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head> 

 <title>versuch mit css</title> 
  <link type="text/css" rel="stylesheet" href="style.css" />     

 </head> 

 <body>



     <div class="puffer2"> 
     </div>


     <div id="banner">
       <img src="xx.gif" alt="Banner" />
     </div>






     <div id="puffer3"> 
     </div>







    <div id="kopfrahmen">

     <div class="puffer2"> 
     </div>
                   
     <div id="linkskopf">
     </div>   

     <div id="kopf">
           <a href="a.html">Impressum </a>/
           <a href="a.html">Kontakt </a>/
           <a href="a.html">Versand </a>/
           <a href="a.html">ABG's </a>/
           <a href="a.html">Zahlungsarten </a>/
           <a href="a.html">Datenschutz </a>/
           <a href="a.html">Glosar </a>
     </div>
    </div>

     <div id="puffer1"> 
     </div>

     <div id="menu">menütext 
     </div>  
     <div id="text">artikeltext
     </div> 
     <div id="menu2">menü2 text 
     </div> 

 </body>

styl:

#puffer1 {
    width: 6%;
    height: 150px;
    float: left;
    background-color:#000000;
    background-image:url(beigerpixel.gif);
}

#linkskopf {
    width: 20%;
    height: 1px;
    float: left;
    background-color:#EFE7D5;
}


#banner {
    width: 88%;
    height: 100%;
    float: left;
    background-color:#c9b870;
    text-align: center;
}


#kopf {
    width: 48%;
    height: 50px;
    float: left;
    background-color:#c9be36;
}

#kopfrahmen {
    width: 100%;
    height: 100%;
    float: left;
    background-color:#c9b047;
}

.puffer2 {
    width: 6%;
    height: 1px;
    float: left;
    background-color:#000000;
    background-image:url(beigerpixel.gif);
}

#puffer3 {
    width: 100%;
    height: 1px;
    float: left;
    background-color:#000000;
    background-image:url(beigerpixel.gif);
}

#menu {
    width: 20%;
    height: 100px;
    float: left;
    background-color:#EFE7D5;
}

#text {
    width: 48%;
    height: 100%;
    float: left;
    background-color:#c9bea2;
    text-align: center;
}

#menu2 {
    width: 20%;
    height: 100px;
    float: left;
    background-color:#EFE7D5;
}

kann ich das so machen? die form bleibt erhalten, auch wenn ich es ganz klein mache.

 

[Efchen]

Im HTML-Quelltext sehe ich nur div-Suppe, das Menü ist nicht als Liste ausgezeichnet.
Den Rest würde ich gern online sehen. Man kann sich das anhand von Quelltext nur schwer vorstellen, wie eine Site aussieht und vor allem, wie sie sich verändert, wenn man Viewport und Schriftgröße ändert.

 

[Big-Havanna]

hab mir schon gedacht, dass sowas jetzt kommt^^
naklar is es ne divsuppe. sollt ja auch nur das prinzip zeigen, wie ich es machen würde, damit die page die form behält. aber egal. ich machs erstmal so wie ich denke und denn stell ich das ganze on. dauert aber nen bissl.

ist es richtig, dass wenn ich einen block centern will, nicht
margin-left: auto;
margin-right: auto;
nehmen kann, da es vom IE nicht richtig unterstützt wird und ich ein unsichtbaren Bloclk mit
text-align: center;
einbauen muss?

 

[XraYSoLo]

sehr geehrte zigarre, das ist schon das vierte mal, dass ich einen doppelpost von dir zusammenführe, verwend' doch bitte die editierfunktion...

Nils aka XraYSoLo

 

[Efchen]

ist es richtig, dass wenn ich einen block centern will, nicht
margin-left: auto;
margin-right: auto;
nehmen kann, da es vom IE nicht richtig unterstützt wird und ich ein unsichtbaren Bloclk mit
text-align: center;
einbauen muss?

Nein, das ist falsch.

Du musst aber den IE natürlich in den Standards Mode versetzen. Im Quirks Mode zeigt er das von Dir angesprochene, falsche Verhalten.