Share
Als we 2015 intrekken, is dit het perfecte moment om 'The State of Responsive Web Design' aan te pakken.
We gaan opnieuw kijken wat we weten over RWD, wat de laatste tijd achterop is gelaten, de nieuwe trucs die we vandaag in onze game kunnen opnemen en wat er aan de horizon opduikt..
Voordat we hier ingaan, laten we beginnen met definiëren wat we eigenlijk bedoelen als we zeggen "Responsive Web Design".
Toen Ethan Marcotte de term vijf jaar geleden oorspronkelijk bedacht in zijn artikel over A List Apart, noemde hij vloeistofrasters, flexibele afbeeldingen en vragen uit de media als drie "technische ingrediënten" van RWD.
De onsterfelijke begeleidende illustratie door Kevin CornellHij heeft deze specificaties echter onmiddellijk gekwalificeerd door te zeggen:
"... maar het vereist ook een andere manier van denken."
Sinds dat artikel uit 2010 zagen we een voortdurende evolutie in de technologie die mensen gebruiken om toegang te krijgen tot het internet, evenals de opkomst van verschillende nieuwe technische ingrediënten die kunnen worden toegevoegd aan onze ontwikkelingstoolkit.
We gebruiken nog steeds vloeibare rasters, flexibele afbeeldingen en mediaquery's, maar die drie dingen alleen vormen niet langer een volledig beeld van wat Responsive Web Design inhoudt.
Technologie en webontwerptechnieken zijn voortdurend in beweging, dus de definitie van RWD zou ons idealiter moeten geven een andere manier van denken dat zal net zo goed zijn na nog eens vijf jaar verandering zoals het nu is.
Naar mijn mening kan die manier van denken als volgt worden samengevat.
"Responsive Web Design is een benadering voor het maken van websites die dat wel kunnen reageren op alle bekende apparaten voor internet browsen, met inhoudslevering en UI-interactie geoptimaliseerd in de grootst mogelijke mate voor alle bezoekers. "
Door ons te concentreren op de manier van denken die ten grondslag ligt aan Responsive Web Design in plaats van specifieke technische ingrediënten, blijven we vrij om te streven naar de beste nieuwe manieren om responsieve sites te creëren in het voortdurend veranderende landschap van onze industrie.
Hoewel er zeker veel dingen zijn die veranderd zijn in RWD, zijn er ook verschillende dingen die in wezen hetzelfde zijn gebleven en dat veel ontwikkelaars het erover eens zullen zijn om goede praktijken te zijn.
Hier zijn enkele van de meest geaccepteerde aspecten van de huidige RWD zoals wij die kennen.
We weten allemaal dat we moeten zorgen voor een lijst met mogelijke weergaveresoluties, zolang uw arm, meerdere pixeldichtheden en verschillende viewport-grootten.
We moeten rekening houden met meerdere invoermethoden, bijvoorbeeld afscheid nemen van de afhankelijkheid van de muis, en UI-elementen vriendelijker maken.
We moeten mediaquery's gebruiken om aanpassingen aan onze lay-outs in te voeren wanneer en wanneer ze nodig zijn.
We weten dat breekpunten niet op vooraf bepaalde breedtes moeten worden geplaatst, maar eerder op het punt waarop het ontwerp "breekt" en aanpassing vereist.
Onze afbeeldingen moeten een vloeiende grootte hebben, zodat ze niet te groot of te klein zijn bij verschillende weergaveformaten.
Andere media, zoals video- en audiospelers, moeten zich ook op dezelfde vloeiende manier gedragen.
We moeten een metatag voor de viewport opnemen (en, vooruitkijkend, het CSS-equivalent), zodat onze lay-outs zich gedragen zoals we verwachten dat ze:
Er zijn een paar filosofieën en technologieën die in het verleden zijn opgenomen in responsief webontwerp, of althans niet helemaal uitgesloten, maar nu geleidelijk aan worden verdrongen door verbeterde alternatieven.
Overweeg de volgende verzameling webbrowsingapparaten:
Houd er rekening mee dat deze lijst volledig bestaat uit echte, hedendaagse gebruikscasussen.
Laten we zeggen dat mijn site een aantal kleinere, aanraakvriendelijke, mobielspecifieke functies en grotere, muisafhankelijke, desktopspecifieke ontwerpfuncties heeft. Met welke breedte moet ik mediaquery's instellen om mijn "mobiele" en "desktop" -functies te implementeren, zodat alle gebruikers van deze apparaten een eersteklas ervaring hebben?
Onze lijst omvat een handvol verschillende voorbeelden, maar er zijn honderden, zo niet duizenden extra use-cases die er extra sleutels in gooien.
De realiteit is dat er vandaag geen duidelijk onderscheid meer is tussen mobiele apparaten en desktopapparaten, dus de beste manier om verder te gaan is tegelijkertijd tegemoet te komen aan alle bekende methoden van surfen op het web..
Als uw sites vanaf de basis zijn opgebouwd om prachtig te reageren op elk bekend gebruik, niet alleen die traditioneel worden gedefinieerd als mobiel en desktop, hebt u de meest uitgebreide vorm van responsiviteit gecreëerd..
Ten eerste hebben we het opgegeven om op lay-outs met een vaste pixel volledig in Photoshop te maken omdat ze niet vloeiend of flexibel genoeg waren om het opkomende spectrum van viewportvereisten aan te kunnen..
Nu beginnen we ook te stoppen met het maken van vaste pixellay-outs in onze code, voor vrijwel precies dezelfde reden. Door in plaats daarvan onze lay-outs uit te bouwen met een combinatie van rem, em en % waarden, onze sites blijven altijd volledig schaalbaar en flexibel.
Met de benadering van de flexibele eenheid kunnen ontwerpen uniform op en neer worden geschaald door een enkele basiswaarde te wijzigen. Browser lettertype en zoominstellingen van gebruikers kunnen volledig worden gerespecteerd en ondersteund. Verschillende problemen met de viewport-grootte kunnen onmiddellijk worden opgelost. Het belangrijkste is dat de leesbaarheid en de toegankelijkheid van content altijd kunnen worden gehandhaafd.
De front-end kaders van "Big 2" zijn al aan het uitstappen bij The Good Ship PX en gaan aan boord van hun vluchten naar Flexible Unit Land.
Bootstrap 4 is in de maak en zal volledig zijn rem / em / % gebaseerd, de achtergrond achterlatend px gebaseerde lay-outs van Bootstrap 3. En Foundation 5 heeft de overgang naar werken met flexibele eenheden al voltooid.
De dagen van de goede oude px-eenheid die we allemaal zo goed hebben leren kennen, lopen ten einde.
Het kan zich al snel bevinden zich in een comfortabele stoel in het bejaardentehuis, naast zijn oude vrienden uit de gloriedagen, IE6-ondersteuning en geanimeerde Flash-headers.
Over Flash gesproken ...
Natuurlijk hebben we misschien al enige tijd geleden gezien dat geanimeerde Flash-headers zijn verdwenen, maar we zien nog steeds regelmatig Flash-afhankelijke video's, diavoorstellingen en games verschijnen. Ik heb het niet alleen over kleine hobbysite's, ik zie ook grote en zeer bezochte sites die dit bericht nog steeds weergeven als je Flash niet gebruikt en probeer hun videomateriaal te bekijken:
Het komt vaak voor dat mobiele apparaten Flash niet ondersteunen. Het is daarom niet de veiligste manier om erop te vertrouwen dat inhoud wordt geleverd.
In feite beginnen webbrowsers om redenen die voornamelijk te maken hebben met beveiliging en stabiliteit, zich te verwijderen van ondersteunende plug-ins zoals Flash, Silverlight en Java, ten gunste van alternatieve technologie die puur werkt via native browserinsluitingen.
De tijd is gekomen om op plug-in gebaseerde media te laten glijden en over te stappen naar een nieuw tijdperk van mediadisplay-technieken.
Sommige van deze technologieën zijn bijna nieuw, en sommige zijn al een tijdje bezig, maar worden voortdurend verbeterd, maar ze hebben allemaal één ding gemeen: ze zijn nieuwkomers in de RWD-wereld die verder gaan dan de oorspronkelijke focus op flexibele rasters, vloeiende beelden en mediaquery's.
Alleen omdat Flash en de tegenhangers ervan op de loer liggen, betekent dit niet dat we nog steeds geen leuke dingen kunnen hebben. Video, audio, animatie en zelfs 3D en volledige games zijn nog steeds erg in de mix dankzij HTML5 en de CSS3 en JavaScript gebaseerde goodies die het in de mix brengt.
Waar we ooit browserplug-ins hadden, hebben we nu native HTML5 video- en audiospelers, CSS3-animaties, tools zoals Google Web Designer, Canvas, WebGL en een nog steeds groeiende lijst met interessante nieuwe goodies.
Het nieuwe HTML5-element en elementen.
Hiermee kunnen we de grootte van de viewport en de pixeldichtheid van het apparaat controleren en vervolgens de meest geschikte versie van een afbeelding laden, afhankelijk van de resultaten..
Het is nog niet volledig native ondersteund in browsers, maar er is een zeer solide polyfill met de naam Picturefill (door Scott Jehl, de man achter Responsible Responsive Design) waarmee
Lees meer over hoe het allemaal werkt in Quick Tip: Hoe HTML5 "afbeelding" te gebruiken voor responsieve afbeeldingen.
Waarom pictogrammen van een vaste grootte hebben wanneer u volledige vrijheid voor het wijzigen van de grootte kunt hebben, allemaal met een wijziging in één instelling voor lettergrootte in CSS?
Via fantastische webbibliotheken zoals Font Awesome, Entypo, Typicons en meer, kunt u allerlei soorten afbeeldingen op uw sites plaatsen, van raketten tot paperclips tot social media-logo's. Maar omdat ze worden geleverd als lettertypen en niet als afbeeldingen, kunt u ze allemaal inkleuren en de grootte ervan wijzigen via CSS.
Dit betekent dat u ervoor kunt zorgen dat uw pictogrammen goed reageren op de grootte van de kijkers waar ze zich in bevinden, altijd leuk en gemakkelijk te zien en te gebruiken zoals vereist.
Flexbox is ingesteld om veel van de grootste hoofdpijnen op te lossen die webontwerpers al jaren proberen te onderdrukken.
Er is maar één probleem: de gebruikscijfers van browsers die dit niet ondersteunen, zijn in veel gevallen nog steeds te veel om ervoor te zorgen dat Flexbox volledig aan het werk kan. Als je werkt aan een project dat het ondersteunen van IE8, IE9 en Opera Mini uitsluit, moet je het doen.
CanIUse.com koppelt echter het algemene gebruikspercentage van die drie browsers aan respectievelijk 3,18%, 2,13% en 2,82%. Er is ook geen betrouwbare fallback voor Flexbox op het moment. Dat betekent dat u op een site met gemiddeld tot zwaar verkeer honderden tot duizenden gebruikers tegenkomt die maandelijks een gebroken site bezoeken.
We willen allemaal dat Flexbox de standaard wordt in lay-outbeheer, zodat we kunnen ophouden met het bedenken van manieren om te doen wat relatief eenvoudige lay-outtaken zouden moeten zijn, en zodra de drie resterende rode markeringen op deze CanIUse-grafiek verdwijnen,.
We hebben een tijdje geleden over webcomponenten gesproken, en ze zijn nog steeds op weg naar ons als de weg van de toekomst, dichter bij het dagelijks inbreken in de mainstream.
Eerder noemden we het video-, audio en afbeelding elementen en hoe nuttig ze zijn voor responsief webdesign. Wanneer webcomponenten van kracht worden, kan eenieder van ons effectief aangepaste elementen maken, net als deze, voor elk doel dat we moeten invullen. Bovendien kunnen webcomponenten worden gedeeld, wat betekent dat er een vrijwel onbeperkte hoeveelheid nieuwe responsieve elementen is die in onze ontwerpen bruikbaar kunnen worden..
Dit democratiseert in wezen HTML, dat is best wel enorm.
Als er een nieuw element is waar de wereld echt veel gebruik van kan maken, hoeven we niet te wachten op de implementatie van de browser - we hoeven alleen maar een open source-ontwikkelaar te zien die iets samenbrengt en de genereuze beslissing neemt om hun werk te delen.
We hebben bijvoorbeeld eerder gezegd dat RWD flexibele plaatsing van media vereist, en dat het toestaan van ingesloten iframe-ingesloten media zoals YouTube-video's hun beeldverhouding schalen en behouden.
Ontwikkelaar Joselito Junior heeft een webcomponent gemaakt en geopend die precies dat doet, met behulp van deze eenvoudige HTML:
Lees meer over deze fascinerende nieuwe technologie in Hoe u uw eigen HTML-elementen met webcomponenten kunt maken.
Omdat technologie altijd met de minuut verandert, is het uiterst belangrijk voor ons om gefocust te blijven op de onderliggende doelen van responsief webontwerp en niet te gehecht raken aan een manier om dingen te doen. Op deze manier zorgen we ervoor dat we altijd openstaan voor nieuwe manieren om betere ervaringen te creëren voor de mensen die onze sites gebruiken.
Om dat te laten gebeuren, moeten we altijd onze oren bij de grond houden, luisteren naar de nieuwste ontwikkelingen op het gebied van webbrowsingapparatuur en webontwerptechnieken.
Als je je eigen responsieve webontwerptechnieken wilt opfrissen, wil je misschien graag mijn cursus bekijken in Responsive Web Design Revisited. In iets meer dan twee uur zal ik u alles laten weten wat u moet weten om een volledig responsieve website te maken met de nieuwste technieken. De eerste twee video's zijn gratis, dus ga je gang en krijg een voorvertoning van de site die je gaat maken en alles wat je zult leren.
Heb een geweldig 2015 en dit is het altijd evoluerende responsieve webontwerp!
Accentsconagua