Nieuwe website, feedback?

Door JoWannes op maandag 7 mei 2012 21:55 - Reacties (29)
Categorie: Overige, Views: 8.128

Voor mijn opleiding Toegepaste Informatica aan de hogeschool moet ik een "bachelorproef" maken. Zie het als een mini-thesis. Omdat ik een sterke interesse heb in websites en webontwikkeling koos ik voor het onderwerp HTML5 en CSS3, waarbij ik me vooral toeleg op de nieuwe features.

Het papierwerk staat nog niet ver, maar voor mijn presentatie achteraf wou ik natuurlijk ook een echte website maken. A.d.h.v. die site kan ik dan een aantal gebruikte features tonen. Dat komt wat beter over dan de ietwat saaie theorie alleen. :)

Ik koos ervoor de huidige website van Cinematic Mod een make-over te geven. Nuttig voor m'n eindwerk, en mooi meegenomen voor de site!

Omdat zelf knutselen veel leuker is dan alles neerpennen, is de site al het verst gevorderd. Bijna af zelfs. Voordat ik ze effectief live gooi, wil ik ze graag hier even showen, en jullie feedback vragen. :)

*link verwijderd*

For future reference, sceenshots: :)

http://tweakers.net/ext/f/kYp6xU4OR8Hm9KQSS4AtWB6p/medium.jpg http://tweakers.net/ext/f/FwDzzHEgeoZ7l9hKF0TtLLWf/medium.jpg


http://tweakers.net/ext/f/yjxjESMMeT9nhIUOF442MUov/medium.jpg http://tweakers.net/ext/f/Z380INHcAWXYKUpbL7oYJ0sI/medium.jpg


http://tweakers.net/ext/f/pQUEBK6Bti6JIgO66zwHxaBT/medium.jpg


De gebruikte HTML5 en CSS3 elementen ga ik niet specifiek opsommen, dat zien jullie allicht zelf ook. ;) Mogelijk komen er, naargelang m'n papieren eindwerk vordert, er nog bij.

Nog 1 klein detail: IE heb ik aan de kant gegooid. In IE6 en 7 werkt de site niet. In IE 8 en 9 is ze bruikbaar, maar daar blijft 't ook bij. Op de huidige site surft slecht 9% met IE, waarvan 3/4 met IE 9. Die moeten het dus stellen zonder de CSS3 fraaiheid. Het aandeel IE 8 en 7 gebruikers is dus 'verwaarloosbaar'.
Elke IE gebruiker wordt erop gewezen dat de site beter werkt in een alternatieve browser. :)

Graag jullie feedback! :)

Edit:
Voor het gevraagd wordt, gebruikte bronnen:(Waarbij er bij alle bovenstaande wat te verbeteren viel aan de crossbrowser compatibiliteit. Dat heb ik gedaan, maar voor IE kan ik het echt niet te veel opnemen. ;))

Volgende: Nieuwe website [2] 05-'12 Nieuwe website [2]
Volgende: Onbegrijpbaar... 07-'10 Onbegrijpbaar...

Reacties


Door Tweakers user Eguna, maandag 7 mei 2012 22:09

Ziet er zeer strak uit! I likeh

Door Tweakers user Damic, maandag 7 mei 2012 22:28

Strtak maar euhm kun je een laad icoontje tonen als je de foto's aan het bekijken bent, zodoende dat de gebruiker weet dat ie aan het laden is.

ps. is die mod van jou?

[Reactie gewijzigd op maandag 7 mei 2012 22:29]


Door Tweakers user jamy015, maandag 7 mei 2012 22:53

Ziet er inderdaad goed uit!


Door Tweakers user Caelorum, maandag 7 mei 2012 23:55

Heh, afgezien van de plaatjes op bijv. de frontpage die gedraaid worden in Opera en niet in IE9 merk ik echt totaal geen verschil tussen beiden.

[Reactie gewijzigd op maandag 7 mei 2012 23:56]



Door Tweakers user Chibi2k, dinsdag 8 mei 2012 00:38

