Adaptivt webstedsdesign er et praktisk system til at vise det samme websted på forskellige typer enheder online. Enkelt sagt er dette muligheden for at se én webside på en bærbar computer, smartphone og andre gadgets.
Webresponsivitet er blevet en nødvendighed, lige siden folk fik internetaktiverede gadgets i forskellige formater. Virksomheder, onlinebutikker og endda blot informative sider stræber efter at behage deres publikum og tilpasser sig det på enhver mulig måde. Responsivt design løser bekvemmelighedsproblemet, derfor er det en uundværlig arbejdsartikel.
Karakteristika ved responsivt webdesign
Bekvemmeligheden ved design er kendetegnet ved flere hovedkriterier.
- Størrelse. Responsivt webstedsdesign bør have mindre forskelle, når siden vises på forskellige enheder, så størrelsen af billeder, tekst og andre elementer, der vises, skal svare til størrelserne på selve enhederne. For at gøre dette tilpasser webudviklere designet, så det har flere visningsversioner.
- Indholdstilpasning. Materiale, der fylder webstedet (billeder, videoerog andre multimedieelementer) skal også matche de påkrævede skærmopløsninger uden at miste kvaliteten af skærmen.
- Designfleksibilitet. Inddragelse i udviklingen af elementer, der giver dig mulighed for hurtigt at justere webstedets design, når du ændrer den webside, du ser på. For eksempel ruller brugeren siden op og ned, navigerer gennem forskellige sektioner eller ændrer skærmpositionen fra lodret til vandret og omvendt.
- Forenkle varer efter enhed for bedre brugervenlighed.
- Skjul uvæsentlige blokke på mindre skærme.
Grundlæggende
Websidebygning er bestemt relateret til programmeringssprog, fordi du simpelthen ikke kan undvære dem. Ved hjælp af HTML og CSS genkender browseren sammensætningen og rækkefølgen af objekter (tekster, illustrationer, videoer) - det er sådan siden er dannet.
CSS er ansvarlig for farver, stilarter, størrelser, skrifttyper, justeringer, polstring, baggrundselementer, formularer osv. HTML er ansvarlig for det overordnede indhold og struktur på webstedet. Der er således bygget en webressource sammen med de to vigtigste beskrivelsesmetoder.
CSS er på den anden side et uundværligt designværktøj. Har et stort sæt funktioner, der er HTML overlegne:
- Giver designkonsistens på tværs af flere sider, webstedets udseende og styrer visningen af HTML-dokumenter.
- Giver dig mulighed for at lave design og indhold på samme tid.
- Anvender flere stilarter og evnen tilser på forskellige enheder.
- Tager komplekse designbeslutninger.
- Kæretegnet ved høj hastighed.
For at udvikle et websted skal du kende nogle grundlæggende begreber.
En CSS-vælger er angivet med navnet på en typografi, der definerer egenskaber og formateringsmuligheder. Den fortæller browseren, hvilket specifikt element egenskaberne gælder for.
En ejendom er en strukturel enhed. Den definerer eksterne parametre (størrelse, placering, farve, form osv.) og udtrykkes i en specifik kode.
Der er et sæt definerede CSS-egenskaber, der beskriver et enkelt objekt i udseende og placering.
Tilsammen danner disse elementer følgende skema:
Vælger { ejendom1: værdi; ejendom2; værdi }.
Layoutstørrelser og opløsninger
Designudvikling begynder med udarbejdelsen af layoutet i Photoshop eller andre grafiske programmer. For nemheds skyld indføres specielle markeringer af det modulære gitter i lærredet, specielle indrykninger observeres. Således viser webdesigneren layoutdesigneren principperne for at strukturere det fremtidige websted og den korrekte placering af webelementer.
Responsive webdesignopløsninger og størrelser for hovedenhedstyper:
- Dette design overholder princippet om at starte arbejdet med mobiltilladelse. Layoutet til smartphonen er lavet i størrelsen 460 × 960 px.
- Tabletlayoutstørrelsen er 768 × 1024.
- Notebook-størrelsen er 1280 × 802.
- PC-størrelsen er 1600 × 992.
I mobilversionen af webstedetskal være så forenklet som muligt, samtidig med at alle hovedfunktionerne bevares. Hvis layoutet er ved at blive forberedt til en online butik, med al den forenkling, der er i brug, skal den have en hovedbeskrivelse, et produktkatalog, en ordremulighed, en indkøbskurv osv. - alle nødvendige elementer for fuld funktion, som med fuldformatvisning på en pc. Bekvemmeligheden ved mobilversionen er, at du her kan undgå ekstra sider for at spare tid ved indlæsning.
I adaptivt indhold, ved hjælp af html-kode, kan du skjule nogle elementer, der ikke virkelig er nødvendige. For eksempel, i høj opløsning, viser webstedet et produktkort med dets beskrivelse, pris, leveringsinformation og muligheden for at tilføje til "kurven". I mobilopløsning er processen forenklet til et billede, en pris og en købsknap.
Medium og minimum opløsninger for responsivt design bør tage højde for brugerens lette læsning og visning.
Layout
Formålet med adaptivt designlayout er at skabe et fleksibelt layout, eller som det også er sædvanligt at sige: "gummiskabelon". Bundlinjen er ikke i encifrede sidestørrelser, men i skabelonens proportionale komprimerbarhed for nem visning på alle enheder.
Den er hovedsageligt bygget på CSS. Under udviklingen bestemmes kontrolpunkter for skærmdimensioner. Således bestemmes bredden af de resterende objekter. For at gøre dette indstilles sidens bredde af egenskaben css max-width, afhængigt af disse kriterier vælges størrelsen af andre elementer som en procentdel. For eksempel blokstørrelsen på hovedetsiden er 600px, og bredden af sidebjælkeblokken (sidebjælke) er henholdsvis 400px, indholdsbredden vil være 60 %, og sidebjælkebredden 40%.
Der er flere typer responsive layouts. Hver er valgt individuelt, afhængigt af funktionerne og konstruktionen.
Visninger:
- En layouttype, der tillader blokke at ombrydes, når skærmopløsningen er reduceret. På websteder med flere kolonner flyttes yderligere blokke til bunden af skærmen.
- Når der udarbejdes et separat mønster for hver tilladelse. Denne type responsivt design tager længere tid, men er den mest læsbare.
- En enkel type design, der har til formål at skalere alle elementer. Det er ikke fleksibelt.
- Paneltypen er praktisk til brug i mobile applikationer, når der vises yderligere funktioner, når du ændrer placeringen af selve skærmen.
Oprettelse af responsive lag er kun en del af jobbet. Adaptive billeder er en separat sag, som har sine egne problemer og metoder til at løse dem.
Enkelt billede skal vises tydeligt ved forskellige skærmopløsninger. Der er et problem her - hvordan man sikrer sig, at billedet altid forbliver det samme, uanset ændringen i opløsning. Indtastning af en simpel CSS-kode i dette tilfælde vil ikke være nok.
Eksempel: img {max-width: 250px;} - her bør du anvende en metode, hvor størrelsen på beholderen, der indeholder billedet, er begrænset, og ikke selve billedet. Det vil se nogenlunde sådan ud: div img {max-width: 250px;}. Denne metode løser problemetlayout af små billeder, men ikke egnet til store illustrationer.
Derfor foretrækker mange udviklere at bruge javascript-sprog, der giver dig mulighed for at tilpasse ethvert billede uden at overbelaste serveren. Javascript tilbyder et stort antal alternative scripts.
Fordele og ulemper ved responsivt layout
Positives:
- Gem placeringen af alle elementer. Dette er praktisk, når brugeren er vant til den fulde version af webstedet.
- Gem domæner og adresser.
- Fuld tilpasning til andre tilladelsesformater.
Negative:
- Funktionel fleksibilitet er tabt
- Enhver informativ overbelastning er fyldt med en lang lancering af en webressource, som tvinger mange brugere til at skifte til hurtigere muligheder.
Oprettelse af et websted
Webstedets struktur er opdelt i flere sektioner og blokke. Traditionelt består layoutet af den øverste del af siden (header), logo, menu, indholdsblok og den sidste del af siden (f.eks. detaljerede kontaktoplysninger). Lad os se, hvordan man laver et responsivt webstedsdesign ud fra en simpel skabelon.
Hjælpemærker til skrivning:
- wrapper - tag, der kombinerer alle skabelonelementer;
- header h1 - logo;
- header - overskrift til menu og andre vigtige elementer;
- indhold – bloker;
- colLeft - indholdsstørrelse;
- colRight - sidebjælke (sidesøjle);
- footer - den sidste del af webstedet;
- medieskærm - sætønsket opløsning.
Når du skriver et websted, kan disse elementer flytte sig i en anden rækkefølge, afhængigt af behovet. For eksempel kan menuen ved høje opløsninger blive vist lodret. I mobilversionen kan layoutet bygges på en sådan måde, at menuen glider ud i vandret position.
- viewport - et tag, der giver dig mulighed for at gemme størrelsen af teksten i en mindre version af designet. Den er placeret mellem tags.
- max-width - for at optimere webstedet for at undgå strækning ved opløsninger over 1000 pixels.
Når du implementerer layoutet, hjælper jQuery-biblioteket meget, når du skal ændre stilen og strukturen af blokkene.
Hvad er forskellen mellem responsivt og mobilt design
For en fuldstændig forståelse, overvej et par illustrative eksempler, da forveksling mellem disse to begreber ikke er ualmindeligt.
Du skal forstå, at mobilversionen er en analog af det primære websted med et underdomæne. Den eksterne præsentation af webstedet gentager fuldstændig stilen og funktionaliteten, mens dens struktur og indhold kan afvige fra hovedversionen, da versionen er skåret ned til de nødvendige elementer.
Responsivt design er optim alt til alle enhedsopløsninger. Den er skalerbar og gengives korrekt uanset visningsforhold.
Dette er to forskellige præsentationer af webstedet, omkring hvilke uenigheder utrætteligt raser, hvilken der er bedst. Det skal bemærkes, at der endnu ikke er truffet en endelig afgørelse. Nogen roser dette design og påpeger modetrend og en masse fordele. Mobilversionen har også flere fordele, som responsivt design ikke har. Derfor bør du til at begynde med forstå de grundlæggende behov.
Fordele
Hvordan er responsivt design bedre end mobil?
Alsidighed. I vores tid, med en så vanvittig vækst af markedet, er det simpelthen nødvendigt at præsentere information på en anden måde, der tilfredsstiller forbrugernes ønsker. Responsivt design løser dette problem.
Effektiv promovering i søgemaskiner. Hvad kan ikke tilskrives de vigtigste fordele ved en adaptiv enhed. Søgemaskiner foretrækker at give brugerne responsive websteder.
Brugerbarhed. Responsivt design er norm alt designet i de bedste designløsninger, hvilket er en fin gave til brugernes visuelle opfattelse.
Nemhed og enkelhed både i implementeringen af projektet og i dets brug.
Gode konverteringsrater. Da der med adaptivt design er flere muligheder for visning, øges selve konverteringen.
Økonomi. Det er relativt billigere end at oprette og promovere en separat mobilversion.
Fordele og ulemper ved mobilversionen
Oprettelse af et responsivt mobildesign kræver alsidighed og konsekvens. Først og fremmest anbefales det at udskrive kommissoriet i detaljer, hvilket naturligvis vil hjælpe med at undgå unødvendigt arbejde og spare tid, samt tage hensyn til funktionerne på den server, som webstedet vil blive hostet på..
Der er visse fordele og ulemper ved mobilt responsivt design.
Fordele:
- Hvis du har en færdiglavet side, er der ingen grund til at udvikle et design til mobilversionen fra bunden. Kun få ændringer kan foretages, hvilket frigør dette layout for uønsket funktionalitet.
- På grund af alle former for forenklinger anses mobilversionen for at være hurtigere ved download.
- Brugeren ser den vigtigste information i alt indhold.
- Hurtig implementering. Der er plugins, som du kan implementere mobiltilpasning med, selvom du ikke kender tags og koder.
- Søgemaskinevalg favoriserer adaptive versioner, fordi de tager kortere tid at analysere.
Ulemper:
- Ikke alle mobilversioner matcher muligvis mobilenhedsopløsninger. Siden åbner selvfølgelig, men skærmopløsningen stemmer ikke altid overens med layoutet. Nogle gange kan et veldesignet smartphone-design se anderledes ud, når det åbnes som en tablet.
- Mobilversioner kræver separate bet alte domæner.
- Der er nogle mindre problemer med at sende indhold. Hvis der er flere versioner på én gang, bør indholdet justeres for alle formater på én gang. At indsende nyt materiale på hovedsiden og kopiere det til mobilversionen kan anses for at stjæle. For at undgå dette problem skal du muligvis bevise forbindelsen mellem ressourcer.
Implementeringsmetoder
Vigtigste implementeringsmetoder:
- Efter oprettelse af design af layout og layout, indlæses det til de nødvendige dimensioner ved hjælp afoperatørsted og hovedkode. Dette er en klassisk metode, der bruges til at skabe mellemstore og små versioner (tablets, smartphones osv.).
- BootStrap er et enkelt og overskueligt sæt tilpasningsværktøjer. Velegnet til at lave versioner til Landing Page og andre ikke særlig komplekse webprojekter. Det giver en god mulighed for at anvende mange forskellige stilarter i grænsefladefunktioner.
- Responsive Grid System er et populært sæt alsidige værktøjer. Let at anvende og kræver ikke dyb viden. Indeholder en bred vifte af infografik.
- GUMBY - En CSS-ramme med fleksibel reaktionsevne og fantastisk værktøj.
- Cookies - giver dig mulighed for at implementere responsive billeder. Medfølger automatisk filer anmodet af browseren.
- ExpressionEngine er en anden måde at skabe responsive billeder på. Bestemmer, om enheden er mobil, i stand til at ændre billeder til den nødvendige opløsning.
- ProtoFluid - Giver hurtig prototyping. Velegnet til alle slags enheder.
