Адаптивная верстка или как сделать мобильную версию сайта?

Как я и обещал, пришла пора рассказать Вам, что такое "Адаптивная верстка" и как сделать мобильную версию сайта под смартфоны и планшеты, а так же понравиться поисковым системам!

А зачем вообще все это нужно?! Ведь жили же, как то раньше и ничего. Ну что тут сказать, интернет меняется, становиться лучше. Поисковые системы делают все возможное для удобства и комфорта пользователей… Здорово, правда :razz:

Да и трафик с гаджетов растет все больше и больше, день за днем! Веб-мастеру необходимо это учесть...

Так же рекомендую к прочтению:

Скорее всего, Поисковая система Google оповестила всех веб-мастеров о том, что предпочтение при ранжировании будет отдаваться сайтам, оптимизированным под мобильные устройства. Но, только при условии что, запрос был сделан не через персональный компьютер.

То есть, если пользователь зашел через смартфон или планшет, то сайты и блоги заточенные под них будут всегда выше, нежели те, которые этого не имеют! В остальных же случаях, я так понимаю, это правило не действует.

Вроде бы понятно объяснил?! Кто что не понял? Пишите в комментариях, вместе обсудим.

Так вот, совсем недавно, у меня был отпуск, решил побольше статей написать полезных, реализовать какие-нибудь интересные идеи, в общем провести отпуск с пользой, а не лежать на диване, хотя как хотелось м-м-м….

В один из прекрасных дней мне на электронную почту (впрочем все его получили) пришло такое сообщение:

И рухнули мои все планы... Думаю нужно идти в ногу со временем… и понеслось! Первым делом естественно, решил найти в сети какой-нибудь плагин, который сделает все четко и без меня :razz:

Мобильный сайт WordPress с помощью плагинов!

Как оказалось такие плагины существуют и в принципе выполняют свою функцию! Но, проверку Google - на удобство просмотра сайта с мобильного устройства, они не проходят! Уж не знаю почему, но Google упорно отказывается видеть изменения, перепробовал множество вариантов... По этому смысла их использовать нету...

Если Вы все же хотите использовать для этой цели плагины, то самые лучшие из них это:

WPtouch Mobile Plugin — Этот плагин мне понравился больше всего, все довольно просто и понятно, мой блог корректно отображался без каких либо косяков!

Не буду описывать каждый плагин, сами опробуете и определитесь:

MobilePress;
WordPress Mobile Pack;
Duda Mobile Website Builder;
WordPress Mobile Pack;
WordPress PDA & iPhone;
WPmob Lite;
WPtap News Press;
WP Mobile Detector;
WiziApp.

Еще минус плагинов в том, что они иногда подглючивают, например захожу через смартфон - все хорошо, повторил еще раз или обновил - показывает обычный сайт! Какая то загадка прям :|

Короче меня это не устроило и я продолжил искать лучшее решение!

Затем, решил поручить эту работу специалисту какому-нибудь на бирже фрилансеров, но после долгих раздумий решил научиться адаптивной верстке и сделать все сам! В конце концов я же разработчик сайтов и пришла пора повышать квалификацию…

Если кому интересно, то переделка сайта в адаптивный, стоит примерно от 5.000 рублей и выше... Не советую нанимать горе-специалистов, которые берут дешевле - скупой платит дважды! Да и на отзывы обращайте внимание...

Ладно, поехали дальше...

В общем начал я изучать эту тему, сначала теория, затем практика на своем блоге! Ну и в принципе научился, оказалось ничего сложного в этом нет, теперь мой блог адаптивный и подстраивается под любой экран и я рад как слон… Зайдите с любого смартфона ко мне на блог и Вы сами все увидите :razz: Найдете косяк - дайте знать...

Теперь поделюсь полученными знаниями с Вами и расскажу о наиболее важных моментах...

Варианты создания мобильного сайта?

Существует, на сколько мне известно, три направления. Разберем каждую технологию по отдельности, с какими плюсами и минусами мы можем столкнуться?!

Отдельная версия сайта - Это своего рода отдельный облегченный сайт, созданный специально для просмотра на мобильных устройствах или с низкой скоростью интернета. Обычно такую версию используют на поддоменах, например - основной сайт https://savme.ru, а мобильный http://wap.savme.ru или http://mobile.savme.ru. В данном случае используется перенаправление.

Плюсы:

