Review meiner Website

[LekoArts]

Hallo!

In den letzten Wochen habe ich mal wieder an einer neuen Version meiner Homepage bzw. meines Portfolios gearbeitet. Da sie jetzt fertig ist und ich Feedback haben will, erstelle ich nun hier einen Thread.
Ich würde mir wünschen, dass sich das Feedback eher auf den Code als auf das Design fokussiert (Könnt ihr aber natürlich auch mitteilen).

Habt ihr Optimierungsvorschläge bezogen auf Code, Stil, Sicherheit?
Sind euch irgendwelche Fehler aufgefallen? Wie sieht die Seite auf eurem Monitor und/oder Smartphone/Tablet aus?



Folgende "Fehler" sind mir bekannt:

 Spoiler

(1) Dadurch, dass auf der Portfolio Unterseite die Bilder per AngularJS geladen werden, versucht Isotope schon das Grid aufzubauen, wenn noch keine Bilder vorhanden sind. Es zu lösen habe ich versucht (z.B. per "ImagesLoaded" o.ä.), aber ich bekomme es nicht hin Isotope erst auszuführen nachdem alle Bilder geladen sind.
Als "halbe" Lösung rufe ich nun nach bestimmter Zeit automatisch einen Button und somit ein Re-Layout auf.
(2) Die Bildergalerie auf den jeweiligen Unterseiten der Projekte hat Probleme wenn das Vorschaubild und das zu zeigende Bild nicht die gleichen Proportionen haben (siehe )
(3) Auf dem Smartphone scheint der Viewport etwas zu "springen" wenn man sich über den Bildern vom Portfolio Bereich (also ganz am Anfang der Home-Seite) befindet. Hierfür weiß ich keine Ursache. Die Hover-Effekte für die Bilder sind ausgeschaltet.

Alle, die daran interessiert sind, was ich benutzt habe, können hier mal reingucken:

 Spoiler

-
- jQuery Plugins (countTo, Fullpage, Instafeed, Slicknav, Lazysizes, Isotope, Modernizr, Photoswipe, Particles)
- AngularJS für das Portfolio
- Editor: Brackets
- Code: gulp mit verschiedenen Modulen, z.B. SCSS, Browsersync, SFTP
- Bilder optimieren/verkleinern/croppen: FSResizer
- SCSS Kompilierung während SFTP: Koala

Danke an alle, die Feedback geben!

Gruß
LeKoArts

[Shadow992]

Ich habe die Seite nicht groß angeschaut und will nur ne Kleinigkeit bemängeln:
Mich stört es etwas, dass die Hauptseite so "stockend" scrollt.
Auch kam mir der erste Aufruf der Seite sehr langsam vor (oder lag das an meinem Internet?). Eventuell kann man da durch LazyLoading noch etwas rausholen.

Aber an sich sehr schöne Seite.

Ahh fast vergessen:
Getestet unter Win 7 mit Opera in der Version 34.0.2036.47

[LekoArts]

Originally Posted by Shadow992

Ich habe die Seite nicht groß angeschaut und will nur ne Kleinigkeit bemängeln:
Mich stört es etwas, dass die Hauptseite so "stockend" scrollt.
Auch kam mir der erste Aufruf der Seite sehr langsam vor (oder lag das an meinem Internet?). Eventuell kann man da durch LazyLoading noch etwas rausholen.

Aber an sich sehr schöne Seite.

Ahh fast vergessen:
Getestet unter Win 7 mit Opera in der Version 34.0.2036.47

Danke für dein Feedback!
Was meinst du mit "stockend" ? Hakelt da eventuell das Fullpage.js Plugin? Das ist zumindest hardwarebeschleunigt. Für mobile Geräte ist das ausgeschaltet.

Bzgl. Geschwindigkeit habe ich mich schon bemüht (z.B. wenige Requests, passende Bilder für verschiedene Viewports. Meines Wissens nach dürfte max. 1MB Bilder geladen werden.). Würde mich freuen, wenn du es nochmal wann anders probierst oder es mich ansonsten nochmal wissen lässt

[Shadow992]

Originally Posted by LeKoArts

Danke für dein Feedback!
Was meinst du mit "stockend" ? Hakelt da eventuell das Fullpage.js Plugin? Das ist zumindest hardwarebeschleunigt. Für mobile Geräte ist das ausgeschaltet.

Bzgl. Geschwindigkeit habe ich mich schon bemüht (z.B. wenige Requests, passende Bilder für verschiedene Viewports. Meines Wissens nach dürfte max. 1MB Bilder geladen werden.). Würde mich freuen, wenn du es nochmal wann anders probierst oder es mich ansonsten nochmal wissen lässt