Ik zou nog wel wat aan die navigatie doen. Alles is heel minimalistisch en redelijk vierkant waardoor het menu/navigatie het verknald. Ook zou ik even kijken naar de font gebruik in de knoppen en kleur instelling. Qua techniek heb je in redelijk goed in elkaar gestoken maar is nog vrij onduidelijk of komt niet overzichtelijk over


de Linke sidebar is dat een soort Update progressie balk? Zoja zou ik nog boven even een header neerzetten.

Door Tweakers user JoWannes, dinsdag 8 mei 2012 08:15

Damic schreef op maandag 07 mei 2012 @ 22:28:
kun je een laad icoontje tonen als je de foto's aan het bekijken bent, zodoende dat de gebruiker weet dat ie aan het laden is.
De image / video viewer heeft een loading dingetje. Ik vermoed dat je dus bedoelt wanneer je op 1 van de 4 stacks bovenaaan de meeste pagina's klikt?
Dat zou er nu moeten opzitten, maar hier laadt 't zo instant dat ik 't niet kan zien. Even bedenken hoe ik dat moet testen.
Caelorum schreef op maandag 07 mei 2012 @ 23:55:
Heh, afgezien van de plaatjes op bijv. de frontpage die gedraaid worden in Opera en niet in IE9 merk ik echt totaal geen verschil tussen beiden.
Geen afrondingen op de hovers van beide navigatie elementen (zowel boven als links), geen draaiingen op de slider op de homepage, noch op de stacks op de meeste andere pagina's. De fijne afwerking is er niet dus. Al werkt alles wel.
Chibi2k schreef op dinsdag 08 mei 2012 @ 00:38:
Ik zou nog wel wat aan die navigatie doen. Alles is heel minimalistisch en redelijk vierkant waardoor het menu/navigatie het verknald. Ook zou ik even kijken naar de font gebruik in de knoppen en kleur instelling. Qua techniek heb je in redelijk goed in elkaar gestoken maar is nog vrij onduidelijk of komt niet overzichtelijk over
De navigatie is inderdaad relatief minimalistisch en moet het vooral hebben van de duidelijke hover effecten.
Ik denk dat de navigatie bovenaan op alle non-CM pagina's redelijk opvalt, aangezien daar de huidige pagina geaccentueerd is. (zelfde effect als de hover).
De navigatie links leidt inderdaad naar de verschillende versies, waarbij de bovenste -11- de meest recente is. Jouw idee is dus dat deze niet duidelijk is. Mss een iets donkere kleur geven...
Het font in de knoppen is hetzelfde als de content, en is groter. Wat is precies je opmerking daarbij?

Aan iedereen al bedankt voor de feedback. :)

[Reactie gewijzigd op dinsdag 8 mei 2012 08:17]


Door Tweakers user Gish, dinsdag 8 mei 2012 09:04

Ziet er super strak uit. Ik heb alleen wat moeite met het lezen van je blog. Op je nieuwe website heb je het wel goed begrepen hoe het zit met contrast tussen tekst en achtergrond, maar hier valt dat wat tegen.

Overigens, op de homepage staat zo'n foto dingetje die verspringt. Deze draait verre van vloeiend in mijn browser (Opera 11.62, Win8 x64). Of ligt dat toch aan mij?

Door Tweakers user Luuk1983, dinsdag 8 mei 2012 10:00

Een melding geven bij zelfs de laatste versie van IE dat de site beter in Firefox of Chrome of Opera zou voor mij al voldoende reden zijn om de site niet serieus te nemen. Dat je IE7 en IE8 niet specifiek ondersteund kan me voorstellen, maar IE9 ondersteund toch al een hele hoop CSS3 en HTML5. En ook Firefox, Chrome en Opera hebben zo hun eigennaardigheden qua CSS3 of hebben browser-specifieke tags nodig om te werken. Maar 'even' IE9 wegschuiven vind ik te ver gaan. Daar kom je in de praktijk echt niet mee weg.

Door Tweakers user thefal, dinsdag 8 mei 2012 10:11

JoWannes schreef op dinsdag 08 mei 2012 @ 08:15:
De navigatie links leidt inderdaad naar de verschillende versies, waarbij de bovenste -11- de meest recente is. Jouw idee is dus dat deze niet duidelijk is. Mss een iets donkere kleur geven...


