Adaptiv webbdesign är ett bekvämt system för att visa samma webbplats på olika typer av enheter online. Enkelt uttryckt är detta möjligheten att visa en webbsida på en bärbar dator, smartphone och andra prylar.
Webblyhördhet har blivit en nödvändighet ända sedan människor fick internetaktiverade prylar i olika format. Företag, onlinebutiker och till och med bara informativa webbplatser strävar efter att tillfredsställa sin publik och anpassar sig till det på alla möjliga sätt. Responsiv design löser problemet med bekvämlighet, därför är det ett oumbärligt arbetsobjekt.
Kännetecken hos responsiv webbdesign
Bekvämligheten med design kännetecknas av flera huvudkriterier.
- Storlek. Responsiv webbdesign bör ha mindre skillnader när sidan visas på olika enheter, så storleken på bilder, text och andra element som visas bör motsvara storlekarna på själva enheterna. För att göra detta anpassar webbutvecklare designen så att den har flera visningsversioner.
- Innehållsanpassning. Material som fyller webbplatsen (bilder, videoroch andra multimediaelement) måste också matcha de erforderliga skärmupplösningarna utan att förlora kvaliteten på skärmen.
- Designflexibilitet. Inkludering i utvecklingen av element som gör att du snabbt kan anpassa webbplatsens design när du ändrar webbsidan du tittar på. Användaren rullar till exempel sidan upp och ner, navigerar genom olika avsnitt eller ändrar skärmpositionen från vertikal till horisontell och vice versa.
- Förenkla objekt efter enhet för bättre användbarhet.
- Dölj oviktiga block på mindre skärmar.
Basics
Webbplatsbyggande är definitivt relaterat till programmeringsspråk, eftersom du helt enkelt inte klarar dig utan dem. Med hjälp av HTML och CSS känner webbläsaren igen sammansättningen och ordningen av objekt (texter, illustrationer, videor) - det är så här webbplatsen bildas.
CSS ansvarar för färg, stilar, storlekar, typsnitt, justeringar, stoppning, bakgrundselement, formulär, etc. HTML ansvarar för det övergripande innehållet och strukturen på webbplatsen. Sålunda byggs en webbresurs i sammansättningen av de två viktigaste beskrivningsmetoderna.
CSS, å andra sidan, är ett oumbärligt designverktyg. Har en stor uppsättning funktioner som är överlägsna HTML:
- Ger designkonsistens över flera sidor, webbplatsens utseende och styr visningen av HTML-dokument.
- Ger dig möjlighet att göra design och innehåll samtidigt.
- Gäller flera stilar och möjligheten attvisning på olika enheter.
- Tar komplexa designbeslut.
- Kärtecknas av hög hastighet.
För att utveckla en webbplats behöver du känna till några grundläggande begrepp.
En CSS-väljare betecknas med namnet på en stil som definierar egenskaper och formaterings alternativ. Den talar om för webbläsaren vilket specifikt element egenskaperna gäller.
En fastighet är en strukturell enhet. Den definierar externa parametrar (storlek, plats, färg, form, etc.) och uttrycks i en specifik kod.
Det finns en uppsättning definierade CSS-egenskaper som beskriver ett enstaka objekt i utseende och plats.
Tillsammans bildar dessa element följande schema:
Väljare { egenskap1: värde; egendom2; värde }.
Layoutstorlekar och upplösningar
Designutveckling börjar med utarbetandet av layouten i Photoshop eller andra grafiska program. För enkelhetens skull introduceras speciella markeringar av det modulära nätet i duken, speciella indrag observeras. Således visar webbdesignern layoutdesignern principerna för att strukturera den framtida webbplatsen och det korrekta arrangemanget av webbelement.
Responsiva webbdesignupplösningar och storlekar för huvudenhetstyper:
- Denna design följer principen att börja arbeta med mobiltillstånd. Layouten för smarttelefonen är skapad i storleken 460 × 960 px.
- Storleken för surfplattans layout är 768 × 1024.
- Anteckningsbokens storlek är 1280 × 802.
- PC-storleken är 1600 × 992.
I den mobila versionen av sajtenbör vara så förenklat som möjligt, samtidigt som alla huvudfunktioner behålls. Om layouten förbereds för en onlinebutik, med all förenkling som används, bör den ha en huvudbeskrivning, en produktkatalog, ett beställnings alternativ, en kundvagn, etc. - alla nödvändiga element för fullfjädrad funktion, som med fullformatsvisning på en PC. Bekvämligheten med mobilversionen är att här kan du undvika extra sidor för att spara tid vid laddning.
I adaptivt innehåll, med hjälp av html-kod, kan du dölja vissa element som egentligen inte behövs. Till exempel, vid hög upplösning, visar webbplatsen ett produktkort med dess beskrivning, pris, leveransinformation och möjligheten att lägga till i "Korgen". I mobilupplösning förenklas processen till ett foto, ett pris och en köpknapp.
Medellång och lägsta upplösning för responsiv design bör ta hänsyn till användarens lätthet att läsa och se.
Layout
Syftet med adaptiv designlayout är att skapa en flexibel layout, eller som det också är vanligt att säga: "gummitall". Den nedersta raden är inte i ensiffriga sidstorlekar, utan i mallens proportionella komprimerbarhet för enkel visning på alla enheter.
Den bygger huvudsakligen på CSS. Under utvecklingen bestäms kontrollpunkter för skärmdimensioner. Således bestäms bredden på de återstående föremålen. För att göra detta ställs sidans bredd in av egenskapen css max-width, beroende på dessa kriterier väljs storleken på andra element i procent. Till exempel blockstorleken på huvudenhetensidan är 600px och bredden på sidofältsblocket (webbplatsens sidofält) är 400px, innehållsbredden blir 60% och sidofältsbredden 40%.
Det finns flera typer av responsiva layouter. Var och en väljs individuellt, beroende på funktioner och konstruktion.
Visningar:
- En layouttyp som tillåter block att lindas när skärmupplösningen minskar. På webbplatser med flera kolumner flyttas ytterligare block till botten av skärmen.
- När ett separat mönster utarbetas för varje tillstånd. Den här typen av responsiv design tar längre tid men är den mest läsbara.
- En enkel typ av design som syftar till att skala alla element. Det är inte flexibelt.
- Paneltypen är bekväm att använda i mobila applikationer, när ytterligare funktioner visas när du ändrar placeringen av själva skärmen.
Att skapa responsiva lager är bara en del av jobbet. Adaptiva bilder är ett separat fall, som har sina egna problem och metoder för att lösa dem.
En bild måste visas tydligt med olika skärmupplösningar. Det finns ett problem här - hur man ser till att bilden alltid förblir densamma, oavsett förändring i upplösning. Det räcker inte att ange en enkel CSS-kod i det här fallet.
Exempel: img {max-width: 250px;} – här bör du använda en metod där storleken på behållaren som innehåller bilden är begränsad, och inte själva bilden. Det kommer att se ut ungefär så här: div img {max-width: 250px;}. Denna metod löser problemetlayout av små bilder, men inte lämplig för stora illustrationer.
Därför föredrar många utvecklare att använda javascript-språk som låter dig anpassa vilken bild som helst utan att överbelasta servern. Javascript erbjuder ett stort antal alternativa skript.
För- och nackdelar med responsiv layout
Positiv:
- Spara platsen för alla element. Detta är praktiskt när användaren är van vid den fullständiga versionen av sajten.
- Spara domäner och adresser.
- Fullständig anpassning för andra behörighetsformat.
Negativ:
- Funktionell flexibilitet försvinner
- Alla informativa överbelastningar är fyllda med en lång lansering av en webbresurs, vilket tvingar många användare att byta till snabbare alternativ.
Skapa en webbplats
Webbplatsstrukturen är uppdelad i flera sektioner och block. Traditionellt består layouten av den övre delen av sajten (header), logotyp, meny, innehållsblock och den sista delen av sajten (till exempel detaljerad kontaktinformation). Låt oss se hur man gör en responsiv webbdesign från en enkel mall.
Hjälptaggar för att skriva:
- wrapper - tagg som kombinerar alla mallelement;
- header h1 - logotyp;
- header - rubrik för meny och andra viktiga element;
- content - block;
- colLeft - innehållsstorlek;
- colRight - sidofält (sidokolumn);
- sidfot - den sista delen av webbplatsen;
- mediaskärm - setönskad upplösning.
När du skriver en webbplats kan dessa element flyttas i en annan ordning, beroende på behovet. Till exempel, vid höga upplösningar kan menyn visas vertik alt. I mobilversionen kan layouten byggas så att menyn glider ut i horisontellt läge.
- viewport - en tagg som låter dig spara storleken på texten i en mindre version av designen. Den är placerad mellan taggarna.
- max-width - för att optimera webbplatsen för att undvika sträckning vid upplösningar över 1000 pixlar.
När du implementerar layouten hjälper jQuery-biblioteket mycket när du behöver ändra stilen och strukturen på blocken.
Vad är skillnaden mellan responsiv och mobil design
För en fullständig förståelse, överväg några illustrativa exempel, eftersom förväxling mellan dessa två begrepp inte är ovanlig.
Du måste förstå att mobilversionen är en analog till den primära webbplatsen med en underdomän. Den externa presentationen av webbplatsen upprepar helt stilen och funktionaliteten, medan dess struktur och innehåll kan skilja sig från huvudversionen, eftersom versionen är nedskuren till de nödvändiga elementen.
Responsiv design är optimal för alla enhetsupplösningar. Den är skalbar och återges korrekt oavsett visningsförhållanden.
Det här är två olika presentationer av sajten, kring vilka tvister outtröttligt rasar vilken som är bäst. Det bör noteras att något definitivt beslut ännu inte har fattats. Någon berömmer denna design och pekar på modetrenden och många fördelar. Mobilversionen har också flera fördelar som responsiv design inte har. Därför bör du till att börja med förstå de grundläggande behoven.
Förmåner
Hur är responsiv design bättre än mobil?
Mångsidighet. I vår tid, med en sådan frenesierad tillväxt av marknaden, är det helt enkelt nödvändigt att presentera information på ett annat sätt, för att tillfredsställa konsumenternas önskemål. Responsiv design löser det här problemet.
Effektiv marknadsföring i sökmotorer. Vad kan inte hänföras till de viktigaste fördelarna med en adaptiv enhet. Sökmotorer föredrar att ge användarna responsiva webbplatser.
Användbarhet. Responsiv design utformas vanligtvis i de bästa designlösningarna, vilket är en fin present för användarnas visuella uppfattning.
Lätthet och enkelhet både i genomförandet av projektet och i dess användning.
Bra omvandlingsfrekvenser. Eftersom det med adaptiv design finns fler möjligheter till visning ökar själva konverteringen.
Ekonomi. Det är relativt billigare än att skapa och marknadsföra en separat mobilversion.
För- och nackdelar med mobilversionen
Att skapa en responsiv mobildesign kräver mångsidighet och konsekvens. Först och främst rekommenderas det att skriva ut referensvillkoren i detalj, vilket naturligtvis kommer att hjälpa till att undvika onödigt arbete och spara tid, samt ta hänsyn till funktionerna på servern där webbplatsen kommer att finnas..
Det finns vissa fördelar och nackdelar med mobil responsiv design.
Pros:
- Om du har en färdig sajt behöver du inte utveckla en design för mobilversionen från grunden. Endast ett fåtal ändringar kan göras, vilket frigör denna layout från onödiga funktioner.
- På grund av alla typer av förenklingar anses mobilversionen vara snabbare vid nedladdning.
- Användaren ser den viktigaste informationen i allt innehåll.
- Snabb implementering. Det finns plugins som du kan implementera mobilanpassning med, även om du inte känner till taggar och koder.
- Sökmotorval gynnar adaptiva versioner eftersom de tar kortare tid att analysera.
Nackdelar:
- Alla mobilversioner kanske inte matchar mobila enheters upplösningar. Sajten kommer naturligtvis att öppnas, men skärmupplösningen matchar inte alltid layouten. Ibland kan en väldesignad smartphone-design se annorlunda ut när den öppnas som en surfplatta.
- Mobilversioner kräver separata betaldomäner.
- Det finns några mindre problem med att lägga upp innehåll. Om det finns flera versioner samtidigt bör innehållet justeras för alla format samtidigt. Att skicka in nytt material på huvudsajten och kopiera det till mobilversionen kan betraktas som att stjäla. För att undvika detta problem kan du behöva bevisa anslutningen av resurser.
Metoder för implementering
Huvudimplementeringsmetoder:
- Efter att ha skapat designen av layouter och layout, laddas den till de erforderliga måtten med hjälp avoperatörsplats och huvudkod. Detta är en klassisk metod som används när man skapar medelstora och små versioner (surfplattor, smartphones, etc.).
- BootStrap är en enkel och tydlig uppsättning anpassningsverktyg. Lämplig för att skapa versioner för Landing Page och andra inte särskilt komplexa webbprojekt. Det ger en bra möjlighet att tillämpa många olika stilar i gränssnittsfunktioner.
- Responsive Grid System är en populär uppsättning mångsidiga verktyg. Lätt att applicera och kräver inga djupa kunskaper. Innehåller ett brett utbud av infografik.
- GUMBY - Ett CSS-ramverk med flexibel lyhördhet och fantastiska verktyg.
- Cookies – låter dig implementera responsiva bilder. Medföljer automatiskt filer som begärts av webbläsaren.
- ExpressionEngine är ett annat sätt att skapa responsiva bilder. Avgör om enheten är mobil och kan ändra bilder till önskad upplösning.
- ProtoFluid - Ger snabb prototypframställning. Lämplig för alla typer av enheter.
