Virkelig Lett Responsive Design
Det er ingen hemmelighet at mange tror lydhør web er fremtiden. Å skape et responsivt nettsted betyr at det er i stand til å tilpasse seg de mange forskjellige nettleserne og størrelsene som er tilgjengelige. Hvis jeg vil sørge for at nettstedet mitt jeg har opprettet på skrivebordet mitt, kan ses på en nettbrett med miniumrulling og zooming, vil jeg være interessert i å skape et responsivt nettsted.
En grunn til at lydhør er blitt populær, er fordi det bare gir mening. Det er billigere enn å lage en eller flere ekstra nettsteder for mobiltelefoner og tabletter. Det sørger også for at det er en konsekvent visningsopplevelse blant enheter og desktop-skjermer. Det er ikke morsomt å øke størrelsen på vinduet eller bla horisontalt for å se et helt nettsted.
Mens du lager lettere webdesign, blir det enklere, det er noen måter å få det til å gå enda raskere. Takket være noen CSS og HTML, kan vi kodes det rett inn i våre sider. Andre elementer krever litt mer arbeid. Uansett har vi kommet opp med en liste som hjelper deg med å sette ditt responsive nettsted sammen med minimum oppstyr og maksimale resultater.
jQuery-plugins
isotope
Isotop er et jQuery-plugin som hevder å skape magiske oppsett som ellers ikke kan opprettes av CSS og HTML. Det har evnen til å omorganisere elementer inne i en beholder slik at de passer inn i den når den tilpasses. Du kan også bruke isotop til å filtrere og sortere elementer etter kategorier og slikt.
Breakpoints.js
Breakpoint ble laget med utviklere og designere i tankene. Det er et plugin som lar deg lage breakpoints for forskjellige nettleserstørrelser. Når nettleseren din er omformet til en av disse størrelsene, kan elementene passe inn i skjermen.
FitText.js
Dette er en av mine favoritt jQuery-plugins fordi det er for skrifter. Altfor ofte i lydhurt webdesign, tar folk ikke hensyn til at overskriftene skal være lydhør i stedet for å klatre inn i en bestemt plass. FitText lar deg gjøre nettopp det, men husk å bare bruke det til overskrifter!
Response.js
Hvis du liker ideen om Breakpoint.js, men vil ha mer tilpasning, er Response.js svaret. Det er veldig bra for de som kjenner jQuery bedre enn CSS og HTML, og trenger å skape responsive nettsteder. Du bruker breakpoints, men det er så mye mer tilpasning, for eksempel enhetsstørrelse, pikselrangeringer og muligheten til å laste forskjellige kilder for forskjellige størrelser.
TinyNav.js
TinyNav er en lett jQuery-plugin som lar deg endre menyelementer ved hjelp av lister for å gjøre det til rullegardinmenyer når nettleseren er endret. Du kan angi størrelser og hvilke menyer som endres. Det er ikke så bredt i funksjon, men det er veldig effektivt for det det gjør.
Populære rammer og systemer
Responsive Grid System
Dette systemet hevder at det ikke er en boilerplate eller rammeverk, men bare et system for å gjøre designene dine følsomme. Det synes å være en av de mest fleksible som det ikke begrenser deg til en viss størrelse eller til en viss gridsize. De bruker forskjellige CSS-klasser som kan flyte og lage egne kolonner.
Golden Grid System
GGS er også et system, og ikke et "rammeverk". De liker å referere til seg selv som et startsted eller retningslinje for de som wamt å bruke en viss mengde grids i deres webdesign. Du får 18 kolumner på skjermen, men 16 til bruk i ditt design. Du lager dine egne bredder og takrenner for å bruke og går hovedsakelig derfra.
1140 Grid System
For en stund brukte mange designere webdesign som var 960px bred. Da ble det for lite og de gikk opp. Nå utvikles mange design med en bredde på 1140 px. Dette 1140-grid-systemet lar deg lage 12 kolonner for bruk i et bredt bredde webdesign.
Twitter Bootstrap
Bootstrap er et av de mest populære rammene som er tilgjengelige. Det er en 12 grid ramme som har gjort seg brukbar kryss-nettleser (inkludert Internet Explorer 7) og kan brukes responsivt i håndholdte enheter. Den leveres med ulike stilkomponenter, typografi og JavaScript for å bruke og skape elegante, intuitive nettsteder.
SimpleGrid
SimpleGrid tar ideen om grids og forenkler den. Med de fleste gittersystemer og -rammer har du disse ukjente klassene og ukjente kolonner. Enkelt rutenett har klasser som angir hvilke kolonner som er første, mellom og siste. I tillegg kan du legge til forskjellige "slots" i kolonnene for å få det til å virke som om det er flere kolonner. Det er et veldig enkelt og rettferdig rammeverk.
Andre responsive verktøy
Responsive Web Design Sketch Sheets
I likhet med enhver designer eller utvikler skisserer du sannsynligvis designene dine før du faktisk går på å lage dem. Forhåpentligvis gjør du det. Hvis ikke, bør du kanskje begynne å bruke disse RWD-skissearkene. De kommer med forskjell enhet og desktop størrelser på dem slik at du kan planlegge alt ut.
Responsive Design Sketchbook
Hvis du liker ideen om skisse på papir, men vil ha alle dine doodler sammen, kan du vurdere å få den responsive designskissen. Den leveres med 50 sider, spiral bundet med forskjellige skjermstørrelser på hver side. Alle rister og matte er allerede gjort for deg, så dette er et flott verktøy for nybegynnere og eksperter i responsiv design.
Stil fliser
Dette er en fin liten ressurs for webdesignere om de leter etter noe for responsiv design eller ikke. Det er en PSD som lar deg få essensen av et nettsted ved å legge til overskrifter (typografi), logoer, farger og andre elementer. Grunnen til at dette fungerer for lydhør webdesign er fordi det ikke innebærer noen dimensjoner, bare en digital ide uten begrensninger.
Responsive Calculator
Det er massevis av matematikk involvert i å skape piksel perfekt responsive design. Det er nødvendig at matematikken din også er riktig, fordi du skal håndtere forskjellige prosenter, bredder og nettleserstørrelser. For å hjelpe deg, her er en kalkulator som gir deg riktig matte og CSS til å gå sammen med det.
Konklusjon
Det er avgjørende at vi legger merke til hva responsiv web gjør. Mange kunder vil ha sine nettsteder tilgjengelig for en rekke enheter, og det er bare mer kostnadseffektivt å lage responsive nettsteder. I tillegg bidrar de fleste av dine rammer og andre ressurser for responsiv design til å dyrke organiserte og høykvalitets standard nettsteder.
Hva er dine favoritt måter å starte responsive design på? Har vi savnet en ressurs du stoler på? Gi oss beskjed i kommentarene.