Share
Internett som vi vet det endrer seg. Tidligere måtte designere og utviklere bare ta seg av med ett medium: dataskjermen. I de siste årene har imidlertid en mengde fullstendig Internett-aktiverte enheter med mange forskjellige former og evner oppskåret, noe som betyr at vi nå må designe våre nettsider for å passe komfortabelt i så mange skjermstørrelser, former og løsninger som du kan muligens tenke på.
Vår gamle løsning med fast breddeutforming er utelukket nå. Så hva gjør vi? Svaret, min kjære leser, ligger hos Responsive Web Design.
Ideen om Responsive Web Design, et begrep laget av Ethan Marcotte, er at våre nettsider skal tilpasse deres layout og design for å passe alle enheter som velger å vise det.
I sin bok beskriver han den riktige tittelen "Responsive Web Design" de tre delene til et responsivt nettsted:
Fordi denne artikkelen er beregnet for designere ikke utviklere, og fordi jeg ikke vil gå på Ethans tær innholdsvis, vil jeg ikke diskutere disse tre tingene.
Det er imidlertid viktig for deg som designer å forstå de grunnleggende konseptene for RWD for å bedre utforme nettsteder som vil bli lydhør når de er kodet. Jeg anbefaler på det sterkeste at du leser disse tre artiklene av Ethan: Fluid Grids, Fluid Images, og Responsive Web Design.
Hvis du bare leser en av dem, gjør den den siste, skrevet i mai i fjor. Å lese det endret måten jeg, og jeg mistenker mange andre som meg, se på internett. Ethans arbeid er intet mindre enn geni, og jeg tror at alle som lever av nettet, må være pålagt å lese denne artikkelen.
Hvis du er en designer som bare design, noe som betyr at du ikke er ansvarlig for HTML og CSS på nettstedet du arbeider på, kan mye av dette bare gå over hodet ditt. Du kan også lure på hvorfor akkurat du trenger å vite om Responsive Web Design.
Jeg har alltid trodd at den som designer en nettside, burde være den som senere puster livet inn i den, gjennom HTML og CSS. Jeg forstår at dette åpenbart ikke er tilfelle for mange prosjekter, og jeg vil respektere en persons evner hvis de velger å bare sette sammen design eller bare skriv koden.
Det er viktig å forstå at et nettsted ikke er det ene eller det andre, det er et ekteskap av både design og kode, hver avhengig av hverandre for å skape en sømløs opplevelse. Å virkelig lære å designe et nettsted, deg må forstå hvordan designen senere vil bli implementert i kode, selv om det bare er en rudimentær forståelse.
Jeg vil påminn deg igjen: Denne artikkelen er for designere. I de kommende avsnittene diskuterer jeg nøyaktig hvordan, som designere, bør vi endre måten vi designer for å bedre passe prosessen med lydhør webdesign.
Selv om du ikke designe for Responsive Web Design, bør du designe med en slags rutenett. Som den moderne, utdannede designeren du er, bør du allerede ha en forståelse av hva det betyr å bruke et rutenett, så jeg hopper over de frie biter.
En av stolpene til Responsive Web Design er The Fluid Grid. I hovedsak betyr det at nettverket ditt, som tradisjonelt ble målt i piksler, nå skal vurderes i prosent av den totale sidebredden. Den faktiske beregnede bredden til hver kolonne i et responsivt nettsted endres hver gang nettleservinduet endres, og kan ikke garanteres å være det samme på tvers av ulike enheter.
Det er derfor du må bruk et rutenett når du designer for Responsive Web Design. Det er en nødvendighet, ikke en finhet. Du kan ikke opprett et responsivt nettsted uten et nettbasert design; det er rett og slett ute av spørsmålet, det ville ikke fungere.
Å vite at designen din ikke vil ha nøyaktig samme pikselmåling for hver kolonne som i designkomponenten, er det noen andre tiltak du bør ta for å forsikre deg om at rutenettene dine uten problem.
Prøv å avstå fra å bruke teksturerte grenser i kolonnene dine, slik som dette:
Disse typer ting ville være vanskelig for utviklerne å bruke på et lydhurt nettsted, fordi de ikke ville skalere seg godt horisontalt. Hvis du gjør kolonnen bredere eller tynnere, vil de teksturerte grensene slite.
Horisontale gradienter er en annen no-go.
Av samme grunn som det forrige punktet, nemlig manglende evne til å skalere horisontalt, gjør ikke dette. Ja, det er mulig med nye CSS3-egenskaper, men hvis du målretter mot et publikum av mindre tekniske kunnskapsrike brukere, vil mange ikke ha en kompatibel nettleser, og effekten vil være ubrukelig.
Hvis du har en strukturert bakgrunn i en kolonne, kontroller at det er en som kan flises lett. Gjøre: bruk korn, grunge, uansett. Ikke: Bruk et fotografi, et bilde eller et annet bilde som ikke kan brukes.
Når du skaler designet ned horisontalt for å imøtekomme mindre skjermer, kommer det et punkt der noen tekst på siden ganske enkelt blir for stor. Visst, at 100pt overskriften ser bra ut i din psd, men det fungerer ikke bare på en iPhone-skjerm, for eksempel: det blir for stort og teksten må vikle over flere linjer, redusere virkningen av den opprinnelige beslutningen.
Her vil utvikleren, ved hjelp av CSS-mediesøk, justere skriftstørrelsen slik at den passer bedre til skjermen. Dette er en design beslutning, så som en designer, bør du ha et ord i det, riktig?
For å hjelpe utvikleren, så vel som å bidra til å opprettholde integriteten til ditt opprinnelige design, bør du bestemme hvilken tekst på siden som skal forbli konstant, det vil si være den samme størrelsen på hvilken som helst skjermbredde, og hvilken tekst bør justeres. Et godt eksempel på teksten i hele tiden vil være kopi av kroppen, eller små overskrifter som fungerer som en større versjon av kroppseksemplaret.
Du bør også bestemme om teksten som skal justeres, hvordan det bør justeres.
Her er feil måte å gjøre det på: x bør alltid være 20pt større enn y. Ikke bare er denne tenkningen et stort problem for utvikleren, det gir også ingen mening i det responsive lerretet, fordi du er factoring i en konstant, en verdi som aldri vil endre uansett hvilken skjermstørrelse. For RWD er dette en stor feil, da det ikke tar riktig hensyn til den inneboende flytigheten av nettet.
Her er Ikke sant måte å gjøre det på: x bør alltid være 1,5 ganger så stor som y. På denne måten aksepterer den eneste ekte Det betyr at et design kommer ut av skriftstørrelsen, hvor stor eller liten teksten er sammenlignet med den andre teksten på siden. En konstant verdi, som 24pt eller 67pt, er meningsløs.
Når du har alt dette funnet ut, sørg for å formidle denne informasjonen til utvikleren. Det er den eneste måten å sørge for at dine beslutninger, som designer, vises i den faktiske nettsiden som seere vil laste inn i nettleseren og nyte.
Det endelige stykket i Responsive puslespillet er Media Queries. Hvis du ikke er kjent, er Media Queries en måte å bruke CSS-regler på siden basert på (for våre formål) størrelsen på den viste nettleseren.
Den utrolige kraften i dette er at du kan justere og re-design hele layoutet på nettstedet ditt for å passe til en mindre eller større nettleser enn den du opprinnelig laget for.
For å kunne utforme for dette eventualitet, bør du begynne å tenke på de forskjellige delene av designet, for eksempel hovedinnhold, sidebjelke, overskrift og navigasjon, ikke som stykker av et puslespill som må forbli på samme sted i forhold til hverandre , men som moduler som kan omorganiseres, omformes og blandes uten at deres opprinnelige betydning går seg vill.
Her er et eksempel: tenk at du designer et nettsted som ser slik ut (jeg er sikker på at du har jobbet med lignende layouter før):
Den avgjørende delen av dette eksemplet er identifisering av grupper av elementer som må være sammen for noen oppsett. For eksempel må alle navigasjonslinkene holdes sammen, for ellers ville de ikke gi mening. Dette er en modul, en del av informasjon som kan flyttes rundt blant de andre modulene uten å miste dens betydning.
Å bygge nettstedet ditt med disse modulene i tankene gjør det enkelt å forestille seg hvordan layoutet vil tilpasse seg forskjellige visningsstørrelser. For eksempel:
Se hvordan selv om modulene er på forskjellige steder, viser de fremdeles den samme informasjonen som originalen, bare i et skjema lettere fordøyd av mobile enheter eller andre, nettlesere av forskjellig størrelse..
Det er ikke noe du må endre i oppsettet ditt for å gjøre dette modularitetsarbeidet, det er bare en annen måte å se på samme bilde. Forhåpentligvis vil dette nye perspektivet hjelpe deg med å ta mer informerte beslutninger mens du jobber med dine fremtidige designprosjekter.
Som så mye på internett er Responsive Web Design evolusjonerende, ikke revolusjonerende. Det er rett og slett det naturlige neste skrittet for Internett, ikke en fullstendig revurdering av alt. Som designere må vi kontinuerlig tilpasse våre arbeidsflyter, og denne gangen er ikke annerledes.
Responsivt webdesign er Fremtiden, eller i det minste, vil det være når utviklere og designere både omfavner det. Som webdesignere og utviklere er vi de eneste som har muligheten til å se denne fantastiske nye standarden kommer til å bli oppfylt. Gjør det skje, for deg, for meg, for internett som helhet!
Accentsconagua