Share
Het uitgangspunt achter een responsive web is niet louter dat websites op een mobielvriendelijke manier worden gebouwd. Het gaat erom onze inhoud gratis te maken, zodat deze kan worden ervaren met alle middelen die nodig zijn - en dat omvat ook op grote schaal. Laten we eens kijken naar de ontwerpoverwegingen achter het vaak verwaarloosde enorme bureaubladscherm.
Degenen onder u die graag spelen met flexibele lay-outs zullen (net als ik) ongetwijfeld een rare kick krijgen als ze zien dat je ontwerpen zich gemakkelijk aanpassen aan kleine viewports. Wat ooit een prachtige indeling met meerdere kolommen was, wordt een even mooie, knusse pilaar van leesbare tekst, vrij van rommel en onnodige onzin. Maar hoeveel van jullie denken aan jullie lay-outs buiten het comfort van een 960-raster?
Geloof het of niet, er zijn mensen die je werk bekijken op hi-def filmische breedbeeld glorie (zelfs 27-inch iMac- en Thunderbolt-schermen van Apple hebben een resolutie van 2560x1440 px). Computerschermen worden groter, dus waar blijft je 960px sympathiek lay-out? Zwevend op drift in het midden van een oceaan, is waar.
Meer dan vijf procent van de bezoekers van Webdesigntuts + deed dat vorige maand op een scherm als hierboven, niet een figuur om naar te snuiven. En voordat je door mijn keel springt over de lay-out van deze site, kun je erop vertrouwen dat er een oplossing voorhanden is!
We lijken vast te zitten aan 960px, een breedte die standaard is geworden door het gebruik van rastersystemen. Lange tijd was het niet vanzelfsprekend om schermen te vinden die groter waren dan 1024x768px, dus onze lay-outs met vaste breedte konden dat zeker niet overtreffen. 960px is eigenlijk een geweldig figuur om mee te werken omdat:
Er deden zich problemen voor bij het gebruik van internet op kleinere apparaten. Grotere lay-outs zijn lastig om goed te bekijken via kleine viewports, dus, omdat neccessity de moeder van alle uitvindingen is, werd onze aandacht logischerwijs gewend om dit probleem aan te pakken. Een 960 px-lay-out ziet er nog steeds goed uit op een groter scherm, dus ontwerpers denken vaak aan responsief webontwerp als een manier om hun lay-outs te maken mobiel vriendelijk.
We zijn gewend om middelgrote lay-outs te ontwerpen. Om die reden is het gemakkelijker (hoewel velen van jullie het niet toegeven) om te visualiseren en ontwerpen zoals je altijd hebt gedaan, en trim je vervolgens de dingen naar beneden voor mobiel. Uw eerste onderneming bij RWD zal waarschijnlijk leiden tot vernederende vragen van media zoals deze (ontleend aan de boilerplate van Skeleton):
/ * al je oorspronkelijke stijlen gaan hier ... * / body width: big-ish; / * Kleiner dan standaard 960 (apparaten en browsers) * / @media only-scherm en (max-width: 959px) / * Tablet Portrait-grootte naar standaard 960 (apparaten en browsers) * / @media only-scherm en (min. -breedte: 768 px) en (max. breedte: 959 px) / * Alle mobiele formaten (apparaten en browser) * / @media alleen scherm en (max. breedte: 767 px) / * Mobiele landschapsgrootte naar tabletstand ( apparaten en browsers) * / @media alleen scherm en (min-breedte: 480px) en (max-breedte: 767px) / * Mobiele portretgrootte naar mobiele landschapsgrootte (apparaten en browsers) * / @media alleen scherm en ( max. breedte: 479px)
Begin groot en werk vervolgens naar kleinere apparaten. Dit is ongemakkelijk om een aantal redenen, niet in de laatste plaats omdat je jezelf vaak tot een maximale lay-outbreedte verplicht voordat je je op andere potentiële schermformaten waagt. Als u teruggaat naar uw account voor grotere schermformaten, betekent dit dat u uw mediaquery's moet aanpassen.
Een eerste mobiele benadering betekent echter dat u eerst moet zorgen voor de kleinst mogelijke schermen en vervolgens uw mediaquery's kunt samenstellen als de viewport groter wordt. Een andere media-vraag aan het einde tackelen, omdat je een breekpunt op 2000px ziet, is eenvoudig.
De voor de hand liggende oplossing is om onze flexibele lay-outs de volledige breedte van het scherm waarop ze worden bekeken, te laten verspreiden. Gemakkelijk! Maar er is een reden die u vaak zult zien Maximale wijdte opduiken in responsieve CSS; ontwerpen voor grote schermen vereist een zorgvuldige afweging.
Technische hordes even weg laten, hoe ontwerpen we eigenlijk voor grotere schermen? Er komen een paar benaderingen naar voren, dus laten we ons er op een logische manier doorheen werken.
Ervan uitgaande dat we te maken hebben met een vloeibaar raster, kunnen we gewoon toestaan dat onze kolommen proportioneel worden verspreid en de beschikbare schermruimte vullen.
Het flagrante probleem met deze aanpak is het hebben van superbrede tekstkolommen. Een stuk tekst van 30 cm breed zal uw lay-out geen esthetische esthetiek opleveren, maar wat nog belangrijker is, de leesbaarheid zal ook worden verminderd.
De breedte van een regel tekst wordt typografisch de "meetwaarde" genoemd en moet, om de leesbaarheid te behouden, in de lengte tussen de 45 en 75 tekens zijn. Te veel karakters en het wordt moeilijk voor het oog van de lezer om terug over de tekst te gaan en het begin van de volgende regel te vinden. Dit kan worden bestreden door de lijnhoogte te vergroten (leading), eenvoudig genoeg om op de juiste momenten te implementeren via mediaquery's, maar het is geen complete oplossing.
De CSS3 multi-kolom lay-outmodule ziet er in dit opzicht veelbelovend uit. Als een stuk tekst een bepaalde breedte heeft bereikt, kan het splitsen in een geschikt aantal kolommen leesbaarheidsproblemen oplossen. We lopen echter voorop. Browserimplementatie van CSS3-kolommen is nog steeds niet consistent en schiet tekort op enkele typografische details.
Ik denk dat we het warm kregen toen we de toenemende rijhoogte noemden, wat me naar de volgende aanpak leidt ...
Hou hier rekening mee - hoe zit het met het opschalen van alles? Zeker, wat het type betreft, zou het logisch zijn. Leesbaarheid is hier opnieuw de kern van; grotere schermen worden over het algemeen van verder weg bekeken. We bekijken schermen het meest comfortabel met een kijkhoek van ongeveer 30 °.
Wat effectief betekent;
Hoe groter het scherm, hoe groter de optimale comfortabele kijkafstand.
Dit vertaalt zich naar een optimale kijkafstand van 3-6 schermbreedten. Opmerking: deze cijfers zijn specifiek van toepassing op televisiekijken, maar de principes voor desktopmonitoren blijven hetzelfde. Apple adviseert dat u tussen de 18 "en 24" van uw scherm zit, afhankelijk van de grootte. Ze suggereren 15 "vanaf de nieuwste iPad, 10" vanaf een iPhone 4.
Dat is een aanzienlijk bereik, dus het lijkt verstandig om de lettergrootte te wijzigen in relatie tot de afstand waarover het wordt gelezen.
Eems zijn onze vriend hier. Door je type, lijnhoogte, inderdaad het hele basislijnraster in te stellen (er is een uitdaging), kun je met behulp van relatieve maateenheden (ems of rems) het hele ding opschalen.
/ * beginwaarde instellen * / html font-size: 100%; body font-size: 0.875em; / * 14px * / / * boost het wanneer de tijd ervoor klopt * / @media only screen en (min-width: 768px) body font-size: 1em; / * 16px * /
Ik ben een fan van een groot, leesbaar type, maar als je ooit op je hoede bent geweest om je lichaamsexemplaar op 16px in te stellen, is een grote schermindeling misschien wel de plek om je handen vuil te maken!
Geavanceerde CSS-lay-outs zijn nog redelijk ver weg, maar zelfs in onze wereld van drijvers kunnen we lay-outs zonder al te veel moeite reorganiseren. Als het doel van deze oefening is om optimaal gebruik te maken van ongebruikt schermvastgoed, waarom dan niet gewoon verborgen inhoud terugbrengen in de foto??
Neem het voetnoot, bijvoorbeeld. Vaker wel dan niet vindt het verborgen offscreen, aan de onderkant van de pagina. Dat is geen probleem; het is niet bepaald de plaats voor zeer belangrijke inhoud, maar een voettekst van een pagina kan nuttige informatie bevatten, dus overweeg het aan de zijkant van uw lay-out te plakken als een extra kolom.
Semantisch is het nog steeds een . De markup vermeldt nog steeds waar de inhoud thuishoort in relatie tot de hiërarchie van de pagina, maar we zijn vrij om het te plaatsen waar we willen. Door naar een raster te werken en door te werken naar een modulaire lay-outstructuur wordt dit gemakkelijker haalbaar.
U kunt ook de inhoud van het lichaam naar boven verplaatsen door horizontale elementen, zoals primaire navigatie, te herpositioneren, waardoor een verticaal verticale lay-out in een meer horizontale richting wordt omgezet.
Ik stel voor dat een combinatie van al deze benaderingen u goed van pas zou komen; eerst bouwen voor mobiel, uw layout in de breedte laten stromen, schaal vergroten (licht) en modulaire elementen verplaatsen.
Bekijk hoe alles bij elkaar komt (ik heb zelfs de CSS3 multi-kolommen erin gegooid voor een goede dosis).
Er zijn altijd maren ...
Vergeet witruimte niet. Whitespace aan de randen van een pagina-indeling is wat precies die lay-out definieert. De lege delen van een scherm geven aandacht aan inhoudsgebieden en helpen het oog van de gebruiker te richten. Grijp niet gretig witruimte, alleen omdat je kunt.
Dit geldt met name voor onze benadering van "herpositionering". Een modulaire lay-out kan gelukkig worden herschikt, zodat verborgen inhoud in beeld wordt gebracht. Maar als u de gebruiker meer informatie te verwerken geeft, kan dat wat u probeert te bereiken, verminderen.
Neem dit voorbeeld van recente Windows Vista-vensters van Windows 8. Op kleinere apparaten is de tegelinterface zeer effectief:
Op grotere schermen kan dit het best als verwarrend worden omschreven:
Dus het concept dat "ruimte is om gevuld te worden" is niet noodzakelijk waar. Toch hoop ik dat dit je stof tot nadenken geeft en ik kijk uit naar je eigen ervaringen bij het ontwerpen voor grote schermen.
Accentsconagua