• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ingenieurbüro Website

mobby

mobby

Mitglied
Hey,

also ich habe eine Website für meinen Vater entworfen und wollte einfach mal fragen, was man noch verbessern könnte usw.
Homepage

Es fehlen noch ein paar Inhalte und es funktionieren einige Sachen noch nicht wie z.b. favicon. Da bin ich aber noch dran.
Es geht mir erst mal eh nur um das Layout und ja die Realisierung allgemein.
Wer es im PHP Thread verfolgt hat ... Login Bereich gibt es auch mit festgelegten Benutzern die einzeln zugewiesene Bereiche nach dem Login erhalten.

Thx 4 feedback

Gruß Henrik
 
Hallo

Warum so breit? Dadurch wirkt der Inhalt sehr mikrig. Ich hätte zudem eher etwas Architektur in den Header gepackt, anstelle eines Bachs. Und warum ein Frameset?

Edit: Ohne JavaScript kann ich nicht auf die Inhalte zugreifen.. das solltest du dringend ändern.
 
Hi,

erstmal: So viel zum Design kann man bis jetzt nicht sagen, da wirklich sehr wenige Elemente auf der Seite sind, sowie wenig Inhalt.

Positiv ist aber, dass die Seite generell in Ordnung aussieht. So hast du keine unnötigen Spielereien und Design Elemente drinnen,
die an der seriösistät der Seite knabbern, das finde ich gut! Du hast deine Haupt-Menüpunkte mit Dropdowns unterteilt,
damit es nicht zuviele Menüpunkte sind (mehr als 7 sollten es nicht sein). Das ist ebenfalls gut gemacht.
Blau wirkt auch ansprechend und passt zum Logo.

Du hast versucht den Inhalt möglichst knapp und schlüssig zu halten sowie durch Listen aufzulockern.
Ferner hast du nicht zu viele Zeichen pro Zeile im Text, was auch an der für mich eher großen Schriftart liegen wird.
Dein Code sieht fehlerfrei aus, sieht man auch nicht so oft. Neben dem Frameset, was ich nicht ganz nachvollziehe bzw. nicht so schick finde,
ist dein Code auch sonst ganz gut z.B. Menü als Liste umgesetzt.

Aber:

Den Header finde ich nicht so toll, da das logo rechts ist, zumal dein Layout sehr Breit ist. Somit ist das erste was ich sehe, ein Büschel Grass im Header-Bild.
Das finde ich in Sachen Orientierung ein wenig blockierend.

Dein Layout ist sehr unflexibel, da die Schrifft des Hauptinhalts beim Verkleinern des Browserfensters sehr schnell abgeschnitten wird.
Und an der stelle noch wichtiger, das Logo verschwindet ebenfalls, da ja rechtsbündig.

Der Inhalt ansich könnte noch ein wenig gestaltet werden, die Schrift ist zwar gut lesbar, jedoch verschwimmt z.B. bei der Startseite der übergang von Normalem Abschnitt zur Tabelle.
Hier würde ich eine klarere Abgrenzung und vielleicht ein paar mehr Ideen für einen ansprechender gestalteten Content schön finden.
 
