Наконец настало то долгожданное время, когда с нетерпением закрываешь все дела и идешь в отпуск. Собираешь чемоданы, укладываешь всякие там солнцезащитные мазюки, берешь паспорт и ты готов к новым приключениям. И тут самое сложное – перелет! Проходит n-количество времени, пересекается не один океан, меняется континент и, казалось бы, все километры уже позади... А отпуск все никак не может начаться из-за Вашего состояния. И Вы тут вовсе не причем! Со здоровьем все хорошо, просто организм еще не готов, еще не адаптировался к новому воздуху, климату, воде или еде. Но проходит день, два и Вы снова в строю и готовы совершать подвиги и показывать всем, как надо отдыхать. Плохого состояния как не бывало. Все дело в том, что природа наделила нас удивительным организмом, который способен приспособиться к любым условиям. Так мы может адаптироваться и к жаре, и к холоду, и к чему угодно в принципе. В отличие от нас, сайты не наделены волшебной способностью самостоятельно адаптироваться под все устройства. Именно поэтому им нужна наша помощь. Ну, а если Вы все еще сомневаетесь нужно ли Вам адаптировать сайт, то, я думаю, будет уместным навести преимущества этого процесса. Итак, в несомненные лидеры наших плюсов выходят:
Довольно убедительный список плюсов касаемо адаптации сайтов. Если сомнения все еще живут в Ваших мозгах, то наведу один не менее впечатляющий факт. 50 % посещения сайта Сваровски приходятся на мобильные устройства. Вывод: половина прибыли идет благодаря адаптации. Поэтому, если Ваша компания представляет свой бизнес в интернете, то она обязательно должна учитывать мобильный трафик.
Но если бы было все так просто, на этом статья бы и закончилась. Вы бы вынесли из этого всего, что адаптация необходима и делали или не делали ее. Но многие со мной могут поспорить и сказать: «А зачем адаптировать дизайн? Не лучше ли создать мобильную версию сайта?». Интересный вопрос, не правда ли? Для этого я, как Швейцария, приму нейтральную сторону в обсуждении, для того чтобы проанализировать и ту и ту версию.
Для начала разберемся в разнице между адаптивным дизайном и мобильной версией. Адаптивный дизайн, как мы уже говорили, очень похож на наше тело. Так как адаптивный дизайн используют для того чтобы сайт адекватно отображался на всех устройствах. А вот мобильная версия разрабатывается специально для пользователей сайта, которые используют смартфоны. Мобильная версия – это своего образа новое, усовершенствованное тело, которое учитывает потребности посетителей. Для того чтобы понять ху из ху, более подробно разберемся с этими понятиями ниже.
Адаптивный дизайн довольно экономное средство для того, чтобы сделать сайт удобным для пользователей. Чтобы адаптировать сайт под мобильные устройства нужно совместить размеры страниц, элементы сайта с размерами конкретного устройства. Но важно также помнить о том, что хоть страница и нормально отображается на экране Вашего телефона или планшета, но она весит столько, как и раньше. Это и есть самый большой недостаток, потому что такие страницы загружаются намного дольше, если учесть еще скорость мобильного интернета, то у посетителя вообще могут сдать нервы, и он просто покинет Ваш сайт.
Мобильная версия – это совершенно другой мир. Она обычно находится на поддомене основного сайта. Это особенность мобильной версии, так как это не очень хорошо для SEO. Вам нужно будет использовать множество редиректов от основной версии сайта к мобильной. В отличие от адаптивного дизайна, у мобильной версии совершенно нет проблем со скоростью, для этого убираются все ненужные функции, а индивидуальный дизайн помогает проще взаимодействовать с сайтом. И для новичков ясно, что такая версия стоит дороже, чем адаптивная. Но для того чтобы Вы не ломали голову, мы вывели две теоремы, которые сделают вашу жизнь легче.
Теорема первая: нет смысла делать мобильную версию для небольшого сайта, для него хватит простой адаптации.
Теорема вторая: если у Вас мощный сайт с большим количеством подгружаемых страниц и с тысячной аудиторией, то нужно создать мобильную версию.
Теоремы – это хорошо, но если у сайта нет ни адаптивного дизайна, ни мобильной версии – это уже плохо. Лучше хоть что-то из этого, чем вообще ничего.
Если Вы склоняетесь в сторону адаптации, то читайте дальше, если сомневаетесь, тоже читайте дальше. Вот решили Вы адаптировать сайт и первое что нужно сделать – это спросить у себя, а зачем мне это. Итак, уважаемые знатоки, вопрос: «Зачем?». Варианты ответа:
Внимание, знатоки, все три ответа правильные. Следующий вопрос: основы адаптивной верстки сайта. С таким вопросом, действительно нужно идти к знатокам, которые подскажут, что все начинается с проектирования. Для этого дизайнером необходимо уловить и правильно передать суть и главные идеи. Для адаптации используют такие макеты:
Теперь о каждом понемногу. Первый вид резиновый и уже из самого названия можно догадаться, что будет происходить с сайтом. Его будут сжимать до размера экрана мобильного телефона. Если так не получается, то блоки просто будут располагаться в ленте. Перемещение блоков создано для тех сайтов, у которых много колонок. Дополнительные блоки располагают в зависимости от того, какая ширина экрана. Переключения макетов – один из самых сложных методов, наверное, поэтому такой непопулярный. Суть его состоит в том, чтобы создать макет для каждого размера расширения экрана. Это сложно, но стоит того. Элементарная адаптивная верстка на то и элементарная, потому что благодаря этому способу мы просто должны масштабировать картинки и графику. Минус: отсутствие гибкости. И последний способ – это панели, который перешел из мобильных приложений. Плюс в том, что дополнительное меню может появляться при любом положении экрана. Вопрос исчерпан, но есть еще один и то на засыпку: «Какие технологии используют для адаптивной верстки?».
Гугл нам в помощь! Он говорит, что сейчас активно используют HTML5 и CSS3. Последняя из них – это новое поколение каскадных страниц. CSS3 применяется для того, чтобы задать такие параметры, как процент занимаемого пространства (например, 99 % рабочего пространства), размер элемента при определенном разрешении экрана и т.д. А HTML5 используют для разметки страницы. Чтобы выводимые объекты могли подстроиться под разрешение, классы, созданные путем применения CSS3-технологии, указываются в параметрах тегов HTML.
Уважаемы знатоки, игра окончена! Подведем итоги, для того чтобы адаптировать сайт нужно сделать пять шагов:
Все предельно ясно, поэтому прежде чем отправить Ваш сайт в отпуск – адаптируйте его анатомию. И Вам будет хорошо, и посетителям намного приятнее!
