Html adaptivt layout. Adaptivt layout

Hej alle sammen!

Da princippet om adaptivt layout dukkede op, viste det sig at være et mareridt for mig, som jeg stadig ikke kan komme mig fra, det er sådan en smerte - trods alt, for hver opløsning skal du praktisk talt omarrangere layoutet, skrive ny kode, du ender med en masse kode, der er sværere at vedligeholde. Lad os forstå denne smerte som "kodeentropi"

For nylig fik jeg muligheden for at lave et layout til en mobilapplikation, og jeg besluttede mig for endelig at prøve at overvinde denne smerte, gøre den smuk og kortfattet - brug rem. Dette virkede som den enkleste løsning for mig, 100% af mobile browsere understøtter denne enhed. Pointen er, at vi skriver flere linjer med medieforespørgsler til html-tagget, der kun angiver de grundlæggende skriftstørrelser i pixels, i forhold til hvordan vores layout skal se ud i forskellige opløsninger, og resten af ​​layoutet uden medieforespørgsler er lagt ud som sædvanligt, kun vi bruger pixels i stedet for rem. Denne teknik er let skalerbar og justerer layoutet afhængigt af grundskriftstørrelsen.
Kodeminimeringen og letheden ved adaptivt layout på denne måde er simpelthen kolossal!

Der var kun en ulempe ved denne metode: det var nødvendigt konstant at genberegne pixels i psd-layoutet til rem, men jeg løste hurtigt dette problem - jeg skrev en speciel funktion og lagde den ud som før i pixels, selve præprocessoren oversat til rem.

Men! Den vigtigste joke er, at jeg brugte denne metode til at designe en adaptiv mobilapplikation, hvor designet var det samme.

Da jeg vendte tilbage til det adaptive for almindelige websteder- smerten vendte tilbage til mig endnu stærkere end før, fordi vi som regel har fra 3 til 6 forskellige designs:
1) Stor desktop 1600-1920 pixels
2) Lille desktop/laptop ~1100-1400 pixels
3) Gammel Monica/tablet - 768-1024 pixels
4) Under-tablet/overdimensioneret smartphone ~600 pixels
5) Smartphone 300-480
6) Gammel smartphone 250 pixels.

Selvfølgelig overdrev jeg, men mindst tre layouts skal laves med sikkerhed.

Så her er spørgsmål nr. 1 og det vigtigste: hvordan minimerer man adaptivt layout og gør koden smuk? Sådan reduceres den såkaldte entropi af koden? Er der nogen cool tilgang/teknik?

Jeg kiggede på forskellige sider af seje webstudier for at finde svaret der og så, at alle lagde ud tilfældigt, det vil sige generelt uden at genere.
Det eneste jeg så er, at nogle mennesker af en eller anden grund bruger em og procenter til skrifttyper i stedet for de sædvanlige pixels. Det ser ud til at skalere tekst, selvom det ikke er klart, hvordan dette reducerer koden til tilpasning, efter min mening komplicerer det kun alt - du skal udføre beregninger afhængigt af skriftstørrelsen på den overordnede blok, og selv præprocessorer vil sandsynligvis ikke hjælp... Jeg ved ikke hvorfor du skal bekymre dig om at indstille skriftstørrelser i em-enheder, problemerne med rem gik stadig ingen steder... Måske er jeg en dårlig layoutdesigner... Forresten, den mest stædige af disse websteder brugte dem til margin og andre egenskaber i boksstørrelse...
Spørgsmål #2:
Hvad er meningen med at bruge dem?
Og nu spørgsmål nummer 3:
Er der virkelig ikke en enkelt metode, er alt virkelig så dårligt i layoutet, at alle kan gøre, hvad de vil? Eller så jeg mislykkede eksempler (selvom jeg ledte blandt toptemaerne i themeforest og webstederne for de bedste webstudier)?

Forord

I øjeblikket vokser andelen af ​​mobiltrafik hurtigt. Hver dag er der flere og flere mennesker, der bruger enheder med internetadgang. Telefonen er altid lige ved hånden, hvor som helst folk kan slå de nødvendige oplysninger op, læse nyheder osv. En almindelig hjemmeside kan ses ved hjælp af en mobilenhed. Der opstår dog nogle nuancer ved visning - for at læse individuelle tekstblokke på en relativt lille skærm skal du skalere siden. Som følge heraf er læsbarheden og bekvemmeligheden tabt, og siden skal hele tiden rulles, strækkes og zoomes ind. Mange hjemmesidekontroller er svære at bruge, fordi siderne ikke er designet til at blive betjent ved at trykke på skærmen. For at løse disse problemer begyndte de at udvikle websteder, der bekvemt kan vise oplysninger på enhver enhed.

