Responsivt vs adaptivt design: hvad er bedre for brugeren? Find et færdigt design. De vigtigste skærmopløsninger til adaptivt layout

I På det sidste Teknologier og forskellige enheder (tablets, smartphones, skærme), som websteder ses med, udvikler sig mere og mere.

På dette område får vi et stort udvalg af forskellige skærmopløsninger, hvilket igen gør det svært at få information fra sider. For at sikre, at oplysningerne er nemme at læse og ses på de fleste enheder, er der udviklet adaptiv designteknologi.

Målet med responsivt design er at udvikle et universelt webstedsdesign, der til gengæld vil give dig mulighed for at se og interagere med ressourcen fra forskellige enheder.

Og denne teknologi indebærer udvikling af én version af et websted til alle enheder i stedet for flere.

Adaptive Web Design er design af websider, der sikrer den korrekte visning af webstedet på forskellige enheder, tilsluttet internettet og dynamisk tilpasse sig givne dimensioner browservindue.

Grundlæggende principper for responsivt design:

Adaptiv hjemmesideskabelon, skabelonens evne til at tilpasse sig forskellige enhedsskærmopløsninger fra computerskærme til smartphones;
Tilpasning og bevægelse af indholdsblokke, indholdsblokkes evne til at tage de nødvendige dimensioner afhængigt af enhedens skærmopløsning, samt evnen til at flytte til en anden position i layoutet;
Billedresponsivitet, billeders evne til at ændre størrelse afhængigt af skærmopløsning eller til at indlæse et mere skræddersyet billede med mindre vægt og størrelse;
Brug fleksibelt mesh, giver dig mulighed for hurtigt at ændre layoutdesignet;
Skjuler mindre vigtige blokke ved små skærme nogle blokke kan være skjulte;
Omarbejdning af brugervenligheden af navigationselementer, da navigationselementer på mobile enheder på grund af deres lave opløsning bliver mindre klikbare, de er redesignet, hvilket gør dem praktiske at bruge;
Forenkling af en række elementer på websiden, nogle elementer er forenklet til brug på mobile enheder;
Tilpasning af videoindhold, videotilpasning bør også tages i betragtning;
Brug af medieforespørgsler ( medieforespørgsel), giver dig mulighed for at oprette et responsivt layout;
Mobil først ( mobil først), at designe et responsivt design starter med et mobilvenligt layout.

Vedrørende det sidste punkt, er om dette er korrekt eller ej et svært spørgsmål, iflg i det mindste, mange hævder, at det er nødvendigt at begynde at udvikle et layout med en version til mobile enheder. Jeg har en lidt anden opfattelse; det er nemmere for mig at udvikle et layout til maksimal opløsning med et gennemtænkt gitter og fuld funktionalitet, og først derefter tilpasse det til andre opløsninger.

Responsive Design Layout Dimensioner

Engang i 2012 skrev jeg en kort artikel om, hvilke der skal vælges, når man udvikler et design – et layout til et fast site. denne artikel modtaget stor interesse blandt læserne; det viser sig, at dette nummer er interessant for mange nybegyndere designere og udviklere. I forbindelse med dette besluttede jeg også at fremhæve dette problem i denne artikel.

Så rent ud fra min vision vil jeg skitsere princippet og dimensionerne, som layoutet skal udvikles til.

Følger du princippet om mobil først, så vil der være opløsningsstørrelser, som du skal udvikle et layout til 320px / 480px / 768px / 1024px / 1280px, måske mere afhænger af opgaverne.

Billedet ser nogenlunde sådan ud, men ofte er det ikke nødvendigt at lave et layout for bestemte opløsninger, for eksempel 480px. hvis layoutet ikke går i stykker i intervallet 768 - 320px.

Vi vil selvfølgelig lave et lærred i Photoshop under hensyntagen til polstring, rullepanel og alt muligt andet, ligesom et almindeligt layout. for nem udvikling, samt hurtigere layoutdesign. Mange mennesker bruger rammer i deres arbejde, og stoler derfor på gitteret i de rammer, som de udvikler sig på.

