Responsive maken bestaande site + excluden content

[GustavSan]

Ik overweeg een monster van een website responsive te maken. De site bestaat uit 400+ statische html pagina's, een WPMU installatie, een PHPBB3 installatie en een paar custom scripts.

Wat betreft WPMU en PHPBB3 (het het custom script met eigen theme) lijkt het mij wel haalbaar om het geheel (al dan niet met plugins) responsive te maken.

Ik loop echter spaak bij de statische content. Ik begrijp dat het responsive maken niet meer (maar ook niet minder) betekent dat je een 2e css maakt, die de standaard css overruled; en vervolgens maak je die 2e zo op dat alle mobiele apparaten qua dimensies gedekt zijn. Vervolgens regel je een herkenning; zodat het device bepaald welke versie voorgeschoteld wordt.

Het probleem is dat ik in de layout diverse functies heb die eigenlijk helemaal niet zo interessant zijn voor een mobiele versie. Een losse mobiele versie van de hele site op een subdomein zie ik ook niet zo zitten. Is er een mogelijkheid om in statische pagina's via bv css of op andere manier stukken code te excluden, zodat ze wel getoond worden bij de desktop versie, maar niet bij de mobiele versie? Zijn er andere oplossingen voorhanden? Ik kan mij zo voorstellen dat de zoekmachines dit niet zo waarderen, omdat je eigenlijk content zit te cloaken?

Heeft iemand tips hoe ik dit het beste kan aanpakken?

[johnkeates]

display:hidden niet een optie?

[ongewoongewoon]

Vervolgens regel je een herkenning; zodat het device bepaald welke versie voorgeschoteld wordt.

Ik zou eerder voor een css media query oplossing gaan.

In die media query kan je bijvoorbeeld bepaalde id's of klassen op display:none; zetten.

[incaz]

Het is iets overzichtelijker om je css te splitsen in algemene css, css voor grote schermen en voor kleine schermen, dan dat je steeds je al geschreven css gaat overrulen.

Als het gaat om betrekkelijk eenvoudige functies met niet teveel bytes zou ik ze gewoon verbergen met display: none. Die paar bytes overhead maak ik me niet zo'n zorgen om. Hier en daar heb ik ook gewoon 2 elementen in mijn source staan - een voor mobiel en een voor niet-mobiel waarbij de mediaquery de juiste variant laat zien. Niet perfect, maar wel de minst-slechte van de alternatieven in die specifieke situatie.

Maar sommige zaken zijn echt niet te doen, zo hebben we lang gepuzzeld naar wat je aanmoet met een verzameling foto's in een topic, en dat was toch iets waarbij een serverside vervanging het beste bleek te werken. Het is namelijk niet mogelijk om foto's in de source te zetten op een manier die toegankelijk is voor niet-javascriptgebruikers, maar niet gedownload wordt voor mobiel.

Ook als de blokken groter worden die je moet verbergen en het bovendien noodzakelijk is dat de content op desktop wordt weergegeven zonder javascript (anders kun je ze altijd apart laden met ajax-calls) is een serverside oplossing aangewezen.

Nadeel is dat serverside herkenning van het soort device niet ideaal is, en het de presentatie op nog meer niveau's laat verschillen. Dus functionaliteit verbergen met iets dergelijks wilden wij het liefst zoveel mogelijk vermijden.