Om artiklen

Denne artikel er beregnet til udviklere, der har erfaring med hjemmesidelayout og som kender det HTML Og CSS der forstår formålet med CSS-vælgere mv.

Denne artikel vil diskutere de typer layout, der giver dig mulighed for at vise websteder korrekt i enhver opløsning, og de teknikker, hvormed dette opnås. Lad os se på konceptet CSS-ramme og lave en komparativ analyse af de mest populære.

Typer af layouts

Lad os se på hovedtyperne af layout, deres forskelle og de grundlæggende principper, der bruges i deres implementering.

Fast layout

Fixed Layout er en tilgang til at skabe hjemmesider, der har en given bredde. Bredden af ​​komponenterne på siden ændres ikke. På skærme med lav opløsning vises en vandret rullepanel. Denne type layout er ikke egnet til bekvem visning af information på mobile enheder.
Eksemplet nedenfor viser streng indstilling af bredden for et tag legeme:

Gummi layout

Elastisk layout indebærer muligheden for webstedskomponenter til at ændre deres størrelser afhængigt af størrelsen på browservinduet, der strækker sig fra og til de angivne minimum- og maksimumstørrelser. Dette opnås ved at bruge relative værdier, max-bredde / min-bredde(max/min bredde), max-højde / min-højde(maksimum/minimum højde).
Eksempler på brug af gummilayoutteknikker:

Adaptivt layout

Adaptivt layout ( Adaptivt layout ) gør det muligt for hovedbeholderen og ethvert andet element på webstedet at tilpasse sig skærmopløsningen, hvilket gør det muligt at ændre skriftstørrelse, arrangement af objekter, farve osv. Dette sker dynamisk, for eksempel ved hjælp af medieforespørgsler ( @medier), så du automatisk kan bestemme skærmopløsningen, enhedstypen og erstatte de angivne værdier i automatisk tilstand. Eksemplet nedenfor angiver bredden div lige 960px 1200px Og 320px for alle enheder, hvis bredde er mindre 480 px.

Responsive layout

Responsive Layout er en kombination af flydende og adaptivt layout. Denne tilgang bruger både medieforespørgsler og procentspecifikation af komponentbredder. Ved at bruge denne type layout kan vi trygt sige, at webstedet vil tilpasse sig enhver enhed.
Bredden er angivet nedenfor div lig med 50 % af størrelsen af ​​den overordnede komponent for alle enheder, hvis bredde er mindre end 1200px, og 100 % for alle enheder, hvis bredde er mindre end 480px.

Grundlæggende teknikker til implementering af websteder i enhver opløsning Relative værdier

Brug af relative værdier giver dig mulighed for at vise information og komponenter på en side uden at miste læsbarhed eller synlighed.

Relative værdier for størrelser og polstringer

Relative værdier kan angives for bredde, højde, margin, polstring osv. Den mest kendte måde at angive den relative størrelse på er i procent (%).
Nedenfor er et eksempel på indstilling af bredden til 90 % af størrelsen af ​​den overordnede komponent.

I dette tilfælde beregnes værdien i forhold til den overordnede komponent.
Der er også værdier for skærmstørrelse:

• vw- 1 % af vinduesbredden. Når vinduesbredden reduceres, reduceres elementets bredde, højde og skrifttype;
• vh- 1 % af vindueshøjden. Når vindueshøjden reduceres, reduceres elementets bredde, højde og skrifttype;
• vmin - vælg den mindste af vw Og vh;
• vmax - den største er valgt vw Og vh.

Nedenfor er et eksempel på brug vw Og vh. I dette tilfælde, bredden og højden af ​​tagget div vil være lig med henholdsvis 50 % af skærmens bredde og højde.

Relative værdier for skriftstørrelse

Følgende relative værdier for skrifttyper findes:

• em- indstiller størrelsen i forhold til den overordnede skrifttype;
• rem- indstiller størrelsen i forhold til skrifttypen.

Lad os se på et eksempel:

