Stijladvies

Status
Niet open voor verdere reacties.
Het is heel eenvoudig. Ik heb ervoor de jQuery lib gebruikt (eenvoudigweg downloaden, ergens op de server opslaan en in je pagina linken naar het script), vervolgens plaatste ik in de <a> een afbeelding.

Die ziet er globaal zo uit:


+-----------+
|Winkelwagen|
|Winkelwagen|
+-----------+


winkelwagen.png


Nu moet je je a een beetje CSS meegeven:

Code: 
a.menulink{
  display: block;
  height: 18px; // ongeveer de helft van de hoogte van je plaatje
  width: 124px; // de breedte van je plaatje
}

Ook het plaatje dat er in komt geef je een beetje CSS:

Code: 
a.menulink img{
  position: absolute;
  top: 0px;
}

Dan staat het menu als het goed is, zoals het bij mij in de beginfase staat.

Dan moet je een klein beetje javascript toevoegen. Dat ziet er ongeveer zo uit:

PHP: 
$(document).ready(function(){ // Onderstaande code moet worden uitgevoerd als het document geladen is
  $('.menulink img').mouseover(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
    $(this).stop().animate({top: "-18px"}, {duration: 500}) // Bij mouseover, stop huidige animatie en animeer de top naar -18px in 500 milliseconden
  })
 
  $('.menulink img').mouseout(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
    $(this).stop().animate({top: "0px"}, {duration: 500}) // Bij mouseout, stop huidige animatie en animeer de top naar 0px in 500 milliseconden
  })
});

Dit idee heb ik overigens schaamteloos overgenomen van http://www.dandypark.se/
 
Laatst bewerkt:
het werkt niet:(
HTML: 
<div id="menubox">
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
<div class="menulink"><a href="index.php"><img src="media/typografie/home-.png" alt="Home"></a></div>
</div>
(ja, het is steeds het zelfde plaatje:D)

Code: 
CSS:
/*menu*/
.menulink	{
	margin-top: 5px;
}
#menubox	{
	width: 256px;
	height: 315px;
	margin-left: -256px;
}
/*effecten*/
.menulink a	{
	display: block;
	height: 38px;
	width: 156px;
}
[JS]// JavaScript Document
$(document).ready(function(){ // Onderstaande code moet worden uitgevoerd als het document geladen is
$('.menulink img').mouseover(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
$(this).stop().animate({top: "-40px"}, {duration: 500}) // Bij mouseover, stop huidige animatie en animeer de top naar -18px in 500 milliseconden
})

$('.menulink img').mouseout(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
$(this).stop().animate({top: "0px"}, {duration: 500}) // Bij mouseout, stop huidige animatie en animeer de top naar 0px in 500 milliseconden
})
});[/JS]
WAAr zit de fout?:confused:
 
Je hebt gelijk dat ik die mails niet kan waarderen.

Ik had je post al wel gezien (ik scan de PHP / HTML / JavaScript fora regelmatig even).

Het enige wat ik me zo kan bedenken is dat je van

[JS]
// JavaScript Document
$(document).ready(function(){ // Onderstaande code moet worden uitgevoerd als het document geladen is
$('.menulink img').mouseover(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
$(this).stop().animate({top: "-40px"}, {duration: 500}) // Bij mouseover, stop huidige animatie en animeer de top naar -18px in 500 milliseconden
})

$('.menulink img').mouseout(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
$(this).stop().animate({top: "0px"}, {duration: 500}) // Bij mouseout, stop huidige animatie en animeer de top naar 0px in 500 milliseconden
})
});
[/JS]

Dit moet maken:

