АДАПТИВНЫЙ ДИЗАЙН
Статья 2. Как сделать адаптивный сайт
(С) Гаузер Э.Г., Баку, 23.12.16
website: www.erichware.com
В первой части данного материала (смотрите статью “Зачем адаптировать сайты”) я писал о причинах и целях данного процесса. А здесь мы рассмотрим максимально простые варианты перевода своего дизайна в адаптивный без потери внешнего вида (в идеале).
Скажу сразу, что избежать такой потери можно не всегда. И тут уж надо выбирать - либо делать достаточно стандартный дизайн и без особых проблем его адаптировать, либо жертвовать дизайнерскими изысками на экране мобильного устройства.
Кстати, вы замечали, что если еще лет 5-10 назад все сайты были оформлены индивидуально и каждый имел свое лицо, то сейчас практически все сервисные, корпоративные и бизнес-сайты выглядят совершенно одинаково? Причина проста - дизайн должен быть адаптивным, и тут уже “не до жиру”, как говорится…
Итак, рассматривать будем на примерах моих собственных сайтов. Как вы знаете, я никогда не хотел делать что-то стандартное и, хотя не считаю себя дизайнером (и вообще не умею рисовать и не люблю возиться в фотошопе), я все же старался оформлять свои сайты как-то необычно.
Так вот. Среди моих творческих сайтов есть несколько разновидностей. Самый простой - это сайт полезных развлечений. Сделал я его недавно и сразу делал адаптивным. В плане оформления он прост до примитивности. Но это сделано сознательно, потому что содержимое сайта - тексты, тексты и еще раз тексты. Анекдоты и смешные рассказы, а также мои любимые стихи, притчи народов мира и т.д. Все это нужно просто читать, причем и с мобильного телефона чтение должно быть легким.
Прежде всего отмечу, что на всех адаптивных сайтах используется специальный метатег вида “<meta name="viewport" content="width=device-width, initial-scale=1.0">”. Зачем он нужен?
В первой части я писал о том, что смартфоны имеют экран малого физического размера, но огромного разрешения в пикселях. Это означает, что размеры пикселей его экрана гораздо меньше размеров пикселей на экране компьютера. И без этого метатега, ясное дело, на экране смартфона сайт будет выглядеть внешне точно так же, как на компьютере, только в несколько раз мельче. И какие надо иметь глаза, чтобы его разглядеть? И какие надо иметь пальцы, чтобы нажимать на микроскопические кнопки или текстовые ссылки, не задевая при этом соседние?
Данный тег и предназначен для того, чтобы линейные размеры элементов на странице соответствовали своим размерам на типичных экранах больших компьютеров. На самом деле с его помощью можно много чего делать (если значения параметров менять), но нас интересуют конкретно адаптивные сайты и там метатег указывается именно в приведенном выше виде. Просто поставьте его в пространство между тегами “<head>” “</head>” в заголовке страницы.
Но что увидит посетитель сайта на экране своего смартфона после этого? Ведь элементы страницы чаще всего имеют фиксированный в пикселях размер (изображения уж точно), а значит, на маленьком экране смартфона они просто не поместятся в указанном этим тегом масштабе 1:1! И появится на экране ненавистная горизонтальная прокрутка (а если параметры страницы указаны неверно, то правая часть страницы просто пропадет за границей экрана). Что делать?
Вот тут и появляется необходимость по-настоящему адаптировать контент страницы к разным устройствам…
Основные требования к адаптивности сайта (в частности, по таким критериям адаптивность сайта проверяется роботами поисковых систем) включают в себя следующие пункты:
1. Отсутствие горизонтальной прокрутки.
2. Достаточный размер шрифта текста (чтобы глаза не напрягать).
3. Достаточный размер ссылок и достаточные расстояния между ними (чтобы пальцем не задевать соседние) - и в меню, и в тексте.
4. Отсутствие флеш-анимации (и прочих прибамбасов, требующих установки сторонних плагинов).
5. Отсутствие рекламных баннеров, закрывающих контент сайта без возможности их отключения (иногда такой вариант встречается - на сам сайт тогда попасть просто невозможно).
Ну, последние два пункта все же встречаются редко сейчас, да и отделаться от них проще простого (если, конечно, ваш сайт не сделан именно на флеше). А вот первые три как раз и требуют процесса адаптации.
Вернемся к моему сайту развлечений. Он состоит из шапки-картинки, горизонтального меню разделов и двух колонок: узкая левая содержит вспомогательные элементы, а широкая правая - основной контент.
На большом экране компьютера сайт имеет фиксированную ширину и вполне нормально воспринимается. Но если его “как есть” отобразить на экране мобильника, будет плохо: большая картинка в шапке вызовет горизонтальный скролл, а если ее просто убрать, то две колонки на экран не поместятся все равно.
И на помощь приходит “css”. К счастью, современные его возможности позволяют сделать очень многое, а самое главное - показывать разные стили для разного размера экрана. Что нужно сделать?
1. Менять размер шапки в соответствии с размером экрана. Не ней нет ничего важного по содержанию, это просто изображение как символ сайта. И при уменьшении его размеров ничего не теряется.
2. Левую колонку нужно передвинуть вниз, под правую. Ведь ее назначение вспомогательное, и посетитель, в принципе, вполне может вообще ее не использовать. Зато вся ширина экрана освободится для контента сайта.
3. Нужно свернуть меню. Как? Это делается обычно через скрипты (см. дальше), но на данном сайте я решил просто сдвигать пункты меню в несколько строк. Да, это не так красиво, но зато очень просто. И, к тому же, в данном случае не вступает в противоречие с дизайном сайта.
Как это все сделано? Я думаю, нет смысла подробно разбирать тут код сайта и стилей, нам ведь нужно еще другие варианты рассмотреть… Кто умеет сам читать и писать код - тот просто посмотрит “внутренность” сайта и сделает свои выводы. А кто вообще не умеет - тот пусть лучше обращается ко мне. А то можно таких дел натворить...
Кстати, указанный выше сайт хорошо смотрится не только на мобильных устройствах, но и на большом экране при изменении размеров окна браузера. То есть сайт адаптируется не к устройству как таковому, а к размеру видимой области. И это мне кажется наиболее правильным вариантом.
Второй сайт, о котором стоит тут написать, это сайт про Аюрведу в Баку. В принципе, этот сайт тоже текстовый, хотя там есть и несколько иллюстраций. Так вот, он достаточно прост (там всего одна колонка), но зато меню нельзя распределить на несколько строк, это испортит все оформление сайта. И значит, нужно меню “сворачивать”. Что это значит?
Это значит, что на сайте появляется кнопка “Меню”, нажатие которой приводит к открытию всех пунктов меню поверх контента сайта. Посетитель тыкает пальцем в нужный ему пункт, меню сворачивается и открывается нужная страница. Строчки меню чаще всего делают в полную ширину устройства, но я оставил им их истинные размеры. Лично мне так больше нравится…
Еще одно отличие от предыдущего сайта - необходимость на экране мобильного телефона поменять местами меню и шапку. Зачем? Так сейчас принято, чтобы меню сайта было с самого верха. И, честно говоря, так действительно удобнее и посетителю, и даже создателю сайта (привязать меню к самому верху проще, чем располагать его в середине страницы).
И вот тут уже нужны скрипты. И не просто скрипты, а “квери” (“jquery”). Но описывать тут работу этой распространенной библиотеки я не буду. Ее возможности огромны и на данном сайте используется ничтожная их часть, но код библиотеки не предназначен для редактирования и “вытаскивания” оттуда нужных функций, поэтому все грузят ее полностью. Файл великоват, но сейчас времена уже не те, когда имел значение каждый передаваемый по сети килобайт…
Как видно, оба рассмотренных сайта сохраняют свое оформление на любом устройстве. Но это возможно не всегда. Например, если рассматривать мой сайт документальной фотографии, картина будет иной. Почему?
Посмотрите на фотосайт с большого экрана. Его главная страница оформлена довольно неплохо, как мне кажется. Оформление и оригинальное, и полностью авторское, т.е. я не искал в интернете картинки (как это обычно делается), а использовал снятый мной пейзаж и сделанное мной же фото моего основного фотоаппарата.
Но на экране смартфона вся эта оригинальная идея (с мигающей лампочкой и анимацией) показана быть не может. И мне пришлось сделать два варианта страницы, о чем упоминалось в первой части статьи. Получилось нечто вроде “вап-версии”, о чем, кстати, я открыто написал на показываемой с телефона странице. Пусть посетитель знает, что видит не настоящий сайт, а его адаптацию!
Чисто технически это делается просто: создаются два блока с информацией, одна для большого экрана, другая для маленького. И в зависимости от размеров текущей видимой области включается то один блок, то второй.
Конечно, этот метод хорош не для любого сайта. Если содержимое страницы очень объемно, такой метод может вызвать и нарекание поисковиков, и трудности с загрузкой и показом. В этом случае, возможно, средствами обычного “html” и не обойтись. Впрочем, сейчас мало кто делает сайты на чистом “html”, а если у вас CMS (система управления контентом сайта), то там работает “php” и все делается иначе. Но этот вариант в данной статье не рассматривается.
Я не буду приводить в этой статье подробное описание и примеры кодов. Там все достаточно просто на самом деле. И если вы хотите воспользоваться моими советами, то просто откройте исходный код указанных тут сайтов и посмотрите. И сделайте аналогично. Когда-то, много лет назад, когда я начинал делать сайты, у меня не было почти никакого описания языка html. Так что я так и делал - искал подходящие по виду сайты и копировал их элементы. Разумеется, разбираясь в том, что делаю, а не вслепую.
В данном случае я не только предоставляю свой код для подобного изучения и применения, но и объясняю, что и как там сделано. Поверьте - это все очень просто! Хотя если вы вообще сами не можете делать сайты и копаться в коде, то нужно обратиться к специалисту. Можно обратиться и ко мне, чтобы я сам внес нужные изменения в код вашего сайта.
Успехов!