Beregn skriftstørrelsen for tagget legeme. I dette eksempel er skriftstørrelsen for legeme specificeret i forhold til størrelse html. Altså skriftstørrelsen til legeme vil være lig med 30 px (20px * 1.5 = 30px).

Du kan også indstille relative skriftstørrelser ved hjælp af %, vw, vh osv. I det følgende eksempel er skriftstørrelsen for legeme svarende til 80 % af skriftstørrelsen html - 16px.

Maksimum og minimum komponentstørrelser

Brug egenskaberne for at indstille maksimum- og minimumværdierne for bredden og højden af ​​en komponent max-bredde / min-bredde Og max-højde / min-højde henholdsvis.

Lad os se på et eksempel:

Lad os antage, at den overordnede komponent af dette div er legeme. Så, når skærmbredden ændres, vil bredden af ​​denne komponent være 60 % af bredden legeme. Det vil dog kun stige til det beløb, der er angivet i max-bredde, det er 500 px. Så snart beholderen når denne bredde, holder den op med at vokse.

Brug af Media Queries

Medieforespørgsler giver dig mulighed for at angive stilarter for en bestemt skærmstørrelse, enhedstype baseret på enhedskarakteristika osv. Alle medieforespørgsler begynder med @medier, og så følger betingelsen.

Ved hjælp af medieforespørgsler kan du indstille stilarter for følgende enhedstyper:

• alle- alle typer (standardværdi)
• punktskrift- enheder baseret på Braille-systemet, som er beregnet til læsning af blinde
• præget- printere, der bruger Braille-systemet til udskrivning
• håndholdt- smartphones og lignende enheder
• trykke- printere og andre printere
• projektion- projektorer
• skærmen- skærm
• tale- talesynthesizere, samt programmer til at afspille tekst højt
• tty- enheder med fast tegnstørrelse
• tv- TV'er.

Et eksempel på indstilling af bredden for et div-tag, på monitorskærme, smartphones mv.

Links til teknikker til implementering af adaptivt layout

Du kan se og studere de tilgange, der er diskuteret i denne artikel og andre mere detaljeret ved at bruge følgende links:

• Skal vi lave en mobilversion? 5 almindelige problemer, som adaptivt layout løser. Yandex oplevelse

CSS rammer

CSS-framework - en ramme skabt for at forenkle arbejdet for en layoutdesigner, fremskynde udviklingen og eliminere det maksimalt mulige antal layoutfejl (kompatibilitetsproblemer med forskellige versioner af browsere osv.). Disse rammer indebærer brug af forskellige tilgange til korrekt visning af websteder på enheder af enhver størrelse.
Mange udviklere foretrækker at bruge CSS-frameworks, i stedet for at skrive alle stilene manuelt. Dette skyldes følgende årsager:

• Hurtigere udvikling
• Support på tværs af browsere
• Understøtter forskellige enheder og skærmstørrelser
• Kodekonsistens, når du arbejder som et team, reducerer uenigheder under udvikling.

Ligesom biblioteker af scripting programmeringssprog, CSS-biblioteker, som normalt har et ydre udseende CSS-fil tilføjes til overskriften på websiden.

Lad os se på de mest populære CSS-rammer.

Bootstrap

Den mest populære ramme for responsiv og mobil udvikling web-projekter. Bootstrap er et open source-værktøj til udvikling af hjemmesider vha HTML, CSS og JS. Bootstrap- et intuitivt enkelt og samtidig kraftfuldt interface-framework, der øger hastigheden og letter udviklingen web-applikationer.

Bootstrap Skalerer dit projekt nemt og effektivt med én kodebase - fra telefoner og tablets til stationære computere. Et 12-søjlet gitter bruges til dette:

Ud over CSS denne ramme inkluderer støtte til de to mest populære CSS-forbehandlere: Mindre Og Sass.

Karakteristiske træk:

• 12 - kolonnegitter
• Stort antal komponenter, der er klar til brug
• Støtte Mindre Og Sass
• Brug Normaliser.css.

Materialedesign til Bootstrap

Materialedesign til Bootstrap er et open source applikationsudviklingsværktøj baseret på Bootstrap og bruge tilgange Materiale Design.
Rammen giver dig mulighed for hurtigt at oprette en applikation ved hjælp af variabler Sass, adaptive grid, et stort antal færdige komponenter og kraftfulde plugins implementeret i jQuery.