Ok das war nur "gefühlt" langsam:

 Spoiler

Insgesamt also rund 1,5s. Das ist total ok, dennoch habe ich gemerkt, dass du die Bilder und den JS-Code nicht cachen lässt im Browser. Das solltest du aber echt machen lassen, das bringt viel Performance und gleichzeitig Entlastung deines Servers.

Das mit dem "Scrollen" ist ziemlich sicher so beabsichtigt mich stört es aber.
Wenn ich mit dem Mausrad runter und hoch scrolle, dann macht er ganz kurz (100ms ca) nichts und springt dann zum nächsten Punkt (das Ganze passiert zwar sehr "smooth" aber trotzdem gefällt mir das gar nicht).

Das Problem was ich damit habe:
Ich kann den Scroll-Speed nicht selbst definieren, sondern muss erst immer ca. 1s warten bis ich weiter scrollen kann.

Edit:
Mein Fehler das Caching ist bei dir aktiviert, aber entweder habe ich das manuell ausgeschalten oder Opera zeigt mir das nicht an, wenn ich die Entwicklertools einschalte.

Edit2:
Ich hatte es ausgeschalten (passiert automatisch wenn man Entwicklertools startet), also alles gut. Das mit dem Scrollen stört trotzdem.

[/exit]

Sieht gut aus, was ich aber nicht schön finde ist der Kontakt-Bereich.
Finde die Überschriften und die Inputs zu groß & versuch mal placeholder in Inputs
zu verwenden, sieht meiner Meinung nach schöner aus.

[LekoArts]

Originally Posted by Shadow992

Ok das war nur "gefühlt" langsam:

 Spoiler

Insgesamt also rund 1,5s. Das ist total ok, dennoch habe ich gemerkt, dass du die Bilder und den JS-Code nicht cachen lässt im Browser. Das solltest du aber echt machen lassen, das bringt viel Performance und gleichzeitig Entlastung deines Servers.

Das mit dem "Scrollen" ist ziemlich sicher so beabsichtigt mich stört es aber.
Wenn ich mit dem Mausrad runter und hoch scrolle, dann macht er ganz kurz (100ms ca) nichts und springt dann zum nächsten Punkt (das Ganze passiert zwar sehr "smooth" aber trotzdem gefällt mir das gar nicht).

Das Problem was ich damit habe:
Ich kann den Scroll-Speed nicht selbst definieren, sondern muss erst immer ca. 1s warten bis ich weiter scrollen kann.

Edit:
Mein Fehler das Caching ist bei dir aktiviert, aber entweder habe ich das manuell ausgeschalten oder Opera zeigt mir das nicht an, wenn ich die Entwicklertools einschalte.

Edit2:
Ich hatte es ausgeschalten (passiert automatisch wenn man Entwicklertools startet), also alles gut. Das mit dem Scrollen stört trotzdem.

Ok, dann bin ich ja beruhigt, dass mein ganzer Optimierungswahn bzgl der Bilder etwas gebracht hat

Zum Scrollen: Du hast recht, das Scrollen pro Sektion braucht 700ms und dazwischen ist eine Pause von 700ms. Die Pause wollte ich erst runtersetzen, habe dann aber in verschiedenen Github Issues bzw der Dokumentation gelesen, dass der Wert nicht niedriger seien darf. Sonst gäbe es massive Probleme auf Laptops mit dem Touchpad bzw. der Magic Mouse von Apple.
War eben eine Designentscheidung meinerseits dieses Feature zu nutzen (für Desktop-Geräte).

Originally Posted by léAndreas

Sieht gut aus, was ich aber nicht schön finde ist der Kontakt-Bereich.
Finde die Überschriften und die Inputs zu groß & versuch mal placeholder in Inputs
zu verwenden, sieht meiner Meinung nach schöner aus.

Auch danke dafür. Habe die Boxen etwas kleiner bzw. das Padding kleiner gemacht.

[.Barone]

Mir gefällt das kontakt formular sehr - ich denke das ich mein kontakt formular ändern muss.
Die Seite ist ordentlich und nicht zu unübersichtlich, wie so manche seiten wo du 100 mal scrollen musst um zum ende zu kommen, aber irgendwie kann ich solche webseiten einfach nicht ab.
Wenn ich auf eine website gehe dann will ich nicht 10 stunden scrollen und kliicken müssen.
Dennoch gute arbeit.

