Nieuwe website [2]

Door JoWannes op maandag 21 mei 2012 14:20 - Reacties (12)
Categorie: Overige, Views: 7.090

2 weken geleden plaatste ik 'n blogpost i.v.m. de nieuwe website voor Cinematic Mod die ik aan 't maken ben. Ik vroeg hierbij om jullie feedback / input.

Die input kwam er, waarvoor dank. :) De voornaamste elementen die naar voor kwamen:

Het ziet er goed / strak / modern uit, maar:
  • het kleurenschema (wit / lichtgrijs) past niet bij het onderwerp, Half-Life 2
  • de navigatie valt niet voldoende op t.o.v de rest en is niet duidelijk genoeg
  • IE gebruikers, en dan voornamelijk van IE7 en IE8 krijgen een te grove melding
  • volledige ondersteuning voor IE9 ontbreekt
Na deze post is het even stil geweest, maar dat wil niet zeggen dat ik de feedback gelaten heb voor wat het is. Ik had 't even druk (stage, eindwerk, solliciteren), maar inmiddels heb ik tijd gevonden om de nodige aanpassingen door te voeren! :)

De belangrijkste wijzigingen:
  • De kleurstelling is veranderd van lichtgrijs naar verschillende schakeringen donkergrijs. De tekst is wit tot zeer licht grijs. Dit geeft direct een heel andere sfeer!
  • Het contrast van de linkse navigatie met de achtergrond is nu groter. Er is d.m.v. een kleine header aangegeven welke de huidige versie is, en welke de oudere versie zijn.
  • De melding van "ancient browsers" (default van HTML5Boilerplate) is volledig verwijderd. De melding dat de site er het beste uitziet in een non-IE browser blijft wel voor alle versies zichtbaar, maar daarin staat nu vermeld dat IE 6, 7 en 8 niet ondersteund worden (dus IE9 door eliminatie wel :+)
  • Ik heb gemerkt dat border-radius werkt in IE9, maar niet i.c.m. gradients. Je moet dus kiezen. Border radius heeft mijn voorkeur gekregen. Nu ziet de site er in IE9 bijna net zo goed uit als in de andere browsers, op de gradients en rotate transformatie na dan.
  • Door de site beter af te stemmen op IE9 ziet het er in IE8 ook beter uit. De site werkt volledig in IE8 (IE7 en 6 niet).
  • ...
Natuurlijk krijg je van mij ook 'n linkje: *knip* (de site is inmiddels live)
Vergeet Ctrl - F5 niet, zodat je het nieuwste stylesheet krijgt, als je vorige keer ook de site bezocht!

En wat screenshots voor latere referentie:

http://tweakers.net/ext/f/yvIcKlLSvwjC0HJKVe9n4y5C/medium.png http://tweakers.net/ext/f/gi2s0qllu8ynllsO7dtKyMfI/medium.png
http://tweakers.net/ext/f/aLS9Jpxg2Vxa3jfoxeDJ0UCs/medium.png http://tweakers.net/ext/f/509rU3daBKkTxF0zwE0QR1IM/medium.png

Als er nog iemand feedback heeft, hoor ik dat graag. Zo niet, gaat de site heel binnenkort live in deze styling. :)

Volgende: Wie verzint dat? 09-'12 Wie verzint dat?
Volgende: Nieuwe website, feedback? 05-'12 Nieuwe website, feedback?

Reacties


Door Tweakers user Luuk1983, maandag 21 mei 2012 14:39

Je hebt ervoor gekozen (iig op de homepage) om het blok met daarom de roterende foto en daarnaast de tekst 'fakefactory cinematic mod...' iets lichter te maken dan het menu bovenin het het blok nieuws.

Dit kleurverschil is te subtiel voor de goedkope TN-monitors die 80% van de mensen heeft. Ik kan het maar net zien. Mogelijk dat je het contrast nog iets moet vergroten.

Verder ziet het er netjes uit moet ik zeggen. Ik heb geen tijd om er veel dieper in te duiken, maar de eerste indruk is in ieder geval goed.