Karakteristiske træk:

• 12 - kolonnegitter
• Et stort antal brugsklare komponenter efter konceptet Materiale Design.

Jeg er ikke professionel inden for hjemmesidedesign og layout. Grundlæggende kommer alle mine aktiviteter i denne retning ned til mindre redigeringer af eksisterende skabeloner. Men en dag ville jeg virkelig finde ud af "hvordan det virker", og jeg sammensatte et sæt grundlæggende regler for at lave en responsiv hjemmesideskabelon i én artikel.

Begrebet tilpasningsevne

Tilpasningsevne skal forstås som et webstedslayout, hvor webstedets udseende ændres afhængigt af opløsningen og skærmorienteringen af ​​den enhed, som webstedet ses på. Desuden er alle ændringer foretaget for at gøre det nemmere at bruge et sådant websted på mobile enheder.

Adaptivt layout giver dig mulighed for at se webstedet lige så bekvemt, ikke kun på en computerskærm, men også på skærmen på en mobiltelefon (smartphone) uden tab af funktionalitet.

Medieforespørgsler til adaptivt layout

For at ændre layoutet på webstedet og den tilsvarende styling, bruges medieforespørgsler, der aktiverer en eller anden kode afhængigt af skærmens bredde. For at medieforespørgsler skal fungere, og skabelonen kan tilpasses, skal du placere følgende kodelinje i HEAD-sektionen af ​​webstedets header:

Grundlæggende principper for tilpasningsevne

Da skærmstørrelsen på mobile enheder (smartphones, tablets) er mærkbart mindre end skærmen på en computerskærm, både i størrelse og opløsning. Hovedopgaven for adaptivt design er at reducere bredden af ​​en hjemmesideside for mobile besøgende.

Og dette opnås på to måder:

Slette (skjule) blokke og/eller omfordele dem indbyrdes;

Skift blokstørrelser afhængigt af skærmbredden.

Et klassisk eksempel er at flytte sidebjælkekolonnen under hovedindholdet.

Samtidig blev bredden af ​​sidebjælken lig med bredden af ​​hovedindholdet, og begge strakte sig til gengæld over hele skærmens bredde.

Sådan fjerner du en sidebjælkeblok afhængigt af skærmbredden

Lad mig starte med det faktum, at opmærkningen af ​​de fleste moderne skabeloner er implementeret ved hjælp af blokke. Til vandret placering anvendes såkaldte flydende blokke, det vil sige med FLOAT-stilen. For at annullere det vandrette arrangement af blokke, når du ser på mobile enheder, skal du derfor fjerne den flydende blokstil.

I det enkleste tilfælde vil CSS-koden se sådan ud:

@medie kun skærm og (max-width: 1199px) ( .content(float: ingen;) .sidebar(float: ingen;) )

Den skal placeres i slutningen af ​​stilfilen, i det mindste efter den er blevet formateret til visning på stationære computere.

Forklaringer til koden: i første linje siger vi, at følgende stilarter vil gælde for enheder med en skærmbredde op til og med 1199 pixels. For sådanne enheder ophører sidebjælken med at være en flydende blok og vises i rækkefølgen i webstedets HTML-kode. Derfor, hvis du ønsker, at sidebjælken skal vises efter indholdet, skal sidebjælken være under hovedindholdskoden, sådan her:

... ...

Automatisk blokbredde - gummilayout

Du bør også arbejde med bredden af ​​indholdsblokkene og sidebjælken. Det er nødvendigt at gøre dem "gummi", når du ser på mobilklienter:

@media only skærm og (max-width: 1199px) ( .content (width:100%;).sidebar (width:100%;) )

Med ovenstående stilarter vil blokkene strække sig over hele skærmens bredde.

Adaptive billeder til hjemmesiden

Efter at vi har ændret placeringen og størrelsen af ​​blokkene, bør vi tage os af de resterende elementer på stedet. Mange af dem passer måske simpelthen ikke på skærmen, for eksempel billeder. For at tilpasse dem til mobile klienter bruger vi følgende kode:

Img (max-width:100%; højde: auto;)

Problemet med lange ord

Nogle gange kan der vises en vandret rullebjælke fra et meget langt ord, når det ikke passer på skærmen. Dette kan f.eks. være en URL efterladt i en kommentar. Jeg skrev mere om dette problem og dets løsning tidligere:. CSS-koden til at løse reaktionsproblemer vil se sådan ud:

