[JS] One-page-website met JQuery?

[Reveller]

In dit forum zitten veel frontenders, en ik hoop dat jullie mij wat links / tips kunnen geven. Ik wil namelijk een website maken die uit 1 pagina bestaat. Op die pagina is een div, en door op links in de navigatie te klikken "schuift" de div door naar de goede content, zoiets als:

code:

home      +-----------------------------------+
over ons  | we hebben veel soorten producten, |
producten | zoals foo, bar en foobar. Meer    |
contact   | weten? Stuur ons een mailtje!     |
          |                                   |
          | Of download de folder hier        |
          |                                   |
          +-----------------------------------+

Als je op home zou klikken, zou de tekst rechts uit de div verdwijnen, voorbij "over ons" gaan en vanuit de linkerkant schuift de "home" tekst in beeld. Ik ben de afgelopen maanden regelmatig zulke sites tegengekomen, maar kan er nu geen een meer vinden.

Hebben jullie links naar zulke sites? Ik wil graag hun source bekijken om te kijken hoe ze dit doen (JQuery? Eigen script?) en ook om design ideeen op te doen.

[Verwijderd]

http://dev.clarklab.net/wp/#1

template die voor een klein bedrag te koop is.

[larsjeh]

http://boedesign.com/2008/03/05/wiggleslide-for-jquery/
is dit misschien iets voor je ?

[Kiphaas7]

1. 4 div's
2. verberg er 3 bij page load
3. click event hangen aan 4 links die ervoor zorgen dat de de desbetreffende div wordt getoond, en de rest verborgen

Combineer dit met de animate functie van jquery, en wat leuke css, en je bent er.

EDIT: Of je gebruikt gewoon de plugin van larsjeh's post....

[ Voor 10% gewijzigd door Kiphaas7 op 08-11-2008 23:27 ]

[RobIII]

Waarom zou je dit willen? Verwacht niet dat je hoog zult scoren in Google resultaten e.d. (laat staat useability) tenzij je ook als alternatief 'ouderwetse links' aanbiedt. Daar al bij stilgestaan?
Beter lezen, minder bier drinken /papaiii mocht ook weer eens los hoor...
Ik dacht even dat je met AJAX(achtige technieken) de content wou ophalen, maar die staat dus al allemaal in dezelfde div als ik het goed lees... Dan nog is useability w.m.b. niet echt je-van-het, maar voor Google zou het (iets?) minder uitmaken, je content is namelijk wel indexeerbaar (hoewel voor zoekmachines 1 grote brei op 1 pagina...)

[ Voor 51% gewijzigd door RobIII op 09-11-2008 02:34 ]

[Verwijderd]

Is het nog spam als het op verzoek is? http://ljpilon.nl

Ik gebruik de viewport waar jij een div wil, maar daar kom je zelf wel uit denk ik.

@Rob: hoezo zou dit slecht zijn voor je usability eigenlijk?

[ Voor 17% gewijzigd door Verwijderd op 12-11-2008 22:51 ]

[RobIII]

Verwijderd schreef op woensdag 12 november 2008 @ 22:49:
Is het nog spam als het op verzoek is? http://ljpilon.nl

Die maakt het wel héél bont

Verwijderd schreef op woensdag 12 november 2008 @ 22:49:
@Rob: hoezo zou dit slecht zijn voor je usability eigenlijk?

Mensen hebben bepaalde verwachtingen bij (bijv.) de werking van een scrollbar; jou site is een mooi voorbeeld van hoe het niet moet. De eenduidige functie van de scrollbar is compleet zoek. Sure, ik kan nog scrollen, maar jij 'dwingt' me op je knopjes te klikken om content te vinden in je site (lees: pagina). En probeer met TAB eens door je site te navigeren? Daarbij is dit behoorlijk afhankelijk van JS en als die uit staat heb je dus een groot probleem. Ik kan nog wel uren doorzagen, maar verdiep je gewoon eens in usability en accessibility en concludeer zelf waarom dit soort zaken een no-no zijn.

[Verwijderd]

RobIII schreef op donderdag 13 november 2008 @ 01:20:
[...]

Die maakt het wel héél bont

Verschrikkelijk he

[...]

