Responsive webdesign is een verzamelnaam geworden voor het goed laten functioneren van uw website bij lage resoluties.
Smartphones hebben een revolutie teweeggebracht in het mobiele internet en tablets gooien een nieuwe sleutel in de tandwielen met hun groeiende populariteit. Alles bij elkaar genomen, zou een website vandaag kunnen worden ervaren op een smartphone met lage resolutie, een tablet met gemiddelde resolutie of een desktop of laptop met een hoge resolutie. Wanneer je retina-displays in de mix gooit, is het aantal mogelijke schermformaten duizelingwekkend. In het ideale geval zal uw website er op elke manier elegant uitzien en funktioneren.
Responsive webdesign op zich is het proces waarbij een website werkt op hele kleine schermen, hele grote schermen en met elke resolutie daartussenin.
In de afgelopen paar jaar heeft de industrie gezamenlijk een shortlist van gemeenschappelijke beste praktijken ontwikkeld. Veel van deze praktijken richten zich op het achteraf inbouwen van websites die bedoeld zijn voor hoge resolutie tot lagere formaten. Anderen beginnen op mobiel en werken aan de grotere viewports, en optimaliseren waar nodig. Al deze praktijken kunnen over het algemeen worden ingedeeld als responsieve of adaptieve lay-outs.
Responsieve lay-outs presteren over het algemeen beter dan adaptieve lay-outs, maar in sommige gevallen (bijvoorbeeld complexe webapps) kan een adaptieve benadering de gebruikers beter van dienst zijn. Hoe dan ook, het doel is om uw website er altijd het beste uit te laten zien met de gewenste resolutie.
De meeste mensen kiezen ervoor om mediaquery's te gebruiken om dit te doen ze zijn rotsvast tenzij je ondersteuning nodig hebt voor IE8 of lager. Voor degenen onder ons die nog steeds een publiek hebben in IE6 - 8, heeft Scott Jehl een JavaScript-polyfill met de naam Respond.js dat zal de dingen laten werken.
Voordien hadden veel webdesigners minimale communicatie met ontwikkelaars tot de overdracht. Nu moeten ontwerpers en ontwikkelaars echter samenwerken via zowel het ontwerp- als het ontwikkelingsproces om alles soepel te laten verlopen. Van gebruikersanalyse tot wat al dan niet kan worden herschikt bij het wijzigen van viewports - ontwerpers en ontwikkelaars zijn dichterbij dan ooit, zo niet dezelfde persoon. Als u op zoek bent naar inspiratie voor welke responsieve of adaptieve lay-outs eruit zien, MediaQueri.es is een populaire webdesigngalerij die vier vensters van een website toont.
Toen het idee van responsive webdesign voor het eerst terrein begon te winnen, domineerden adaptieve technieken een tijdje. Het is gemakkelijker om over te schakelen naar ontwerpen en ontwikkelen voor deze lay-outs, hoewel ze meer werk vereisen dan hun responsieve conterparts. Dit is ook de route die veel mensen volgen wanneer een bestaande website wordt aangepast om mobielvriendelijk te zijn. Vanwege de aard van adaptieve lay-outs geven ze veel meer controle over het ontwerp van de website. U hoeft alleen te ontwerpen voor specifieke viewports en browsers geven alleen de hoogste weer die in de breedte past. Deze lay-outs zijn degenen die "klikken" tijdens het aanpassen terwijl je het formaat van je browservenster aanpast. Als je het formaat van je venster verkleint tot kleiner dan 1024 pixels, zie je deze plotselinge verandering waar ik het over heb terwijl de lay-out van deze website zich aanpast om te focussen op een viewport met gemiddelde resolutie.
Bij het ontwerpen voor een adaptieve ontwikkelingsaanpak is het werk vrij eenvoudig. Voordat ontvankelijk webdesign iets werd, hebt u simpelweg één lay-out ontworpen en vervolgens ontwikkeld. Nu ontwerp je voor meerdere viewports en ontwikkel je ze. Over het algemeen is het gemakkelijker om te beginnen bij lage resolutie viewports en werk je omhoog. Als je begint met hoge resolutie-viewports en naar beneden gaat, kan het een beetje ... compact worden. En tegen de tijd dat u mobiel bereikt, rommelig.
Het aantal viewports dat u ontwerpt, is geheel aan u en de ontwikkelaar, en u berekent een strijdplan op basis van uw gebruikers. Als de huidige site-analyse gebruikers laat zien die meestal gebruik maken van viewports met een lage en gemiddelde resolutie, plan daar dan voor. U wilt ten minste drie: één voor viewports met lage resolutie (smartphones), viewports met gemiddelde resolutie (tablets) en één voor viewports met hoge resolutie (desktops en laptops). Idealiter is planning voor zes de standaard, met een lay-out met hoge en lage resolutie voor elk van de drie hierboven genoemde viewports. Als je echter te veel meer hebt, is de ontwikkeling en het onderhoud te veel om te verwerken, dus wees op je hoede.
Het ontwikkelen van een adaptieve lay-out is eigenlijk ook vrij eenvoudig. Ervan uitgaande dat je met de ontwerper (of de ontwerper) hebt gewerkt vanaf het begin, is het net als het ontwikkelen van een traditionele website. U begint met het ontwikkelen van de site in een mobiel laag resolutie kijkvenster. Zodra u dat hebt gedaan, gebruiken we mediaquery's om de lay-out voor viewports met hogere resolutie uit te breiden. Hieronder vindt u mediaquery's met een lage, gemiddelde en hoge resolutie:
/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }Dit is waar de "snap" vandaan komt in de adaptieve benadering. Aangezien we meerdere gemeenschappelijke viewport-resoluties targeten, kan het van de een naar de ander gaan wanneer het formaat van het venster de lay-out doet springen. Zoals ik eerder al zei, is adaptief ontwerp en ontwikkeling alleen zeer nuttig voor aanpassingen achteraf of voor complexe webapps. Het ontwerpen en ontwikkelen voor deze vele indelingen voor onafhankelijke viewports is veel meer een gedoe als het niet nodig is.
Vanaf vandaag is responsief ontwerpen en ontwikkelen de de facto benadering van gebruik. Hoewel het minder controle over de lay-out biedt in vergelijking met een adaptieve aanpak, is het veel minder werk om te implementeren en te onderhouden omdat u technisch gezien slechts één lay-out hebt. Het is ook meer aangepast voor de website en dit is het belangrijkste verkoopargument. U kunt uw eigen breekpunten maken op basis van wanneer uw ontwerp breekt of er niet uitziet als bedoeld.
Responsieve lay-outs bevatten ook vloeiende lay-outs. Voordat het responsieve webdesign werd opgepakt, waren vloeistofsystemen populair - lay-outs met percentages voor breedten. Hoewel ze in de meeste gevallen zeker goed werkten, hadden we daarvoor smartphones en tablets. Nu worden de meeste vloeiende lay-outs aangevuld met mediaquery's met zeer lage en zeer hoge resoluties. Anders zou je kunnen eindigen met zeer compacte of enorm grote lay-outs.
Hoewel je een heel eenvoudige handleiding hebt om te volgen met een adaptief ontwerp, is responsief ontwerp niet zo duidelijk. Er is een verhit debat dat ontwerpen in de browser de beste manier is om het te doen - ontwerpen en ontwikkelen op hetzelfde moment. Omdat je bij het ontwerpen in feite alle viewports in overweging neemt, is er meer werk aan de ontwerpkant. In het ideale geval willen we de viewports in gedachten houden, maar niet ontwerpen voor een specifieke. Probeer indien mogelijk op een middenweg te vergaderen; Concentreer u op midden-resolutiekijkven, terwijl u er rekening mee moet houden dat de lay-out later moet worden aangepast voor steeds lagere resoluties.
Het is buitengewoon belangrijk om bestaande gebruikersanalyses te gebruiken als u die heeft. Als uw site al over analyses beschikt die aantonen dat uw doelgroep vooral leest van lage-resolutie viewports, ontwerp dan met een focus daarop. Richt je publiek , zelfs als dat betekent dat je enkele van de beste praktijken die er zijn negeert. Uiteindelijk zal uw website hen van dienst zijn, niet de mensen die deze 'beste' praktijken samenvoegen.
Zodra de ontwerpfase is voltooid, begint het echte plezier met de ontwikkeling. Zoals eerder vermeld, als u analytische gegevens van uw typische doelgroep heeft, begint u daar. Zodra u uw lay-out hebt ontwikkeld, gebruikt u mediaquery's om deze responsive te maken. In plaats van het definiëren van set-viewports, zult u in plaats daarvan uw browser handmatig aanpassen totdat de lay-out is verbroken. Wanneer dat gebeurt, is dat de breedte van uw breekpunt. Voeg een mediaquery toe om de pauze in het ontwerp te herstellen en ga verder met het wijzigen van de grootte. In het ideale geval doe je dit vanaf een apparaat met een hoge resolutie, zodat je alle viewports kunt zien. Zodra u zeker weet dat u ondersteuning biedt voor viewports met lage en hoge resolutie, gaat u verder met testen.
In zeldzame gevallen kunt u een website tegenkomen die een aangepaste oplossing gebruikt, zoals {$lang_domain} . Over het algemeen valt het grootste deel van het internet in de responsieve of adaptieve groepen zoals hierboven beschreven, maar soms worden mensen creatief en maken ze hun eigen oplossing. {$lang_domain} doet dit door te beginnen met de standaard lage, gemiddelde en hoge breekpunten en vervolgens zo nodig tussentijds aan te vullen wanneer de lay-out breekt. Bovendien is de lay-out ook vloeiend van aard tot een ingestelde maximale resolutie. Met dit in gedachten, word creatief en bouw iets dat de norm breekt!
Helaas is er nog geen goede oplossing voor het testen van deze lay-outs door browsers. De beste manier om te testen is om dit handmatig te doen: de pagina laden op je telefoon, tablet, laptop en al het andere. U kunt ook een viewport-spoofer in uw browser gebruiken als deze een dergelijke extensie ondersteunt. Ripple emulator is een extensie die ik in chrome gebruik om een aantal lage-resolutie viewports te testen. Hoewel het onhandig is om handmatig te testen op apparaten, geeft het een beter beeld van de functionaliteit van uw site. Gebruikersinterface die er goed uitziet op een emulator, presteert mogelijk behoorlijk slecht op een daadwerkelijk apparaat.
Zo uitgebreid als dit artikel is, is dit eenvoudigweg een inleiding op het onderwerp van opmaaktypen. Er is veel informatie over responsieve webdesignmethoden die niet in dit artikel zijn opgenomen; Het optimaliseren van gebruikersinterface-elementen en typografie, responsieve afbeeldingen en media, apparaatpixelverhoudingen en nog veel meer wordt hier niet uitgelegd. Er zijn echter genoeg bronnen voor dergelijke kennis, in veel meer informatie dichte vormen. Sinds het idee van responsive webdesign is ontstaan, hebben we bijgedragen aan een buitengewoon grote schat aan kennis over dit onderwerp. Ik hoop dat door het verschil tussen lay-outtypen hier uit te leggen, je beter kunt omgaan met het idee van een responsief web ... zonder in het konijnenhol te verdwalen.
De community maakt voortdurend nieuwe technieken en bouwt creatieve oplossingen voor problemen die we nog maar net tegenkomen. Dus hoewel er een enorme schat aan informatie beschikbaar is over responsief webdesign, is het een concept dat nog in de kinderschoenen staat. Hoewel best practices en veelvoorkomende use-cases gemakkelijk te conformeren zijn, wordt creatief zijn en het plaveien van uw eigen oplossing altijd aangemoedigd. Als je tips of suggesties hebt voor diegenen onder ons die gewoon onze kennis van responsieve webdesign en ontwikkeling willen vergroten of uitbreiden, vonk hieronder een discussie!
Uitgelichte afbeelding / miniatuur, gebruik responsieve afbeelding via Shutterstock.