Responsiv design: Hvorfor du gjør det galt

Responsiv design er ikke en kjepphest som oppsto på grunn av en kul CSS-teknikk, det er et svar på et problem. Husk alltid det og spør deg selv om du virkelig takler problemet. Hvis du bruker kopier og lim inn for å sette inn bruddpunkter for mediesøket, kan løsningen være feil.

La oss diskutere hvorfor det finnes mediaspørsmål, og hvordan vi kan utnytte dem til å virkelig løse quandaryen på det allestedsnærværende nettet. La oss snakke om hvorfor du bør la innholdet ditt bestemme brytepunktene til en layout, ikke hypotetiske skjermstørrelser.

Denne artikkelen er en del av serien vår om "å se utover skrivebordsdesign", brakt til deg i samarbeid med Heart Internet VPS.

Ideen bak mediesøk

For å starte denne debatten riktig, er det nødvendig å diskutere hvorfor mediaspørsmål plutselig har blitt så populære. Svaret er selvfølgelig at “Responsive Design, ” et begrep myntet av Ethan Marcotte, er en fantastisk måte å løse et stadig voksende problem for nettdesignere.

Mens alle gledet seg på og om hvordan "mobilnettet" skulle overhale det tradisjonelle, var revolusjonen som skjedde mye mer drastisk: Internett ble allestedsnærværende.

Dette "problemet" er stort for hele verden, men en virkelig hodepine for oss. Det siste tiåret har det verdensomspennende nettet forvandlet seg til noe nytt. Det er ikke lenger bundet av veggene som vi tidligere hadde opprettet. Jeg har sagt dette før, men det er verdt å gjenta. Mens alle gledet seg på og om hvordan "mobilnettet" skulle overhale det tradisjonelle, var revolusjonen som skjedde mye mer drastisk: Internett ble allestedsnærværende.

På dette tidspunktet får vi ikke tilgang til nettet fra et enkelt punkt. Vi ga ikke opp bærbare datamaskiner til fordel for smarttelefoner slik "eksperter" forutså. I stedet er nettet overalt hvor vi er. Det er ikke bare i våre telefoner og datamaskiner, det er i nettbrettene, iPod-ene, spillsystemene, TV-ene og til og med biler.

Denne trenden vil bare fortsette etter hvert som tiden går. Responsiv design bringer oss forbi en sesong med å lage separate mobilnettsteder og inn i en epoke hvor vi utvikler ett nettsted som utvikler seg og tilpasser seg enheten som den blir sett på. Ved hjelp av mediaspørsmål, kan vi presentere spesifikke CSS til et antall forskjellige utsiktsstørrelser og sørge for at alle har best mulig opplevelse.

Problemet med responsiv design

Avsnittet over er ikke en semi-historisk løp beregnet på å fylle plass, det er en viktig titt på målene som responsiv design er ment å oppnå. Spørsmålet blir da, oppfyller det disse målene? Tar responsiv design tilstrekkelig opp til problemet med allestedsnærheten?

Svaret er komplisert, i beste fall kan jeg si, "det kommer an på hvordan du gjør det." Det er en forvirrende uttalelse, er det ikke? Responsiv design er grei: bruk mediesøk for å tjene tilpasset CSS til forskjellige visningsstørrelser. Slik nærmer alle seg det riktig? Så hvordan kan det være en riktig og feil måte?

Kompleksiteten oppstår når vi begynner å diskutere en avgjørende del av denne teknikken: hvilke mediesøk skal jeg bruke? Eller sagt på en annen måte, hvilke “breakpoints” skal jeg målrette for tilpasset CSS? Det nåværende populære svaret starter forutsigbart med de beste "mobile" enhetene rundt: iPhone og iPad (signal om sinte Android-brukere). Fra disse arketypene etablerer vi såkalte “generiske” smarttelefon- og nettbrettstørrelser. Så flytter vi opp og adresserer bærbare datamaskiner og små stasjonære maskiner og til slutt store skjermer. Et standard sett mediaspørsmål, som dette fra CSS-Tricks, har typisk ni eller ti forhåndsbestemte breakpoints.

Hva om vi fokuserte på behovene til en spesifikk design i stedet for en hypotetisk bruk av saken? Hva om vi bygde oppsett som ganske enkelt fungerte overalt?

For å være rettferdig fungerer dette systemet til en viss grad. Vi har alle sett mange gode responsive nettsteder bygget med et sett som ligner Coyiers ovenfor. Jeg kan imidlertid ikke la være å tro at dette på en eller annen måte gjentar den samme feilen som vi gjorde ved å designe “mobile nettsteder” for noen år siden. Hele fokuset her ligger på enheten som viser nettstedet. Før vi selv bygger nettstedet, har vi disse brytepunktene i tankene.