Aan iedereen al bedankt voor de feedback. :)
Ik zou gewoon boven Cinematic Mod 11 een titel zetten als "Version History" of "Changelog"

De link naar het forum doet het ook niet:
The requested URL /cm_reloaded/site/forum/ was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Door Tweakers user Jazzy, dinsdag 8 mei 2012 10:20

Als ik kies tussen de verschillende tabs bovenaan, verspringen alle vlakken op de pagina. Dat komt onder andere door die zwarte balk met "FakeFactory Cinematic Mod © 2012" die er het ene moment wel is en dan weer niet.

Beter kies je een wat vastere vlakverdeling waarbij alleen de inhoud verandert als je navigeert.

Dat IE verhaal is compleet uit de tijd, dat zou je niet moeten doen als je zakelijk serieus wilt worden genomen. En hoe serieus moet je iemand nemen die iets niet wil of kan ontwerpen zodat het op alle browsers goed toont.

Door Tweakers user Luuk1983, dinsdag 8 mei 2012 10:29

Jazzy schreef op dinsdag 08 mei 2012 @ 10:20:
Dat IE verhaal is compleet uit de tijd, dat zou je niet moeten doen als je zakelijk serieus wilt worden genomen. En hoe serieus moet je iemand nemen die iets niet wil of kan ontwerpen zodat het op alle browsers goed toont.
Inderdaad, normaal gesproken overleg je met de klant wat hij/zij wil. Als je IE8 en/of IE7 ook moet ondersteunen kan het zijn dat je afspreekt dat in IE7 en IE8 de website er net wat minder uitziet door gebrek aan ondersteuning van CSS3 (bijvoorbeeld ronde hoeken), of je maakt een aparte stylesheet voor de oudere browsers, of je lost het op andere manieren op dan met CSS3 en dan kost het wat meer werk.

Maar uiteindelijk is de klant degene die bepaalt.

Door Tweakers user JoWannes, dinsdag 8 mei 2012 10:44

Gish schreef op dinsdag 08 mei 2012 @ 09:04:
Overigens, op de homepage staat zo'n foto dingetje die verspringt. Deze draait verre van vloeiend in mijn browser (Opera 11.62, Win8 x64). Of ligt dat toch aan mij?
Opera 11.62 op Win 7 x64, en het loopt vlot. Ook in alle andere browsers hier. Mogelijk een probleem met hardware versnelling o.i.d. onder Win 8? GPU / drivers?
Luuk1983 schreef op dinsdag 08 mei 2012 @ 10:00:
Een melding geven bij zelfs de laatste versie van IE dat de site beter in Firefox of Chrome of Opera zou voor mij al voldoende reden zijn om de site niet serieus te nemen. (...) Maar 'even' IE9 wegschuiven vind ik te ver gaan. Daar kom je in de praktijk echt niet mee weg.
Gezien het doelpubliek van de site gebruikt slechts 9% IE, het merendeel (75%) daarvan gebruikt IE9. De site werkt in IE 9, maar de CSS3 functionaliteit zit gewoon niet in IE 9... Je hebt lapmiddeltjes met JS, maar dat is ook allemaal maar gehack...Die laatste heb ik geprobeerd. Werkt niet goed. Put in IE7 alle links uit..? Die middelste, bekijk de volgende pagina in non-IE, en nadien in IE9 en je weet hoe laat het is:
http://css3pie.com/demos/gradient-patterns
Merk ook de tekst op die erboven staat:
These demos work properly in IE 9 thanks to PIE. They do not work in IE 6-8 due to lack of support for sizing/positioning of linear-gradient as a tiled background.
Work in IE9..? Right! :')