Два независимых сайта - возможность менять контент, не затрагивая при этом другой сайт;
Скорость загрузки - так как мобильная версия независима от основной, сделать ее легкой и быстрой не составит труда;
Удобство - навигацию и контент проще заточить, вплоть до мелочей, так как сайт полностью рассчитан под мобильную аудиторию.

Минусы:

Дублирование контента - так как один и тот же контент будет и в основной версии и в мобильной. Возможно спасет мета-тег rel=canonical, но есть масса и других проблемм.
Срез функционала - как не крути но такой сайт будет урезанной копией основного сайта, отсюда совсем другие показатели статистики. Да и основная масса посетителей не любит различного рода ограничений и всегда переходит на основной сайт...
Перенаправления - как известно, различного рода редиректы негативно сказываются в сфере SEO.

Технология RESS - Тут используется вычисление на стороне сервера, смотря с какого устройства был заход - создается тот или иной макет (html и css). Называется это чудо - адаптивный веб-дизайн + специальное программное обеспечение на стороне сервера (RESS - Responsive Web Design и Server Side Components).

Плюсы:

Скорость загрузки - возможность удаления разных ненужных скриптов, стилей;
Меньший вес страницы - вместо того чтобы скрывать элементы как в адаптивной верстке их можно просто удалить;
Навигация - возможность настроить структуру под определенные устройства.

Минусы:

Нагрузка - дополнительная нагрузка на сервер.
Определение - чтобы выдать нужную версию сайта, нужно точно определить устройство посетителя, а с этим как я слышал не всегда все гладко.

Адаптивная верстка (веб-дизайн) - Эта верстка сайта подстраивается под любое разрешение экрана путем его определения с помощью CSS3 Media Queries. Как правило используется один и тот же ресурс, который содержит в себе различные варианты для отображения на смартфонах, планшетах и компьютерах...

Плюсы:

Сохранность - не зависимо от устройства используется один и тот же контент и набор html кодов;
Единый URL - для различных макетов используются одни и те же адреса и контент, нет дублей.

Минусы:

Скорость загрузки - так как загружаются все элементы и скрипты основного сайта, даже если они скрыты.
Навигация - сложность в создании продуманной мобильной навигации.

Делаем адаптивную верстку самостоятельно

Для своего блога я выбрал адаптивную верстку по нескольким причинам:

не нужно нарушать целостность основного сайта, блога;
используется один единый контент, одна база данных и так далее;
Лично для меня простота внедрения (потребуются знания html и css).

Теперь расскажу Вам о том, что нужно сделать, чтобы Ваш ресурс подстраивался под любые разрешения и понравился Google :razz:

Во первых нужно прописать мета-тег в :

Этим мы сообщаем браузеру, что ширина сайта должна равняться ширине гаджета, устройства, или что у Вас там ;)

Так же, если мы добавим еще и maximum-scale=1.0, user-scalable=no - то этим, мы запретим масштабирование, но я не рекомендую этого делать, пусть человек сам решает, может у него проблемы со зрением...

Вот, начало положено, теперь если мы зайдем через смартфон или еще что, то увидим как выглядит наш сайт! Печалька да?!

Это дело нужно будет исправлять с помощью Media Queries в файле стилей CSS, выглядит параметр так:

@media screen and (min-width:240px) and (max-width:720px) {
тут теги и атрибуты
}

То есть, эти стили будут применяться браузером от минимальной ширины 240px до максимальной 720px устройства! Если больше или меньше этих значений, то будут применены основные стили сайта. Все просто!

И вот таким макаром мы прописываем стили под разные разрешения устройств. Например:

смартфоны вертикально - от 240 до 340, от 341 до 420;
смартфоны горизонтально и некоторые планшеты вертикально - от 421 до 540, от 541 до 670;
планшеты вертикально - от 671 до 800;
планшеты горизонтально - от 801 до 1024

Если нужно показать какой-либо элемент: display:block, если же спрятать: display:none;

Чтобы узнать как выглядит сайт или блог на различных устройствах есть замечательные сервисы:

http://quirktools.com
http://www.emulateurmobile.com/
http://webmark.com.ua

Кстати, если Вам нужно сделать сайт адаптивным, но Вы уверены что сами не справитесь, да и желания особого нет, то я предлагаю свои услуги! Посмотреть мои работы и отправить заявку, можно на странице: услуги.

На этом у меня все! Надеюсь моя статья Вам реально помогла, в благодарность поделитесь ей =)

На клиентском сайте записал пример работы адаптивной верстки, если так и не поняли принцип ее работы обязательно смотрим. До скорой встречи! Пишите комментарии...