_Thor_ schrieb:
Dann hast du nicht sehr intensiv geschaut, sind 21 Fehler drin ([Invalid] Markup Validation of http://www.ib-baran.de/mobby-hp/test-ib/ - W3C Markup Validator).
Zum Vergrößern anklicken....
Danke für den Hinweis und sorry an der Stelle, dass ichs übersehen habe. Da hat wohl mein Browser-Validator das Frameset erst nicht durchleuchtet. Zur Erläuterung der Fehler: Du hast sehr oft das Schließen von Tags besonders beim break-Tag vergessen, was bei xhtml, welches du im Doctype deklariert hast notwendig ist. Fälschlicherweise hast du versucht break so zu schließen: Richtig wäre es, entweder ein öffnendes + schließendes Tag
zu verwenden. Oder ein alleinstehendes Tag wie folgt zu schließen:
(Die bessere variante.)
 
Hallo,

ich muss auf deiner Seite horizontal scrollen, um alles sehen zu können, das finde ich etwas störend. Bei noch kleinerem Viewport ist die Seite absolut ungenießbar.

Gruß
 
Hey, vielen dank für das Feedback! Nachdem ich jetzt mal JavaScript ausgeschaltet habe, kann ich hier auch wieder was schreiben ...
Warum so breit? Dadurch wirkt der Inhalt sehr mikrig.
Zum Vergrößern anklicken....
Ich persönlich arbeite auf einem 23zoll Monitor und habe das ganze mal auf eine Mindestgröße von 19zoll ausgelegt. Wer heut zu Tage noch auf einem kleineren Monitor arbeitet, ist selber Schuld. Allen kann mann es nicht recht machen, ist leider so.
Ich hätte zudem eher etwas Architektur in den Header gepackt, anstelle eines Bachs.
Zum Vergrößern anklicken....
Der Bach ist absichtlich gewählt, da die Arbeit, die mein Vater macht hauptsächlich mit umweltschonenden- und ökologischen Maßnahmen zu tun hat. Daher wurde der Bach gewählt um etwas "Umwelt" in das Thema ein zu arbeiten.
Und warum ein Frameset?
Zum Vergrößern anklicken....
Versteh ich nicht ... Bitte mehr Info!
Ohne JavaScript kann ich nicht auf die Inhalte zugreifen.. das solltest du dringend ändern
Zum Vergrößern anklicken....
Die Navigation ist damit gebaut ... auch wer das in seinem Browser aus irgendwelchen paranoiden Gründen nicht an hat ... sry aber siehe oben bei der Größe!
Den Header finde ich nicht so toll, da das logo rechts ist, zumal dein Layout sehr Breit ist. Somit ist das erste was ich sehe, ein Büschel Grass im Header-Bild.
Zum Vergrößern anklicken....
Hierzu siehe oben. Das mit dem Logo auf der rechten Seite kann ich mir auch grad nicht erklären. Da werd ich mal schauen wie es links aussieht.
Dein Layout ist sehr unflexibel, da die Schrifft des Hauptinhalts beim Verkleinern des Browserfensters sehr schnell abgeschnitten wird. Und an der stelle noch wichtiger, das Logo verschwindet ebenfalls, da ja rechtsbündig.
Zum Vergrößern anklicken....
Das Logo habe ich jetzt mal "linksbündig" eingestellt, ich hoffe, dass es damit besser wird. Zur Schrift, wie fixe ich das?
Der Inhalt ansich könnte noch ein wenig gestaltet werden
Zum Vergrößern anklicken....
Wie bereits erwähnt kommt der meiste Inhalt noch ;) Aber ja, die Unterteilung, Flußtext und Tabellen ... werde ich mal drüber nachdenken.
Dann hast du nicht sehr intensiv geschaut, sind 21 Fehler drin
Zum Vergrößern anklicken....
Also wenn ich die Seite mit "Web-Developper-Toolbar" checke, dann findet es einen Fehler im CSS der auch irgendwie komisch ist und sonst nur einen HTML Fehler, den ich auch nicht verstehe. Also nichts bewegendes. Die Fehler die bei dir da angezeigt werden die gibt es in meinem Code gar nicht. Habe jede einzelne Stelle der 21 Fehler überprüft. Die existieren nicht ^^ So, das wars erst mal dazu. Fall jemandem spontan ein Headerbild einfällt oder eine gute Seite hat, auf der ich was finde was zum einen "Ingenieurswesen" und "Umwelt" beinhaltet, immer her damit :) Was ich nicht ganz verstehe ist das ganze gerede vom "Frameset" ... was habe ich da wie falsch gemacht bzw. ja was ist da überhaupt los? ^^ Danke soweit, Gruß Henrik
 
