Responsive Web Layouts for mobile skjermer Intro, tips og eksempler

Denne artikkelen er en del av vår "Web Responsive Design-serien" - bestående av verktøy, ressurser og opplæringsprogrammer for å hjelpe deg med å lage nettsteder for brukere av alle plattformer. Klikk her å se flere artikler fra samme serie.

Designere har det tøffere nå enn før. Vi trenger ikke bare å designe for stasjonære enheter, men også mobile enheter som nettbrettet og smarttelefonene, og siden vi snakker om mange forskjellige skjermstørrelser og oppløsninger her, er det en stor oppgave å skulde. I lys av dette, Responsivt webdesign kan være den beste løsningen. Den tilbyr mer enn bare en enkel mobilmal; I stedet er hele nettstedet ditt utformet for å være fleksibelt nok til å passe inn i en eventuell skjermoppløsning.

Med et slikt fluiddesign-skjema er det åpenbare fordeler og ulemper. Tenk på eksemplene nedenfor for hvordan responsivt webdesign kan gjøre overgangen til mobilenheter jevnere.

Hvordan Responsive Design Works

Når jeg bruker ordet “mottakelig” I form av webdesign mener jeg at hele oppsettet reagerer ut fra brukerens skjermoppløsning. Tenk deg dette scenariet: du leser et nettsted på en nettbrett, og du bytter til en annen enhet av en eller annen grunn. Nettleservinduet er nå omformet. Et responsivt webdesignoppsett vil inneholde ordninger og et oppsett som grasiøst bryter ned og gjenoppliver seg selv. Fra et brukbarhetsperspektiv er dette en strålende teknikk.

Responsive design handler om å skape en homogen opplevelse uavhengig av nettleserens eller skjermens størrelse. Jeg har funnet det perfekte eksemplet fra 'En Liste Apart' for å illustrere mitt poeng, som også inneholder dynamiske bilder. Bredden er satt i CSS ved hjelp av prosenter for stort sett alle de interne beholderelementene. Større nettsteder svarer også godt på å fjerne dynamisk innhold som JavaScript når det ikke støttes.

Hvorfor design for mobil?

Det har blitt tydelig at flere brukere går mobile, og ikke bare for on-the-go surfing heller. Tablet PCer har begynt å forandre seg i kontekst når brukere er online i klasserommet. Designing for mobile er absolutt et krav i moderne webstandarder. Det eneste problemet er å velge utviklingsmetode og målrette publikum på riktig måte.

Når du begynner å kode for bestemte skjermoppløsninger, slutter du med for mange stilark for å håndtere. Medieforespørsler i CSS3 kan brukes til å bygge iPhone-spesifikke layouter for både portrett og liggende visning. Siden du kan forhåndsdefinere pixeldensiteten, er det enkelt å forny noen HTML-mal for mobil.

(Bildekilde: bradfrostweb)

Men når du kodes et oppsett for responsivt design, blir de mobile aspektene tatt vare på som standard. Både desktop og mobile brukere vil bli tilbudt en lignende opplevelse, og du trenger ikke å bekymre deg for eksterne CSS-egenskaper. Den eneste forskningen du trenger å utføre, planlegger minst mulig skjermen. Google Analytics trafikkdata kan være svært nyttig for dette.

Du vil ikke sannsynligvis få nettstedet ditt til å fungere 100% på hver enkelt enhet som kjører hver nettleser. Men du kan målrette et flertall basert på gjennomsnittsbredden på skjermen. Eldre iPhone-modeller bruker en 320 × 480 skjermoppløsning som ikke er så utrolig. Jeg ville skyte for en minimumsbredde på 240px, eller enda mindre hvis du kan passe den.

Fjerner standardzoomen

Hvis du har brukt tid på å surfe på Internett på en smarttelefon, vil du legge merke til hvordan nettsteder skaleres for å vise fullstendig på skjermen. Dette er for brukerens bekvemmelighet, siden de fleste nettsteder ikke har en mobil motpart, og dermed er hele oppsettet den sikreste innsatsen.

Men når du kommer inn i å bygge et lydhørt mobildesign, kan auto-zoom virkelig ødelegge layoutelementene dine. Spesielt kan bilder og navigasjonsinnhold virke små eller for store i layoutet. Det er en spesiell metatag du kan legge til i dokumentoverskriften som tilbakestiller dette i de fleste Android- og iPhone-enheter.

Dette er kjent som viewport metatag som setter opp noen egendefinerte variabler i innholdet. Apple har en dokumentasjonsside om noen andre metatags du bør undersøke, selv om disse er rettet spesielt mot nettsteder på iOS. De initial-skala verdien er viktig da dette standardinnstiller nettstedet ditt til en full 100% zoom.

Den siste verdien for bruker skalerbar vil fjerne denne zoomfunksjonaliteten helt, slik at brukeren ikke kan endre størrelsen på oppsettet. Dette vil låse designet i en størrelse basert på hele enhetens bredde. Vær oppmerksom på at selv om du deaktiverer zoomfunksjonen, vil et godt responsivt design fortsatt tilpasses når du overfører fra stående til landskap på en hvilken som helst enhet! Men det er fornuftig å låse en responsiv design og fjerne de generiske skaleringsalternativene.

Dynamisk bilde skalering

Bilder er en annen viktig side av praktisk talt alle nettsteder. Mobilbrukere ser kanskje ikke ut til å streame videoer, men bildene er en helt annen historie. Disse er også de største synderne når det gjelder layouter som bryter ut av boksemodellen.

img maksimal bredde: 100%;

Standardregelen for CSS er å bruke en egenskap med maksimal bredde til alle bilder. Siden de alltid blir satt til 100%, vil du aldri merke forvrengninger. Når brukeren omformaterer nettleservinduet mindre enn bildet ditt kan håndtere, justeres det automatisk til 100% bredde nedskalert. Problemet er at Internet Explorer ikke kan forstå denne egenskapen, så du må sette sammen et IE-spesifikt stilark ved hjelp av bredde: 100%;.

Fleksible bilder er også mulige hvis du bruker JavaScript eller jQuery plugins. Det er noen veldig gode utviklere der ute som har satt seg tid til å bygge utrolig responsivt bildeinnhold. Denne tråden er bare en av mange i Stack Overflow, som har en outlandish, men likevel praktisk tilnærming til å løse IE6 / 7-bugs.

Jeg vil personlig anbefale å stikke til naturlig CSS image resizing. Hvis nettstedet ditt kjører i en mobil nettleser med JavaScript aktivert, kan det mest sannsynlig støtte CSS også. Hvis du virkelig ønsker å grave dypere, sjekk ut denne 24 måten artikkelen Bilder for Adaptive Designs ...

Berør design

Webutviklere kan glemme at mobilbrukere ikke er på tastaturtelefoner som BlackBerrys lenger. Et flertall av smarttelefoner bruker i dag berøringsskjermgrensesnitt, noe som gjør et scenario forskjellig fra mus og tastaturoppsett.

Som sådan må du vurdere alternative løsninger i mobile elementer. Dropdown-menyer kan virke bedre når de vises som en enkelt meny på høyre side. De fleste brukerne kan trykke på koblinger på høyre side lettere enn venstre, men hver kolonne arbeider for å lette plass. Ved hjelp av marginindenter er det enkelt å identifisere lenkehierarkiet uten å kreve noen jQuery-kode.

Det er også god praksis å øke størrelsen på disse navigasjonskoblingene. Mobilbrukere har ikke den luksusen på en stor skjerm som leveres på stasjonære datamaskiner eller til og med bærbare datamaskiner. Du må holde teksten stor, oppe, trykkbar og lesbar for enhver pris. Du kan til og med ønske å endre størrelsen hvis brukeren bytter mellom stående og liggende visning - en ganske vanlig gjentagelse når du surfer på mobilnettverket.

Tilpassede CSS Layouts

Generelt er det best å tilpasse oppsettet og tillate naturlig nedbryting av innholdet ditt. Hvis du har et sidebar og innholdsområde, bør du sette dem i bredder av prosentandeler eller ems, noe som vil endre størrelsen med nettleservinduet. Hvis du bruker en en minstebredde dette vil til slutt bryte av en del av oppsettet; så nå viser sidebarinnholdet ditt over sidens innhold.

(Bildekilde: Pepperson)

Når du vurderer hvordan dette påvirker den generelle utformingen, er det mye enklere å utvikle eksterne stilark. Men du er sannsynlig å løpe inn i skjermoppløsninger som bare er for små for at layoutet skal gjengi. Dette er det perfekte scenariet for å legge til egendefinerte CSS-egenskaper for å fjerne deler av siden, eller omformatere innholdet helt.

Slå på Ekstra innhold på / av

Eksempler på store innholdsblokker inkluderer webskjemaer, dynamiske menyer, bildeskytere og andre lignende ideer. I stedet for å helt fjerne disse elementene ettersom layoutet blir mindre hvorfor ikke bare skjule dem i a “minimert” innhold div? Du kan bruke enten CSS eller JavaScript til å utføre endringene, men til slutt vil du sannsynligvis trenge litt JS-kode for å opprette en veksleknapp.

Dette alternativet er perfekt for å holde hjemmesiden din dynamisk og full av rike webmedier. I stedet for å helt fjerne rullegardinnavigasjonen eller omarrangere sidestrukturen, kan du skjule den i en innholdsdel. Hvis brukeren ønsker å vise koblingene, trykker de på en veksleknapp for å åpne / lukke menyen.

Denne formateringen er enkel, intuitiv og lett å arbeide med på berøringsskjerm enheter. Inne i div kan du plassere hver av rullegardinmenyene side om side i et kolonnformat. Da vinduet endres enda mindre, vil de naturligvis falle under hverandre og øke sidens høyde. Men muligheten til å kollapse hele menyen er lett oppnåelig og bare en enkelt trykk unna. Denne toggle div er også perfekt for bildebrytere i samarbeid med dynamisk bildeformatering.

Bruke medieforespørsler

Hvis en mobil skjerm ville ødelegge 2 eller 3-kolonne-oppsettet ditt, vil du ende opp med hvert av innholdsområdene stablet over hverandre. Hele nettstedet ser ut til å bløde over og kan komme veldig forvirrende ut uten fremtredende blokker. En bedre ide er å legge til en nederste kant på hver kolonne, bare for mobile enheter, ved hjelp av et eksternt stilark som mobile.css.

Med disse nye stilene er innholdet ditt oppdelt i delbare deler. Medieattributtet ovenfor er spesielt utviklet for å målrette mot eldre iPhone-enheter i liggende visning. Men det vil også gjelde for enheter med skjermer mindre enn 480 piksler. Bruk dette til din fordel, slik at du kan bestemme på hvilket tidspunkt layoutet “slår opp”.

Det er noen flere alternativer du kan bruke til å oppdage enhetsretning. Denne fantastiske guiden på CSS-medier kan gi deg noen ideer. I tillegg tilbyr det nye mobilprosjektet 320 og opp en boilerplate til mobil CSS @media stiler. Disse kan inkluderes direkte i samme mobile.css-fil og bruke regler for mange forskjellige enheter.

 / * Smartphones (portrett og landskap) ----------- * / @media bare skjerm og (min-enhet-bredde: 320px) og (maksimal enhet bredde: 480px) / * Stiler * / / * Smartphones (landskap) ----------- * / @media bare skjerm og (min bredde: 321px) / * Stiler * / / * Smartphones (portrett) ---- ------- * / @media bare skjerm og (maks bredde: 320px) / * Stiler * / / * iPads (portrett og landskap) ----------- * / @ medie-bare skjerm og (min-enhet-bredde: 768px) og (maksimal bredde på enheten: 1024px) / * Stiler * /

(Kilde: Hardboiled CSS3 Media Queries)

Nyttige verktøy

Skeleton - Beautiful Boilerplate for Responsive Mobile Design
Går fra adaptiv til full responsiv

Showcase: Beautiful Responsive Designs

Jeg håper disse tipsene og designteknikkene vil oppmuntre deg til å bevege seg mot å bygge spennende responsive layouter, ikke bare for mobile skjermer, men for alle vanlige enheter med nettlesing. For å holde kreative juicer flyter har jeg satt sammen et lite showcase av lydige mobile webdesign. Pass på å sjekke ut noen av de mer unike funksjonene og dele tankene dine om design eller emne i diskusjonsområdet.

henger opp månen