Начини за оптимизиране на сайта за мобилни устройства
Как да се провери дали сайтът е пригодена за мобилни устройства?
Обикновено вътрешния оптимизацията се извършва с цел да се подобри положението в проблема чрез подобряване на ресурса. Ето защо би било логично и мобилността на първо място да се запитаме търсачките.
В новата версия се появи Yandex.Webmaster инструмент за бърза проверка на отделни страници на "mobiloprigodnost". Тази концепция включва присъствието на Yandex маркер за прозоречен изглед, на размера на текста на най-малко 12pt, напълно годни на екрана, без хоризонтална съдържание превъртане, както и липсата на съдържание не се поддържа от мобилни устройства. В случай, че не са адаптирани страници е твърде много, има специална известие в раздела за технически одит.
Google, като от своя страна, предлага вече няколко начини за оптимизиране на сайта за мобилни устройства:
Дори още по-полезни инструменти в популярни търсачки:
Какво да направя, за да се оптимизира вашия сайт за мобилни устройства?
"Каучук" оформление
Ако зададете размера на даден елемент в стандарт на климата (същите пиксела), тя ще има същата ширина, височина, независимо от устройството. На практика това означава заминали в чужбина образа на екрана, за да превъртите хоризонтално и зле четим текст.
Прозорецът за мета тагове се използва за предоставяне на информация за размера и мащаба браузъра на страницата. Той заяви в контейнер
и е необходима стъпка за "мобилизация" на сайта. Без този етикет, мобилни браузъри ще показват на страницата така, както си направили и на компютър, но с малък екран, можете да получите малко неудобно vyrviglazno елементи и текст.директива @media може да се използва за персонализиране на дизайна за различни устройства и разделителна способност на екрана.
Например, на някои стилове се появява само на екрани с резолюция по-малко от 960 пкс, трябва да добавите контейнера
тези редове:Също така, можете да зададете различни видове устройства и техните спецификации, минимална и максимална разделителна способност и др много примери, един ден и аз ще присъствам със силите и ги въвеждат в една дълга статия. Абонирай се за новини. да не пропуснете. Поглед към материала, докато възможностите за използване на DIV таг. Има най-пресният пример точно описва подробности за @media на приложението да конфигурира с уникален дизайн за различни видове устройства.
Мобилна версия v.s. адаптивна шаблон
Въпреки това, прилагането на горните методи може да доведе до някои проблеми, особено за начинаещи. Някои настройки директива, мета тагове ... Brrr. Просто включете специална приставка или инсталиране на адаптивна тема. Последният, между другото, като цяло нещата, удобен и полезен.
- Лесна употреба: Активира с едно кликване, плюс няколко основни настройки (и дори тогава не винаги);
- възможност по всяко време да се включите / изключите.
- приставки инхибират натоварване сайт;
- скромен набор от възможности за оформление. В действителност, ако не се рови в червата на плъгина, ще получите стандартен сайт като две капки вода, подобно на хиляди други, които използват тази възможност;
- може да има проблеми с едновременното използване с кеширане на плъгини. Например, когато кешът получава мобилна страница и след това показва дори от компютър;
- съществуването на социални бутони мрежи и други елементи, за да се добавят на ръка не винаги се предоставя от стандартните настройки допълнения. На практика, това е изпълнен с пропуснати Както и препубликуване на голям сегмент от аудиторията.
В бъдеще, като направи промени в шаблона, трябва да се придържат към принципите на гъвкавата оформление: посочете всички размери в проценти, а не пиксела, така че самите елементи се приспособяват към размера на екрана.
Плюс. красив дизайн, без излишно натоварване на сайта.
Минус. ако сайтът отдавна е съществувала, сменяйки темата може да се дължи на редица трудности, тъй като ще трябва отново да прехвърли важните части на страницата (броячите. бутони, икони и т.н.) към новия шаблон.