Ich persönlich arbeite auf einem 23zoll Monitor und habe das ganze mal auf eine Mindestgröße von 19zoll ausgelegt. Wer heut zu Tage noch auf einem kleineren Monitor arbeitet, ist selber Schuld. Allen kann mann es nicht recht machen, ist leider so.
Zum Vergrößern anklicken....
Hast du vollkommen recht. Die Leute, die mit einem Smartphone oder Nicht-19-Zoll-Laptop (gibt es soetwas überhaupt?) im Internet sind, machen einen vernichtend kleinen Anteil aus.

Ich bin einer der wenigen mit einem 13" MacBook und mein 17" Notebook ist auch eine Ausnahme...
 
@vitus37 okay ja vlt. hast du Recht ^^ Danke für den Tip. Ich bin halt jetzt einfach mal nicht davon ausgegangen, dass niemand die Seite von seinem Smartphone oder einem "kleinen" Laptop aufrufen würde. Aber ja, dem sollte man doch nicht gewappnet sein. Ich denke ich sollte die Breite noch ein Mal überdenken. Wie würdet ihr das denn am besten gestalten? Was haltet ihr für eine gute Breite oder sollte ich mit % arbeiten?
 
mobby schrieb:
Ich persönlich arbeite auf einem 23zoll Monitor und habe das ganze mal auf eine Mindestgröße von 19zoll ausgelegt. Wer heut zu Tage noch auf einem kleineren Monitor arbeitet, ist selber Schuld. Allen kann mann es nicht recht machen, ist leider so.
Zum Vergrößern anklicken....
Vielleicht hast du ja mitbekommen, dass der Trend eher zu Smartphones und Tablets geht und nicht zu XXL Auflösungen(!). Dass diese Personengruppen vom Auftraggeber wirklich ausgeschlossen werden sollen denk ich eigentlich nicht.
mobby schrieb:
Versteh ich nicht ... Bitte mehr Info!
Zum Vergrößern anklicken....
Die Website steckt im Frameset. Kommt aber vllt vom Anbieter.
mobby schrieb:
Die Navigation ist damit gebaut ... auch wer das in seinem Browser aus irgendwelchen paranoiden Gründen nicht an hat ...
Zum Vergrößern anklicken....
Wow, jetzt ist man schon paranoid wenn man JS deaktiviert :> Soviel zur Barrierefreiheit.
 
okay, also dann sollte ich wohl mal das Hauptproblem der Breite beheben. und @ka9de: Wie soll ich diese Navi denn ohne JS realisieren? Ich perönlich finde das sieht ziemlich nice aus und ich kenne niemanden der sein JS grundsätzlich aus hat ...
 
Was die Seitenbreite angeht:
Es kommt ja auch nicht auf die Monitorgröße sondern auf die AUflösung an.

Aber wie ka9de schon sagte, geht der Trend mehr zu Geräten ala iPhone, iPad, Netbooks etc...
Auf keinem dieser Geräte kann man deine Site ohne horizontales scrolling anschauen...
 
mobby schrieb:
Ich persönlich arbeite auf einem 23zoll Monitor und habe das ganze mal auf eine Mindestgröße von 19zoll ausgelegt. Wer heut zu Tage noch auf einem kleineren Monitor arbeitet, ist selber Schuld. Allen kann mann es nicht recht machen, ist leider so.
Zum Vergrößern anklicken....

Auf deine Aussage wurde ja bereits eingegangen, finde die allerdings auch nicht / in Teilen passend.

Von der eigenen Monitorgröße oder den 19 Zoll würde ich beim Webdesign bei der Gestaltung nie ausgehen. Sondern immer von der Zeilgruppe.
Dort kann man das schon ein bisschen mehr eingrenzen. Vielmehr geht es natürlich auch die Auflösung zu beachten, da nur diese eigentlich zählt
und nicht die Monitorgröße bzw. nicht direkt, in gewisser weise vielleicht schon.

