Cross-browser layout, "tiltrække" søgemaskiner

Når et websted oprettes, er det vigtigt at sikre, at dens effektivitet er cross-browser layout. Hvad er det? Hvordan kan det gøres? Hvad er faldgruberne?

Hvad er cross-browser layout?

Html / css er grundlaget for at oprette en hjemmeside. Mange webmastere nærmer sig dette efter princippet: Jeg er god - og nok. Og hvor ubehagelig det er, når du kommer fra din browser eller mobilenhed, og webstedet vises forkert. I sådanne tilfælde kommer tilpasningsdesign og kryds-browser layout til undsætning.

Css og html er i dette tilfælde rygraden, medmed hjælp som alt er realiseret. I nogle tilfælde kan javascript bruges til dette formål. Men det ultimative mål er at sikre, at alt fungerer på forskellige versioner. Derfor, hvis der er et ønske om at give kompatibilitet på tværs af browseren, så webstedet er godt vist i alle browsere, skal du konstant tænke på dette fra det første sekund af arbejdet på webstedet.

Trin-for-trin vejledning i generelle termer

Så lad os se på, hvordan man gør detcross-browser layout. I første omgang er det nødvendigt at beslutte, hvilke programmer webstedet skal arbejde med. Vær opmærksom på, at antallet af browsere nærmer sig to hundrede, så forsøger at behage alle er et spørgsmål om utrolig kompleksitet. Vælg derfor et nummer i området fra 3 til 8. For at bestemme, hvad du skal fokusere på, kan du bruge hjælpetjenesterne som Yandex Metrika og Google Analytics. Herefter skal du finde ud af, hvordan problemet med at opnå kompatibilitet med browserens browser bliver løst.

Mange mennesker laver deres bud for khaki. Disse er specielle koder, selektorer og regler, som kun en bestemt browser forstår. Men i betragtning af at du skal skrive mindst et par dusin af disse indlæg til forskellige browsere og deres versioner, afviser mange denne tilgang på grund af dens høje omkostninger, varighed og irrationalitet. Nogle mennesker er afhængige af brugen af ​​de elementer, der vises identisk. Men ofte taber en række vigtige fordele. For at minimere tab er det adaptive design også brugt parallelt. Hvad er det?

Adaptive design

Dette er tilgangen til layout af websteder, hvorunderWebstedet er lavet gummi, det vil sige, der tilpasser sig forskellige browsere og skærmstørrelser. Det skal bemærkes, at fleksibel konstruktion og cross-browser kompatibilitet er tæt forbundne, og når de taler om en ting, er det som regel indebærer den anden. Lad os se på et lille eksempel.

Der er sådanne browsere som Opera og Opera Mini. Den første bruges på almindelige computere, og den anden - på mobiltelefoner. Generelt er de ens, men de har en række funktioner. I sådanne tilfælde er det vigtigt at forbinde individuelle filer og / eller bruge medieforespørgsler. Hvad er det her? I det første tilfælde oprettes der separate filer, der er rettet mod driften af ​​en bestemt browser, og deres opkald er foreskrevet. I det andet tilfælde har du brug for filer med medieforespørgsler. Hvis det anvendte program opfylder specifikke krav, lægges filen i den ønskede konfiguration.

Hvad skal jeg gøre?

Indledningsvis skal det huskes, at nårarbejder med html, cross-browser layout kræver særlig opmærksomhed. Derfor bør du maksimere brugen af ​​cascading stilark for større effektivitet. Det er også nødvendigt at ændre nogle tilgange til arbejde. Så mange uerfarne mennesker, når de angiver størrelsen af ​​noget, skal du bruge pixels - px. Lad os overveje et eksempel med en stor titel-tag, der pryder toppen af ​​webstedet.

Det havde en bredde på 800px. Med en skærm i 1600, vil det være ret attraktivt. Men på 700h skal det være latterligt. Hvad skal man gøre i dette tilfælde? Du kan indstille størrelsen ikke i pixels, men i procent! Og indskriften vil ikke optage en fast længde, men halvdelen af ​​skærmens bredde. I procent kan du angive den afstand, hvor et bestemt element vil blive placeret fra skærmens kanter. Men hvad nu hvis skærmen er for lille?

Antag at han er 300? I dette tilfælde vil vi blive hjulpet af medieforespørgslen, som skal løses ved at fastsætte bredden. Og hvis det er 700 px eller mindre, kan det fastslås, at indskriften vil optage 75% af stedet. Og hvis bredden er 300px og mindre, så kan du indstille alle 100%. Generelt er emnet meget interessant og nyttigt, så det kan studeres i detaljer. Men desværre vil oplysningerne om bogen og sætte alt i artiklen ikke virke.

Hvorfor involverer passive layout på tværs af browsere søgemaskiner?

Og svaret er meget simpelt: fordi det tyder på, at udviklerne følger webstedet og gør det så behageligt for deres brugere som muligt. Så sådanne mennesker kan opmuntres ved at give dem højere positioner i søgemaskinerne. Selvfølgelig vil dit websted ikke blive vist med det samme på TOP-1, men i kombination med andre faktorer kan du klatre op stærkt. Det skal bemærkes, at dette ikke kun er et ubrugeligt opkald, men noget der fortjente en sådan opmærksomhed.

Tænk selvfølgelig selv: hvad er det for brugeren, når han kommer til webstedet, hvilket ikke er meget behageligt eksternt? Men han kan komme til den konklusion, at søgemaskinen tilbyder lav kvalitet indhold! Derfor vælger de så omhyggeligt de websteder, der skal tilbydes. Derudover er dette en fordel for webmastere, fordi de opretter en kvalitetskal til indhold, hvor folk kan modtage de oplysninger, de er interesserede i at bruge hardware: computer, bærbar computer, tablet, smartphone eller mobiltelefon. Følgelig bliver de mere tilfredse besøgende, jo hurtigere bliver webstedet og indkomstniveauet.

konklusion

Det er umuligt ikke at bemærke det beskedne faktum, atat skabe et cross-browser site med et adaptivt design er ikke en nem opgave, meget lang og tidskrævende. Derfor skal du være tålmodig og husk at disciplin er en god ting! Måske vil noget i første omgang ikke fungere, men det er nødvendigt at forsøge at søge information, anvende forskellige tilgange og ikke give op. Og så bliver det nødvendigt at lave en hjemmeside, der viser enhver interesse for sine besøgende.