Designer, forfatter og høyttaler Andy Clarke har gitt ut en stor oppdatering til 320 og Up, hans 'lille skjerm første' mobile kjeleplate. Vi snakket med Clarke (AC) om revisjonen, hans relativt nyoppdagede lidenskap for MINDRE, og hvorfor designere bør vurdere å gå mobil først.
.net: Hva er fordelene for designere når de går mobil-først?
AC: For meg er mobil- eller innholds-første design der alt webdesign starter.Tenk på elementene du ser på nesten alle nettsider - typografistiler for overskrifter, lister, avsnitt og sitater. Bokser, bord, skjemaer og knapper. Utseendet og følelsen av disse elementene vil sannsynligvis ikke endres på tvers av skjermstørrelser eller enheter. Bare arrangementet av disse elementene på et rutenett vil.
Derfor er det fornuftig å skille designprosessen i to trinn. Den første kaller jeg design 'atmosfære' - typografi, farge og tekstur, som kantstiler, bokser og former. Det andre er å designe et rutenett - eller flere - og deretter ordne elementer på rutenettene for forskjellige responsive designbruddpunkter. Når jeg starter et design, fokuserer jeg på denne atmosfæren, og det blir grunnlinjen for innhold / mobil-første design. Fra den tid av vil du legge til filer og stiler bare når du trenger dem ved hvert brytpunkt, gjøre koden vår mer effektiv og sidene våre raskere. Alle vinner.
.net: Hvorfor følte du behov for å oppdatere 320 og opp? Hva oppnådde det ikke i sin opprinnelige form?
AC: Jeg skrev originalen 320 og Up for et år siden. Den gang var vi akkurat i gang med responsiv webdesign og mange nettsteder, for eksempel mine og feirede nettsteder, inkludert de fra Simon Collison, Jon Hicks og dConstruct 2010, pluss rammer og kjeleplater som HTML5 Boilerplate, strukturerte CSS3 Media Queries fra skrivebordet ned, snarere enn for små skjermer opp. For å rette opp ting skrev jeg 320 og opp.
I dag er innholds-første rammer normen. HTML5 Boilerplate og dets mobile fetter strukturerer nå stilarkene sine for små skjermer. Men Twitters Bootstrap og utallige andre rammer inkluderer flytende nett, og så lurte jeg på om 320 og Up fortsatt var relevant.
Jeg oppdaget 320 og Up er fremdeles veldig relevant for mange mennesker og spesielt for meg. Jeg har brukt versjoner av det på hvert nettsted jeg har jobbet med siden jeg skrev det, og det hadde vokst til å inkludere filene og stilene jeg trenger når jeg starter et nytt responsivt webdesignprosjekt. Den offentlige versjonen, nå på GitHub, trengte oppdatering for å inkludere de nyeste filene og stilene fra HTML5 Boilerplate, samt bedre integrering med Bootstrap. Jeg ønsket også å inkludere noen av mine favoritt responsive testverktøy.
.net: Hva er de store endringene i den nye versjonen av 320 og opp?
AC: Jeg har forenklet nesten alt. Jeg har fjernet filer og stiler jeg bare bruker en gang i en blåmåne, og noen ganger ikke i det hele tatt. Dette inkluderer Respond.js, en polyfill for å aktivere CSS3 Media Queries i gamle versjoner av Internet Explorer, fordi jeg i disse dager serverer brukere av IE7 / 8 et fast og sentrert oppsett, det samme som alltid.
I arbeidet mitt beveger jeg meg nærmere Bootstrap og vekk fra HTML5 Boilerplate, og 320 og Up gjenspeiler det. Det er derfor 320 og Ups typografistiler, i tillegg til knapper, ruter, skjemaer og tabeller, alle bruker klasseattributtverdier som er kompatible med Bootstrap.
Jeg ønsket aldri at 320 og Up skulle bli et utviklingsrammeverk som Bootstrap eller Zurb’s Foundation. De er begge gode, men gitt min allment kjente aversjon mot rammeverk, var det ingen måte jeg skulle legge til rutenett - responsivt eller på annen måte - til 320 og oppover. Når det er sagt, er det å skrive den samme koden igjen og igjen (jeg hørte) et tegn på galskap, og så de siste månedene har jeg skrevet 'Upstarts'.
De er responsive designmønstre og HTML og CSS for de tingene jeg bygger hver dag. Upstarts er bygget ved hjelp av ikke-spesifikk HTML og CSS og består av en HTML-eksempelside og en upstart.less-fil. Jeg har tatt med to, tre og fire kolonners responsive moduler og noen paneler i denne utgivelsen, og jeg vil legge til nye Upstarts når jeg skriver dem. Jeg håper virkelig andre mennesker vil gjøre det samme ved å bidra på GitHub slik at vi kan bygge et veldig nyttig mønsterbibliotek for responsiv webdesign.
.net: Du ser ut til å ha kommet veldig ut i MINDRE for sent – hvorfor anser du det som en viktig ting for designere å lære og bruke?
AC: MINDRE har endret måten jeg skriver CSS på. Jeg er ikke bare en konvertitt - jeg har blitt en ildsjel! Det hjalp til med å gjøre stilarkene mine mer modulære og bedre organisert. Dette hjelper meg når jeg plukker opp et prosjekt etter hvert og når jeg samarbeider med andre designere og utviklere om større prosjekter.
Jeg bygde den nye 320 og opp på MINDRE. Det er en ny variabelfil som lar folk definere stilen på et nettsted på en atmosfære. Så samlet jeg noen utrolig nyttige CSS3-miksinger og bygde typografien, knappene, skjemaene og andre MINDRE filer rundt dem. Det gjør utviklingen av CSS utrolig effektiv. Når det gjelder responsive webdesignbruddpunkter, er måten LESS håndterer import av stiler fra en MINDRE fil til en annen bedre enn måten vanlig CSS håndterer import. Det er hovedårsaken til at det nå bare er en versjon av 320 og oppover.
