19 veldig nyttige responsive nettveiledninger

Responsiv webdesign er ikke lenger valgfri; nettsteder må bare være lydhøre i disse dager. Heldigvis er RWD enklere enn noensinne å implementere, da det er så mange gode verktøy som hjelper deg med å lage og teste designene dine, og sikre at du skaper det beste Brukererfaring .

Her er vår oversikt over noen av de beste ressursene som vil veilede deg i hvordan nettsteder fungerer bra og ser bra ut på alle enheter. Vil du ha flere nyttige ressurser? Våre guider til de beste nettstedsbygger og webhotell tjenesten er her for å hjelpe. Og hvis du er bekymret for å lagre filer sikkert, trenger du disse strålende skylagring alternativer.

01. Hvordan begynne å tenke responsivt

Responsive web design tutorials: Hvordan begynne å tenke responsivt

rund ting på baksiden av iPhone
Kom i en responsiv sinnstilstand(Bildekreditt: FreeCodeCamp)

I dette innlegget på FreeCodeCamp , Kevin Powell gjør det viktige poenget at responsiv webdesign ikke lenger er en trend; det er slik det forventes at nettsteder bygges, og det betyr å tenke responsivt fra starten. Her demonstrerer han hvordan man kommer inn i den responsive tankegangen, mens han bygger et fullt responsivt 3-siders nettsted.

02. 9 responsive typografitips

Responsive web design tutorials: 9 responsive typography tips

Få responsive typetips fra ekspertene(Bildekreditt: Adam Banks)

Responsivt webdesign trenger naturlig nok responsiv typografi for å gå med det. Men hva betyr det til og med, og hvordan implementerer du det? Vi spurte syv ledende webdesignere for deres tips om å lage elegant, lesbar tekst i alle visningsfelt.

03. Reglene for responsiv webtypografi

Reglene for responsiv webtypografi

Følg disse tipsene for å få den responsive nettypografien din riktig

Responsiv nettypografi er tøff - du må ha både designkoteletter og teknisk kunnskap. Men uansett hvor vanskelig det kan være, er det ikke et alternativ å få feil, fordi typografi er hjørnesteinen i webdesign. Følg disse designprinsippene og praktiske løsningene for å få det riktig.

04. Design et responsivt nettsted med em-basert størrelse

Design et responsivt nettsted med em-basert størrelse

Bygg sidene dine slik at designet ikke går i stykker hvis skriftstørrelsen endres

Ved å bruke em-enheter for skriftstørrelse, kan du designe komponenter på siden som svarer automatisk hvis skriftstørrelsen endres. Deretter, med et smart triks for en responsiv skriftstørrelse, kan du produsere en hel side som justeres dynamisk basert på visningsportens bredde i nettleseren. Følg denne veiledningen for å lære hvordan man kan utnytte den 'relative' oppførselen til ems for å lage design som er skalerbare og responsive.

05. Prioriterte guider: et innhold-første alternativ til trådrammer

Prioriterte guider: et innhold-første alternativ til trådrammer

Lær hvorfor du bør bruke prioritetsguider i stedet for trådrammer

Wireframes kan være det mest brukte verktøyet for å designe nettsteder, apper og andre digitale grensesnitt, men de er ikke uten ulempene, spesielt når det gjelder responsiv design. Her introduserer Heleen van Nues og Lennart Overkamp deres foretrukne alternativ til trådrammer: prioriterte guider , som inneholder innhold og elementer for en mobilskjerm, sortert etter hierarki fra topp til bunn og uten layoutspesifikasjoner.

06. Proffens guide til responsiv webdesign

Proffen

Bygg bedre nettsteder for alle enheter med denne guiden

Skrevet av Justin Avery , kurator for det nyhetsbrevet Responsive Design Weekly, denne guiden fra nettmagasinet tar nettproffene gjennom det grunnleggende opp til de mer avanserte responsive webdesignteknikkene.

07. Hvordan designe responsive og enhetsagnostiske former

Responsive skjemaer som tilpasser seg forskjellige enheter

Forsikre deg om at skjemaene dine fungerer, uansett hvilken enhet du bruker

Skjemaer er et av de viktigste elementene i ethvert digitalt produktdesign, og om du trenger en påmeldingsflyt eller en multi-view stepper, må du designe den slik at den fungerer like bra på mobile enheter som på skrivebordet. Slik gjør du det , komplett med nyttige tips om hvordan du bruker Flexbox.

08. Lag et responsivt oppsett med CSS Grid

Designer som lager et CSS Grid-nettsted

Bygg et flott porteføljeside som passer for alle visningsportene

CSS Grid Layout vokser i nettleserstøtte hver dag, og selv om det ikke er en erstatning for Flexbox eller til og med for flyter, er det en flott måte å lage nye og spennende responsive oppsett når det brukes i kombinasjon med dem. Følg denne trinnvise veiledningen å bygge en responsiv porteføljeside ved hjelp av Grid.