Smartphones können heutzutage auch schon sogar Auflösungen bis 300 DPI (PPI) aufweisen, habe allerdings noch nie Websites explizit für Smartphones
entwickelt oder angepasst(sollte ich vielleicht mal :) .

Was mir aber eigentlich wichtig ist, bei der Webentwicklung und beim Umsetzen von Designs, dass man zumindest versucht die Website flexibel zu
halten. Also kannst du ruhig generell eine Breite Seite haben, wenn das dem Lesefluss und dem Design gut tut. Beim verkleinern des Browserfensters
sollte sich die Seite jedoch anpassen indem z.B. der Text umbricht. Das ist bei dir gar nicht der Fall.

Das man keine Website für alle erstellen kann ist mir klar. Ich finde es aber nicht gut wenn man sich einfach auf dieser Aussage ausruht.
Mann sollte wie gesagt als guter Webentwickler zumindest darauf achten seine Seite Flexibel zu halten, zumal viele Anwender auch nicht im Vollbildmodus
surfen, sondern beliebig große Browserfenster nutzen können - hier sieht man, dass komplett feste Größen des Layouts nicht sehr sinnvoll sind.
 
okay, ja das habe ich inzwischen eingesehen.
Nur wie mache ich das?
Muss ich da mit einer % Breite arbeiten?
Da habe ich halt das Problem, dass solche Sachen wie Logo und Bild im Header sich nicht strecken lassen, dann siehts nämlich aus wie scheiße.
Wie mach ich das?

Ich würde es gerne so haben, dass die Seite an sich fix ist und eben alles auf einmal skaliert.
Das heißt ich hätte gernen den gleichen Effekt wie wenn ich mit STR+Mausrad den zoom veränder. Nur automatisch auf die Fenstergröße bezogen.
 
Das ist in erster Linie als Spaß gemeint, also bitte nicht krumm nehmen. :)

Aber das Argument dazu ist: Entscheidend ist nicht die Bildschirmgröße/-auflösung, sondern die Viewport-Größe, also die Größe des Browserfensters.

Gerade auf großen Monitoren bietet es sich förmlich an, Fenster nebeneinander zu setzen. Finde ich jedenfalls. Ich mache das etwa auch beim Schreiben von Beiträgen ständig, damit ich gleichzeitig die vorherigen Beiträge lesen und meine Antwort im Fenster daneben formulieren kann.

Was ich bei deiner Seite konkret versuchen würde:

