Share
Når vi beveger oss inn i 2015, er det den perfekte tiden til å ta opp "Statens Responsive Web Design".
Vi kommer til å revidere hva vi vet om RWD, hva som har blitt igjen av veikanten de siste tider, de nye triksene vi kan innlemme i vårt spill i dag, og hva som kommer opp i horisonten.
Før vi kommer inn i det, la oss begynne med å definere hva vi egentlig mener når vi sier "Responsive Web Design".
Når Ethan Marcotte opprinnelig uttrådte begrepet for fem år siden i sin artikkel om A List Apart, citerte han fluidnett, fleksible bilder og medieforespørsler som tre "tekniske ingredienser" av RWD.
Den utødelige ledsagende illustrasjonen av Kevin CornellMen han kvalifiserte umiddelbart disse spesifikasjonene ved å si:
"... men det krever også en annen måte å tenke på."
Siden 2010-artikkelen har vi sett kontinuerlig utvikling i teknologien folk bruker til å få tilgang til internett, samt fremveksten av flere nye tekniske ingredienser som kan legges inn i utviklingsverktøyet vårt.
Vi bruker fortsatt flytnett, fleksible bilder og medieforespørsler, men disse tre tingene alene utgjør ikke lenger et fullstendig bilde av hva Responsive Web Design involverer.
Teknologi og webdesign teknikker er i evig tilstand av flux, så definisjonen av RWD bør ideelt sett gi oss en annen måte å tenke på Det vil være like aktuelt etter ytterligere fem års endring som det er i dag.
Etter min mening kan denne tenkemåten oppsummeres som følger.
"Responsive Web Design er en tilnærming til å skape nettsteder som kan svare på alle kjente nettlesere, med innholdsleveranse og grensesnittinteraksjon optimalisert i størst mulig grad for alle besøkende. "
Ved å fokusere på måten å tenke på Responsive Web Design i stedet for spesifikke tekniske ingredienser, forblir vi fri for å streve etter de beste nye måtene å skape responsive nettsteder i det stadig skiftende landskapet i vår bransje.
Selv om det er sikkert mange ting som har endret seg i RWD, er det også flere ting som har bodd i det vesentlige det samme, og at mange utviklere vil være enige om å være god praksis.
Her er noen av de mest aksepterte aspektene av dagens RWD som vi kjenner det.
Vi vet alle at vi trenger å ta imot en liste over mulige skjermoppløsninger så lenge armen din, flere pikseldensiteter og ulike visningsportstørrelser.
Vi må ta imot flere inngangsmetoder, f.eks. si farvel til musen hover avhengighet og gjøre UI elementer berøre vennlig.
Vi må bruke Media Queries for å distribuere tilpasninger til våre layouter når og når de trengs.
Vi vet at bruddpunkter skal plasseres ikke på forhåndsbestemte bredder, men i det tilfelle at designet "bryter" og garanterer justering.
Våre bilder må være flytende, slik at de ikke er for store eller for små i forskjellige skjermstørrelser.
Andre medier, for eksempel video- og lydspillere, må også oppføre seg på samme flytende måte.
Vi må inkludere et visnings-metatag (og ser frem til, CSS-ekvivalenten) slik at våre oppføringer oppfører seg hvordan vi forventer at de skal:
Det er noen filosofier og teknologier som tidligere har blitt innarbeidet i lydhør webdesign, eller i det minste ikke utelukket, men blir nå gradvis presset ut av bildet ved forbedrede alternativer.
Vurder følgende samling av nettleserinnretninger:
Husk at denne listen består av ekte verden, dagens brukstilfeller.
La oss si at nettstedet mitt har et sett med mindre størrelse, berøringsvennlige, mobilspesifikke funksjoner og større, mus-avhengige, skrivebordspesifikke designfunksjoner. Ved hvilken bredde skal jeg stille medieforespørsler for å distribuere mine "mobile" og "desktop" -funksjoner slik at alle brukere av disse enhetene har en førsteklasses opplevelse?
Vår liste dekker en rekke forskjellige eksempler, men det er hundrevis hvis ikke tusenvis av ekstra brukstilfeller der ute som kaster flere nøkkelord inn i arbeidene.
Virkeligheten er at i dag er det ikke lenger noe klart skille mellom mobile og stasjonære enheter, så den beste veien fremover er å samtidig imøtekomme alle kjente metoder for nettlesing.
Hvis nettstedene dine er bygget fra grunnen til å reagere vakkert på alle kjente bruksområder, ikke bare de tradisjonelt definerte som mobile og stasjonære, har du opprettet den mest vidtrekkende form for respons som er mulig.
Først ga vi opp med å prøve å lage faste pikselbaserte oppsett helt i Photoshop fordi de ikke var flytende eller fleksible nok til å håndtere det fremvoksende spektret av visningsbehov.
Nå begynner vi også å gi opp å lage faste pikseloppsett i koden vår, for ganske mye nøyaktig samme grunn. Ved å bygge opp våre layouter ved hjelp av en kombinasjon av rem, em og % verdier, våre sider forblir alltid fullt skalerbare og fleksible.
Med fleksibel enhetstilnærming kan designene skaleres opp og ned jevnt ved å endre en enkelt basisverdi. Brukerens font- og zoominnstillinger for brukerne kan respekteres og støttes fullt ut. Flere visningsstørrelsesproblemer kan umiddelbart løses. Viktigst, innholdslesbarhet og tilgjengelighet kan alltid opprettholdes.
Front-end-rammeverkene "Big 2" er allerede avstigende The Good Ship PX og ombordstigning av sine fly til Fleksible Unit Land.
Bootstrap 4 er i verkene og vil være helt rem / em / % basert, etterlater seg px baserte oppsett av Bootstrap 3. Og Foundation 5 har allerede fullført overgangen til å jobbe med fleksible enheter.
Dagene til den gode gamle px-enheten vi alle har fått vite så godt i løpet av årene, kommer til å lukkes.
Det kan vel snart finne seg å bosette seg i en komfortabel stol i pensjonatet, ved siden av sine gamle venner fra herlighetens dager, IE6-støtte og animerte Flash-overskrifter.
Snakker om Flash ...
Sikker på at vi kanskje har sett animerte Flash-overskrifter forsvunnet for en tid siden, men vi ser fortsatt Flash-avhengig video, lysbildefremvisninger og spill som regel regelmessig. Jeg snakker ikke bare om små hobbyiststeder heller - jeg ser store og svært trafikerte nettsteder som fremdeles viser denne meldingen hvis du ikke bruker Flash og prøver å se på deres videomateriale:
Det er svært vanlig at mobile enheter ikke støtter Flash, så det er ikke den sikreste tilnærmingen å stole på at det å levere innhold.
Faktisk, av grunner primært av sikkerhet og stabilitet, begynner nettlesere fra å støtte plugins som Flash, Silverlight og Java i sin helhet, til fordel for alternativ teknologi som fungerer rent via innfødte nettlesere.
Tiden er kommet for å begynne å la pluginbaserte medier glide, og overgang til en ny epoke med mediavisningsteknikker.
Noen av disse teknologiene er nesten helt nye, og noen har eksistert på en stund, men forbedrer seg kontinuerlig, men alle har en ting til felles: de er med i RWD-verdenen som går utover det opprinnelige fokuset på fleksible nett, flytende bilder og media spørringer.
Bare fordi Flash og dets kolleger er på nedslippet, betyr det ikke at vi fortsatt ikke kan ha fine ting. Video, lyd, animasjon, og til og med 3D og fulle spill er fortsatt veldig i mixen takket være HTML5 og CSS3 og JavaScript-baserte godbiter det bringer inn i blandingen.
Der vi en gang hadde nettleserplugger, har vi nå innebygde HTML5-video- og lydspillere, CSS3-animasjoner, verktøy som Google Web Designer, Canvas, WebGL og en stadig voksende liste over interessante nye godbiter.
Det nye HTML5-elementet og elementer.
Det tillater oss å utføre kontroller på størrelsen på visningsporten og pikseldensiteten til enheten, og last deretter inn den mest egnede versjonen av et bilde avhengig av resultatene.
Den er ennå ikke fullstendig støttet innfødt i nettlesere, men det er en veldig solid polypfyll som heter Picturefill (av Scott Jehl, mannen bak Responsible Responsive Design) som tillater
Les mer om hvordan alt fungerer i Quick Tip: Slik bruker du HTML5 "bilde" for Responsive Images.
Hvorfor har ikoner i fast størrelse når du kan ha fullstendig resizing frihet alle med en endring til en enkelt skriftstørrelse innstilling i CSS?
Gjennom fantastiske web skrifttypebiblioteker som Font Awesome, Entypo, Typicons og mer, kan du få alle slags bilder på nettstedene dine, fra raketter til paperclips til sosiale medierlogoer. Men fordi de leveres som fonter og ikke bilder, kan du tilbakekalle og endre størrelsen på dem alle via CSS.
Dette betyr at du kan sikre at ikonene dine svarer godt på størrelsen på visningsporten de befinner seg i, alltid hyggelige og enkle å se og samhandle med etter behov.
Flexbox er satt til å løse mange av de største hodepine webdesignere har prøvd å quell i årevis.
Det er bare ett problem: Brukshastighetene til nettlesere som ikke støtter det, er fortsatt for betydelige i mange bruksområder for Flexbox for fullt ut å gå på jobb. Hvis du jobber med et prosjekt som regner ut med støtte til IE8, IE9 og Opera Mini, har du det.
CanIUse.com peker imidlertid på den globale bruksprosenten av de tre nettleserne på henholdsvis 3,18%, 2,13% og 2,82%. Det er heller ikke noe pålitelig fallback for Flexbox i minuttet. Det betyr at på et nettsted med middels til tung trafikk ser du på hundrevis til tusenvis av brukere som kjører inn i et ødelagt nettsted hver måned.
Vi ønsker alle at Flexbox skal bli standard i layouthåndtering, slik at vi kan slutte å drømme opp måter å utføre det som burde være relativt enkle oppsettoppgaver, og så snart de tre resterende røde merkene på dette CanIUse-diagrammet falmer bort, er det satt til å skje.
Vi snakket om webkomponenter for en liten stund siden, og de strekker seg fortsatt mot oss som fremtidens vei, og drar nærmere til å bryte inn i det vanlige dag for dag.
Tidligere nevnte vi video, lyd og bilde elementer og hvor nyttige de er for responsivt webdesign. Når webkomponenter kommer i kraft, vil hver enkelt av oss effektivt kunne opprette egendefinerte elementer akkurat som disse, for ethvert formål vi må fylle. På toppen av det vil webkomponenter bli delbare, noe som betyr at det er en nesten ubegrenset mengde nye responsive elementer som kan bli brukbare i våre design.
Denne i hovedsak demokratiserer HTML, som er ganske stor.
Hvis det er et nytt element verden kan virkelig gjøre stor nytte av, trenger vi ikke å vente på implementering av nettleseren. Vi trenger bare se en åpen kildekodeutvikler sette noe sammen og ta den raske beslutningen om å dele arbeidet sitt.
For eksempel nevnte vi tidligere at RWD krever fleksibel medieplassering, og det inkluderer å tillate iframe-innebygd media som YouTube-videoer til å skalere og vedlikeholde deres bildeforhold.
Utvikler Joselito Junior har opprettet og åpnet hentet en webkomponent som gjør det bare ved hjelp av denne enkle HTML:
Les mer om denne fascinerende nye teknologien i hvordan du lager dine egne HTML-elementer med webkomponenter.
Fordi teknologien alltid endrer seg i minuttet, er det ekstremt viktig for oss å forbli fokusert på de underliggende målene for responsivt webdesign, og ikke bli for knyttet til noen måte å gjøre ting på. På denne måten sikrer vi at vi alltid er åpne for å finne nye måter å skape bedre opplevelser for folk som bruker våre nettsteder.
For at det skal skje, trenger vi alltid å holde ørene til jorden, og lytte etter de nyeste utviklingene i både nettleserinnretninger og webdesignteknikker.
Hvis du ønsker å børste opp dine egne responsive webdesign teknikker, kan du gjerne sjekke ut kurset Responsive Web Design Revisited. På bare litt over to timer vil jeg tråkke deg gjennom alt du trenger å vite for å skape et komplett responsivt nettsted med opptil minuttteknikker. De to første videoene er gratis, så fortsett og få en forhåndsvisning av nettstedet du skal skape, og alt du lærer.
Ha en flott 2015, og her er det stadig evolusjonerende, responsivt webdesign!
Accentsconagua