Het artikel bespreekt de technische mogelijkheden voor het ontwikkelen van webervaringen die zich aanpassen aan opvouwbare apparaten, zoals de Google Pixel Fold en Surface Duo.
De belangrijkste technische punten zijn:
- CSS Media Queries: Het gebruik van
horizontal-viewport-segments en vertical-viewport-segments om te detecteren hoe een apparaat is gevouwen.
- CSS Environment Variables: Het gebruik van
env() variabelen (zoals viewport-segment-width) om dynamisch om te gaan met verschillende scherm- en scharnierafmetingen zonder voor elk apparaat een apart ontwerp te maken.
- Implementatie: Een voorbeeld van hoe CSS Grid in combinatie met deze variabelen kan worden ingezet voor een twee-koloms layout.
Daarnaast reflecteert de auteur op de strategische waarde van dual-screen design, waarbij data-gedreven beslissingen centraal staan. Tot slot wordt de browserondersteuning besproken, waarbij wordt opgemerkt dat Microsoft Edge deze functies momenteel stabiel ondersteunt, terwijl Chrome nog experimentele vlaggen vereist.
Ontwerpen voor dual-screen en opvouwbare apparaten met CSS
Laten we de critici die absoluut niet voor een nieuwe vormfactor willen ontwerpen negeren, evenals de prijs van het eerste generatie-apparaat van Google, en ons concentreren op wat er op dit moment mogelijk is.
CSS Media Queries voor Viewport-segmenten
Er zijn twee media queries om opvouwbare apparaten te targeten:
@media (horizontal-viewport-segments: <count>) { }@media (vertical-viewport-segments: <count>) { }
De horizontal-viewport-segments query is bedoeld voor wanneer het apparaat als een boek wordt vastgehouden en de twee schermen naast elkaar staan.
De vertical-viewport-segments query is bedoeld voor wanneer de twee schermen boven elkaar staan en opvouwen als een laptop. Deze modus is zeer nuttig bij het gebruik van de Surface Duo met PowerPoint: de presentatie staat op het bovenste scherm en de spreeknotities zijn toegankelijk op het onderste scherm.
CSS Environment Variables
Om de geometrie van elk display te bepalen, zijn er een aantal environment variables gecreëerd voor dual-screen apparaten:
env(viewport-segment-width <x> <y>);env(viewport-segment-height <x> <y>);env(viewport-segment-top <x> <y>);env(viewport-segment-left <x> <y>);env(viewport-segment-bottom <x> <y>);env(viewport-segment-right <x> <y>);
De x- en y-posities vertegenwoordigen het tweedimensionale raster dat wordt gecreëerd door hardware-functies die elk viewport-segment scheiden, waarbij de coördinaten 0,0 beginnen bij het segment linksboven.
Environment variables zijn waardevol omdat ze de afmetingen per apparaat berekenen en de aanpassingen voor je maken. Dit betekent dat je geen ontwerpen hoeft te maken voor elk uniek apparaat dat er bestaat; er zijn immers al verschillende opvouwbare apparaten met elk andere scherm- en scharnierafmetingen.
Deze set environment variables stelt je ook in staat om inhoud over de twee schermen te plaatsen en te positioneren. In mijn demo heb ik een receptenpagina gebouwd die overschakelt naar een layout met twee kolommen op een dual-screen apparaat. Hierbij gebruik ik CSS Grid en pas ik de environment variables toe als waarden voor de grid-kolommen of -rijen.
@media (horizontal-viewport-segments: 2) {
.container {
grid-template-columns: env(viewport-segment-width 0 0), 1fr;
}
}
Deze regel code betekent dat de eerste grid-kolom de volledige breedte van het linkerdisplay inneemt wanneer het apparaat in de verticale positie (als een boek) wordt vastgehouden, en de tweede grid-kolom de resterende breedte van de beschikbare displayruimte inneemt, wat het rechterdisplay is.
Als je explicieter wilt zijn, zou je het als volgt kunnen schrijven:
@media (horizontal-viewport-segments: 2) {
.container {
grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width: 1 0);
}
}
Ook hier betekent dit dat elke kolom precies één display inneemt.
Wanneer moet je een dual-screen modus toevoegen aan je product?
Terug naar de critici. Wanneer ik voor het eerst over dual-screen design begon, reageerden veel mensen negatief. Eerlijk gezegd is niemand verplicht om een website of app te maken die zich aanpast wanneer deze over twee displays is verspreid.
Bij de Surface Duo kun je de browser in één displaypaneel gebruiken, waarbij deze wordt weergegeven als een normale responsive website. Niet elke site of app heeft een dual-screen modus nodig. Het is het beste om te onderzoeken welke apparaten je klanten gebruiken en of een dual-screen modus de investering waard is. Gebruik, zoals altijd, data om je beslissingen te sturen.
De prognose voor de verzending van opvouwbare apparaten in 2023 is dat deze boven de 21 miljoen apparaten zal liggen (bron). Vergeleken met de totale mobiele markt is dit slechts een fractie, maar het gaat nog steeds om miljoenen opvouwbare apparaten in gebruik.
Een andere reden om een app of website te maken die zich aanpast aan een opvouwbaar apparaat? Om op te vallen. De Pixel Fold bevestigt dat opvouwbare apparaten hier zijn om te blijven, dus waarom zou je je gebruikers niet verrassen?
Browserondersteuning
De media queries en environment variables worden momenteel ondersteund in Microsoft Edge Stable.
Helaas lijkt Chrome Stable deze ondersteuning nog niet te hebben, wat een grote misslag lijkt voor de Pixel Fold- en Chrometeams. Je kunt de experimentele web platform-vlag inschakelen via chrome://flags en testen in Chrome met de Surface Duo-emulator.
Slotwoord
Dit artikel is slechts een overzicht en een herinnering dat deze mogelijkheden bestaan voor opvouwbare web- en app-ervaringen. Er is veel ruimte voor innovatie in design en layout op het web (en voor native apps) naarmate er nieuwe opvouwbare apparaten verschijnen. Echter, zonder ondersteuning van de browser en het besturingssysteem zullen bedrijven ontwikkelaars en ontwerpers niet kunnen overtuigen om het bouwen van opvouwbare ervaringen serieus te nemen.
Als je nog steeds geïnteresseerd bent in het verkennen van de mogelijkheden van dual-screen layouts, heb ik een veel uitgebreider artikel op Smashing Magazine waarin ik de recepten-demo voor het web stap voor stap behandel. Download Microsoft Edge en veel succes met bouwen.
Ontwerpen voor dual-screen en opvouwbare apparaten met CSS
Laten we de critici die absoluut niet voor een nieuwe vormfactor willen ontwerpen negeren, evenals de prijs van het eerste generatie-apparaat van Google, en ons concentreren op wat er op dit moment mogelijk is.
CSS Media Queries voor Viewport-segmenten
Er zijn twee media queries om opvouwbare apparaten te targeten:
@media (horizontal-viewport-segments: <count>) { }@media (vertical-viewport-segments: <count>) { }
De horizontal-viewport-segments query is bedoeld voor wanneer het apparaat als een boek wordt vastgehouden en de twee schermen naast elkaar staan.
De vertical-viewport-segments query is bedoeld voor wanneer de twee schermen boven elkaar staan en opvouwen als een laptop. Deze modus is zeer nuttig bij het gebruik van de Surface Duo met PowerPoint: de presentatie staat op het bovenste scherm en de spreeknotities zijn toegankelijk op het onderste scherm.
CSS Environment Variables
Om de geometrie van elk display te bepalen, zijn er een aantal environment variables gecreëerd voor dual-screen apparaten:
env(viewport-segment-width <x> <y>);env(viewport-segment-height <x> <y>);env(viewport-segment-top <x> <y>);env(viewport-segment-left <x> <y>);env(viewport-segment-bottom <x> <y>);env(viewport-segment-right <x> <y>);
De x- en y-posities vertegenwoordigen het tweedimensionale raster dat wordt gecreëerd door hardware-functies die elk viewport-segment scheiden, waarbij de coördinaten 0,0 beginnen bij het segment linksboven.
Environment variables zijn waardevol omdat ze de afmetingen per apparaat berekenen en de aanpassingen voor je maken. Dit betekent dat je geen ontwerpen hoeft te maken voor elk uniek apparaat dat er bestaat; er zijn immers al verschillende opvouwbare apparaten met elk andere scherm- en scharnierafmetingen.
Deze set environment variables stelt je ook in staat om inhoud over de twee schermen te plaatsen en te positioneren. In mijn demo heb ik een receptenpagina gebouwd die overschakelt naar een layout met twee kolommen op een dual-screen apparaat. Hierbij gebruik ik CSS Grid en pas ik de environment variables toe als waarden voor de grid-kolommen of -rijen.
@media (horizontal-viewport-segments: 2) {
.container {
grid-template-columns: env(viewport-segment-width 0 0), 1fr;
}
}
Deze regel code betekent dat de eerste grid-kolom de volledige breedte van het linkerdisplay inneemt wanneer het apparaat in de verticale positie (als een boek) wordt vastgehouden, en de tweede grid-kolom de resterende breedte van de beschikbare displayruimte inneemt, wat het rechterdisplay is.
Als je explicieter wilt zijn, zou je het als volgt kunnen schrijven:
@media (horizontal-viewport-segments: 2) {
.container {
grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width: 1 0);
}
}
Ook hier betekent dit dat elke kolom precies één display inneemt.
Wanneer moet je een dual-screen modus toevoegen aan je product?
Terug naar de critici. Wanneer ik voor het eerst over dual-screen design begon, reageerden veel mensen negatief. Eerlijk gezegd is niemand verplicht om een website of app te maken die zich aanpast wanneer deze over twee displays is verspreid.
Bij de Surface Duo kun je de browser in één displaypaneel gebruiken, waarbij deze wordt weergegeven als een normale responsive website. Niet elke site of app heeft een dual-screen modus nodig. Het is het beste om te onderzoeken welke apparaten je klanten gebruiken en of een dual-screen modus de investering waard is. Gebruik, zoals altijd, data om je beslissingen te sturen.
De prognose voor de verzending van opvouwbare apparaten in 2023 is dat deze boven de 21 miljoen apparaten zal liggen (bron). Vergeleken met de totale mobiele markt is dit slechts een fractie, maar het gaat nog steeds om miljoenen opvouwbare apparaten in gebruik.
Een andere reden om een app of website te maken die zich aanpast aan een opvouwbaar apparaat? Om op te vallen. De Pixel Fold bevestigt dat opvouwbare apparaten hier zijn om te blijven, dus waarom zou je je gebruikers niet verrassen?
Browserondersteuning
De media queries en environment variables worden momenteel ondersteund in Microsoft Edge Stable.
Helaas lijkt Chrome Stable deze ondersteuning nog niet te hebben, wat een grote misslag lijkt voor de Pixel Fold- en Chrometeams. Je kunt de experimentele web platform-vlag inschakelen via chrome://flags en testen in Chrome met de Surface Duo-emulator.
Slotwoord
Dit artikel is slechts een overzicht en een herinnering dat deze mogelijkheden bestaan voor opvouwbare web- en app-ervaringen. Er is veel ruimte voor innovatie in design en layout op het web (en voor native apps) naarmate er nieuwe opvouwbare apparaten verschijnen. Echter, zonder ondersteuning van de browser en het besturingssysteem zullen bedrijven ontwikkelaars en ontwerpers niet kunnen overtuigen om het bouwen van opvouwbare ervaringen serieus te nemen.
Als je nog steeds geïnteresseerd bent in het verkennen van de mogelijkheden van dual-screen layouts, heb ik een veel uitgebreider artikel op Smashing Magazine waarin ik de recepten-demo voor het web stap voor stap behandel. Download Microsoft Edge en veel succes met bouwen.
Groetjes,