Bindestreger ( overflow-wrap: break-word; word-wrap: break-word; -webkit-bindestreger: auto; -ms-bindestreger: auto; -moz-bindestreger: auto; bindestreger: auto;)

Adaptiv hjemmesidemenu

Det er også tilrådeligt at tilpasse webstedets menu, især hvis den har mange elementer, da den kan optage en betydelig del af skærmen. For at frigøre skærmen så meget som muligt for menuindhold, skjuler de normalt menuen og viser i stedet en knap (link), når der klikkes på, vil menuen blive vist på skærmen.

For at implementere din plan skal du oprette to gensidigt udelukkende objekter. Eksempelvis skal hovedmenuen være skjult på mobilskærme, men der skulle komme en knap, der åbner denne menu. På computerskærme er det omvendt: Hovedmenuen skal være synlig, men knappen til at kalde den skjult.

Dette er meget nemt at implementere i CSS.

#hovedmenu (display:blok;) #mobilmenu(display:ingen;) @kun medieskærm og (max-width: 1199px) ( #hovedmenu (display:ingen;) #mobilmenu(display:blok;) )

Så snart skærmbredden bliver mindre end 1200 pixels, forsvinder hovedmenuen fra skærmen, og et link til at åbne den vises (mere præcist vises en blok med et link eller en knap).

Bemærk venligst, at i dette tilfælde bruges blok-id'erne, ikke stilklassen. Og hovedmenukoden vil se sådan ud:

<div id="mainmenu">Sitets hovedmenu

For at vise hovedmenuen, når du klikker på en knap, skal du tilføje et lille script til HEAD-sektionen:

funktion showmobilemenu() ( if (document.getElementById("mainmenu").style.display == "blok") (document.getElementById("mainmenu").style.display = "ingen") else (document.getElementById(" hovedmenu").style.display = "blok") )

Fra forfatteren: i fremtiden forventes en konstant stigning i mobiltrafik i internetverdenen. Det betyder, at du nu skal kunne lave layouts, så dit projekt ser godt ud på alle enheder. Løsningen er for længst fundet - adaptivt hjemmesidelayout! Vi taler om hende.

2 måder at behage mobilbrugere

Den nemmeste måde at bestemme, hvordan et websted er lagt ud, er at reducere størrelsen af ​​vinduet. Hvis der vises en vandret rullebjælke, er dette et fast layout. Alle størrelser blev højst sandsynligt angivet i pixels. Vil dette websted være praktisk for brugere på mobile enheder? Ingen.