Door Tweakers user Donool, maandag 21 mei 2012 16:04

Ziet er mooi uit, vind het kleur gebruik ook erg mooi :) Het effect over een knop gaan links is ook erg leuk, net als het contact formulier.

Door Tweakers user i-chat, maandag 21 mei 2012 18:15

dit was wat ik iig bedoelde, site ziet er nu aanzienlijk beter uit, ook goed dat je ie9 nu ook gewoon ondersteund, dat je 'het mooiste en laatste' uit ander browsers wilt slepen, en niet bij IE is wat mij betreft precies op het randje van acceptabel, en mijlen beter dan wat de gemiddelde ontwerper voor ie-only sites met alternatieve browsers (voor zover je daar van kunt spreken) doet ...

Door Tweakers user Damic, maandag 21 mei 2012 18:26

Ha laad icoontje voor de foto's, I like :D

Door Tweakers user guanche, dinsdag 22 mei 2012 12:13

In de bovenste rij op who_is_fakefactory.php zijn de animaties niet helemaal consistent. Het schuift in als je op een categorie klikt, maar schuift niet uit. Ook als je op het kruisje duwt bij het overzicht van de fotos krijg je weer een andere animatie. Het is mooier als je hier uniformiteit in aanbrengt :)

Door Tweakers user JoWannes, dinsdag 22 mei 2012 13:37

Luuk1983 schreef op maandag 21 mei 2012 @ 14:39:
Je hebt ervoor gekozen (iig op de homepage) om het blok met daarom de roterende foto en daarnaast de tekst 'fakefactory cinematic mod...' iets lichter te maken dan het menu bovenin het het blok nieuws.
Dit kleurverschil is te subtiel voor de goedkope TN-monitors die 80% van de mensen heeft. Ik kan het maar net zien. Mogelijk dat je het contrast nog iets moet vergroten.
Ik volg niet helemaal goed wat je bedoelt, maar het klopt dat de borders en titels wit (#fff) zijn, en de tekst gebroken wit (#ddd) is.
Het verschil is niet groot, maar leest iets gemakkelijker vind ik, uitgaande van hoe het er op mijn Dell U2711 (H-IPS) uit ziet.
i-chat schreef op maandag 21 mei 2012 @ 18:15:
dit was wat ik iig bedoelde, site ziet er nu aanzienlijk beter uit, ook goed dat je ie9 nu ook gewoon ondersteund (...)
:)
Damic schreef op maandag 21 mei 2012 @ 18:26:
Ha laad icoontje voor de foto's, I like :D
Bedoel je voor als je op een stack klikt, of voor als je op een thumb klikt (om de volledige foto te tonen). Dat eerste is er nu namelijk weer uit (nadeel van het onderstaande te fixen).
guanche schreef op dinsdag 22 mei 2012 @ 12:13:
In de bovenste rij op who_is_fakefactory.php zijn de animaties niet helemaal consistent. Het schuift in als je op een categorie klikt, maar schuift niet uit. Ook als je op het kruisje duwt bij het overzicht van de fotos krijg je weer een andere animatie. Het is mooier als je hier uniformiteit in aanbrengt :)
Daar heb je gelijk in.
De animaties zijn echter wel allemaal hetzelfde, slideToggle(slow). Echter, door het asynchrone gedrag van JS ziet het er niet hetzelfde uit. Ik heb een aantal animaties verplaatst en aangepast, en op eentje een delay gezet, waardoor het er nu consistent uitziet. Nu heb je overal eerst een slideUp, en dan pas de slideDown. :)

[Reactie gewijzigd op dinsdag 22 mei 2012 13:40]


Door Tweakers user Luuk1983, dinsdag 22 mei 2012 14:19

JoWannes schreef op dinsdag 22 mei 2012 @ 13:37:
[...]