[LekoArts]

Originally Posted by .Barone

Mir gefällt das kontakt formular sehr - ich denke das ich mein kontakt formular ändern muss.
Die Seite ist ordentlich und nicht zu unübersichtlich, wie so manche seiten wo du 100 mal scrollen musst um zum ende zu kommen, aber irgendwie kann ich solche webseiten einfach nicht ab.
Wenn ich auf eine website gehe dann will ich nicht 10 stunden scrollen und kliicken müssen.
Dennoch gute arbeit.

Ich finde mein Formular garnicht so besonders, auch weil nicht viele Informationen nötig sind. Trotzdem toll, dass es dir gefällt!

Nun, da ich einfach viel auf Farbe und Schrift geachtet habe, sodass es konsistent bleibt, ist das auch sehr "minimal" gehalten.

Bzgl. des Scrollen (da das recht kontrovers zu seien scheint):
Per Tastatur, über die Navigation und die # bzw. Anker in der URL ist das scrollen auch möglich

[KingDingD0ng]

Hey,

schaut schnieke aus und der Code ist soweit ich gerade mal drüber geskimmt habe, auch ziemlich neat.

Solltest aber meiner Meinung nach die Font von "Menu" bei Tabletgröße ändern. Serifenschrift passt dort irgendwie nicht zum restlichen Seitenbild.

Greetz

[.SkyneT.]

Design ist nichts was mir jetzt im Kopf hängen bleibt, sieht aber sauber und "modern" aus.

Hier: passt jedoch der hover Effekt nicht(ist um 50% nach rechts verschoben):

 Spoiler

Browser: Firefox 43

Sonst ist mir auf den ersten Blick nichts aufgefallen. Die Seite lädt schnell, die Verbindung ist verschlüsselt und der Code scheint komprimiert zu sein.
Google beschwert sich bei einer fast nur über sich selbst.

[LekoArts]

Originally Posted by KingDingD0ng

Hey,

schaut schnieke aus und der Code ist soweit ich gerade mal drüber geskimmt habe, auch ziemlich neat.

Solltest aber meiner Meinung nach die Font von "Menu" bei Tabletgröße ändern. Serifenschrift passt dort irgendwie nicht zum restlichen Seitenbild.

Greetz

Danke, habe ich für Menu + Menu-Unterpunkte so abgeändert. Passt wirklich besser!

Originally Posted by .SkyneT.

Design ist nichts was mir jetzt im Kopf hängen bleibt, sieht aber sauber und "modern" aus.

Hier: passt jedoch der hover Effekt nicht(ist um 50% nach rechts verschoben):

 Spoiler

Browser: Firefox 43

Sonst ist mir auf den ersten Blick nichts aufgefallen. Die Seite lädt schnell, die Verbindung ist verschlüsselt und der Code scheint komprimiert zu sein.
Google beschwert sich bei einer fast nur über sich selbst.

Was für nen Viewport (Displaygröße) hast du? Konnte das Problem leider nicht reproduzieren.

Ja, die Seite ist sicherlich kein "Experiment". Eventuell "traue" ich mich das mal ein nächstes Mal. Wollte nichts zu experimentelles machen

[Hurt Locker]

Den Fake-Counter könntest du ruhig weglassen.

[Icetea]

Würde die ganzen Javascript Dateien oben im Head Tag einbinden und das async Attribute nutzen, gleicher Effekt als würden sie unten im body Tag eingebunden sein, nur sieht das ganze gleich viel sauberer aus. (my point of view)

Sonst gibt es nicht viel zu meckern. Sauber!
(Außer ein Syntax Fehler bei einem Comment in HTML )

Liebe Grüße,
Icetea'

[.SkyneT.]

Originally Posted by LeKoArts

Was für nen Viewport (Displaygröße) hast du? Konnte das Problem leider nicht reproduzieren.

War auf 1920x1080, aber auch wenn ich den Browser resize, bleibt das Problem bestehen. Ist auch im Microsoft Edge und Internet Explorer reproduzierbar.

Ich hab mir mal die paar Minuten Zeit genommen das zu beheben:
Es reicht einfach "right: 0;" zu der "img-overlay" Klasse in "style.css" hinzuzufügen. Hier noch 2 Bilder die den Unterschied zeigen:

 Spoiler

Ohne "right: 0;"

Mit "right: 0;"

[ElDiabolus]

Ansonsten finde ich es nen bisschen strange, dass sich die Ebenen sekündlich um 1 erhöhen.
Sonst aber nice (Y)