Men enheter endres. Vi har allerede slått fast at nettet kobles til stort sett alt med en strømbryter, så hvorfor legger vi nok en gang så stor vekt på vanlige skjermstørrelser? Er det et bedre alternativ? Hva om vi fokuserte på behovene til en spesifikk design i stedet for en hypotetisk bruk av saken? Hva om vi bygde oppsett som ganske enkelt fungerte overalt?

Innholdsfokusert responsiv design

De nevnte problemene med forhåndsetablerte mediespørsmål dukket opp bare for meg da jeg gravde inn og virkelig begynte å produsere responsivt arbeid på egen hånd. I teorien er standardforslagene gode, men når du først bruker dem på et komplekst design, vil du oppdage at disse brytepunktene ikke alltid dekker det. Problemet, som Boston Globe-designerne raskt fant ut når nettstedet gikk i live, er at det oppstår problemer "i mellom" (for rekorden, det prosjektet er fantastisk, og eventuelle layoutproblemer har stort sett blitt adressert). Ting blir rotete når designen er i en størrelse som du ikke gjorde rede for, og du må gå inn og lappe hullene etter det.

Jeg sier dette som en ivrig Apple-fanboy: slutt å designe nettsteder for iPhone.

Spørsmålet mitt er, hvorfor begynner vi ikke der? I stedet for å gå inn i et prosjekt med et sett med enheter, og følgelig mediesøk, i tankene, hvorfor lar vi ikke designen bestemme? Hver websideoppsett har et punkt der nettleserstørrelsen reduserer integriteten. Jobben vår som designere, i lys av problemet med allestedsnærhet, bør være å finne den størrelsen og redegjøre for den, deretter skumme, skylle og gjenta til alle svake punkter er gjort rede for.

Jeg sier dette som en ivrig Apple-fanboy: slutt å designe nettsteder for iPhone. I stedet kan du designe et nettsted som opprettholder sin integritet ettersom utsiktsstørrelsen reduseres til mulig gjennomførbar tilstand. Husk spesifikke enheter som en guide for designet ditt (eksempel: mindre enheter har en tendens til å være berøringsbaserte, så gjør koblinger store), men ikke legg blindene på og ikke se på det større bildet: at designet ditt skal se bra ut på hvilken som helst skjerm.

En ny arbeidsflyt

Så hvordan ser en innholdsfokusert responsiv designflyt ut? Det er enklere enn du tror. Åpenbart trenger du et utgangspunkt av noe slag. Hvis du vil starte mobil og gå opp, flott. Hvis du vil starte stort og komme ned, også bra. Jeg synes personlig at det er veldig vanskelig å virkelig grave seg inn i et design og gjøre det riktig hvis jeg begynner på mobilnivå, men det er mange solide argumenter for å gjøre det på denne måten.

Noe magi skjer når du følger denne arbeidsflyten.

La oss hypotetisk si at du startet med en stor, 1020px bred side. Sjekk den ut på den største skjermen du kan få tak i, og sørg for at den ser bra ut. Dra nå vinduet og gjør det mindre til designen blir stygg. Det er ditt første brytningspunkt. Angi et mediesøk for det punktet og fikse alt du trenger å adressere. Når du er ferdig, ta tak i det vinduet og finn neste poeng med stygghet. Gjenta disse trinnene til du er fornøyd med området du har gjort rede for.

Men hva med iPad? Hva med Kindle Fire eller Samsungs siste forsøk på å være relevant? Noe magi skjer når du følger denne arbeidsflyten. Du har nettopp laget det slik at oppsettet ser bra ut omtrent i alle størrelser. Hvis du gjorde det riktig, og når du drar det opp på telefonen eller nettbrettet ditt, vil det se bra ut.

Bare oppsett
Husk at denne diskusjonen bare refererer til layoutforhold. Du slipper absolutt ikke for å teste funksjonalitet på forskjellige nettlesere og enheter. Responsiv design gjør ingenting for å forklare det faktum at forskjellige nettlesermotorer tolker HTML, CSS og JavaScript annerledes.

Konklusjon

For å oppsummere, mediaspørsmål og responsiv design gir oss et utrolig kraftig verktøy for å redegjøre for at nettsteder blir sett på av alle slags skjermer og visningsstørrelser. Når vi begynner å knytte designene våre til en håndfull enheter, er vi imidlertid tilbake der vi startet. Målet ditt i stedet bør være å lage en layout som er så allsidig at den takler nesten alle utsiktsstørrelser som blir kastet på den.

Dette er alt sammen fint i teorien, men hvor er eksemplet? Hoppepunktet for denne diskusjonen kom fra et nylig forsøk på å bygge et responsivt bildegalleri. Ta en titt på den artikkelen for å se hvordan en innholdsfokusert responsiv designflyt kan se ut i naturen.