[JS]
// JavaScript Document
$(document).ready(function(){ // Onderstaande code moet worden uitgevoerd als het document geladen is
$('.menulink a img').mouseover(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
$(this).stop().animate({top: "-40px"}, {duration: 500}) // Bij mouseover, stop huidige animatie en animeer de top naar -18px in 500 milliseconden
})

$('.menulink a img').mouseout(function(){ // Voor alle img-element die in een element met class 'menulink' staan:
$(this).stop().animate({top: "0px"}, {duration: 500}) // Bij mouseout, stop huidige animatie en animeer de top naar 0px in 500 milliseconden
})
});
[/JS]

(Verschil zit in regel 3 + 7 ). Heb je het ergens online staan? Dan kunnen we er even naar kijken. Zo niet, kun je het even online zetten?
 
Allereerst: let erop dat T-shirts wordt geschreven met een hoofdletter 't'. Op zich wel handig om te weten als je T-shirts verkoopt. ;)

Verder vind ik het niet erg breed, je mist een half scherm waar je een hoop content op kwijt zou kunnen. Neem grote webshops in ieder geval als referentie en zie dat ze veel meer content kwijt kunnen, en nog overzichtelijker ook. Ik ben überhaupt niet zo fan van veel kleur op een website, daarom kan ik het simpele blauw-wit als basis voor bol.com wel waarderen.

Zoals het nu is vind ik het te druk en te onoverzichtelijk.
 
Het feit dat we t-shirts met een kleine letter schrijven is puur uit stilistisch oogpunt. We hebben een grafisch vormgever ins ons team die van mening is dat het zo beter is, aangezien het gebruik van uitsluitend kleine letters de logo-trend van het moment is. Desalniettemin goed opgemerkt ;).

Te druk en onoverzichtelijk, daar kan ik wel wat mee. Ik ga mij eens herbezinnen op de layout en het kleuren-schema. Het ontwerp van de site was ook eigenlijk niet mijn taak, maar die van de grafisch vormgever, maar die was te druk met het ontwerpen van de shirts, waardoor dit even op mijn bordje kwam.

Maar ik ga eens zien wat ik er aan ga doen! In ieder geval bedankt voor je advies!
 
De oorspronkelijke site is inmiddels van de baan. Na er nog eens kritisch naar gekeken te hebben vond ik hem toch behoorlijk onprofessioneel.

Ben nu met een andere site bezig (staat op het oude adres: http://www.jev-s.nl/temp) en daar ben ik al wat blijer mee, maar ook dat is het nog niet helemaal.

(Ik heb trouwens weer (subtiel) gebruik gemaakt van het jQuery-stukje ;))
 
ziet er netjes uit!
ik zou bij het stukje voor het inloggen nog bij wachtwoord dat als tekst invullen (net als bij e-mail adres)
dat is duidelijker voor minder ervaren gebruikers
daarbij neem ik aan dat er ook een link naar de voorwaarden e.d. komt (wat allemaal in je footer staat)

ziet er erg mooi uit :)
 
Dank jullie wel :D. Ik denk dat ik inderdaad nog wel wachtwoord zal invullen in dat vakje, maar daar komt dan meteen weer een aardig stukje javascript bij kijken om te switchen tussen een text- en een passwordveld.

En ja, wat in de footer staat worden ook nog links. :D
 
ik denkd at het dan een perfecte site is :)
ik ga m toch voor de grap even door de validator halen

paar foutjes gevonden http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

valt mee :)
ik kwam laatst een site tegen die er heel netjes uit zag, ik d8 even door de validator. 48 (!) errors
jullie hebben er 6
en 3 waarschuwingen, maar volgens mij zijn dat allemaal kleine dingetjes.
 
Dat is inderdaad iets wat nog opgelost moet worden. Meestal doe ik dat vlak voordat de site definitief online gaat, als finishing touch zeg maar.

Maar bedankt dat je me er nog even op gewezen hebt! :thumb:
 
noten en suggesties

Hoi Erik,
Als laat-instromer (member vanaf begin aug.) heb ik de vorige versies gemist, en begin ik helemaal blanco. Mag ik eerst even heel kritisch kijken? De suggesties voor verbeteringen komen daarna. ;)

