Доля мобильного трафика постоянно растёт и уже превышает десктопный. Мобильная или адаптивная версия сайта уже не просто прихоть поисковых гигантов, а коммерческая необходимость. Выбрать мобильную или адаптивную версию сайта - выбор лично каждого. Факторов для выбора достаточно, но статья, всё же, не о том :)
Сделать свой сайт адаптивным можно самостоятельно, или можно привлечь к этой работе людей с опытом. Как привлечь или выбрать профессионала рассказывать не буду, расскажу, как сделать адаптивную версию самому.
Для начала нужны базовые знания в HTML и CSS. Т.е. нужно знать где, что и, главное, как можно изменять.
Знания HTML
Знания HTML нужны, в основном, для 2-х вещей:
- — знать куда поставить метатег viewport;
- — для понимания того какие теги есть на странице, как они себя ведут и как взаимодействуют с другими тегами.
Метатег viewport
Метатег viewport используется для связи размеров экрана пользователя и экрана браузера. На странице его вставляют внутри тега <head>, где также находятся теги с названием страницы, описанием и прочими сервисными метатегами.
Базовый вариант для вставки выглядит так:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Эта запись буквально означает приравнять ширину окна браузера к ширине экрана устройства и установить масштаб станицы 1:1. Надо сказать, что запись про масштаб не будет работать, если пользователь намеренно указал у себя в настройках другой масштаб.
Иногда в метатег добавляют запись
maximum-scale=1.0, user-scalable=no
Я бы не рекомендовал это делать, хотя для iPhone часто приходится так делать. Пользователю не всегда может быть удобен выбранный нами для адаптивной версии размер картинок и шрифта. И пользователь должен иметь возможность увеличить страницу, не влезая в настройки браузера.
Детальнее о том, что такое viewport и как он работает расписывать не буду. Для самостоятельной адаптации сайта текущего знания достаточно.
Чтобы самостоятельно установить этот тэг нужно в шаблонах сайта найти место где заполняется шапка HTML-кода и где могут находятся теги <title> и <meta name="description".... />. Для поиска проще всего использовать поиск имени тега по файлам <head> или <title> (первого может и не быть).
Знания CSS
Здесь немного сложнее...
В теории при помощи только CSS можно переместить любой блок на странице в любое место. Но на практике нужно учитывать большое количество нюансов, чтобы это сделать.
Для начала, чтобы сделать базовую адаптацию нужно понимание того как работают css селекторы и в чём их разница. Самые простые селекторы могут быть такие:
- a - все теги <a> на сайте (все ссылки);
- .classname - все элементы со значением class="classname";
- #id - все элементы со значением id="id".
Знание селекторов нужно для того, чтобы понимать какие элементы будут изменены, если Вы пропишете свойства для конкретного селектора.
Так же нужно знать какие есть значения у свойств:
- position - позиционирование элемента на странице;
- float - выравнивание элемента на странице (это если просто);
- width - ширина элемента;
- height - высота элемента;
- margin - внешние отступы;
- padding - внутренние отступы;
- font-size - размер шрифта;
- line-height - высота строки.
Это минимум который нужно знать и понимать. Да, только с этими знаниями результат будет не самым идеальным, но его, всё же, можно получить. В процессе адаптации Вам все равно придётся замечать и изучать другие свойства, но без знаний свойств из этого списка начинать не имеет большого смысла.
Media queries
Есть ещё одно свойство в CSS, без знания которого процесс адаптации сайта под мобильные устройства очень усложняется. Это - медиа-запросы (media queries).
@media print {
}
Внутри этих запросов и пишется основной CSS-код для разных разрешений экранов. Обычно для адаптации сайта в медиа-запросах достаточно указывать только ширину экрана.
Ширину можно указывать как до определенного размера экрана
@media only screen and (max-width:767px) { ... }
так и после определенного размера экрана.
@media only screen and (min-width:768px) { ... }
Или можно указать промежуток
@media (mim-width:480px) and (max-width:768px) { ... }
Точки переключения свойств могут быть любые, на Ваше усмотрение, но плодить их сильно тоже не стоит. Большинство свойств CSS-селекторов наследуется вложенными элементами. И с каждый новый медиа-запрос или селектор будет затруднять дальнейшую работу по изменению внешнего вида сайта и созданию его адаптированной версии. В bootstrap, например, используются три точки переключения стилей: 768px, 992px и 1200px. Здесь ещё надо сказать, что минимальный размер экрана на данный момент - это 320px (например, такой размер экрана у iPhone 5), т.е. меньше этого значения прописывать стили не имеет большого смысла. Это не означает, что нет мобильных устройств с меньшим разрешением, просто их относительно мало.
Все стили стоит прописывать в файлах *.css. Есть, конечно, и другие места, но для их использования нужны уже другие знания и делать это нужно осторожно. А если Ваши разработчики используют препроцессоры для стилей, то придётся ещё прочитать и про них (в смысле про препроцессоры, хотя про разработчиков почитать тоже стоит, может есть повод поздравить кого-то с днём рождения).
О чём нужно помнить
Нужно помнить, что пользование сайтом на мобильных устройствах не такое, как на компьютерах. Например, часто взаимодействие с сайтом происходит одной рукой и даже одним большим пальцем.
Например, эффект наведения, как таковой, отсутствует на touch-устройствах, и если у Вас меню открывается по наведению мыши, то его работоспособность обязательно придётся проверять на реальных устройствах. А эффекты наведения, такие как подсветка ссылок и кнопок, желательно вообще отключать для мобильных устройств.
Всё это базовые знания, которые неизменно пригодятся для создания адаптивной версии сайта. Но очень часто этого недостаточно, т.к. не всегда всё на сайте удаётся так просто ужать, уменьшить и передвинуть. На сайте всегда найдутся какие-нибудь динамические блоки типа каруселей, сложных меню и всплывающих окон. Вот в такие моменты базовых знаний становится недостаточно. Здесь уже будут нужны знания JavaScript и серверных языков (на котором написан сайт).
На этом пока всё. Хорошей Вам адаптивной версии!
PS:> Ещё можно прочитать про то, как быстро и просто проверить адаптивность своего сайта, и с чего стоит начать продумывание адаптивной версии своего сайта.
PS2:> Вы всегда можете обратиться к нам, если нужна профессиональная помощь или консультация по адаптации Вашего сайта.