Ik volg niet helemaal goed wat je bedoelt, maar het klopt dat de borders en titels wit (#fff) zijn, en de tekst gebroken wit (#ddd) is.
Het verschil is niet groot, maar leest iets gemakkelijker vind ik, uitgaande van hoe het er op mijn Dell U2711 (H-IPS) uit ziet.
[...]
:)
Ik bedoel de background-color (ik was misschien niet helemaal duidelijk). Er zitten meerdere kleuren zwart in de achtergrond. Maar die kleurverschillen zijn zo subtiel dat ik ze maar moeilijk kan onderscheiden op een TN-monitor.

Door Tweakers user JoWannes, dinsdag 22 mei 2012 14:36

Ah, je hebt 't over de background. Die bestaat idd uit meerdere 'kleuren'. De hoofdachtergrond (van de content) is #171717, de (media)header en footer delen een iets blekere background (honingraat patroon, maar niet erg zichtbaar), de bovenste balk van de header en de download sectie hebben eveneens een honingraatpatroon, en die is nog iets bleker.

Op mijn H-IPS scherm ziet 't er alleszins goed uit. Straks eens een TN monitor zoeken en dat bekijken.
Update: Zonet even bekeken op een Samsung 245B+ (TN), duidelijk zichtbaar, geen probleem lijkt me.

Tevens heb ik me bedacht dat de navigatie voor de afbeeldingen een stuk duidelijker kon. Dat heb ik bij deze ook gefixt. Pak duidelijker en consistenter om door de thumbnails te navigeren. :)

[Reactie gewijzigd op dinsdag 22 mei 2012 14:45]


Door Tweakers user Luuk1983, dinsdag 22 mei 2012 16:46

JoWannes schreef op dinsdag 22 mei 2012 @ 14:36:
Op mijn H-IPS scherm ziet 't er alleszins goed uit. Straks eens een TN monitor zoeken en dat bekijken.
Update: Zonet even bekeken op een Samsung 245B+ (TN), duidelijk zichtbaar, geen probleem lijkt me.
Uiteraard is het aan jou om er wat mee te doen of niet. Ik wil alleen maar zeggen dat ik hier een iiyama ProLite E2470HDSD en een Acer P223W en op beiden zie ik het contrast amper. De enige reden waardoor ik het honingraat-patroon 'gezien' heb, is omdat er toevallig met de colorpicker overheen ging om te kijken wat het kleurverschil tussen de blokken was, anders had ik het helemaal niet geweten. Veel mensen hebben goedkope slecht gecalibreerde monitors en ik heb niet echt het idee dat ik hier hele uitzonderlijk slechte monitors heb staan. Bij mij is het in ieder geval heel slecht gesteld qua contrast en dat betekent dat er een hoop mensen kunnen zijn die dat ook hebben.

Door Tweakers user NinjaTuna, dinsdag 22 mei 2012 17:25

Mooi design hoor :)
Ik vind alleen die pijltjes om de slideshow op home niet zo mooi, maarja, alles subjectief he

Door Tweakers user JoWannes, woensdag 23 mei 2012 09:28

Luuk1983 schreef op dinsdag 22 mei 2012 @ 16:46:
Uiteraard is het aan jou om er wat mee te doen of niet. Ik wil alleen maar zeggen dat ik hier een iiyama ProLite E2470HDSD en een Acer P223W en op beiden zie ik het contrast amper.
Dat zal idd per monitor afhankelijk zijn. Verder is het geen probleem als je monitor deze kleuren niet goed kan onderscheiden, de site wordt daar niet meer of minder leesbaar door. Ik ga 't zo laten. :)
NinjaTuna schreef op dinsdag 22 mei 2012 @ 17:25:
Mooi design hoor :)
Ik vind alleen die pijltjes om de slideshow op home niet zo mooi, maarja, alles subjectief he
Je hebt gelijk hoor. Op de lichtgrijze layout kwam dit veel beter tot z'n recht. Nu met de donkere tinten is het wat minder, en valt het ook bij de overgangen op. Heb de knoppen weggegooid. :) Het zijn uiteindelijk ook maar 5 afbeeldingen, en ze cyclen wel snel genoeg.

Door Tweakers user martijnve, woensdag 23 mei 2012 15:20

Site ziet er goed uit, ga de mod ook zeker proberen. De link naar het forum is dood.

Reageren is niet meer mogelijk