Eerste indrukken
  • Hé, er is geen logo.
  • Hé, ik zie niet in 1 oogopslag waar deze site over gaat.
  • Hé, als ik ga lezen, gaat het dus over overhemden, maar waar is het fris gewassen overhemden-blauw?
  • Hé, wat niet op te maken valt uit de homepage, is wat Jev's nu eigenlijk is: een winkel in Enschede met ook nog een webshop, of alleen een webshop?
Nu de détails.

Lay-out en kleuren
Eerste opwelling bij de vormgeving van de oker rechterkolom: 50'er jaren stijl. De kleurstelling van header en tekst brengt me in de sfeer van een lampekappenwinkel (met mooie romantische zacht zijden kapjes) of een damespyjamahandel (voor de traditioneel ingestelde wat oudere dames). :rolleyes:

Inhoud en vorm
  • De tekst is vooral wat ik noem "company centered": een bedrijf vertelt over zichzelf in termen die bij dat bedrijf gangbaar zijn. Als ik me iets probeer voor te stellen bij "de befaamde hoge col", kan ik (duidelijk een leek op het gebied van moderne herenmode trends) alleen maar dit bedenken: de franse revolutie (deze of deze).
  • De homepage gaat niet uit van de het bezoekend publiek: in de webshop zitten natuurlijk de afbeeldingen van wat er te koop is, maar de webshop zit een klik verder. Elke klik verder betekent minder kijkers/kopers!
  • De homepage geeft geen indruk van de "look and feel" van de producten, en lokt me daardoor niet naar binnen.
  • Wie niet de merken "Arya Style" en "Wam" al kent, weet dus niet wat er te verwachten valt.
  • In de header zie ik een labeltje van het merk "Camouflage®" (dat niet in het assortiment zit? of is dat een submerk van Arya Style of Wam?).

Tekstueel
Daar zou nog eens heel goed naar gekeken moeten worden.
  • Wat ook niet op te maken valt, is voor wie Jev's nu als importeur eigenlijk bestemd is: uitsluitend voor winkels, of rechtstreekse levering aan particulieren, of en-en?
  • De titel "Homepage" is niet echt wervend.
  • "Jev's is de grootste leverancier ..." > Dat gaat meteen van Tetteretet! > Kan dat waargemaakt worden? Leveren ze dan bv. aan de Hema / H&M / C&A?
  • "Jev's is de grootste leverancier ... in Enschede." > Is Jev's nu de grootste leverancier aan winkels in Enschede? Dus eigenlijk een plaatselijke groothandel? Of de grootste leverancier in heel Nederland, en gevestigd in Enschede?
  • "Wij bieden goede service" > O ja, wat is die service dan? - Edit: later zag ik pas dat er een heel menu-item Klantenservice is, maar dat valt in eerste instantie niet zo op (zie opm. over menu verderop).
  • "Jev's is reeds in 2009 opgericht." > Nou, nou! Als dit geen tikfout is, gaat het dus om een kersverse zaak. Promotie van een kersverse zaak kan je beter anders doen dan door alleen te vertellen dat de zaak zo jong is (dus: onervaren? wel betrouwbaar? enz.).
  • "... en het afgelopen jaar is de naamsbekendheid toegenomen." > Dat is leuk voor Jev's, maar zit de klant op deze info (vooraan op de homepage) te wachten? Die moet toch naar de webshop gedirigeerd worden, naamsbekend of niet?
  • "Damesmode heeft Jev’s nog niet in het assortiment." > Negatief geformuleerd.
  • "We kunnen wel vast laten weten dat onderhandelingen met grote dames-blouses-merken in volle gang zijn." > Brengt de bezoeker op de vraag: hoe lang gaat dat duren? - geen info over de te verwachten resultaten.