De andere browsers werken idd met hun eigen prefixen, -moz-, -webkit- en -o-, maar voor de rest werkt 't wel allemaal.
thefal schreef op dinsdag 08 mei 2012 @ 10:11:
Ik zou gewoon boven Cinematic Mod 11 een titel zetten als "Version History" of "Changelog"
De link naar het forum doet het ook niet:
Ik denk erover na. Link naar 't forum is idd relatief. Werkt dus nu niet vanaf deze tijdelijke dev locatie.
Jazzy schreef op dinsdag 08 mei 2012 @ 10:20:
Als ik kies tussen de verschillende tabs bovenaan, verspringen alle vlakken op de pagina. Dat komt onder andere door die zwarte balk met "FakeFactory Cinematic Mod © 2012" die er het ene moment wel is en dan weer niet.
Ik volg niet. Tabs bovenaan, bedoel je die 4 stacks waarmee je de afbeeldingen toont? Wat gaat er net mis? Screenshots? Welke browser en versie gebruik je?
Dat IE verhaal is compleet uit de tijd, dat zou je niet moeten doen als je zakelijk serieus wilt worden genomen. En hoe serieus moet je iemand nemen die iets niet wil of kan ontwerpen zodat het op alle browsers goed toont.
Jij hebt nog niet veel websites gemaakt, dat is duidelijk, m'n beste vriend. ;)
Nogmaals, voor een site met een meer algemeen doelpubliek, of voor 'n klant, of een site met economisch doel, zou ik ook meer aandacht spenderen aan IE.

[Reactie gewijzigd op dinsdag 8 mei 2012 11:03]


Door Tweakers user fvdberg, dinsdag 8 mei 2012 11:11

ik krijg hier op Internet explorer 8 "Your browser is ancient! Upgrade to a different browser or install Google Chrome Frame to experience this site."

beetje kort door de bocht nietwaar? en kan dat niet iets vriendelijker?

er zijn meerdere gamers met xp x64 op hun gamingrig omdat dit lichter is als windows vista/7 en alles voor de framerates..

[Reactie gewijzigd op dinsdag 8 mei 2012 11:12]


Door Tweakers user JoWannes, dinsdag 8 mei 2012 11:18

fvdberg schreef op dinsdag 08 mei 2012 @ 11:11:
ik krijg hier op Internet explorer 8 "Your browser is ancient! Upgrade to a different browser or install Google Chrome Frame to experience this site."
beetje kort door de bocht nietwaar? en kan dat niet iets vriendelijker?
Klopt. Aangepast. Die melding verschijnt nu enkel bij IE 7 en lager.
Overigens hoeft 't feit dat IE9 niet beschikbaar is op XP niet te betekenen dat je daarom op XP niet over een moderne browser kan beschikken. ;)

Ik downloade zonet het voorbeeld van Curved Corner. Toegegeven, het werkt in IE, maar dan krijg je melding van het uitvoeren van onveilige scripts. Is dat dan een beter alternatief? Mij lijkt het niet...
http://code.google.com/p/curved-corner/downloads/list (download demo en open in IE 9)
Edit: damn, werkt enkel lokaal, niet als ik 't online gooi? :/

[Reactie gewijzigd op dinsdag 8 mei 2012 11:23]


Door Tweakers user Martijn19, dinsdag 8 mei 2012 11:36

Sjongejonge wat een loof voor IE hier allemaal.
Die site is toch helemaal niet gemaakt voor legacy software (en ja, naar mijn _mening_ is IE8 ook legacy).

Ik snap sowieso niet waarom mensen zich zo vreselijk druk maken om browser compatibiliteit. Tenzij jij een bepaalde web app maakt wat moet werken in een bepaalde browser zorg gewoon dat het "redelijk" getoond word, goed werkt en klaar ermee.

Een mod community (dat maak ik van de site op) kan zelf toch wel een fatsoenlijke browser installeren. En (bijvoorbeeld) een drop shadow dat in IE9 niet word weergegeven is toch niet zo beeldbepalend dat je het met hacks _moet_ laten zien.

Als alle developers nu eens richten op de toekomst en alleen het hoognodige (rounded corners en shadows zijn niet nodig) ondersteunen in een oudere browser wat zullen we dan snel vooruit kunnen gaan.

@fvdberg,

Gamingrig, windows xp? Dat is anno 2012 nog een combinatie?
Kom op, meerdere gamers die XP gebruiken? Meerdere in de zin van 'op 1 hand te tellen' van de honderdduizenden gamers die er zijn?

edit:

