В текущата статия ще ви покажа как се изгражда мобилна версия на сайт чрез Media Queries от CSS3. Това е най-лесният и елегантен начин да изградите мобилна версия на Вашия сайт само чрез добавянето на няколко реда CSS код. Това е и единственият правилен начин да го направите. За повече подробности четете нататък и вижте текущия сайт toshkov.com на телефона си или в по-малък прозорец на екрана.

С времето все-повече се увеличава процентът на посетители, които влизат чрез мобилни устройства и таблети. Характерното за тези посетители е, че екраните на устройствата им са малки, както и възможностите им. Затова много хора започнаха да правят отделни версии на сайтовете си, специално проектирани за мобилните телефони.

Това е много грешно и ще ви кажа защо. Отделната версия на едно съдържание винаги крие рискове да създаде проблеми в търсачките заради дублирането на това съдържание. Да, тези рискове могат да се сведат до минимум чрез използването на canonical таг и други техники, но отново това не е вървене в правилната посока. Не е естествения начин, по който трябва да се случват нещата.

Правилният начин се казва Media Queries. Той предоставя възможност за условно изпълнение на CSS изрази спрямо големината на текущия екран и/или прозорец. Идеята е сайтът да има само една версия, която да се променя динамично спрямо големината на екрана. Ето един много прост пример, който би преоразмерил сайта ни, ако резолюцията е по-малка от 650px:

@media only screen and (max-device-width: 650px) {
  #wrapper {width: 90%;}
}

Оказва се, че само с няколко израза за смяна на ширини в проценти, може да се направи мобилна версия на всеки един сайт. И не само това, може да се направи версия и за мониторите с много висока резолюция, за да не се губи сайтът ни в тях. Лесно е, поддържа се широко от мобилните браузъри и е правилният, стандартен начин да се случват нещата.

Някои мобилни браузъри се опитват да "мислят" и сами да определят резолюцията, с която да визуализират сайта. За да се избегне това, в HEAD частта на документа ще се наложи да добавите и следния метатаг:

<meta name="viewport" content="width=device-width" />

Отдавна съм решил блогът ми да е с темата по подразбиране на Cloxy CMS. Така тествам HTML5 и Microdata елементите, които влагам в нея на един отговорен проект като личния ми блог. В този семантично издържан шаблон вече добавих стилове за малките екрани на мобилните телефони чрез Media Queries, за да е напълно готов за бъдещето.

Показах ви правилният начин как се прави мобилна версия на сайт. Това е и начинът, който ще остане за бъдещето. Новите технологии, както и отпадането на Flash, ще направят сайтовете по-бързи, по-малки като файлови размери и работещи на всички устройства, независимо от разделителната им способност. Ориентирайте се към тях!

За повече информация вижте официалната документация във W3C за Media Queries. Полезна ще ви е публикацията за адаптивен уеб дизайн на Георги Ангелов. Добри примери за адаптивен уеб дизайн може да намерите и на адрес mediaqueri.es.

#мобилна версия #сайт #адаптивен уеб дизайн #media queries #css3