Адаптивная верстка страниц сайта - что это такое?

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

Если вы на любой странице этого сайта нажмете правую кнопку и выберите пункт Просмотр кода страницы (или Исходный код страницы), вы увидите часть этого кода. Это HTML-разметка страницы. Также здесь присутствуют файлы CSS-стилей, которые задают внешний вид сайта. Если их убрать, останется только разметка страницы - блоки с текстами и ссылками друг за другом, без какого-либо форматирования.

Так выглядит сайт без стилей:

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

Таким образом, верстка - это создание HTML-шаблона. Часто заказчики предпочитают не создавать собственный дизайн с нуля, а купить уже готовый сверстанный шаблон. И уже с этим шаблоном обращаются в веб-студию, чтобы из него сделали хороший рабочий сайт.

Профессиональный верстальщик должен знать основные фреймворки для создания верстки сайтов, уметь делать анимацию на сайте, использовать адаптивную верстку (такая верстка позволяет сайту смотреться хорошо на всех размерах экрана).

Обычно верстальщик делает несколько вещей:

- Превращает макет в html-шаблон.

- Адаптирует шаблон под все устройства и браузеры.

- Добавляет необходимый функционал с помощью JavaScript. Например, появляющееся по кнопке модальное окно, переход к следующему слайду по стрелочке вправо или влево.

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

Как проверить верстку вашего сайта

Вам нужно проверить, хорошо ли ваш сайт смотрится на всех популярных браузерах и размерах экранов.

Проверить кроссбраузерность верстки можно несколькими способами.

Если ваша профессия не связана с разработкой сайтов, просто установите несколько популярных браузеров: Chrome, Firefox, Opera, Internet Explorer, а также рекомендую Blisk. Если в нем дизайн показывается без ошибок, то он, скорее всего, также будет работать и на Safari - браузере для Mac, iPhone и iPad.

Либо с помощью этого сервиса:

https://crossbrowsertesting.com

Сервис платный, но с бесплатным триальным периодом. Этого хватит, чтобы протестировать несколько проектов.

Адаптивность верстки можно протестировать все тем же Blisk'ом. Помните, что этот браузер платный. Однако у него есть бесплатный функционал. Если вам нужно просто проверить свой сайт либо работу верстальщика, вам будет достаточно этого функционала.

Бесплатный онлайн-сервис:

https://screenfly.org

Но в нем есть не все нужные размеры экранов.

Еще один сервис, доступный в Google Search Console:

https://search.google.com/test/mobile-friendl

Здесь Гугл вам просто покажет отчет, оптимизирована ли ваша страница для мобильных или нет.

Ошибки верстки проверяются этими сервисами:

https://validator.w3.org

http://jigsaw.w3.org/css-validator

Если вы видите множество критических ошибок, обратитесь к разработчику для их устранения. Некоторые ошибки являются ошибками CMS. Обращать на них внимание особо не стоит. Рано или поздно выйдет обновление, и все серьезные недочеты будут исправлены.

Mobile Friendly сайт

Адаптированный под мобильные устройства сайт имеет не только красивый вид. Он также нацелен на выполнение тех же задач, что и сайт на десктопе. Так если на основном сайте есть поиск, то в мобильной версии он тоже должен быть.

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

Адаптивный сайт удобен для пользования. Кнопки не должны быть слишком маленькими, текст нечитабельным.

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

Телефон и емейл на экранах смартфонов часто обозначают иконками.

Есть элементы, которые плохо адаптируются. Например, пользовательские таблицы, особенно те, которые имеют больше 2-3 столбцов. Если таблицы являются элементом дизайна и разработаны дизайнером, то верстальщик адаптирует их для мобильных устройств. Другое дело, когда таблицы создаются пользователем в админке и вставляются на сайт без участия верстальщика. В этом случае сложно привести таблицы к какому-то красивому виду.

Решается эта проблема несколькими способами:

1. Ко всем таблицам, созданным на сайте, автоматически добавляется горизонтальная прокрутка. Это не особо красиво, и такую опцию нужно оставить на усмотрение администратора сайта. Если таблица в мобильной версии смотрится плохо или неинформативна для пользователей, он разбивает ее на несколько таблиц.