Der er grundlæggende to løsninger på dette problem. Den første er at lave forskellige versioner af layoutet (til pc'er, til tablets og til mobiltelefoner). Det er præcis, hvad der for eksempel blev gjort på det sociale netværk Vkontakte. Den anden mulighed er at lave adaptivt layout. Et sådant websted vil reagere på ændringer i vinduesbredden. Denne mulighed bliver brugt mere og oftere i dag.

Ris. 1. Som du kan se, vises webformyself godt selv på en mobiltelefon.

Tilpasningsevne er begyndelsen på rejsen

Adaptivt layout adskiller sig ikke fra almindeligt layout, bortset fra at medieforespørgsler tilføjes til typografiarket, hvor typografier er angivet for forskellige skærmbredder. Nogle gange er de placeret i en separat css-fil, og nogle gange er de skrevet i slutningen af ​​hovedstilarket. Eksempel medieforespørgsel:

@kun medieskærm og (maks. bredde: 980px)()

@kun medieskærm og (maks. - bredde: 980px) ( )

Lad os se nærmere på denne post.

@media – selve betegnelsen for medieforespørgslen

Skærm – vi angiver, at dette refererer til skærmen (her kan du også angive et tv eller en projektor). Kun – betyder, at reglerne kun gælder for skærme.

Og (og) – tilføjelse af en betingelse, som medieforespørgslen vil fungere for. Betingelsen tilføjes i parentes.

Max-bredde: 980px – selve tilstanden. Enkelt sagt betyder det, at medieforespørgslen vil fungere, når skærmbredden maksimalt er 980 pixels (det vil sige fra 0 til 980px). Hvis bredden er større end 980, fungerer reglerne ikke. Oftest er betingelserne her max-width, min-width, max-device-width, min-device-width. De sidste to betyder, at reglerne kun vil virke på selve mobilenhederne (det vil sige, at når du ændrer vinduesbredden på en computer, kommer der en vandret rulning). Du kan også angive max-højde, men denne bruges meget sjældent.

() – alle CSS-reglerne er skrevet i disse krøllede seler. Der kan være så mange af dem, som du vil. Lad mig give dig et par eksempler for at gøre det klart for dig:

@kun medieskærm og (maks. bredde: 980px)( .selector(baggrund: sort) ) @kun medieskærm og (min-bredde: 600px)( img(float: venstre) )

@kun medieskærm og (maks. - bredde: 980px) ( Vælger (baggrund: sort) @kun medier skærm og (min - bredde: 600px) ( img (flydende: venstre)

Lad os oversætte det til et menneskeligt sprog: hvis vinduesbredden er mindre end 980 pixels, vil reglen (baggrund: sort) blive anvendt på elementet med vælgerklassen. I endnu enklere vendinger bliver baggrunden for dette element sort.

Andet eksempel: hvis vinduesbredden er mere end 600 pixels, vil alle billeder blive presset til venstre kant.

Har du allerede indset det geniale ved denne layoutmetode? Grundlæggende kan du ved hjælp af medieregler justere eksisterende eller tilføje nye CSS-regler. På denne måde kan du implementere en fuldt responsiv skabelon.

Ris. 2. Et eksempel på en medieforespørgsel, der specificerer regler for widescreen-skærme.

Lær mere om tilpasningsevne

Dette er forståeligt, men hvordan laver man selv et adaptivt webstedslayout? For at gøre dette er det tydeligvis ikke nok for dig at skrive disse to eksempler ned. Jeg håber, du forstår essensen af ​​dem, men de er til lidt nytte. Vi har brug for reelle fordele. Og du kan få det fra. Men dette er, hvis vi tager tilpasningsevne alvorligt. Faktum er, at da kurset er betalt, vil du efter at have studeret det selv være i stand til at lære andre adaptivt layout.

Hvis du har brug for noget enklere bare for at få styr på det, vil denne passe dig meget bedre. Den består af fem videolektioner, der vil guide dig gennem det grundlæggende. Kurset er meget nemt, informationen er udvalgt specielt til begyndere. Samtidig vil du kunne se på flere praktiske eksempler, så du efter at have studeret det selv kan tilpasse et enkelt layout.

Er det svært at mestre adaptivt layout?

Da jeg først begyndte at studere webteknologier, vidste jeg ikke engang rigtig, hvad adaptivt hjemmesidelayout var. Det var ikke muligt at gøre dette på egen hånd. Frygt er vores hovedfjende. Det viste sig, at alt var ret enkelt. Og nu, når jeg nogle gange ser på koden for adaptive skabeloner, forstår jeg, hvor let tilpasningsevne nogle gange er at implementere.

Sådan testes tilpasningsevne

Den nemmeste måde at gøre dette på er i browseren. For eksempel, i min Google Chrome, når jeg trykker på F12, vises fejlfinderen. Prøv nu at ændre størrelsen på vinduet. I øverste højre hjørne vil du se værdien af ​​dens bredde. Dette er meget praktisk til hurtigt at tjekke dit layout. Jeg kan også anbefale responsivetest.net. Tjenesten er ret praktisk og gør et fremragende stykke arbejde med at teste tilpasningsevnen.

Ris. 3. Når du holder F12 nede, vises fejlfinderen. Nu kan du i øverste højre hjørne se vinduets aktuelle bredde ved ændring.

Hvorfor adaptivt layout?

I begyndelsen af ​​artiklen sagde jeg, at der er en anden måde at behage mobile brugere - at udvikle separate versioner til forskellige enheder. Hvad synes du er den nemmeste måde? Tilpasningsevne er meget nemmere at implementere. Det er blot et par hundrede ekstra linjer kode, snarere end en separat version af webstedet, som ofte er meget anderledes i design. Som praksis viser, laves mobilversioner til deres hjemmesider kun af store virksomheder, der har råd til at bruge flere penge på projektudvikling.

For alle andre er adaptivt layout noget at stræbe efter nu. Og da mobiltrafik kun vil vokse, skal du begynde at implementere det nu. Og abonner samtidig på vores blog for at forbedre din viden inden for hjemmesideopbygning.