Functioneel
  • Er wordt nergens verteld waarom ik me zou moeten registreren, met e-mail adres en al. > Krijg ik dan om de haverklap mailtjes? Is er 1 keer per ... (maand, kwartaal, seizoen) een nieuwsbrief om me op te abonneren? - Los hiervan: waar staat het privacy-reglement? Wellicht in de voorwaarden, maar verwijzing daarnaar ontbreekt.
  • Moet de registratie/inlog functie wel persé op de homepage? Of pas bij bestellen in de webshop? Een dreiging "eerst registreren" kan mensen kopschuw maken om zich op hun gemak te oriënteren op wat er te krijg is - daar moet de kandidaat-koper toch mee beginnen?
  • Ik heb (als doorsnee NL'er, die niet gefocust is op link-omschrijvingen in de statusbar) geen flauw idee van wat er gaat gebeuren als ik op de knop "Wachtwoord" zou klikken. Krijg ik dan een wachtwoord? :p

Webtechnisch
  • Op een resolutie van 1280x1024px is er aardig wat te zien, maar op 1024x768px (waar nog hele volksstammen op zitten) wordt driekwart van het beeld opgesoupeerd door header en rechterkolom (en vul-wit), en moet ik scrollen om de hele tekst van de introductie te zien. De header heeft (in de huidige vorm) geen toegevoegde waarde, de rechterkolom met menu en nieuws ga je pas bekijken als je eerst weet waar de site over gaat. Om precies te zijn: de primaire boodschap is beperkt tot minder dan 22% van het oppervlak van het browservenster, en zit ook in een ongunstige hoek. Ten opzicht van het totale scherm neemt de primaire boodschap minder dan 16% in. Dat is niet echt veel om voldoende aandacht te trekken.
  • De homepage heeft geen structuur (header-rangschikking), o.a. belangrijk voor de Google-ranking.
  • Bij ingeschakelde sidebar is de linkerkant van de pagina onbereikbaar (FF en IE).
  • Bij inzoomen (vergroten) in Opera of Safari: eveneens linkerkant onbereikbaar.
  • Idem bij bekijken op 800x600px (ik ken hardliners die hun prachtige grote beeldschermen op 800x600 zetten "omdat dan de lettertjes zo lekker groot zijn").
  • Het printvoorbeeld heeft ook een afgesneden linkerkant van de tekst (zowel FF als IE7).
  • In IE6 gaat het mis.
  • Het Web Page Speed Report van websiteoptimization.com geeft een waarschuwing af voor de 23 images (allemaal http-requests); al die icoontjes! De header eet ruim 150kB (er zijn nog wat langzame telefoon-modem internetters op wat afgelegen plaatsen in NL, geloof ik). De jQuery hapt 35kB weg.
  • De Quick Scan van het Kwaliteitsmodel Websites heeft wat foutieve zaken ontdekt.
  • De javascript-foutconsole geeft aardig wat waarschuwingen af over de jQuery.
  • De pagina is ongeschikt voor pda's, zegt de small-screen rendering van FF en Opera (geen header-afbeelding, geen menu).
  • De Colour Contrast Analyser zegt dat er behoorlijk onvoldoende kleurverschil zit tussen de kleur van de menu-items en hun achtergrond.
  • De semi-transparantie onder het menu maakt het m.i. wat vlekkerig/rommelig en minder direct herkenbaar als menu.
  • Bij >= 1280x1024 resolutie worden de menu-animaties wel heel subtiel > je ziet dan niet meteen waar je overheen hoevert.
  • Bij tab-ben door de links werken de animaties nog niet.
Nu de suggesties
  • Om de boodschap van de site goed te kunnen uitdragen in de stijl ervan, denk ik dat het heel nuttig is om op korte termijn een goede brainstorm te hebben met de eigenaar en de grafisch vormgever. Wat moet de voornaamste "uitstraling" (ik haat dat woord, maar zoiets dan) van de site zijn? Bv.: jong en dynamisch / degelijk en standvastig / voor elk wat wils / alleen voor de echte trendgevoelige mode-liefhebbers?
  • Aansluiting zoeken bij de huisstijl van het drukwerk van Jev's (als die huisstijl er is): eenheid van stijl = beste herkenbaarheid. Als die huisstijl er wel komt, maar nog niet is: overwegen die huisstijl af te wachten, zodat later de website niet helemaal gerestyled moet worden.
  • Het Jev's logo tonen (of: laten maken).
  • In het ontwerp aansluiting zoeken bij de sfeer/stijl van de merken. Van "Arya Style" kon ik alleen een voorlopige webpagina vinden (als dit 'm is): nog geen website, alleen een flash-aankondiging "binnenkort in dit theater". Misschien dat uit het verpakkingsmateriaal en de correspondentie wat meer te halen is over hun stijl? Je zou er in ieder geval een soortement logo'tje uit kunnen halen (of: inscannen), dan is er tenminste iets van op de Jev's site te tonen. Van WAM kon ik niets vinden via Google (Jev's zal wel weten waar hun site zit).
  • Ga ook eens kijken bij de concurrentie! (via Google op "hoge kraag overhemd"). Hoe hebben die het aangepakt? En hoe kan Jev's zich in de stijl duidelijk anders (beter!) manifesteren dan de concurrentie?
  • Wat tekstuele suggesties zijn al uit het bovenstaande te halen. Vooral uitgaan van het publiek waarop gemikt wordt: wat wil dat publiek meteen weten bij binnenkomst op de site?
  • Wat de Jev's producten onderscheidt, is het Eco-karakter. Dat zou ik dan goed aanvlaggen bv. door een tussenkopje: "Stijlvol en óók Eco".
  • In de hoofd-paginatitel (i.p.v. "Homepage") zou ik de naam en iets van een slagzinachtige kreet zetten: "Jev's: shirts and more" (wel even vertellen wat het "more" dan is), "Jev's: overhemden met stijl", "Jev's: unieke Italiaanse overhemden" o.i.d.
  • Voor de header een uitdagender foto gebruiken dan een gekantelde magazijnstelling: bv. een groepje heren in van die prachtige hoge boord-overhemden, met ertussen 1 dame met óók z'n hoge boord-overhemd. ;)
  • In elk geval de hoofdtekst boven de helft van de pagina op 1024x768px laten beginnen.
  • Het totempaal-idee van de rechterkant is leuk, maar wel een ruimtevretertje. Ruimtewinst valt bv. te boeken door het Nieuws-blokje te transponeren naar een tussenkopje in de hoofdtekst (met datum!), eventueel met een "lees verder..."-pagina erachter. Het Log-In blokje kan best iets smaller.
  • In de Log-In knoppen de knop "Wachtwoord" vervangen door een knop "Vergeten?", en deze achteraan het rijtje zetten.
  • Het blokkige van de totempaal zou wat speelser kunnen (wie niet beter weet, zou denken: o! tabel in tabel in tabel!). Iets als gele memo-briefjes met wat 3D effecten? Of bovenaan een randje met overhemd-kraagjes? Van alles is denkbaar!
  • De menu-achtergrond niet (of: minder) transparant maken, en de titels meenemen in het subtiele inschuif-effect. Opschuiven v/a rechts, met daarnaast het icoontje: dan meteen een mooie aanduiding voor de "huidige pagina". Voorbeeld!
  • Misschien dat ook i.p.v. een geld-icoontje voor de webwinkel beter een overhemd-icoontje gebruikt kan worden: bezoekers er niet meteen mee confronteren met dat 't geld kost, eerst laten zien > na kijken komt kopen.
  • De icoontjes kunnen prima gecombineerd worden, en ook met de menu-item tekst-images (zijn als achtergrondimages weer los te positioneren).
  • Als je de semi-transparantie van de kolom-png (over de header) vervangt door een nep-transparantie in de header zelf (wat hier kan vanwege de vaste positionering van de kolom t.o.v. de header), dan zijn er geen problemen met IE6.
  • O ja, is het zware jQuery.js wel echt nodig voor de beweging van de menu-items? Of bedient dat verderop nog andere dingen? Met een javascriptje van zo'n 10 regels kan bv. deze vergelijkbare beweging aan de praat gekregen worden (zitten overigens wat schoonheidsfoutjes in, zie ik).

Tot zover voor vandaag!
Met vriendelijke groet,
CSS-hunter

PS: wat ik niet begrijp is dat de grafisch vormgever in juli nog "te druk met het ontwerpen van de T-shirts" was: heeft Jev's dan behalve de twee merken ook nog een handel in eigen T-shirts (desgewenst: t-shirts) - en komen die ook in de webwinkel? Dan te vermelden!
 
Laatst bewerkt:
Kijk, dit is nog eens een review waar ik wat aan heb. Laat me eerst even zeggen dat ik het met de (meeste) punten volledig eens ben.

Alleen het tekstuele gedeelte was eigenlijk nog dummie-tekst. Ik heb er even wat uit de losse pols wat neergekalkt wat net geen Lorem Ipsum was.

Verder ga ik niet op al je punten apart commentaar geven, maar het zijn wel stuk voor stuk punten waar ik wat mee kan. Vooral het Webtechnische gedeelte is nuttig! Het logo moet nog ergens geplaatst worden, maar vanwege wat problemen zijn er wat zaken veranderd waardoor we niet zeker wisten of we het logo nog konden / wilden gebruiken.

Het is namelijk inderdaad zo, dat we oorspronkelijk door onszelf ontworpen T-shirts wilden gaan verkopen, maar dit hele plan is nu van de baan, vanwege onder andere financiële problemen. Daarom is de grafisch vormgever nu ook niet meer in ons team en heb ik dit zelf ontworpen :o

Maar nogmaals, bedankt voor dit uitgebreide commentaar en de suggesties!
 
zo kabam! das een hele hoop commentaar.
inhoudelijk heb k niet gekeken XD
mr k vond t er wel netjes uitzien XD

nou je kan weer aan de bak zo te zien :P
 
@Erik:
Altijd prettig als je producten herkend en gewaardeerd worden! Het was me een genoegen deze in principe goed in elkaar zittende pagina eens uitgebreid te bestuderen en te roosteren. - Dank voor de dank! :)