09. Webdesignerens guide til Flexbox

Flexbox-kolonner merket 1 2 3 4 5 med en pil som viser hovedaksen er vannrett

Kom i gang med Flexbox

Har du begynt å bruke Flexbox ennå? I denne opplæringen gir Wes Bos en omfattende guide til kjernekonseptene som vil gi deg en solid forståelse av alt du trenger for å få tak i dette kraftige verktøyet.

10. Codrops Flexbox referanse

Codrops skjermbilde sier

En komplett guide av Sara Soueidan

Dette komplett guide til Flexbox er skrevet av Sara Soueidan, en forfatter som er kjent for sin evne til å forklare konsepter på en måte som er lett å følge uten å krympe på detaljer. Codrops-guiden oppdateres regelmessig, så det er en flott ressurs å gå tilbake til når du trenger det.

11. Stabler: Flexbox for Sketch

Medium artikkel skjermbilde sier

Få Flexbox-funksjoner innen Sketch

Stabler, en del av Auto Layout-pluginet, gir deg en måte å bruke Flexbox-teknologi innen Sketch uten å bruke CSS. denne artikkelen forklarer hvordan du kan bruke denne kraftige teknikken for enkel responsiv design.

12. Et kollisjonskurs i teknisk RWD

Et krasjkurs i teknisk responsivt webdesign-skjermbilde

Få tak i det grunnleggende om responsiv webdesign

Jerry Cao har skrevet på Treehouse-bloggen og fortettet mye nyttig informasjon til en relativt kort, lesbar artikkel.

13. Lag fleksible oppsett med Susy og Breakpoint

Enhetsskjermbilder som viser responsive nettstedsoppsett tilpasset hvert forhold

Sass-utvidelser for å ta vare på responsive matte

Hvis du ikke vil bruke et rammeverk for å bygge det responsive nettstedet ditt, disse Sass-utvidelsene er et fint alternativ, hver med sine egne styrker. De tar seg av den responsive matematikken for deg slik at du kan fokusere på design.

14. Hvordan lage responsive guider i Adobe XD

Responsive guider blir laget i Adobe XD

Adobe Experience Design (XD) er et UX- og prototypeverktøy

Hvis du er interessert i å prøve ut Adobe Experience Design (XD) , her er en god opplæring for å komme i gang. Den inkluderer en videodemonstrasjon som tar deg gjennom hvert klikk i prosessen.

15. CSS på BBC Sport

Skjermbilde av nettstedet BBC Sport

Lett CSS for et stort responsivt nettsted

Dette er ikke en veiledning i seg selv, men det er mye læring her. I dette innlegget , den første av en todelt serie, tar frontutvikler Shaun Bent oss på en detaljert omvisning av hvordan CSS gjøres på BBC Sport. De har klart å holde CSS-fundamentet til dette massive nettstedet under 9 kb, og det er fascinerende å se hvordan det er blitt gjort.

Skjermbilde av CSS Tricks som starter artikkelen med

Chris Coyiers sticky footer måter

Sticky footer ... det burde være enkelt nok, ikke sant? Dessverre ikke. Det kan være vanskeligere enn du forventer å få bunnteksten på riktig sted på hver enhet. Heldigvis har Chris Coyier satt sammen fem triks som vil hjelpe deg med å få det til å skje ved hjelp av calc () , Flexbox, negative marginer og Grid.

17. Tilpasning til innspill

Tabell som viser komfortable, koselige og kompakte tekstdesigner i forskjellige skjermstørrelser

Forsikre deg om at det responsive nettstedet ditt kan godta innspill fra alle slags enheter

Responsiv design handler ikke bare om at siden din skal vises ordentlig på en hvilken som helst enhet, du må også få den til å fungere bra - og det betyr at den må være god til å godta input i en verden der skrivebord har berøringsskjerm og telefoner har tastatur. denne artikkelen av Jason Grigsby fra Cloud Four har noen gode råd.

18. Våre beste fremgangsmåter dreper ytelse på mobilnett

Skjermbilde av artikkellesing

Ytelseshensyn må også fungere for mobil

Brukes uten overveielse, kan visse gode fremgangsmåter som ble oppfattet i løpet av skrivebordstiden, ha en skadelig effekt på ytelsen til mobilnettet. denne artikkelen vil få deg til å tenke dypere over hvordan du får nettstedet til å fungere godt på mobil.

19. Hvordan lage responsive webapper med containerspørsmål

Skjermbilder av forskjellige dimensjoner som viser en nettapp-mockup-skalering

Lær hvordan du lager medieskalaen din ved hjelp av containerspørsmål

Lær hvordan du transformerer en vakker, kompleks webapp - med komponenter, tilstander og interaksjoner - på tvers av forskjellige dimensjoner og oppløsninger, bruker container spørring .

Relaterte artikler: