Responsive Web Layouts for Mobile Skærme Intro, Tips og Eksempler

Denne artikel er en del af vores "Web Responsive Design-serien" - bestående af værktøjer, ressourcer og vejledninger til at hjælpe dig med at oprette websites til brugere af alle platforme. Klik her at se flere artikler fra samme serie.

Designere har det hårdere nu end før. Vi skal ikke kun designe for stationære enheder, men også mobile enheder som tablet og smartphones, og da vi taler om mange forskellige skærmstørrelser og opløsninger her, er det en enorm opgave at skulde. I lyset af dette, lydhurtigt webdesign kunne være den bedste løsning. Det tilbyder mere end blot en simpel mobil skabelon; I stedet er hele dit website layout designet til at være fleksibelt nok til at passe ind i enhver mulig skærmopløsning.

Med en sådan væskedesign er der åbenlyse fordele og ulemper. Overvej mine eksempler nedenfor for, hvordan lydhurtigt webdesign kan gøre overgangen til mobilenheder en glattere.

Hvordan Responsive Design Works

Når jeg bruger ordet “lydhør” Med hensyn til webdesign mener jeg, at hele layoutet reagerer ud fra brugerens skærmopløsning. Forestil dig dette scenario: Du læser et websted på en tablet, så skifter du til en anden enhed af en eller anden grund. Browser vinduet er nu re-sized. Et lydhurt webdesignlayout vil indeholde ordninger og et layout, der graciøst nedbryder og genopfinder sig. Fra et brugbarhedsperspektiv er dette en strålende teknik.

Responsive design handler om at skabe en homogen oplevelse uanset størrelsen på browseren eller enheden. Jeg har fundet det perfekte eksempel fra 'A List Apart' for at illustrere mit punkt, som også indeholder dynamiske billeder. Bredden er angivet i CSS ved hjælp af procentdele for stort set alle de interne beholderelementer. Større websites reagerer også godt på at fjerne dynamisk indhold som JavaScript, når det ikke understøttes.

Hvorfor Design til mobil?

Det er blevet tydeligt, at flere brugere går mobile, og ikke kun for on-the-go surfing enten. Tablet pc'er er begyndt at ændre sig i kontekst, når brugerne er online i klasseværelset. Designing for mobile er bestemt et krav i moderne webstandarder. Det eneste problem er at vælge din udviklingsmetode og målrette dit publikum hensigtsmæssigt.

Når du begynder at kode for bestemte skærmopløsninger, slutter du med for mange stylesheets at håndtere. Medieforespørgsler i CSS3 kan bruges til at opbygge iPhone-specifikke layouter til både portræt og landskabsvisning. Da du kan forudbestemme pixeldensiteten, er det nemt at opgradere enhver HTML-skabelon til mobil.

(Billedkilde: bradfrostweb)

Men når du kodes et layout til lydhørt design, bliver de mobile aspekter som standard taget i brug. Både desktop og mobile brugere vil blive tilbudt en lignende oplevelse, og du behøver ikke bekymre dig om eksterne CSS-egenskaber. Den eneste forskning, du skal udføre, er at planlægge den mindste mulige skærm. Google Analytics-trafikdata kan være meget nyttige til dette.

Du vil sandsynligvis ikke få dit websted til at fungere 100% på hver enkelt enhed, der kører hver browser. Men du kan målrette et flertal baseret på gennemsnitsbredden på skærmen. Ældre iPhone-modeller bruger en 320 × 480 skærmopløsning, som ikke er så utroligt. Jeg ville skyde for en minimumsbredde på 240px, eller endnu mindre, hvis du kan passe den.

Fjernelse af standardzoom

Hvis du har brugt nogen tid på at surfe på internettet på en smartphone, vil du bemærke, hvordan websteder skaleres for at vise fuldt ud på skærmen. Dette er til brugerens bekvemmelighed, da de fleste hjemmesider ikke har en mobil modstykke, så det fulde layout er det sikreste væddemål.

Men når du kommer i at opbygge et lydhurt mobil design, kan auto-zoom virkelig ødelægge dine layoutelementer. Specielt kan billeder og navigationsindhold forekomme små eller for store i dit layout. Der er et specielt metatag, som du kan føje til dokumentoverskriften, som nulstiller dette i de fleste Android- og iPhone-enheder.

Dette er kendt som viewport metatag som opretter nogle brugerdefinerede variabler inden for indholdet. Apple har en dokumentationsside vedrørende et par andre metatags, du bør undersøge, selvom disse er rettet specifikt mod websteder på iOS. Det indledende målestok Værdien er vigtig, da dette standardindstiller dit websted til en fuld 100% zoom.

Den sidste værdi for skalléres vil fjerne denne zoom funktionalitet helt, så brugeren ikke kan ændre størrelsen på layoutet. Dette vil låse designet i en størrelse baseret på den fulde enhedsbredde. Bemærk, at selvom du deaktiverer zoomfunktionaliteten, vil et godt lydhørigt design stadig tilpasses, når du overfører fra portræt til landskab på enhver enhed! Men det giver mening at låse et lydhørt design og fjerne de generiske skaleringsmuligheder.

Dynamisk billedskalering

Billeder er en anden vigtig facet på stort set alle hjemmesider. Mobilbrugere søger muligvis ikke at streame videoer, men billeder er en helt anden historie. Disse er også de største synder, når det kommer til layouter, der bryder ud af boxmodellen.

img maksimal bredde: 100%;

Standardregel for CSS er at anvende en maksimal breddeegenskab til alle billeder. Da de altid bliver sat til 100%, vil du aldrig mærke forvrængninger. Når brugeren omformaterer deres browservindue mindre end dit billede kan håndtere, justeres det automatisk til 100% bredde nedskaleret. Problemet er, at Internet Explorer ikke kan forstå denne egenskab, så du skal sammensætte et IE-specifikt stylesheet ved hjælp af bredde: 100%;.

Fleksible billeder er også mulige, hvis du bruger JavaScript eller jQuery plugins. Der er nogle rigtig kloge udviklere derude, der har lagt tid til at opbygge utrolig følsomt billedindhold. Denne tråd er kun en af mange i Stack Overflow, som indeholder en outlandish endnu praktisk tilgang til løsning af IE6 / 7 bugs.

Jeg vil personligt anbefale at klæbe til naturlig CSS-billedformatering. Hvis din hjemmeside kører i en mobilbrowser med JavaScript aktiveret, kan det højst sandsynligt også understøtte CSS. Hvis du virkelig ønsker at grave dybere, så tjek disse 24 måder artiklen Billeder til Adaptive Designs ...

Touching Designs

Webudviklere kan glemme, at mobilbrugere ikke længere har tastaturer som BlackBerrys. Et flertal af smartphones i dag bruger touchscreen-grænseflader, hvilket gør et scenario anderledes end mus-og-tastaturopsætninger.

Som sådan skal du overveje alternative løsninger i mobile elementer. Dropdown-menuer kan virke bedre, når de vises som en enkelt menu på højre side. De fleste brugere kan trykke på links på højre side lettere end venstre, men hver kolonne arbejder for at lette plads. Ved hjælp af marginindrykning er det nemt at identificere linkhierarkiet uden at kræve nogen jQuery-kode.

Det er også god praksis at øge størrelsen af disse navigationsforbindelser. Mobilbrugere har ikke luksusen af en stor skærm, der ydes på desktops eller endda bærbare computere. Du skal holde teksten stor, upfront, tap-able og læsbar for enhver pris. Du vil måske endda ændre størrelsen, hvis brugeren skifter mellem portræt og landskabsvisning - en ret almindelig gentagelse, når du surfer på mobilwebben.

Brugerdefinerede CSS Layouts

Generelt er det bedst at tilpasse dit layout og tillade naturlig nedbrydning af dit indhold. Hvis du har et sidebjælke og indholdsområde, skal du angive dem i bredder af procentdele eller ems, alt hvad der vil ændre størrelsen med browservinduet. Hvis du anvender en min-bredde dette vil i sidste ende afbryde en del af layoutet så nu viser dit sidebjælke indhold over sidens indhold.

(Billedkilde: Pepperson)

