Preview: Portfolio
Hierbij een preview van m'n nieuwe website. Qua layout is het meeste nu wel klaar. De volgende stap is een administratie-gedeelte scripten om de hele inhoud naar wens aan te passen en te updaten.
Maar volgens mij heb jij portfolio beetje verkeerd begrepen, volgens mij is projecten je portfolio...
Ow, en kijk eens in Opera naar dat laden van een ander project, dat gaat nogal wild, en de pagina springt naar links en rechts.
Maar dit is verschikkelijk:
Dat is niet net vind ik, ah, het klopt nog wel... Naja, vooruit dan maar. Netjes, lekker strak, valid html. Mooi.
- een bug bij projecten: als je op 2 of meer projecten vlak achter elkaar klikt, dna laadt hij ze alle 2/3 (net hoeveel je er aanklikt)
- De tekst van nr 4 bij projecten wordt afgekapt.
- bij Links en Projecten externe linkjes laten openen in nieuw venster ziet er mooi uit!
Het laden van de projecten gebeurt met mooTools... Hier heb ik dus niet echt een oplossing voor indien dit niet strak gebeurt... Ik zal eens te raden gaan op hun forum :) je hebt gelijk, portfolio was de oorspronkelijke bedoeling xD Ik heb er nu "Personal website" van gemaakt, al vind ik dit niet echt klinken... Iemand suggesties? :D
Zorg er ook voor dat je website zonder javascript prima werkt. Het moet iets extra's zijn, maar je website moet daar niet afhankelijk van zijn.
Daarnaast is het best irritant als je een nieuw item in je portfolio laadt dat wegens het inklappen van je item de scrollbar verdwijnt en deze tijdens het laden ineens weer terug komt. Daardoor wiebelt de site ook nog wat heen en weer.
Maak bij het contact formulier ook even nog labels van de teksten voor de inputvelden. Dat werkt voor een bezoeker heel prettig, omdat er ook op geklikt kan worden en dan het input veld geselecteerd wordt. (en een label is daar nog eens voor bedoeld ook) @Jan H
http://www.envyum.nl/project4.jpg
Ook heb ik het idee dat de content achtergrond knippert door al die kleine hokjes(Stukje gezichtsbedrog) Bij projecten.php (item 4) loopt de tekst niet helemaal door op mijn scherm.. de laatste regel is maar half in beeld
PNG's worden niet ondersteund door IE6 IE6 geeft Javascript foutmeldingen...
Ook leuk gedaan is de validatie! Maar ook hier geldt: valideer later wel nog met PHP of iets dergelijks, want JS kan uit gezet worden.
Ik neem aan dat je geen spam wil :) Daar is wel een hack voor, verder vind ik de layout wel mooi. lekker simpel en rustig. Jammer van de JS errors, die krijg ik ook in IE. Verder ziet het er goed uit in Safari en FF.
Het is erg netjes alleen zou ik de homepage toch nog wat anders doen Mijn complimenten!
http://www.greywyvern.com/code/min-height-hack
IE6 ondersteunt alleen geen transparantie in PNG's, PNG's zelf verder wel.
En Jan, waarom als je JS uit hebt staan (bijvoorbeeld) alle projecten in 1 keer laten zien onder elkaar? Die kan je toch ook (Bijna net als met JS) laden wanneer je een project uit het menu kiest? Min height werkt niet voor IE6 normaal gesproken, er is wel een hack voor die je hier kan vinden:
Ik heb geen flauw idee hoe dat komt xD
Dit is geniaal, je moet er maar op komen!
voor de rest ziet hij er goed uit;-) ik vind deze site een beetje te veel beweging hebben vooral bij projecten
Ook het verdwijnen van de content bij de projecten zou nu opgelost moeten zijn.
Alvast bedankt voor de vele reacties! Ik heb de pagina met projecten aangepast. De beweging is zo wat uit de site gebracht. Tevens moeten nu ook de JS-errors verdwenen zijn (zoniet, laat dan weten welke er nog zijn).
Het is een vrij logische oplossing. Waar je wel mee op moet passen is met padding en dergelijke die je opgeeft aan je items binnen de div.
Bijvoorbeeld als je een padding van 5px wil hebben over de hele div (ook aan de rechterkant, ga er voor 't gemak maar vanuit dat je de tekst rechts uitlijnt, dan zie je wel wat ik bedoel) dan is het het slimst om nog weer te beginnen met een div die 100%-1px breed is. (dit werkt het eenvoudigst in een lay-out die niet met allemaal percentages werkt)
En daarin geef je een padding-right van 5px op.
Zo zie je dat de 1e oplossing weer een ander probleem met zich mee brengt. Het is wel een slimme oplossing, dat zeer zeker.. Maar 't vergt iets meer nadenken om 't (goed) te gebruiken dan dat op zijn site wordt geschetst. Het is een slimme oplossing, zeker, maar semantisch is hij niet mooi. Je gebruikt nu een lege div eigenlijk als een "spacer" div.
De header klikbaar zou wel handig zijn en verder is het geheel toch wel wat kaal als je pagina's met tekst bekijkt. Het portfolio valt wel mee, daar zitten nog wel afbeeldingen in die de boel een beetje "breken", maar "over mij" en "links" met alleen de tekstjes zijn echt wel kaal, persoonlijk denk ik dat je er beter aan doet deze pagina's op te fleuren met een (passende) afbeelding. Wat Stu Nicholls gebruikt is dus eigenlijk een foutje in het CSS systeem van IE. Je moet het maar weten/ vinden/ bedenken natuurlijk, maar inderdaad blijft je CSS wel correct.
Maar volgens mij heb jij portfolio beetje verkeerd begrepen, volgens mij is projecten je portfolio...
Ow, en kijk eens in Opera naar dat laden van een ander project, dat gaat nogal wild, en de pagina springt naar links en rechts.
Maar dit is verschikkelijk:
Site:
Gelieve JavaScript in te schakelen om deze website correct te kunnen bekijken!
Dat is niet net vind ik, ah, het klopt nog wel... Naja, vooruit dan maar.
- een bug bij projecten: als je op 2 of meer projecten vlak achter elkaar klikt, dna laadt hij ze alle 2/3 (net hoeveel je er aanklikt)
- De tekst van nr 4 bij projecten wordt afgekapt.
- bij Links en Projecten externe linkjes laten openen in nieuw venster
Het laden van de projecten gebeurt met mooTools... Hier heb ik dus niet echt een oplossing voor indien dit niet strak gebeurt... Ik zal eens te raden gaan op hun forum :)
Zorg er ook voor dat je website zonder javascript prima werkt. Het moet iets extra's zijn, maar je website moet daar niet afhankelijk van zijn.
Daarnaast is het best irritant als je een nieuw item in je portfolio laadt dat wegens het inklappen van je item de scrollbar verdwijnt en deze tijdens het laden ineens weer terug komt. Daardoor wiebelt de site ook nog wat heen en weer.
Maak bij het contact formulier ook even nog labels van de teksten voor de inputvelden. Dat werkt voor een bezoeker heel prettig, omdat er ook op geklikt kan worden en dan het input veld geselecteerd wordt. (en een label is daar nog eens voor bedoeld ook)
toegevoegd, maar dit is niet HTML valid. Is hier een betere oplossing voor?
*/Labels bij het contactformulier zijn aangepast. Bedankt voor de tip, want dit wist ik niet :)
*/Javascript-afhankelijk: Enkel het hoofdmenu moet nog aangepast worden zodat dit werkt zonder java. Al de rest wordt correct weergegeven zonder JS (projecten staan dan allemaal netjes onder elkaar).
*/Project-pagina: Ik heb de min-height op 500px gezet, nu zal niet heel de website 'meeswingen' als er een ander project geladen wordt.
*/Waarschuwing bij het uitschakelen van JS: Is dit niet correct opgelost? Om de volledige "functionaliteit" vd website te zien moet JS immers ingeschakeld zijn...
*/ links openen in nieuw venster: Ik heb nu */Labels bij het contactformulier zijn aangepast. Bedankt voor de tip, want dit wist ik niet :)
*/Javascript-afhankelijk: Enkel het hoofdmenu moet nog aangepast worden zodat dit werkt zonder java. Al de rest wordt correct weergegeven zonder JS (projecten staan dan allemaal netjes onder elkaar).
*/Project-pagina: Ik heb de min-height op 500px gezet, nu zal niet heel de website 'meeswingen' als er een ander project geladen wordt.
*/Waarschuwing bij het uitschakelen van JS: Is dit niet correct opgelost? Om de volledige "functionaliteit" vd website te zien moet JS immers ingeschakeld zijn...
http://www.envyum.nl/project4.jpg
Ook heb ik het idee dat de content achtergrond knippert door al die kleine hokjes(Stukje gezichtsbedrog)
PNG's worden niet ondersteund door IE6
Ook leuk gedaan is de validatie! Maar ook hier geldt: valideer later wel nog met PHP of iets dergelijks, want JS kan uit gezet worden.
Ik neem aan dat je geen spam wil :)
Het is erg netjes alleen zou ik de homepage toch nog wat anders doen
http://www.greywyvern.com/code/min-height-hack
IE6 ondersteunt alleen geen transparantie in PNG's, PNG's zelf verder wel.
En Jan, waarom als je JS uit hebt staan (bijvoorbeeld) alle projecten in 1 keer laten zien onder elkaar? Die kan je toch ook (Bijna net als met JS) laden wanneer je een project uit het menu kiest?
@Jan H: let op bij projecten en je layout, bij je laatste project verdwijnt de link in de footer!
Tikkes schreef op 04.11.2008 17:15:
@Jan H: let op bij projecten en je layout, bij je laatste project verdwijnt de link in de footer!
Ik heb geen flauw idee hoe dat komt xD
Robert_Deiman schreef op 04.11.2008 17:04:
Min height werkt niet voor IE6 normaal gesproken, er is wel een hack voor die je hier kan vinden:
http://www.greywyvern.com/code/min-height-hack
http://www.greywyvern.com/code/min-height-hack
Dit is geniaal, je moet er maar op komen!
voor de rest ziet hij er goed uit;-)
Ook het verdwijnen van de content bij de projecten zou nu opgelost moeten zijn.
Alvast bedankt voor de vele reacties!
Jonathan schreef op 04.11.2008 17:31:
Dit is geniaal, je moet er maar op komen!
Robert_Deiman schreef op 04.11.2008 17:04:
Min height werkt niet voor IE6 normaal gesproken, er is wel een hack voor die je hier kan vinden:
http://www.greywyvern.com/code/min-height-hack
http://www.greywyvern.com/code/min-height-hack
Dit is geniaal, je moet er maar op komen!
Het is een vrij logische oplossing. Waar je wel mee op moet passen is met padding en dergelijke die je opgeeft aan je items binnen de div.
Bijvoorbeeld als je een padding van 5px wil hebben over de hele div (ook aan de rechterkant, ga er voor 't gemak maar vanuit dat je de tekst rechts uitlijnt, dan zie je wel wat ik bedoel) dan is het het slimst om nog weer te beginnen met een div die 100%-1px breed is. (dit werkt het eenvoudigst in een lay-out die niet met allemaal percentages werkt)
En daarin geef je een padding-right van 5px op.
Zo zie je dat de 1e oplossing weer een ander probleem met zich mee brengt. Het is wel een slimme oplossing, dat zeer zeker.. Maar 't vergt iets meer nadenken om 't (goed) te gebruiken dan dat op zijn site wordt geschetst.
Klikbaar headertje zou handig zijn.
De header klikbaar zou wel handig zijn en verder is het geheel toch wel wat kaal als je pagina's met tekst bekijkt. Het portfolio valt wel mee, daar zitten nog wel afbeeldingen in die de boel een beetje "breken", maar "over mij" en "links" met alleen de tekstjes zijn echt wel kaal, persoonlijk denk ik dat je er beter aan doet deze pagina's op te fleuren met een (passende) afbeelding.