Mensen hebben bepaalde verwachtingen bij (bijv.) de werking van een scrollbar; jou site is een mooi voorbeeld van hoe het niet moet. De eenduidige functie van de scrollbar is compleet zoek. Sure, ik kan nog scrollen, maar jij 'dwingt' me op je knopjes te klikken om content te vinden in je site (lees: pagina). En probeer met TAB eens door je site te navigeren? Daarbij is dit behoorlijk afhankelijk van JS en als die uit staat heb je dus een groot probleem. Ik kan nog wel uren doorzagen, maar verdiep je gewoon eens in usability en accessibility en concludeer zelf waarom dit soort zaken een no-no zijn.

Ik 'dwing' je idd om op een knop/link te klikken om naar een ander deel van de site/pagina te gaan. Kan je een website noemen die je niet dwingt ergens op te klikken om naar een andere pagina te gaan?

Tab-navigatie heb ik zojuist even geprobeerd en werkt eigenlijk best makkelijk, behalve dat je niet ziet welke link geselecteerd is. Dat moet ik eens oplossen.

Overigens is m'n site is niet afhankelijk van JS Het enige wat er met JS gedaan wordt is het scroll-effect. Als je JS uitschakelt spring je er direct naar toe. Gaat overigens niet op voor het fotodeel, daar wil ik nog eens wat aan doen. Aan de andere kant begrijp ik steeds minder waarom het gebruik van JS een groot probleem is.

Behalve dat de scrollbar niet doet wat 'ie volgens jou zou moeten doen en visuele tabnavigatie zie ik niet zoveel ontbreken. Het verdiepen in de materie heb ik gedaan (ze noemden het zelfs een studie), maar schijnbaar heb ik de materie waar je het nog uren over kan hebben over het hoofd gezien. Wellicht heb je een link naar een goede resource?

[Bosmonster]

Dat jij niet ziet dat dit verre van ideaal is qua usability en accessibility kunnen wij natuurlijk niet zoveel aan doen.

Vergelijk je site met een boek dat niet netjes gebonden is, maar je uitlevert op een grote poster. Tuurlijk is het hardstikke hip enzo, maar ga ons niet wijsmaken dat het 'usable' is.

[Verwijderd]

Mja, ik probeer inzicht te krijgen waarom precies het nou niet usable zou zijn. Kennelijk heeft Rob het en jij ook, en ik wil het graag hebben

Ik begrijp je vergelijk prima, maar imo is het met de weinige content die ik op m'n site heb prima een 'posterformaat' te kiezen. Commentaar wat ik doorgaans van leken krijg is dat ze 'm overzichtelijk een makkelijk in gebruik vinden. Als je JS uitzet werkt t nog steeds, en ook als je CSS uitzet werkt 't. Wat in het begrip usable zie ik dan over het hoofd?

[killercow]

Ik heb persoonlijk 3 bevindingen wat betreft jouw site:

* Je hoofdpagina is leeg, _ik heb geen idee waar je site over gaat_
* Je navigatie is anders en te klein op de vervolg pagina's, daarnaast kan ik niet makkelijk de structuur in m'n hoofd visualiseren, wat hoort bij wat?
* Waarom breken met wat iedereen wel kent? een snazzy annimatie is dat duidelijk niet waard want ook dat introduceerd weer meer dingen die niemand verwachte.

[Bosmonster]

Om een voorbeeldje te noemen. Ik was gelijk al in de war van de scrollbars overal toen ik op de eerste pagina kwam. Het eerst dat ik deed nadat het laden klaar was was naar beneden scrollen zoals ik gewend ben en toen had ik alleen nog maar wit op mn scherm en geen menu meer.

Daarnaast raakte ik dus in de war van het feit dat de browser nog flink aan het laden was, maar ik kon niet zien wat. Ik dacht dat er nog iets kwam op de homepage en zat dus voor niks te wachten.

Daarnaast heb je geen enkele houvast over waar je je in de site bevindt. Alles flitst voorbij, maar er is geen indicatie van waar je bent. Het bewegen van links naar rechts en boven naar beneden schept een boel verwarring en het overzicht was ik na een paar keer klikken compleet kwijt.

Trial&error is niet het beste fundament om je website op te bouwen. En ik ben nog een ervaren gebruiker.

[ Voor 49% gewijzigd door Bosmonster op 13-11-2008 11:00 ]