2. Для таблиц задается определенный вид в мобильной версии. Например, первый левый столбец становится заголовком. Верхние столбцы выносятся влево - они становятся параметрами. А справа к ним подставляются значения из ячеек таблицы. Такой вид задается для каждой строки таблицы. Функционал этот сложнее разработать, он может не подойти абсолютно всем созданным таблицам, поскольку таблицы могут иметь различную структуру.

Поэтому обычно достаточно первого способа, так как таблицы используются не очень часто.

Как адаптировать ваш сайт под мобильные устройства

У вас уже есть сайт, но дизайн его не адаптирован для мобильных. Такое бывает, когда сайт создавался давно. Раньше не считали нужным оптимизировать вебсайты для различных устройств, поскольку с телефонов было дорого и неудобно выходить в интернет. Также такое возможно, если вы установили некачественный шаблон. Или недобросовестная студия или фрилансер сделали вам неадаптивный дизайн. Сейчас большинство адекватных веб-студий делает дизайн адаптивным по умолчанию. Эту услугу не нужно заказывать дополнительно, ведь без адаптивного дизайна сайт неполноценен.

И тем не менее, не так давно в г. Иркутске я столкнулась с тем, что клиент заказал редизайн сайта в одной иркутской веб-студии. Ему сделали неадаптивную версию, изменили структуру сайта, не сделав редиректы, из-за чего сайт потерял позиции в поисковиках. А когда заказчики обратились с претензиями, отказались дорабатывать и устранять ошибки, потому что "в договоре это не прописано". Оно, конечно, так, но профессиональная веб-студия всегда предупредит клиента о будущих проблемах и способах их решения. А также исправит ошибки, если по какой-то причине клиента не предупредили. Конечно же, заказчики отказались дальше сотрудничать с этой веб-студией, поскольку утратили доверие. И обратились ко мне.

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

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

Также вы можете купить готовый шаблон и установить его с помощью веб-разработчика на свой сайт.

Самым дешевым вариантом является адаптация существующего шаблона. Разработка дизайна и установка шаблона требует времени, это трудоемкий процесс. Адаптация шаблона подойдет вам, если у вас качественный дизайн на десктопе, и он полностью вас устраивает.

Отличия адаптивного дизайна от мобильной версии дизайна

Есть два вида адаптации шаблона:

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

- Мобильная версия - это отдельный ресурс, для которого разрабатывается дизайн. Такой способ использует Вконтакте.

Сравните:

https://vk.com/fireleit

и

https://m.vk.com/fireleit

Для мобильной версии Вконтакте создал поддомен. Когда пользователь переходит на сайт ВК, скрипт автоматически определяет, с какого устройства зашел пользователь. И если со смартфона, то он перенаправляется на мобильную версию сайта.

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

Преимущества мобильной версии:

- Есть только необходимый для мобильной версии функционал.

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

- Всегда можно переключиться на десктопную версию.

Преимущества адаптивного дизайна:

- Прост в реализации, поскольку используется уже готовый шаблон.

- Не нужно создавать отдельный сайт.

- Легче продвигать в поисковиках.

Недостатки мобильной версии:

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

- Сложнее и дороже разработать.

Недостатки адаптивного дизайна

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

- Нельзя переключиться на десктопную версию, если что-то непонятно или неудобно.

Примеры неудачной верстки

https://www.theworldsworstwebsiteever.com

Этот сайт имеет название Худший сайт в мире. Возможно, есть и хуже. По крайней мере, сразу понятно, о чем сайт. А вот дизайн действительно ужасен.

http://www.arngren.net

Норвежский сайт по типу Amazon. Однако он больше напоминает газету с объявлениями. И то в газете было больше порядка.

http://www.miauk.com

Ну, как минимум, дешево и некрасиво. Но насколько нам известно, раньше сайт был еще более ужасен.

http://altenpohl.de

Жутко...

https://www.historianofthefuturex.com

Здесь помимо некрасивого дизайна еще и текст не видно.

Фреймворки для верстки

Фреймворки используются верстальщиками для упрощения верстки. В них присутствуют основные классы и элементы.

Фреймворк - это заготовка будущего шаблона.

Вот несколько популярных фреймворков:

Bootstrap

Очень известный фреймворк. Есть кнопки, меню, выпадающие списки, слайдер, модальные окна. В основе лежит сетка для адаптивной верстки.

Foundation

Есть техническая поддержка, очень хорошие инструменты для адаптивной верстки

Skeleton

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

Вверх