Ach, ich mache kurz ein Beispiel.

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Demo</title>
        <style type="text/css">

            /**
             * new clearfix
             *
             * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
             */
            .clear:after {
                visibility: hidden;
                display: block;
                font-size: 0;
                content: " ";
                clear: both;
                height: 0;
                }
            * html .clear             { zoom: 1; } /* IE6 */
            *:first-child+html .clear { zoom: 1; } /* IE7 */

            * {
                margin: 0;
                padding: 0;
            }

            body {
                background: #c0c0c0;
                padding: 16px;
                color: #000;
            }

            .wrapper {
                min-width: 300px;
                max-width: 1280px;
                margin: 0 auto;
            }

            .header {
                height: 161px;
                background: #fff url('http://www.ib-baran.de/mobby-hp/test-ib/bilder/header.jpg') top left no-repeat;
            }

            .header .logo {
                display: block;
                float: right;
                width: 215px;
                height: 161px;
            }

            .menu {
                background: #197DFF;
            }

            .menu ul {
                list-style: none;
            }

            .menu li {
                float: left;
                border-right: 1px solid #fff;
            }

            .menu a {
                display: block;
                padding: 8px 16px;
                color: #fff;
                text-decoration: none;
                font-weight: bold;
            }

            .menu a:hover {
                background: #9FD565;
            }

            .content {
                background: #fff;
                padding: 16px;                
            }

            .content p {
                line-height: 150%;
                margin-bottom: 1em;
            }

            .content img {
                width: 100%;
            }

        </style>
    </head>

    <body>

        <div class="wrapper">
            <div class="header clear"><img class="logo" src="http://www.ib-baran.de/mobby-hp/test-ib/bilder/logo2klein.jpg" alt="alt text" /></div>
            <div class="menu clear">
                <ul>
                    <li><a href="./">Demo</a></li>
                    <li><a href="./">Demo</a></li>
                    <li><a href="./">Demo</a></li>
                    <li><a href="./">Demo</a></li>
                </ul>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet porta elementum. Maecenas leo elit, porta id ultrices sed, pellentesque ac tellus. Duis suscipit placerat magna, ut porttitor dolor accumsan a. Praesent scelerisque, nisi nec facilisis blandit, justo sapien posuere dolor, eget sagittis dui lorem eget augue. Phasellus ut mauris at eros gravida euismod. Proin aliquet malesuada magna. Nulla laoreet tellus vitae enim ornare pellentesque. Nunc magna sapien, viverra placerat iaculis sit amet, mollis quis ante.</p>

                <p>Cras diam tellus, fringilla sed aliquam a, rhoncus sed turpis. Suspendisse potenti. Morbi eget sem bibendum nunc vulputate interdum. Sed bibendum blandit tellus, id ornare risus imperdiet quis. Nunc turpis erat, tristique eu iaculis id, accumsan id odio. Quisque sagittis velit sed mauris tempus in posuere lorem tincidunt. Donec sit amet eros urna, at facilisis lectus. Phasellus consectetur tincidunt dui, id ullamcorper mauris blandit a.</p>

                <p>Nullam vitae nisi lacus, ac congue magna. Mauris accumsan urna et lacus placerat dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a dui massa. Nunc eget sapien non mauris vehicula accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin viverra lacinia mi. Sed eget enim eros, nec tincidunt nunc. Donec rhoncus, magna vel placerat adipiscing, tortor nibh cursus elit, at tincidunt nisi dui sed sem. Nam ut ultricies nisi.</p>

                <p><img src="http://people.ermshaus.org/marc/tmp/html.de/mindblown-finished.png" alt="alt text" style="max-width: 800px;" /></p>
                
                <p>Cras diam tellus, fringilla sed aliquam a, rhoncus sed turpis. Suspendisse potenti. Morbi eget sem bibendum nunc vulputate interdum. Sed bibendum blandit tellus, id ornare risus imperdiet quis. Nunc turpis erat, tristique eu iaculis id, accumsan id odio. Quisque sagittis velit sed mauris tempus in posuere lorem tincidunt. Donec sit amet eros urna, at facilisis lectus. Phasellus consectetur tincidunt dui, id ullamcorper mauris blandit a.</p>

                <p>Nullam vitae nisi lacus, ac congue magna. Mauris accumsan urna et lacus placerat dapibus. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras a dui massa. Nunc eget sapien non mauris vehicula accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin viverra lacinia mi. Sed eget enim eros, nec tincidunt nunc. Donec rhoncus, magna vel placerat adipiscing, tortor nibh cursus elit, at tincidunt nisi dui sed sem. Nam ut ultricies nisi.</p>
            </div>
        </div>

    </body>

</html>

(Edit: Nur im Firefox getestet.)

Hier schiebt sich die Header-Hintergrundgrafik einfach „zusammen“, wenn weniger horizontaler Platz zur Verfügung steht.

Auch das Bild im Content passt sich an die Fenstergröße an.

mobby schrieb:
Das heißt ich hätte gernen den gleichen Effekt wie wenn ich mit STR+Mausrad den zoom veränder. Nur automatisch auf die Fenstergröße bezogen.
Zum Vergrößern anklicken....

Das wollen aus irgendeinem Grund immer alle, aber eine Webseite ist keine Grafik. Wenn etwa die Schriftgröße abhängig von der Fensterbreite ist, wird die Schrift sehr schnell sehr klein.



PS: Es erwartet niemand (jedenfalls kein PC-Nutzer), dass eine Seite bei sehr geringer Viewport-Breite (Hausnummer: unter 500px) noch perfekt aussieht. Aber wenn sie noch halbwegs sauber benutzbar ist, ist das definitiv eine schöne Sache.
 
