Cross-browser lay-out, "aantrekken" van zoekmachines

Wanneer een website wordt gemaakt, is de lay-out van de verschillende browsers belangrijk in termen van effectiviteit. Wat is het? Hoe kan het worden gedaan? Welke valkuilen zijn er?

Wat is een lay-out voor verschillende browsers?

Html / css is de basis voor het maken van een site. Veel webmasters benaderen dit volgens het principe: ik voel me goed - en dat is genoeg. En hoe onaangenaam het is als u zich aanmeldt vanuit uw browser of mobiel apparaat en de site verkeerd wordt weergegeven. In dergelijke gevallen komt adaptief ontwerp en lay-out van verschillende browsers te hulp.

Css en html zijn in dit geval de backbone, metwaardoor alles wordt gerealiseerd. In sommige gevallen kan JavaScript voor dit doel worden gebruikt. Maar het uiteindelijke doel is hetzelfde - om alles op verschillende versies te laten werken. Daarom, als er een wens is om cross-browser compatibiliteit te bieden zodat de site goed wordt weergegeven in alle browsers, moet je er constant aan denken, vanaf de eerste seconde van het werk op de site.

Stapsgewijze handleiding in het algemeen

Laten we dus eens kijken hoe we het moeten doencross-browser lay-out. In eerste instantie moet u beslissen met welke programma's de site zal werken. Houd er rekening mee dat het aantal browsers bijna tweehonderd is, dus iedereen proberen te behagen is een kwestie van immense complexiteit. Kies daarom een ​​nummer in het bereik van 3 tot 8. Om te bepalen waarop u moet focussen, kunt u diensten als Yandex Metrika en Google Analytics gebruiken en ondersteunen. Hierna moet u ontdekken hoe het probleem van het bereiken van compatibiliteit tussen browsers kan worden opgelost.

Velen maken hun gok op kaki. Dit zijn speciale codes, selectors en regels die slechts één specifieke browser begrijpt. Maar aangezien u ten minste enkele tientallen van dergelijke invoegsels voor verschillende browsers en hun versies moet schrijven, verwerpen velen deze benadering vanwege de hoge kosten, duur en irrationaliteit ervan. Sommigen vertrouwen op het gebruik van items die op dezelfde manier worden weergegeven. Maar tegelijkertijd gaan een aantal belangrijke voordelen vaak verloren. Om verliezen te minimaliseren, wordt ook een adaptief ontwerp parallel gebruikt. Hoe is hij?

Adaptief ontwerp

Dit is een benadering van de lay-out van de website, gedurende welke periodeDe site is van rubber gemaakt, dat wil zeggen die zich aanpast aan verschillende browsers en schermformaten. Opgemerkt moet worden dat het adaptieve ontwerp en de compatibiliteit tussen browsers nauw met elkaar verweven zijn, en wanneer ze over één ding praten, impliceren ze meestal de tweede. Laten we een klein voorbeeld bekijken.

Er zijn browsers zoals Opera en Opera Mini. De eerste wordt gebruikt op gewone computers en de tweede - op mobiele telefoons. Over het algemeen zijn ze vergelijkbaar, maar hebben ze een aantal functies. In dergelijke gevallen is het belangrijk om afzonderlijke bestanden aan te sluiten en / of mediaquery's te gebruiken. Wat is dit? In het eerste geval worden afzonderlijke bestanden gemaakt die zijn gericht op het werk van een bepaalde browser en hun oproep wordt opgenomen. In het tweede geval zijn mediaverzoekbestanden vereist. Als het gebruikte programma aan de specifieke vereisten voldoet, wordt het bestand in de gewenste configuratie geladen.

Wat moet ik doen?

Onthoud in het begin dat wanneerwerken met HTML, cross-browser lay-out vereist speciale aandacht. Daarom moet u voor meer efficiëntie de mogelijkheden van cascading style sheets maximaliseren. Tegelijkertijd is het ook nodig om enkele benaderingen van het werk te veranderen. Veel onervaren mensen gebruiken pixels - px als ze de grootte van iets opgeven. Overweeg een voorbeeld met een groot bijschrift dat de bovenkant van de site siert.

Ze had een breedte van 800 pixels. Met een scherm van 1600 pixels zal het behoorlijk aantrekkelijk zijn. Maar op 700rh ziet het er belachelijk uit. Wat te doen in dit geval? U kunt de grootte niet in pixels instellen, maar in procent! En het bijschrift zal niet een vaste lengte innemen, maar de helft van de breedte van het scherm. Als een percentage kunt u ook de afstand instellen waarop een bepaald element vanaf de randen van het scherm wordt geplaatst. Maar wat als het scherm te klein is?

Stel dat het 300px is? In dit geval zal de media-aanvraag ons helpen, waarbij u de fixeerbreedte moet registreren. En als deze gelijk is aan 700 pixels en minder, kunt u vaststellen dat de inscriptie 75% van de ruimte inneemt. En als de breedte gelijk is aan 300 pixels en minder, dan kunt u instellen en helemaal 100%. Over het algemeen is het onderwerp erg interessant en nuttig, dus het kan tot in detail worden bestudeerd. Maar helaas, hier zal de informatie over het boek en alles in het artikel niet werken.

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

En het antwoord is vrij eenvoudig: Dit suggereert dat ontwikkelaars de site controleren en het zo aangenaam mogelijk maken voor hun gebruikers. Deze mensen kunnen dus worden aangemoedigd door hen hogere posities in zoekmachines te geven. Natuurlijk wordt uw site niet direct op de TOP-1 getoond, maar in combinatie met andere factoren kunt u veel gaan. Opgemerkt moet worden dat dit geen eenvoudige nutteloze vereiste is, maar iets dat dergelijke aandacht verdient.

Immers, denk zelf: Hoe is het voor een gebruiker wanneer hij een site betreedt die niet erg prettig oogt? Maar hij komt misschien op het idee dat de zoekmachine inhoud van lage kwaliteit biedt! Daarom selecteren zij zo zorgvuldig de sites die moeten worden aangeboden. Daarnaast is er een voordeel voor webmasters, omdat ze een hoogwaardige wrapper maken voor inhoud waarin mensen de informatie kunnen vinden waarin ze geïnteresseerd zijn in het gebruik van hardware: een computer, laptop, tablet, smartphone of mobiele telefoon. Hoe meer tevreden bezoekers, hoe sneller de site groeit en hoe hoger het inkomen.

conclusie

Het is onmogelijk om het bescheiden feit dat niet te noterenHet creëren van een website met meerdere browsers met een aangepast ontwerp is niet eenvoudig, zeer tijdrovend en tijdrovend. Daarom moet je geduldig zijn en onthouden dat discipline een groot ding is! Misschien zal iets in eerste instantie niet werken, maar het is noodzakelijk om te proberen, informatie op te zoeken, verschillende benaderingen te gebruiken en niet terug te trekken. En dan zal het zeker een site worden die geweldig is om het aan bezoekers te laten zien.