Takket være dette vil vi være i stand til at vise layoutdesigneren, hvordan layoutet vil opføre sig på forskellige skærmopløsninger og enheder. Som et eksempel har jeg skitseret et lille layout, du kan se det på skærmbilledet nedenfor.

Medieforespørgsel og viewport i responsivt design

Viewport-metatagget bruges til at fortælle browseren, hvordan man viser sidedimensioner og ændrer dens skala. Dette metatag er skrevet ind på webstedet. Det giver udviklere mulighed for at indstille skærmbredden for enheder, som er skrevet i css.

Viewport-metatagget er skrevet sådan:

600)( // Hvis bredden er større end 600 px, bruges stilarket på skrivebordet $("link").attr((href: "style.css")); ) ) ));

Valgfri display indhold

Evnen til at krympe og omarrangere elementer, så de passer på små skærme, er fantastisk. Men det er det ikke den bedste mulighed. Mobilenheder har typisk et bredere sæt ændringer: forenklet navigation, mere fokuseret indhold, lister eller rækker i stedet for kolonner.

Her er vores opmærkning:

Hovedindhold En venstre sidebjælke En højre sidebjælke

style.css (main):

#content( width: 54%; float: left; margin-right: 3%; ) #sidebar-left( width: 20%; float: left; margin-right: 3%; ) #sidebar-right( width: 20 %; float: venstre; ) .sidebar-nav( display: ingen; )

mobile.css (forenklet):

#content( width: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Hvis skærmstørrelsen reduceres, kan du fx bruge et script el alternativ fil med stilarter til at forstørre hvidt rum eller udskift navigationen for større bekvemmelighed. Med muligheden for at skjule og vise elementer, ændre størrelsen på billeder, elementer og meget mere, kan du således tilpasse designet til enhver enhed og skærm.

For nylig, bogstaveligt talt for 10 år siden, blev webdesignere, da de lavede websteder, styret af en vis gennemsnitlig skærmbredde på brugernes skærme. Først var den mest almindelige opløsning 800*600, derefter voksede den til 1024*768. På internettet kunne man støde på følgende ord: "Sitet er optimeret til sådan en opløsning." Med stigningen i antallet af skærmstørrelser er det blevet populært Gummi layout sites, som jeg skrev om i Takket være denne type layout var det muligt at se sider på skærme med forskellige opløsninger.

Dog i de sidste år gummilayout er ophørt med at være et "universalmiddel". På den ene side dukkede skærme op med enorme skærmstørrelser, på den anden side fandt mobilrevolutionen sted - antallet af forbindelser til internettet af mobile enheder (bærbare computere, smartphones, tablets) er steget flere tal stationære computere. Mobil trafik er i vækst, og der er behov for at vise siden korrekt på skærme stort antal alsidig forskellige enheder. Størrelsesområdet er for bredt.

Hvis webstedet ser dårligt ud på små skærme, så forlader den besøgende det simpelthen, trafikken falder, og adfærdsfaktorerne forværres.

For at tjekke, hvordan dit websted ser ud, når det ses på forskellige enheder, kan du bruge Screenfly-tjenesten. For at gøre dette skal du indtaste webstedets adresse og vælge den ønskede enhed fra en ret stor liste. Det kunne være stationær computer og tablets forskellige typer, og mobiltelefoner. Du kan ændre skærmretningen fra liggende til stående og omvendt.

Hvordan løser man problemet med normal hjemmesidevisning på forskellige enheder? Der er to veje ud:

Brug to versioner af webstedet, den almindelige til stationære computere, og mobil.
Brug responsivt design.

Hvilken af disse muligheder, der skal anvendes, er naturligvis op til ejeren eller kunden af siden at afgøre. Hvis siden blev oprettet for lang tid siden, har et håndtegnet design, der er en del af brandet, så kan det være værd at gøre noget for det mobil version, og lad den gamle ligge. Til nye hjemmesider skal du selvfølgelig vælge et responsivt design.

Hvad er responsivt design?

Hvad er det for et design, og hvordan adskiller det sig fra gummi?

Gummiskabelonen ændrer ikke sin struktur, når skærmens bredde ændres, men ændrer kun dens dimensioner. For eksempel har en webside tre kolonner: til venstre er en menu med en bredde på 25% af vinduesbredden, i midten er indhold - 50%, til højre er en sidebjælke - 25%. Med en vinduesbredde på 1000 px vil de have størrelser på henholdsvis 250, 500 og 250 px, hvilket er helt normalt. Men hvis du bruger mobiltelefon med en lille skærm 320 px bred, så krymper søjlerne til størrelser på 80, 160, 80 px og bliver ulæselige.

Hvad er løsningen? Det involverer radikalt at ændre websiden. Denne ændring består i, at efter et gradvist fald i kolonnernes bredde genopbygges sidens struktur - den strækkes til en kolonne. Men dette er ikke den eneste forskel.

Responsive designkrav

Tilpasser sig skærmstørrelse og -retning, lige fra store skærme stationære pc'er til mobiltelefoner.
Ændr størrelse på billeder, når du ændrer skærmopløsning. Selv på websteder med et "flydende" design ændres billedstørrelserne ikke, og ved en vis skærmbredde, vandret stribe rul for at se dem. Når du bruger responsivt design, "passer" billeder også til skærmstørrelsen.
Fjernelse af uvigtige skabelonelementer. De kan være ligesom dekorative elementer, og software, der ikke virker på mobile enheder.
Høj downloadhastighed. Fart mobilt internet er stadig relativt lille, og det skal tages i betragtning, når man udvikler en side beregnet til visning på mobile enheder.
Brugen er relativ store knapper. Mobile enheder brug touch-input og fraværet af en markør skal tages i betragtning ved udvikling af designet.
Arbejde med mobile funktioner, såsom geolocation.

Hvordan responsivt design skabes

Dette design er baseret på ved hjælp af CSS medieforespørgsler Takket være disse anmodninger bestemmes først parametrene for den enhed, som den besøgende bruger, og afhængigt af dette valg er den passende stil forbundet, det vil sige med adaptivt design, bruges et websted med et sæt stilarter til forskellige enheder. For eksempel hvis en besøgende tilgår siden med almindelig computer, et typografiark er forbundet, og han ser et websted med en stor farverig overskrift, vandret menu, flere kolonner med indhold, og når du bruger iPad, anvendes en anden stil, og i stedet for en stor overskrift vises et lille logo, menuen bliver til lodret liste, og indholdet trækkes i én kolonne.

Responsive skabeloner

Er det muligt at lave en eksisterende hjemmesideskabelon til adaptiv version? Det kan du selvfølgelig, hvis du har tilstrækkelig viden om HTML og CSS. Men hvis du bruger et indholdsstyringssystem - WordPress, Joomla!, Drupal, så er det bedre at finde færdiglavet skabelon, Nu adaptive skabeloner meget er blevet udviklet. Forresten, i min artikel skulle jeg nu tilføje endnu et punkt "Tjekker skabelonen for tilpasningsevne".

Så vi kan sige, at responsivt design er i øjeblikket Det er mest på en moderne måde hjemmesideudvikling, og på trods af dens relative kompleksitet er det fremtiden. Fremskridt står ikke stille, nye, mere komplekse enheder dukker op, og software det bliver også sværere for dem.

Der er i øvrigt lige dukket et unikt kursus af Andrei Kudlay op. Ved hjælp af Bootstrap frameworket kan du i dag lave en hjemmeside med et smukt, behageligt, professionelt design, uden at du behøver at være professionel i layout. Ved at bruge rammer kan selv de mest nybegyndere inden for hjemmesideopbygning layoute en side, oprette en en-sides hjemmeside eller landingsside. Desuden vil webstedet være ret professionelt, og den tid, der bruges på dets oprettelse, er minimal.

Alt dette er meget alvorligt, men for at tage en pause foreslår jeg at lægge puslespil og se på et andet maleri af min landsmand, People's Artist of Russia N.P. Eryshev.

Skriv din mening om responsivt design i kommentarerne.