Når du overvejer, hvordan dette påvirker det overordnede design, er det meget nemmere at udvikle eksterne stilark. Men du vil sandsynligvis løbe ind i skærmopløsninger, som er lige for små til, at dit layout skal gengives. Dette er det perfekte scenario for at tilføje brugerdefinerede CSS-egenskaber for at fjerne dele af siden eller omformatere indholdet helt.

Skift ekstra indhold til / fra

Eksempler på store indholdsblokke omfatter webformularer, dynamiske menuer, billedskydere og andre lignende ideer. I stedet for helt at fjerne disse elementer som layout bliver mindre hvorfor ikke bare skjule dem i en “minimeret” indhold div? Du kan bruge enten CSS eller JavaScript til at udføre redigeringerne, men i sidste ende vil du sandsynligvis bruge nogle JS-kode til at oprette en skiftknap.

Dette alternativ er perfekt til at holde din hjemmeside dynamisk og fuld af rige webmedier. I stedet for helt at fjerne din drop-down navigation eller omlægge sidestrukturen kan du gemme den inden for en indholdsdel. Hvis brugeren ønsker at vise dine links, trykker de på en skiftknap for at åbne / lukke menuen.

Denne formatering er enkel, intuitiv og nem at arbejde med på touchscreen-enheder. Indenfor div'en kan du placere hver af dropdown-menuerne side om side i et kolonneformat. Da vinduet ændrer sig endnu mindre, falder de naturligvis under hinanden og øger sidens højde. Men muligheden for at kollapse hele menuen er let at nå og kun et enkelt tryk væk. Denne toggle div er også perfekt til billedskydere i samarbejde med dynamisk fotoændring.

Brug af medieforespørgsler

Hvis en mobil skærm ville bryde dit 2 eller 3-kolonne layout vil du ende med hvert af de indholdsområder stablet over hinanden. Hele webstedet ser ud til at bløde og kan komme meget forvirrende ud uden fornemme blokarealer. En bedre ide er at tilføje en nederste kant på hver kolonne, kun for mobile enheder, ved hjælp af et eksternt stilark som mobile.css.

Med disse nye stilarter er dit indhold brudt op i delelige sektioner. Medieattributten ovenfor er specielt designet til at målrette ældre iPhone-enheder i landskabsvisning. Men det gælder også enheder med skærme mindre end 480 pixels. Brug dette til din fordel, så du kan bestemme på hvilket tidspunkt layoutet “bryder op”.

Der er et par ekstra muligheder, du kan bruge til at registrere enhedens orientering. Denne fantastiske guide til CSS medier kan give dig et par ideer. Derudover tilbyder det nye mobile projekt 320 og op en kedelplade til mobil CSS @medier stilarter. Disse kan inkluderes direkte i samme mobile.css-fil og anvende regler for mange forskellige enheder.

 / * Smartphones (portræt og landskab) ----------- * / @media kun skærm og (min enhed bredde: 320px) og (max enhed bredde: 480px) / * Styles * / / * Smartphones (landskab) ----------- * / @media kun skærm og (min bredde: 321px) / * Styles * / / * Smartphones (portræt) ---- ------- * / @media only screen og (maxbredde: 320px) / * Styles * / / * iPads (portræt og landskab) ----------- * / @ medie-kun skærm og (min-enhed-bredde: 768px) og (maks. enhedsbredde: 1024px) / * Styles * /

(Kilde: Hardboiled CSS3 Media Queries)

Nyttige værktøjer

Skelet - Beautiful Boilerplate til Responsive Mobile Design
Går fra adaptiv til fuldt responsiv

Showcase: Smukke Responsive Designs

Jeg håber, at disse tip og design teknikker vil tilskynde dig til at bevæge sig hen imod at opbygge spændende lydhørige layouter, ikke bare til mobile skærme, men til enhver almindelig enhed med internet browsing. For at holde de kreative juice strømmer har jeg samlet et lille udstillingsvindue af lydhørige mobile webdesign. Sørg for at tjekke nogle af de mere unikke funktioner og dele dine tanker om designet eller emnet i diskussionsområdet.

hænger op på månen