Nog even een verduidelijking van wat ik bedoel:
Waarom zou je verschrikkelijk veel tijd in het exact hetzelfde maken van een website in alle browsers als dat je doel helemaal niet is? Waarom zoveel extra uren (en dus geld, mocht het geen hobbyproject zijn) erin steken?
Tuurlijk, functionaliteit is belangrijk, maar dan zelfs nog is bijvoorbeeld ie7 zo verwaarloosbaar dat je je moet afvragen of zo iemand wel je doelgroep is.
Waarom moeten websitebouwers zich steeds aanpassen. Iemand die een mod installeert kan ook prima upgraden naar een verbeterde browser. Als iedereen dat zou doen dan kunnen webdevelopers zich meer focussen op de toekomst dan het verleden.

[Reactie gewijzigd op dinsdag 8 mei 2012 11:44]


Door Tweakers user Asskicker, dinsdag 8 mei 2012 11:58

Hij heeft als onderwerp HTML5 en CSS3 gekozen, dan moet hij zich toch richten op HTML5 en CSS3 en niet op hacks om een dergelijk resultaat te krijgen in oudere browsers. Zeker al omdat de doelgroep van de website bijna volledig bestaat uit redelijk gevorderde computer gebruikers waarvan je mag uitgaan dat ze een moderne browser gebruiken.

De site zelf ziet er zeer goed uit, zeker een upgrade tegenover de oude. :)

Door Tweakers user Luuk1983, dinsdag 8 mei 2012 12:47

Ik vind Webkit en Mozilla specifieke tags net zo goed 'hacken'. Ja het is inderdaad vrij simpel, maar naar mijn bescheiden mening niet minder 'smerig' dan browser specifieke stylesheets en dergelijke. En je krijgt er simpelweg GEEN CSS3 mee die correct valideerd.

Door Tweakers user i-chat, dinsdag 8 mei 2012 13:31

ben ik dan echt de enige die de nieuwe site, niet vind passen bij het onderwerp ...

wit / oranje past meer bij een website over office producten dan over half life2...

Door Tweakers user JoWannes, dinsdag 8 mei 2012 13:44

Luuk1983 schreef op dinsdag 08 mei 2012 @ 12:47:
Ik vind Webkit en Mozilla specifieke tags net zo goed 'hacken'.
Ik zou 't ook wel willen dat die prefixen niet nodig waren. Want nu moet je 3x hetzelfde schrijven, juist met andere prefix. Maar de functionaliteit is er tenminste. Bij IE is die er niet en wordt die via JS alsnog (deels) geÔmplementeerd door van die hacks waarvan ik er een paar gaf als voorbeeld. Toch wel een fors minder mooie oplossing.
i-chat schreef op dinsdag 08 mei 2012 @ 13:31:
ben ik dan echt de enige die de nieuwe site, niet vind passen bij het onderwerp ...
wit / oranje past meer bij een website over office producten dan over half life2...
Nee, dat ben je niet. Ikzelf draag nml. ook deels dat idee. Het oranje is echter HL2 oranje, dat is wel een gelijkenis. Zwart i.p.v. wit past mogelijk beter, maar zoek dan nog maar eens een paar goeie tinten. Dat krijg je nooit zo mooi als het huidige. Tevens blijkt tekst op een zwarte achtergrond toch niet helemaal goed te lezen.

[Reactie gewijzigd op dinsdag 8 mei 2012 13:46]


Door Tweakers user fvdberg, dinsdag 8 mei 2012 14:59

JoWannes schreef op dinsdag 08 mei 2012 @ 11:18:
@fvdberg,

Gamingrig, windows xp? Dat is anno 2012 nog een combinatie?
Kom op, meerdere gamers die XP gebruiken? Meerdere in de zin van 'op 1 hand te tellen' van de honderdduizenden gamers die er zijn?
http://store.steampowered.com/hwsurvey is een mooie manier om hier inzage in te krijgen:

statistieken van april 2012

Windows XP 32 bit 14.90%
Windows XP 64 bit 0.50%
Windows Vista 32 bit 5.48%
Windows Vista 64 bit 6.28%
Windows 7 14.65%
Windows 7 64 bit 53.86%

windows 7 is idd dus de meerderheid, maar xp kent nog meer gebruikers als vista

De cinematic mod heeft als hardware specs

