0 %

блог

Статьи, которые я написала
Адаптивный дизайн. Почему это важно?

До недавнего времени у многих компаний было две версии сайта – основная и мобильная. Они отличались и Ip-адресом и внешним видом, а зачастую страдало содержание. Веб-мастера создавали вариант для мобильного устройства по упрощенной версии. Это не всегда оправдывало ожидания заказчика. Сегодня на помощь дизайнерам приходит АДАПТИВНАЯ ВЕРСТКА.

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

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

    Выделяют следующие варианты адаптивной верстки:
  • Масштабирование управляющих элементов и кнопок. Экстерьер сайта при этом не меняется;
  • Применение различных образцов макетов;
  • Перемещение кнопок управления вниз;
  • Использование «резинового» адаптивного дизайна.

Но можно быть уверенным в одном: пользователи на любых устройствах увидят ваш сайт в неизменном и функциональном виде.

Продвижение сайта с адаптивным дизайном

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

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

Этому есть объяснения:

Адаптивная верстка позитивно оценивается поисковыми системами. У компании Google есть официальная рекомендация использовать адаптивный дизайн. Это делает более комфортным получение информации. При запросах в первую очередь будут предлагаться адаптивные сайты.

Остается один ip-адрес. Если у вашего сайта две версии: основная и мобильная, то трафик посещаемости поисковики будут считать отдельно. Это, в свою очередь, снижает ценность вашего сайта, и со временем вы начнете терять свои позиции. Поможет адаптивная верстка.

Вероятность «дублирования контента» сводится к минимуму. Информация вынужденно повторяется на двух версиях сайта. К сожалению, этого не избежать. Но поисковые системы устроены таким образом, что копирование одного и того же контента плохо влияет на позиции сайта в целом. Адаптивный дизайн убирает данное противоречие.

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

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

Слова, часто используемые в CSS-классах
    ИЗОБРАЖЕНИЯ
  • image, img, picture, pic — картинка;
  • icon — иконка;
  • logo — логотип;
  • userpic, avatar — юзерпик, маленькая картинка пользователя;
  • thumbnail, thumb — миниатюра, уменьшенное изображение.
    ТЕКСТ
  • title, subject, heading, headline, caption — заголовок;
  • subtitle — подзаголовок;
  • text — текстовый контент;
  • desc — описание, вариант текстового контента;
  • link — ссылка;
  • copyright, copy — копирайт.
    СПИСКИ
  • list, items — список;
  • item — элемент списка.
    БЛОКИ
  • page — корневой элемент страницы;
  • header — шапка (страницы или элемента);
  • footer — подвал (страницы или элемента);
  • section — раздел контента (один из нескольких);
  • content — содержимое элемента;
  • sidebar — боковая колонка (страницы или элемента);
  • aside — блок с дополнительной информацией.
    РАСКЛАДКА
  • wrapper, wrap — обёртка;
  • container, holder, box — контейнер;
  • grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col);
  • row — контейнер в виде строки;
  • col, column — контейнер в виде столбца.
    ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
  • button, btn — кнопка, например, для отправки формы;
  • control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером;
  • dropdown — выпадающий список.
    РАЗМЕРЫ
  • tiny — маленький, крохотный;
  • small — небольшой;
  • medium — средний;
  • big, large — большой;
  • huge — огромный;
  • narrow — узкий;
  • wide — широкий.
    РАЗНОЕ
  • search — поиск;
  • socials — блок иконок соцсетей;
  • features, benefits — список основных особенностей товара, услуги;
  • slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого;
  • pagination — постраничная навигация;
  • user, author — пользователь, автор записи или комментария;
  • cart, basket — корзина;
  • breadcrumbs — навигационная цепочка, «хлебные крошки»;
  • more, all — ссылка на полную информацию;
  • modal — модальное (диалоговое) окно;
  • popup — всплывающее окно;
  • tooltip, tip — всплывающее подсказки;
  • preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию;
    СОСТОЯНИЯ
  • active, current — активный элемент, например, текущий пункт меню;
  • hidden — скрытый элемент;
  • error — статус ошибки;
  • warning — статус предупреждения;
  • success — статус успешного выполнения задачи;
  • pending — состояние ожидания, например, перед сменой статуса на error или success.
Зачем нужен LANDING PAGE?

Landing page - продающая страница для конвертации посетителя в покупателя.

Чаще всего это страницы, на которых пользователь выполняет конкретное целевое действие, впоследствии приносящее прибыль владельцу сайта. Основные виды целевых действий - это звонок, заказ товара, заполнение формы или анкеты с данными. Продающие страницы также могут называться посадочными (перевод с английского словосочетания «landing pages») или целевыми (на них посетители совершают целевое действие).

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

Photoshop - save for web. Какой формат выбрать?

Не секрет, что верстальщики работают в первую очередь с Photoshop. А там, при сохранении изображения для web, есть возможность выбрать формат.

Если изображение не имеет прозрачности, то рекомендуют использовать JPEG ( JPG ) с качеством 60-70%. Такой процент не сильно снизит качество, зато очень даже неплохо снизит вес изображения.

Это, пожалуй, самый распространенный графический формат. Обычно он используется для публикации в интернете фотографий и изображений с текстом. Данный формат может отображать более 16 млн цветов. Является популярным расширением для цифровых фотографий, которые имеют яркие цвета и мелкие детали.Свою популярность JPEG заслужил гибкой возможностью сжатия данных. Если нужно, изображение можно сохранить с высоким качеством. При использовании алгоритма сжатия с потерями, с каждым сохранением файла происходит потеря качества изображения.

Формат JPEG не поддерживает прозрачность, что делает его практически бесполезным для логотипов и иконок.

Существует 2 формата, поддерживающих прозрачность: GIF и PNG.

Раньше все использовали GIF, т.к. он лучше всего сжимал изображения.Впоследствии появился PNG (портативная сетевая графика ) с новым алгоритмом сжатия, и изображения стали весить еще меньше. На качестве это отразилось только с лучшей стороны. Теперь формат GIF используют практически только для анимации.В отличии от GIF, у PNG есть поддержка градаций прозрачности за счет дополнительного альфа-канала.Внешне файлы в формате PNG практически не отличаются от JPEG -изображений. PNG сжимает данные без потерь. Если для вас важна прозрачность, лучше выбирать именно этот формат.

Существует два типа PNG — PNG-8 и PNG-24.

PNG-8 использует более ограниченную цветовую палитру всего с 256 цветами, имеет несколько лучшую прозрачность и экспортируется в небольшом размере.

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

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

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