Cross-browser lay-out, "trekt" de zoekmachines

Wanneer de gecreëerde site is belangrijk in termen van de effectiviteit ervan is een cross-browser lay-out. Wat is het? Hoe het kan worden gedaan? Welke valkuilen zijn er?

Wat is cross-browser lay-out?

Html / css - is de basis voor het creëren van een site. Veel webmasters zijn geschikt voor deze volgens het principe: Ik voel me goed - en dat is genoeg. En hoe frustrerend is als je vanuit je webbrowser of mobiele apparaat, en de site niet correct wordt weergegeven. In dergelijke gevallen komt de hulp adaptief ontwerpen en lay-out cross-browser.

Css en html in dit geval, de ruggengraat, waardoor alle geïmplementeerd. In sommige gevallen, voor dit doel kan worden betrokken in JavaScript. Maar het uiteindelijke doel is hetzelfde - om ervoor te zorgen dat alles werkte op verschillende versies. Daarom, als u wilt cross-browser compatibiliteit te garanderen, zodat de site goed wordt weergegeven in alle browsers, is het noodzakelijk om de hele tijd te denken, vanaf het eerste moment van het werk op de site.

Walkthrough in het algemeen

Dus, laten we eens kijken naar hoe je cross-browser lay-out te maken. In eerste instantie moet bepalen welke programma's plaats zal werken. Houd er rekening mee dat het aantal webbrowsers dicht bij tweehonderd, dus probeer om iedereen te behagen - het is een ongelooflijke complexiteit. Kies daarom een getal van 3 tot en met 8. Om te beslissen wat te concentreren, kunt u gebruik maken en ondersteunende diensten zoals Yandex Metrika en Google Analytics. Daarna moet u weten hoe het probleem zal worden opgelost om cross-browser te bereiken.

Veel mensen doen hun bankzaken op kaki. Deze speciale codes, selectors en regels, die slechts een bepaalde browser begrijpt. Maar, gezien het feit dat je moet op zijn minst enkele tientallen inserts te schrijven voor verschillende browsers en browserversies, vele gooit een dergelijke benadering vanwege de hoge kosten, de duur en irrationeel. Sommige beroepen op het gebruik van deze bestanddelen, die op dezelfde manier worden weergegeven. Maar op hetzelfde moment vaak verloor een aantal belangrijke voordelen. Geringe verliezen, die meer parallelle en adaptief ontwerpen. Wat is het?

Responsive ontwerp

Deze benadering van de lay-out van de website, waarin de site is een rubber, dat wil zeggen, degenen die zich aanpassen aan verschillende schermformaten en browsers. Opgemerkt dient te worden dat adaptief ontwerpen en cross-browser compatibiliteit nauw met elkaar verweven zijn, en als ze het over één ding, het betekent meestal de tweede. Laten we eens kijken naar een snel voorbeeld.

Er zijn een aantal browsers, zoals Opera en Opera Mini. на мобильных телефонах. Voor het eerst gebruikt op desktop computers, en de tweede - op mobiele telefoons. In het algemeen zijn ze vergelijkbaar, maar hebben een aantal functies. In dergelijke gevallen is het belangrijk om de individuele bestanden en / of het gebruik van media queries te verbinden. Wat is het? In het eerste geval, het creëert een apart bestand, die gericht zijn op specifieke browser werken, en registreert hun uitdaging. In het tweede geval moet u het bestand met de media queries. Als uw programma voldoet aan de specifieke eisen van het geladen bestand in de gewenste configuratie.

Wat moet ik doen?

In eerste instantie moeten we niet vergeten dat bij het werken met html, cross-browser lay-out vereist speciale aandacht. Daarom moet u de maximale mogelijkheid van cascading style sheets te gebruiken voor een grotere efficiëntie. Tegelijkertijd moeten ook een aantal manieren van werken te veranderen. Zo veel onervaren mensen als ze wijzen op de grootte van iets, het gebruik pixels - px. Neem het voorbeeld van een grote inscriptie header, die de top van de site siert.

Ze breedte werd ingesteld op een snelheid van 800rh. Op het scherm in 1600rh zal het heel aantrekkelijk. Maar op 700rh het eruit zal zien belachelijk. Wat te doen in dit geval? U kunt de grootte in pixels, en het percentage niet opgeven! Houd de inschrijving zal geen vaste lengte, en de halve breedte van het scherm. Het percentage kan worden ingesteld en de afstand waarop een specifiek element aan de randen van het scherm worden geplaatst. Maar hier is wat te doen als het scherm is te klein?

Veronderstel dat het 300 pixels? In dit geval, zullen wij u helpen media query die vaststelling dient register breedte. En als het gelijk aan 700rh en minder is, is het mogelijk om vast te stellen dat het teken van 75% van de zetels zal bezetten. En indien de breedte gelijk aan 300 pixels of minder is, is het mogelijk blootstellen en 100%. Het hele onderwerp is zeer interessant en nuttig, zodat het kan worden bestudeerd in detail. Maar helaas, er is informatie over het boek, en zet alles in het artikel zal niet werken.

Waarom adaptieve cross-browser lay-out trekt de zoekmachines?

En het antwoord is heel simpel: omdat het laat zien dat ontwikkelaars volgen de site en maken het zo aangenaam mogelijk te maken voor de gebruikers. Dit betekent dat deze mensen kunnen worden aangemoedigd door ze een hogere positie te geven in de zoekmachines. Natuurlijk, uw site zal niet direct weergegeven op de top-1, maar in combinatie met andere factoren, zal dit sterk stijgen. Opgemerkt dient te worden dat dit niet alleen nutteloos vereiste, maar iets dat verdiende zo veel aandacht wordt besteed aan.

Immers, denk maar aan: wat is de gebruiker wanneer hij op een site die is niet erg prettig in het uiterlijk krijgt? Maar het kan gaan geloven dat de zoekmachine heeft een lage kwaliteit content! Daarom worden ze zorgvuldig geselecteerd, zodat sites die moeten worden aangeboden. Daarnaast is er ook het voordeel webmasters, omdat ze het genereren van hoge kwaliteit shell voor de inhoud, waarin mensen in staat zijn om de benodigde informatie van een hardware te verkrijgen zal zijn: computer, laptop, tablet, smartphone of mobiele telefoon. Daarom, hoe meer tevreden bezoekers, des te sneller groeiende site en de hoogte van het inkomen.

conclusie

Het is onmogelijk om niet te wijzen op de bescheiden feit dat de oprichting van cross-browser site met responsive design - het is niet gemakkelijk, een zeer lang en moeizaam. Daarom is het noodzakelijk om geduldig te zijn en vergeet niet dat discipline - het is een goede zaak! Misschien iets zal in eerste instantie verkeerd gaan, maar we moeten proberen om informatie te zoeken, maken gebruik van verschillende benaderingen en niet terug te trekken. En dan moet u krijgen een website die zal worden plezier te laten zien aan de bezoekers.