Zuletzt bearbeitet:
Also von einem zoom Effekt beim verändern der Fenstergröße würde ich abraten.
Wenn man es so will könnte man auch sagen, Personen die die Seite zu groß finden können sich doch mit STRG+Mausrad helfe,
diese Funktion hat schließlich auch seine Daseinsberechtigung. Vielleicht um die Schrift größer zu machen, wenn man schlecht lesen kann.

Ist aber an dieser stelle, wenn ich einfach nur das Fenster in der Breite auf meinem Bildschirm haben möchte um
z.B. mehrere Websites nebeneinander o.ä. zu betrachten nicht die beste lösung, da bei einem Zoom-Effekt beim verkleinern des Fenster schnell alles zu klein wird.
Hier sollte man dem benutzer schon selber die Entscheidungsfreiheit über den Zoom geben.

Die beste Lösung wäre wahrscheinlich generell dein layout in der Breite etwas zu verkleinern, zumal du im contentbreich eh sehr viel freiraum dort lässt.
Den Header müsstest du dann eventuell ein wenig verkleinern, oder du nimmst einen anderen Ausschnitt / anderes Bild.
Da auf vielen Seiten auch z.B. Teaser sind die nebeneinander stehen oder andere Design Elemente,
die recht schwer flexibel im Layout zu setzen sind (Ein umbruch bei 3 nebeneinander stehenden Teasern würde sehr unschön sein) wäre das erstmal mein erster Ansatz.

Es gibt in deinem Layout aber noch die möglichkeit z.B. das logo in den Header rechtsbündig mit float:right zu setzen und das headerbild als Background,
sodass beim verkleinern der Seite das Logo weiter nach links verschoben wird und der Background halt ein wenig verschwindet.
Dann gibt es noch die möglichkeit, dass dein Text beim verkleinern umbricht.

Bevor ich wieder mal den Rahmen spränge finest du eventuell bei google unter flexibles html layout etwas. Z.B. hier (der link zur Beispielseite ist dort in rot, kannst das Fenster ja mal verkleinern und wieder aufziehen um zu sehen, was mit dem Text passiert): Flexibles 2-Spalten-Layout: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

Wobei das glaube ich auch ein Framework ist, müsste aber als Demonstration reichen hoffe ich.

ps: Oder du schaust einfach beim Post von mermshaus, der wohl schneller als ich war :)
 
Zuletzt bearbeitet:
haha okay, schon mal vielen Dank ihr beiden!!!
Also ich habe jetzt das ganze mal von 1280 auf eine Breite von 1080px reduziert. (ist aber noch nicht online)
Das sieht schon mal um einiges besser aus, da wie schon erwähnt wirklich viel Leerraum da war.

Jetzt zu dem Thema des Anpassens.
Wie hast du das gemacht mermshaus?
Wenn ich deine Beispielseite öffne im Browser und von Vollbild auf Fenster wechsel, dann passsen sich die Seiten dem Browserfenster an .... genau das brauch ich.
Ich habe den Header angepasst, also das Bild als Hintergrund des Headers gelegt und das Logo mit float:right reingepackt.
Das heißt, das Logo wandert jetzt nach links wenn ich das Fenster kleiner mache. Aber beim Content da geht garnix, da spackt alles rum. Muss ich hier auch vlt. die "px" werte rausnehmen und mit % arbeiten? Für die Breite.

//edit: Okay, ich glaube ich habs so langsam ... ich meld mich gleich noch Mal wenn es richtig ist. Stell es dann auch online.
 
Zuletzt bearbeitet:
sooo, jetzt habe ich es richtig hinbekommen. Ist es so besser? ;)
Jetzt stört mich nur noch eine Sache, dass der Text dann so auseinander geruppt wird ... aber ich glaube das kann man nicht verhindern oder?
Homepage
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben