Innhold
Bare i tilfelle du har hoppet på månene til Jupiter de siste tiårene og savnet det, står MVC for 'Model-View-Controller'. Det er et ganske godt etablert paradigme for å skille utholdenhet og samhandling av data, slik at du kan se flere, potensielt forskjellige, visninger av de samme dataene eller modellene. Kontrolleren demper ganske enkelt samspillet mellom de to.
MVC-rammeverk er mye brukt på alle språk, på alle plattformer på nettet. Likevel, når det gjelder å løse tradisjonelle responsive og adaptive designproblemer, ser vi ut til å ignorere en av de grunnleggende leietakerne til MVC - muligheten til å gi forskjellige synspunkter av forskjellige grunner. I stedet, velsignet av W3C som OneWeb, implementerer vi et enkelt svar med alle tenkelige synspunkter, og lar den uten å skille sortere etter hvilken enhet den lander med. Resultatet er potensielt uholdbare nivåer av oppblåsthet, spesielt i mobilverdenen.
Et spesielt uhyggelig sted jeg oppdaget, uten å navngi navn, var et 31 MB responsivt nettsted for et ledende ølfirma. Som Guy Podjarny oppdaget i en studie av 341 responsive nettsteder, lastet 86 prosent ned innhold for hele nettstedet, uavhengig av hvordan dette så ut på en liten skjerm. Og selvfølgelig var de smertelige sakte som et resultat.
"Vi har laget internett i vårt bilde ... Overvektig." Jason Grigsby
Og oppblåsthet er en genuin bekymring som skal holde deg i en engstelig tilstand av neglestikkende hypertensjon. Etter tre sekunders markering har 57 prosent av brukerne forlatt nettstedet ditt helt, og etter fem sekunder har du mistet 70 prosent av dem. Med den hastigheten, i syv sekunder, kan du like godt hoppe over mobil helt og bruke tid på å perfeksjonere Piña Colada-oppskriftene dine i stedet.
W3C som anbefaler One Web ligner på USDA som anbefaler fedme, det er den verste mulige løsningen man kan tenke seg. Bilder er et spesielt åpenbart eksempel på behovet for enheter for å diktere de spesifikke dimensjonene som trengs. Hvorfor må jeg laste ned et bakgrunnsbilde på 15 MB på skrivebordet hvis det skal vises på en liten fem-tommers skjerm? Så mye at leverandørene av One Web har gjenkjent den vanvittige galskapen med å bruke One Web til bilder og ødelagte rekker med et Working Draft for Responsive Images. Dette antyder at på den ene siden ønsker W3C de samme tjenestene og dataene tilgjengelig uavhengig av hvilken enhet som presenteres, men på den andre siden, så snart dette blir utålelig, fortsett og glem det.
Så jeg ville ikke ha dratt deg så langt uten å tilby noen form for løsning, uavhengig av statusen med ovennevnte anbefalingsorgan. User-Agent-overskriften inneholder en friformstreng som unikt skal identifisere typen enhet som forespørselen kommer til. Siden dette uansett ikke er standardisert, krever det en eksisterende database med User-Agent-strenger.
Heldigvis er det noen få alternativer for å gjøre disse bestemmelsene enkle; fra kommersielle tilbud som Infuze, som integrerer detaljene til den forespørselenheten rett inn i serveren, til en rekke alternativer med åpen kildekode, avhengig av dine behov, for eksempel User Agent for Ruby, til HTTP Agent Parser for Python, etc.
Bruk av disse verktøyene hjelper deg med å gi den relevante visningen, enten det er helt egen HTML i noen tilfeller eller bare separat CSS i andre, ikke alle mulige visninger samtidig. Utnytt V i favoritt MVC-rammeverket ditt for å sende den spesifikke visningen for typen enhet som ba om det.
Ord: John Bresnik
John Bresnik er seniorutvikler i The Barbarian Group.
Likte dette? Les disse!
- Hvordan bygge en app: prøv disse flotte opplæringene
- Strålende eksempler på destinasjonssidesign
- Flotte parallaksrullende nettsteder
Har du et godt tips for responsiv design? Del det i kommentarene!
