Foldables in opkomst: wat betekent dat voor webdesign?

Samsung maakt al jaren de Fold, OPPO kwam met een versie met een enorme camera en nu brengt ook Apple een eigen variant op de markt: foldables zijn niet meer weg te denken. Sterker: we denken dat 2027 het jaar van de vouwbare telefoon gaat worden. Dat betekent ook een grote verandering voor webdesign. Want het is straks niet meer goed genoeg als je website alleen ‘responsive’ is.

De telefoon wordt een inklapbare tablet

Foldables hebben een bijzonder formaat. Gelukkig is dat voor de meeste websites die responsive zijn gebouwd helemaal geen groot probleem. Een goed gebouwde website past zich gewoon aan de beschikbare schermruimte aan. De meeste websites werken prima op tablets, en in essentie is een foldable een inklapbare tablet. Alleen brengen de nieuwe foldables toch wel wat uitdagingen met zich mee.

Het lastige is dat foldables bestaan uit een binnenscherm en een buitenscherm. Als eigenaar van een website wil je dat je website op beide schermen perfect uitgelijnd is. En als je het scherm openklapt, moet je website volop van de beschikbare ruimte profiteren. Daarom is het belangrijk dat je website niet alleen goed werkt op verschillende schermformaten, maar ook netjes kan schakelen tussen de formaten. Elementen mogen natuurlijk niet verspringen, verdwijnen of ineens op een vreemde plek terechtkomen.

Ontwerp jij nog voor specifieke apparaten?

Veel ontwikkelaars werken volgens het principe: ‘We zetten die op mobiel onder elkaar en dit op desktop naast elkaar.’ Dat principe gaat met een foldable steeds minder goed op. Een foldable is niet helemaal een smartphone en ook niet helemaal een tablet. Tot nu toe waren er nog maar weinig foldables op de markt die je opengeklapt op tafel kunt leggen, maar Apple maakt dat met de nieuwe iPhone Duo heel normaal. Hoe ga je dat weergeven?

Dat zijn dingen waar wij ons bij Webmedia - Nijmegen elke dag mee bezighouden. We kijken naar responsive design als beschikbare ruimte, niet als een trucje om op specifieke apparaten toe te passen. In plaats van te vragen of iemand op een smartphone, tablet of laptop je website bekijkt, kun je beter kijken naar de totale ruimte voor een bepaald onderdeel. Daar biedt CSS mooie mogelijkheden voor met containerqueries en flexbox. Daarom ontwikkelen wij ook niet voor een Galaxy Fold of een iPhone, maar maken we een interface die zich dynamisch aanpast aan de ruimte die hij krijgt.

De vouw maakt het lastig

Een complicerende factor: er zit een vouw in het scherm. Online wordt er veel over de ‘crease’ van verschillende foldables gesproken. De ene is zichtbaarder dan de andere. De ene vindt het logisch dat er een vouw zit: het is een foldable en alles wat je vouwt, heeft een vouw. Maar anderen willen dat de vouw simpelweg zo min mogelijk zichtbaar is. Daar moeten we over nadenken bij het ontwikkelen van de website.

Zo kunnen we werken met viewport segments, waarbij je rekening houdt met afzonderlijke delen van het scherm. Zo zou je de navigatie in het ene schermgedeelte kunnen tonen en de daadwerkelijke content in het andere. Dat houdt trouwens niet in dat je voor een normale website meteen aan exotische layouts hoeft te beginnen. Maar het is zeker verstandig om na te denken over belangrijke knoppen en informatie. Waar zet je precies iets neer? En hoe ga je daar dan flexibel mee om? Dat is de vraag waar wij bij Webmedia - Nijmegen over nadenken.

Trap niet in de ‘Meer content’-val

Betekent een groter, vouwbaar scherm meteen dat je ook meer content moet laten zien? Absoluut niet, vinden wij. Een tekstregel hoort nog altijd niet van de een naar de andere kant te lopen. Afbeeldingen hoeven ook niet zonder goede reden te worden uitgerekt en navigatie-elementen hoeven geen meters ruimte tussen elkaar krijgen. Je website moet flexibel zijn. Je elementen ‘opblazen’ is dan het slechtste wat je kunt doen.

Goede websites werken met een maximale breedte voor bepaalde onderdelen. De pagina kan breder worden, terwijl de tekstkolom een comfortabele leesbreedte behoudt. De extra ruimte gebruik je voor witruimte, een tweede kolom of aanvullende informatie.

Moet je je hele website opnieuw laten bouwen?

Is je website nu al volgens responsive principes gebouwd? Dan staat de basis al. Je hebt al flexibele grids, schaalbare afbeeldingen en goede breakpoints. Daarom zijn foldables ook geen compleet nieuw probleem voor webdesign. Het probleem zie je pas als een website niet écht is geoptimaliseerd voor verschillende formaten.

Daarom raden we je vooral aan om een check te doen op verschillende apparaten. Vraag gebruikers met een foldable hoe je site eruitziet, vraag het eens aan mensen die surfen via hun tablet en kijk zelf via je laptop of desktop. Wil je een professioneel advies? Dan helpen wij je natuurlijk graag. Want bij Webmedia - Nijmegen ontwerpen we voor het scherm van morgen. Een goede website past zich aan het scherm aan. Niet andersom.