Website responsive maken

[Beetsma]

Beste ,

Op school ben ik bezig met een project , een website optimaliseren voor tablet en smarthphone - gebruikers.

Ik heb xampp geïnstalleerd en de broncode van de website http://boekennietje.nl in de index.php geplaatst.

Dus als ik naar 'localhost' ga dan zie ik de pagina netjes, alleen wil men dat het actuele aanbod( in het midden van de website, plaatjes van de boeken ) graag passend wordt voor bijv: de ipad of een samsung galaxy s2/3.

Als men de pagina via een laptop of gewone monitor bezoekt ziet men 3 boeken naast elkaar gepresenteerd, op de ipad of smartphone moeten dit er 1 of 2 worden( gezien de resolutie van het scherm )

Ik vraag me af of hoe ik dit het beste kan doen, moet er nog een stylesheet worden gemaakt en worden gekoppeld aan de index.php, ik heb namelijk een stylesheet gekregen van de gene die de website beheerd.

Klein voorbeeldje van die 'responsive.css'

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

Ik zou het zeer op prijs stellen als iemand mij tips kan geven of mij opweg kan helpen, de websitebeheerder heeft niet altijd tijd om mij zorgvuldig te helpen dus hoop ik dat er meer mensen mee kijken.

Alvast bedankt,

Beetsma.

 

[CupCoffee]

Meerdere stylesheets is een goeie oplossing vervolgens met javascript controleren met welk device de site bekeken wordt.
Het meeste werk zal denk ik zitten in het optimaliseren per device , veel testen en proberen.

Zelf heb ik hier niet zoveel ervaring mee.

 

[csshunter]

Hoi Beetsma,
Oeps, het boekenrek bestaat uit een tabel!
Tabellen laten zich vrijwel niet in het gareel voor responsive layout persen. Dan zou er een hele kolom uit de tabel (d.w.z. uit de html-code!) geschrapt moeten worden, de inhoud van de betreffende cellen zou verplaatst moeten worden naar de e.v. tabelcel van de volgende rij, de rest moet weer doorschuiven, enz.
Ga er maar aan staan om daar een werkend javascript voor te bakken (want met css alleen gaat dat niet) ...

Suggestie
Ik zou de tabel ombouwen tot een serie list-items, die allemaal een {float: left;} krijgen:

• Dan drijven ze tegen elkaar aan voor zover er breedte genoeg is.
• Is bij een smal scherm de breedte op, dan duikt het volgende item vanzelf een etage lager (en begint weer aan de linkerkant).
• Geen javascript nodig, ook geen extra stylesheet, alles schuift vanzelf op.
• En de html-code wordt ook nog mooi schoon: komt er eens een boekje bij, dan hoeft niet een hele tabel overhoop gegooid te worden. Een extra <li> en het leed is geleden.

Met vriendelijke groet,
CSShunter