a DX9 capable graphics hardware with minimum 512 MB VRAM. (1024 MB recommended)
at least 3 GB RAM
a fast dual-core processor (or better)

dus valt het aantal xp gebruikers uit op max 0.50% van alle steam gebruikers. en nee die zijn niet op 1 hand te tellen, maar je zal wel ver komen.

houden we de originele specs aan van HL2 dan wordt het iets moeilijker, want daar is de 3 gb absoluut niet noodzakelijk.

[Reactie gewijzigd op dinsdag 8 mei 2012 15:20]


Door Tweakers user Martijn19, dinsdag 8 mei 2012 15:24

Die cijfers zijn nog hoger als verwacht. Sowieso bedankt voor de bron, is handig ;)

Dan mijn vraag (niet perse persoonlijk gericht): waarom nog ondersteunen? Waarom de minderheid niet verplichten tot een upgrade i.p.v. meerderheid laten genieten van mooiere features.

Door Tweakers user fvdberg, dinsdag 8 mei 2012 15:36

tja windows xp is natuurlijk gedateerd inmiddels.maar qua performance... zelfs zonder ssd boot een quadcore ontiegelijk rap op onder xp x64. plus de memory load is laag. voor oudere games zie ik geen verdere reden om te upgraden als dat het gedateerd is

Door Tweakers user Luuk1983, dinsdag 8 mei 2012 16:50

fvdberg schreef op dinsdag 08 mei 2012 @ 15:36:
tja windows xp is natuurlijk gedateerd inmiddels.maar qua performance... zelfs zonder ssd boot een quadcore ontiegelijk rap op onder xp x64. plus de memory load is laag. voor oudere games zie ik geen verdere reden om te upgraden als dat het gedateerd is
Even offtopic dan, maar een lage memoryload is alles behalve 'fijn'. Windows Vista en Windows 7 hebben juist begrepen dat leeg geheugen niks doet en dat je beter een profiel kan opbouwen van een gebruiker en vast dingen kan preloaden in het geheugen die waarschijnlijk nodig zijn. Het geheugen kan je altijd vrijgeven indien nodig. Zijn respectievelijk de PreFetcher en SuperFetcher van Vista en 7.

En ik heb helaas niet zo snel even een bron kunnen vinden, maar ik heb al eerdere malen gelezen dat op moderne hardware WIndows 7 een stuk sneller is met een hele hoop dingen dan WIndows XP in een gelijke situatie.

Dat Windows XP snel opstart geloof ik direct: er hoeft veel minder geladen te worden dan nieuwere OS-en.

Door Tweakers user Donool, dinsdag 8 mei 2012 17:22

Ziet er goed uit, mijn complimenten ervoor!

Door Tweakers user Ivos, dinsdag 8 mei 2012 17:49

Als je die presentatie nog moet gaan maken, doe 'm dan gelijk met iets als Presenteer.js , of Zoomooz en Impress.js. Vooral de eerste en laatste helpen om een prezi-achtige presentatie te maken die in html+css draait, leuker dan powerpointals detail voor de beoordeling denk ik :)

Door Tweakers user JoWannes, dinsdag 8 mei 2012 18:15

Niet meer of minder offtopic dan de comments erboven. }> :+
Ivos schreef op dinsdag 08 mei 2012 @ 17:49:
Als je die presentatie nog moet gaan maken, doe 'm dan gelijk met iets als Presenteer.js , of Zoomooz en Impress.js. Vooral de eerste en laatste helpen om een prezi-achtige presentatie te maken die in html+css draait, leuker dan powerpointals detail voor de beoordeling denk ik :)
Dat is zeker een mooie tip! Dankjewel! :)

Door Tweakers user sm1ley, donderdag 10 mei 2012 14:37

Een puike website, maar toch bevalt het vorige uiterlijk me beter. Kleuren van vorige website passen perfect bij HL2, en de oude website doet meer tekst op minder ruimte. Desondanks zit de nieuwe, volgens mij, technisch goed in elkaar.

Ben trouwens een fervent gebruiker (en donateur :P) van Juergen's oppoets mods, dus ben verrast de maker van zijn website hier te zien :).

Reageren is niet meer mogelijk