Van de pagina-tekst had ik al het vermoeden dat dit niet de uiteindelijke tekst zou worden, maar ik kon het niet nalaten mijn vergrootglas erbij te pakken (voor mij ter vermaak, en misschien voor deze of gene lezer ter lering - want soortgelijke teksten zie ik regelmatig als echte inhoud voorbijkomen).

Détail-reacties op mijn commentaren/suggesties had ik helemaal niet verwacht: de grote lijn is overgekomen, en anders zijn we hier een boek aan het schrijven i.p.v. aan websites te knutselen. :D

Succes verder met de handel (2x)!
CSS-Hunter

En off-topic @tiran818:
Past u wel op met dat :p ? Of ik ga vragen of de vragen 415876 van 18 april 2009 en 418048 van 2 mei 2009 al groen afgevinkt kunnen worden, mr/mrs/ms Vraag Opgelost?! :p
 
Laatst bewerkt:
csshunter zei:
En off-topic @tiran818:
Past u wel op met dat :p ? Of ik ga vragen of de vragen 415876 van 18 april 2009 en 418048 van 2 mei 2009 al groen afgevinkt kunnen worden, mr/mrs/ms Vraag Opgelost?! :p
Klik om te vergroten...


o bedankt, had niet gezien dat die van 2 mei nog openstond XD
die andere is inderdaad nog niet opgelost XD

ontopic weer XD:P:
ikhad even vluchtig de kritiek doorgelezen
dat van de 'lampenzaak' feeling had ik ook wel XD.
maar neemt niet weg dat ik het er wél netjes vind uitzien XD
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan