Webdesign: Luna

Tags:    luna webdesign single page website

Står over for et redesign af et website, og er blevet interesseret i mulighederne i et single page website-design. Her er jeg så faldet over Project Sevens Luna, hvis eksempler har fem sider.

Nu er single page websites jo bedst egnet til projekter med relativt få sider, men denne design-idé fungerer så godt, at jeg alligevel overvejer at bruge Lune - til ca. 60 sider :lol:

Her vil det så være nødvendigt at isætte et anderledes navigations-system end Lunas nuværende - og spørgsmålet er så: kan man tweeke Luna med CSS/HTML5, så der ikke rulles mellem siderne, men derimod laves et fade out/in under navigation?

Hvis nogen kunne kommentere på dette, vil jeg være meget taknemmelig, da jeg kun har grundlæggende CSS- & HTML-kendskab, og endnu ikke er begyndt at tilegne mig HTML5-erfaringer.

På forhånd tak.



6 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma
Sorter efter stemmer Sorter efter dato
Ja det kan der nemt.

Alt sammen kan klares med noget helt simpelt Jquery/js.

Du sørger blot for at referere til til den id den pågældende div nu en gang har også bruger du jquery/js til at tage div gamle div og fade out og fade den nye ind.




OK, mange tak for hurtigt svar.

Jeg er dog ikke sikker på, at Jquery/js er brugbart i denne situation - uden at jeg dog kender noget særligt til de teknikker.

Sagen er nemlig den, at Luna er designet udelukkende med CSS og HTML, således at alt er simpelt og enkelt - og således at samme design med ganske få ændringer kan bruges til fx iPhone & iPad. Dette er også en af grundene til, at jeg har kig på Luna - og jeg tror, at idéen med fade in/out i dette tilfælde skal kunne håndteres med CSS og/eller HTML5. Ved bare ikke om det kan lade sig gøre?



@John, de bruger Javascript til deres glidende scrolling.

Det er dog bygget sådan, at hvis der ikke findes js-support i browseren går den bare direkte til det anchor-point som den ellers ville scrolle til.

Du kan bruge samme teknik, blot ved at fade ud inden der scrolles og fade ind igen.

Der er ikke noget i dette eksempel som er afhængigt af HTML5. Det er faktisk doctyped til at være XHTML.

Generelt, så vil de fleste ting virke lige ud af boksen på iPhone og andre mobil enheder. Men, lige præcis single-page sider bliver tit udfordret, da scrolling ikke fungerer helt på samme måde i mobilebrowsere. Det kan lade sig gøre, men det er ikke nemt, og sjældent den bedste løsning.

Singlepage-sider er fede, men jeg forstår ikke motivationen bag at lave en single-page side, som imiterer en almindelig webside?



@Gustav. Ok, tak for de oplysninger, jeg havde fået det indtryk, at Luna kun indeholdt CSS- og HTML-kode.

Min motivation for at vælge Single Page Design er indtrykket virkelig af at være ét sted på nettet uden konstante reload ved sideskift - og den enheds-fornemmelse, rolighed og overblik der følger med dette. Vigtigt i min design-optik. I starten forstod jeg ikke præcist fordelen ved Luna, men efter at have besøgt og testet Luna flere gange gik det op for mig, hvorfor mange webdesignere er glad for denne design-idé. Me too :D

Spørgsmålet er så, hvordan jeg får fade in/out til at virke godt - også på iPhone og iPad....



@John, de eneste ting der driller når man udvikler til mobile touch enheder er...... position fixed og scroll-afhængige ting.

Og det er lige præcis hvad det singlepage layout du linker til afhænger af...

Har du tænkt over at folk så også skal hente alle 60 sider på én gang - altså massiv loadtime for at undgå loadtimes.

Et alternativ for reload-minimering kunne være at du loadede indhold via ajax.

Men - ligesom med singlepage apps bliver det svært at få opbygget det sådan, at din side kan crawles og indexeres af google på fornuftig vis.

Jeg synes det er en fin idé - men svær at realisere uden for mange minusser...



Hmmm....OK, skrinlagt. Tak for hjælpen!



t