[Kiphaas7]

Mwah, ik hang ergens in het midden. Ik kan wel waarderen dat er een redelijk originele pagina werking is gekozen, hoewel dit lijnrecht tegen mijn verwachting van hoe een site werkt ingaat. Het feit dat onderaan de pagina niks staat is wel verwarrend.

Als het menu bij de verschillende subsecties duidelijker aanwezig is, en als duidelijk wordt gemaakt in welke sectie ik zit in het menu zelf (active class hangen aan het list item?), zou het al beter zijn. In het algemeen is het voor mij een onduidelijke site (zowel in werking als in doel).

Als het primaire doel van de site is om een indruk te geven van een stijl van een designer (ik gebruik het woord losjes), dan vind ik de rare, maar best originele werking acceptabel. Je wilt immers een ervaring overbrengen om zo een indruk te krijgen van de manier van werken, en daarnaast een beetje informatie overbrengen over de designer zelf. Denk ik.

Maar als het hoofddoel is om _alleen_ informatie over te brengen, dan is het gewoon niet handig. Dan wil ik (als gebruiker) een kleine, overzichtelijke pagina, een duidelijk menu, en geen funky overgangen (die tijd kosten en dus irritatie opwekken) als ik naar een ander pagina deel ga.

(tenzij die overgangen een functie hebben....)

[ Voor 7% gewijzigd door Kiphaas7 op 13-11-2008 11:33 ]

[Cartman!]

Op je eigen site irriteert je manier van browsen me ook om dezelfde redenen die Bosmonster noemt. Ik kwam alleen nog een voorbeeld tegen op je site: http://www.thuisvlucht.nl/

Die doet echt helemaal niets? Alles staat door elkaar en de structuur is gewoon weg. Javascript aan of uit maakt niet uit, buttons verplaatsen me naar lege vlakken... Heb je die site wel getest? Dit is zegmaar precies de reden waarom dergelijke opzetten vaak niet werken en ben bang dat de meeste niet-tweakers erg geen zak van begrijpen.

[graceful]

Bosmonster schreef op donderdag 13 november 2008 @ 10:55:
Om een voorbeeldje te noemen. Ik was gelijk al in de war van de scrollbars overal toen ik op de eerste pagina kwam. Het eerst dat ik deed nadat het laden klaar was was naar beneden scrollen zoals ik gewend ben en toen had ik alleen nog maar wit op mn scherm en geen menu meer.

Dat valt eigenlijk heel simpel op te lossen. Alles in een root div, overflow eraf. En dan scrollen op margins. Werkt perfect en ziet het er nog "fancy'r" uit.

[Bosmonster]

Kiphaas7 schreef op donderdag 13 november 2008 @ 11:27:
Mwah, ik hang ergens in het midden. Ik kan wel waarderen dat er een redelijk originele pagina werking is gekozen, hoewel dit lijnrecht tegen mijn verwachting van hoe een site werkt ingaat. Het feit dat onderaan de pagina niks staat is wel verwarrend.

Ow ik heb niks tegen experimenteren! Dat zie ik zelfs graag. Maar ga dan niet beweren dat je veel rekening houdt met usability en accesibility, maar accepteer en geef toe dat je experimenteert.

[!null]

Ik vind die thuisvlucht.nl wel wat hebben. Een soort van creatieve statement maken wat past bij de inhoud. Echter voor 95% van de sites is dit drie keer niks, om de redenen die al genoemd zijn.

[Verwijderd]

Kijk, er komt wat los Heb nu ff geen tijd om te reageren maar probeer dat vanavond te doen.

Ter info over thuisvlucht.nl: het is een afstudeerproject van iemand van de kunstacademie, en zoals het een goed kunstenares betaamd worden er geen concessies gedaan die het idee van het project op wat voor manier dan ook ondermijnen. Ik heb dus alleen de technische uitvoering gedaan. Overigens ben ik daardoor wel op het idee van m'n 1-page website gekomen.

[harrald]

Hier staan genoeg 1 pagina website's en meerdere werken met een soort van scroll systeem: http://www.webdesignerwal...gle-page-portfolio-sites/

lijkt mij dat je de indexeerbaarheid van google nog wel kan verbeteren door elke "pagina" ook fysiek als pagina beschikbaar te stellen.