Cross-browser layout, "lockar" sökmotorer

När en webbplats skapas är det viktigt att säkerställa att dess effektivitet är cross-browser layout. Vad är det Hur kan det bli gjort? Vad är fallgroparna?

Vad är cross-browser layout?

Html / css är grunden för att skapa en webbplats. Många webbansvariga närmar sig detta enligt principen: Jag är bra - och nog. Och hur obehagligt är det när du kommer från din webbläsare eller mobilenhet, och webbplatsen visas felaktigt. I sådana fall kommer anpassningsdesign och cross-browser layout till undsättning.

Css och html är i detta fall ryggraden, medmed hjälp av vilket allt är realiserat. I vissa fall kan JavaScript användas för detta ändamål. Men det yttersta målet är att se till att allt fungerar på olika versioner. Därför, om det finns en önskan om att tillhandahålla kompatibilitet mellan webbläsare, så att webbplatsen är väl synlig i alla webbläsare, måste du tänka på det hela tiden, från den första sekundens arbete på webbplatsen.

Steg-för-steg-guide i allmänna termer

Så, låt oss titta på hur man gör detwebbläsarens layout. Ursprungligen är det nödvändigt att bestämma vilka program webbplatsen ska arbeta med. Observera att antalet webbläsare närmar sig två hundra, så att försöka att behaga alla är en fråga om otrolig komplexitet. Välj därför ett nummer i intervallet från 3 till 8. För att bestämma vad du ska fokusera på kan du använda hjälptjänsterna som Yandex Metrika och Google Analytics. Därefter ska du ta reda på hur problemet med att uppnå kompatibilitet mellan webbläsare kommer att lösas.

Många människor gör sitt bud för khaki. Dessa är specialkoder, väljare och regler, som endast en specifik webbläsare förstår. Men eftersom du måste skriva minst ett dussin av dessa inlägg för olika webbläsare och deras versioner, förkastar många detta tillvägagångssätt på grund av dess höga kostnader, varaktighet och irrationalitet. Vissa människor är beroende av användningen av de element som visas identiskt. Men ofta förloras ett antal viktiga fördelar. För att minimera förluster används den adaptiva konstruktionen parallellt. Vad är det

Adaptiv design

Detta är tillvägagångssättet för layout av webbplatser, under vilkaWebbplatsen är gjord gummi, det vill säga som anpassar sig till olika webbläsare och skärmstorlekar. Det bör noteras att adaptiv design och kompatibilitet mellan webbläsare är nära sammanflätade, och när de pratar om en sak, så betyder de som regel den andra. Låt oss titta på ett litet exempel.

Det finns sådana webbläsare som Opera och Opera Mini. Den första används på vanliga datorer, och den andra - på mobiltelefoner. I allmänhet är de liknande, men de har ett antal funktioner. I sådana fall är det viktigt att ansluta enskilda filer och / eller använda mediafrågor. Vad är det här? I det första fallet skapas separata filer som är inriktade på driften av en viss webbläsare, och deras samtal är föreskrivet. I det andra fallet behöver du filer med mediafrågor. Om det använda programmet uppfyller specifika krav laddas filen i önskad konfiguration.

Vad ska jag göra?

Ursprungligen bör det komma ihåg att närarbetar med html, cross-browser layout kräver särskild uppmärksamhet. För större effektivitet bör du därför maximera användningen av kaskad stilark. Det är också nödvändigt att ändra vissa arbetssätt. Så, många oerfarna människor, när de anger storleken på något, använder pixlar - px. Låt oss överväga ett exempel med en stor titel-tagg som pryder toppen av webbplatsen.

Den hade en bredd på 800px. Med en skärm i 1600 kommer det här att bli ganska attraktivt. Men på 700rh blir det löjligt. Vad ska man göra i det här fallet? Du kan ställa in storleken inte i pixlar, men i procent! Och inskriften kommer att uppta inte en fast längd, men halv bredden på skärmen. I procent kan du ange avståndet vid vilket ett visst element kommer att placeras från skärmens kanter. Men vad händer om skärmen är för liten?

Antag att han är 300? I det här fallet kommer vi att få hjälp av mediefrågan, som måste fixas med att fastställa bredden. Och om det är 700px eller mindre, kan det fastställas att inskriften kommer att uppta 75% av platsen. Och om bredden är 300px och mindre, kan du ställa in alla 100%. Generellt är ämnet mycket intressant och användbart, så det kan studeras i detalj. Men, tyvärr, här kommer informationen på boken och sätta allt i artikeln inte att fungera.

Varför innebär adaptiv layout för cross-browser att sökmotorer används?

Och svaret är väldigt enkelt: eftersom det indikerar att utvecklarna följer webbplatsen och gör det så roligt för sina användare som möjligt. Så, sådana personer kan uppmuntras genom att ge dem högre positioner i sökmotorerna. Naturligtvis kommer din webbplats inte att visas omedelbart på TOP-1, men i kombination med andra faktorer kan du klättra upp starkt. Det bör noteras att detta inte bara är ett meningslöst samtal, men något som förtjänade en sådan uppmärksamhet.

Tänk själv: Vad är det för användaren när han kommer till webbplatsen, vilket inte är väldigt trevligt externt? Men han kan dra slutsatsen att sökmotorn erbjuder lågkvalitativt innehåll! Därför väljer de så noggrant de webbplatser som ska erbjudas. Dessutom är det till fördel för webbansvariga, eftersom de skapar ett högkvalitativt skal för innehåll där personer kan få information som de är intresserade av att använda någon hårdvara: dator, bärbar dator, surfplatta, smartphone eller mobiltelefon. Följaktligen blir ju mer nöjda besökare, ju snabbare webbplatsen växer och inkomstnivån.

slutsats

Det är omöjligt att inte notera det blygsamma faktumet attAtt skapa en cross-browser-webbplats med en adaptiv design är inte en lätt uppgift, mycket lång och tidskrävande. Därför måste du vara tålmodig och kom ihåg att disciplinen är en bra sak! Kanske börjar något inte, men det är nödvändigt att försöka leta efter information, använda olika metoder och inte ge upp. Och då blir det nödvändigt att skapa en webbplats som visar intresse för sina besökare.