Brauche Hilfe, neues Webdesign

[Peterle]

Hallo beisammen,

ich habe eine neue Webseite fertig (responsive Design) und brauche Beurteilungen, ob alles passt.
Wenn möglich mit PC, Handy, Tablet, Phablet, also alles, was einen Browser hat.

Damit das nicht als Spam gewertet wird, schreib ich den Link mal ohne http, also wer helfen mag, kopieren und in der Adressleiste einfügen.

Bitte nur die Seite selbst, nicht ausgehende Links (geht sowieso nur einer) oder Kontakt.
Feedback dann bitte wieder hier rein, vielleicht mit Angabe womit angesehen (Hardware/Browser).

Die Seite: b2b-systems.de/Test/webterminal-zeiterfassung.html

Ich danke allen die sich die Zeit dafür nehmen!

Gruß

Peter

[Minze]

Angesehen mit PC, Mozilla, alles funktioniert, sieht gut aus, passt.

[kraut_ruebe]

laptop, opera neueste version.

wenn ich das viereckerl anklicke und das video startet, wechselt das bild gegen das video und zeitgleich läuft rechts unten in der ecke das video nochmal. ich nehm mal an, das soll so nicht sein, denn das irritiert.

dass sich hinter dem viereckerl ein video verbrigt, erfahre ich nur durch draufklicken. ersichtlich ist das für mich nicht, dass da nochwas da ist, normaler weise würd ich das symbol ignorieren.

die infozeile ist bei mir deplatziert:

infos.jpg (11.54 KiB) 2053 mal betrachtet

[Peterle]

Hallo Minze,
hallo Kraut_Rübe,

vielen Dank! Das "Feature" in Opera ist ja lustig, da haben die sich wohl etwas kaputt programmiert. Mal schauen, ob ich da etwas gegen unternehmen kann.
Die Info's rück ich mal rüber, sieht wirklich doof aus.

Gruß

Peter

[fuxi]

Gratis-Rechtschreibkorrektur:

Browser- basierend -> browserbasiert
Für PC's -> Für PCs (alternativ: Für PC)
Außerdem ist die Groß-/Kleinschreibung bei den Listenpunkten nicht einheitlich.
Arbeits- Zeiterfassung -> Arbeitszeiterfassung (oder Arbeits- und Zeiterfassung? Achtung, kommt mehrmals vor.)
Datenbankserver bzw. - Client -> Datenbankserver bzw. -client
SSL- Zertifikat -> SSL-Zertifikat (Achtung, kommt zweimal vor.)
DIe Salden -> Die Salden
unserme -> unserem
Abreitszeiterfassung -> Arbeitszeiterfassung
HTML- Format -> HTML-Format
Diesntleistung -> Dienstleistung
Info's -> Infos (Achtung, kommt mehrmals vor.)
IOS® -> iOS®
Email -> E-Mail

Die "send"-Schaltfläche ist noch Englisch.


Seite läuft und sieht in Mozilla Firefox 47.0 (auf PC) ordentlich aus. Das Video wird allerdings als Breitbild über die Breite des hochformatigen Platzhalterbildes angezeigt. Oben und unten sind also breite leere Streifen in Hintergrundfarbe.
Seite läuft in Safari (iPad iOS 5.1.1), aber das Video ist nicht abspielbar und verschiebt sich leicht über die rechts daneben stehende Liste. Ebenso ist der rote Info-Text nicht korrekt ausgerichtet und die Telefonnummer bricht teilweise in die nächste Zeile um. Beides (Video und Info-Text) ist sowohl im Hoch- als auch im Querformat so.
Bilder:

Verschobenes Video (nicht abspielbar)

Screenshot1.jpg (35.94 KiB) 2024 mal betrachtet

Info-Text

Screenshot2.jpg (29.16 KiB) 2024 mal betrachtet

[Peterle]

Hallo Fuxi,

vielen vielen Dank für deine scharfen Blick! Sollte mich schämen für diese vielen Fehler
Wird gleich morgen früh angepasst!

Das Video läuft bei mir auf Android 5 auch nicht. Das scheint so gewollt von den mobilen Browsern.
Allerdings zeigt meiner (Chrome) auch keine Schaltflächen.

Gruß aus Schöningen

Peter

[fuxi]

vielen vielen Dank für deinen scharfen Blick!

Ist (unter anderem) mein Job

[Haushahn]

Hallo,
bin mit Firefox 48.0 auf einem Tablet mit Microsoft drauf unterwegs (1920x1200 px), Seite wird gut dargestellt, auch wenn das Fenster nicht maximiert ist. Höchstens ganz unten, bei "Kontakt" das Wort "Business" (in schwarz und dick) ist für mich schwer lesbar.
Im Punkt "Webterminal Zeiterfassung" steht "Arbeits- Zeiterfassung ", ich finde es als ein Wort geschrieben schöner, und so ist es auch sonst im Text geschrieben.
Aufzählungen würde ich durchgend mit Großbuchstaben beginnen ("mobil Fehltage beantragen oder Krankheit melden")
Und im Punkt "Webterminal" steht Kenntnis einmal mit doppel-s.

Aber es ging Dir ja um die Darstellung, und die ist bei mir tadellos!

LG
Gerald

[Peterle]

Hallo Gerald,

vielen Dank! Ich war gestern im Außendienst, daher etwas verspätet
Ich werde inhaltlich noch einmal dran arbeiten, schön das die Darstellung jetzt korrekt wird.
Die Darstellung auf Tablet hatte noch gefehlt.
In diesem Design werden drei Darstellungen Berücksichtigt:
Handy hoch und Quer
Tablet hoch
Desktop

Alle drei Geräte könnten deine Auflösung zeigen, wichtig (beim Gockel) ist die Bedienbarkeit. Also müssen Links und Steuerelemente mindestens 40x40px haben.

Falls es jemand verwenden möchte:

Die Verwendung von poster im HTML- contructor ist nicht in allen Darstellungen optimal.

<video src="video/hier_kommt_die_maus.ogg" width="480" height="320"
poster="video/maus.jpg" controls>

<div> Das wäre dein Video gewesen</div>

</video>

"Poster" zeigt ein Bild als Platzhalter für das Video und stellt darunter die Steuerelemente dar. Das Bild selbst ist ebenfalls mit einbezogen, es wird mit einem Play- Symbol dargestellt.
So jedenfalls die Theorie.
In einigen Browsern wird das Bild aber nicht wie im Original, sondern deutlich dunkler und mit einem Rahmen umgeben dargestellt. Das kann man nicht beeinflussen.
Auch stellt Opera etwas eigenwillig die Steuerelemente in einem eigenen Fenster über dem Bild dar und erzeugt beim Vergrößern eine Kopie im unteren rechten Bildschirmrand.

Insgesamt also ist die Verwendung von Video und Poster nicht optimal. Mein Weg ist langweilig, aber scheint in allen Browsern zu funktionieren.

Grüsse aus dem Tollhaus und vielen Dank für eure Unterstüzung!

Peter

[Thomas74]

AGBs und Impressum müssen von jeder Seite aus aufrufbar sein. Am besten im Header platzieren.
In den Bannern auf den unfertigen Seiten ist das Foto bei mir auf 3 verschiedenen Endgeräten unscharf.