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

Адаптация сайта на мобильных устройствах

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

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

Для более детальной настройки отображения используем дополнительные значения

Ширина сайта на экранах мобильных устройств

Позволяет адаптировать ширину сайта под ширину экрана устройства

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

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

А в css шаблона впишем правило медизапроса при котором будут применяться стили при ширине экрана 600px. А так как мы задали именно это разрешение для отображения на экранах в мобильных устройствах, то будут использоваться стили указанных в заданных нами правилах. Общие стили будут применяться так же как и на обычном мониторе, но если мы какие либо стили указали в правилах, то эти стили будут заменяться дефолтными.

• Мы получим одинаковое отображение на различных разрешениях экранов.
• Нам нужно менять стили только для этого медизапроса, а не подстраивать под каждое разрешение экрана.

@media screen and (max-width: 600px)

Высота сайта на экранах мобильных устройств

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

Для исправления этой ошибки мы можем использовать правило

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

Запретить масштабирование на мобильном телефоне:

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)

Viewport:

Медиазапрос:

@media screen and (max-width: 600px) < body < font-size:1.5em; >… h2 < font-size:2.5em; >>

рис.1 Отображение сайта без метатега viewport

рис.2 Отображение сайта с атрибутом width=device-width

рис.3 Отображение сайта с атрибутом width=600

Верный viewport

Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:

Читайте также

1. Фреймворк для адаптивной верстки
2. Адаптивная верстка для мобильных устройств

Павел Сайк
8 лет назад
Комментарии 11
Добавить комментарий ×

меняю функцию в header.php но когда обновляю страницу функция остаётся старая, откуда она ещё может вылазить?

А width=device-width это самый оптимальный вориант да? Ну и height=device,height?
Павел Сайк 2 года назад
Мы используем в работе вот такое решение width=device-width, initial-scale=1.0
Константин 3 года назад
Спасибо. Вы очень выручили. 😀

Зачем нужна адаптация мобильной версии сайта и что это такое вообще? Вот недавно я задавалась тем же вопросом. Когда заимела свое дело, а это, не много нимало интернет магазин детских игрушек и других сопутствующих товаров, этот вопрос встал ребром. Не всегда оказалось люди открывают компьютер, что бы заказать товар. А более того, чаще это делают со своего смартфона. Ведь он служит так сказать заменой компьютеру или ноутбуку. Решила я для этого сделать мобильную верстку сайта, или по другому говоря: «адаптацию сайта под разные разрешения экрана». Сначала не скрою, изучив информацию пробовала самостоятельно. Но после тщетных пяти попыток плюнула на это и решила найти специалистов, которые сделают мне это качественно, быстро и не очень дорого. Но найти было не так просто. Либо цена меня не устраивала, либо то, как со мной общались потенциальные исполнители. В итоге нашла тех, кто мне подошел. К ним и обратилась. Сделали быстро и весьма за разумные деньги. breket-clinic.ru

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

Как адаптировать сайт под мобильные: ТОП-10 способов

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

10 методов, как оптимизировать сайт под мобильные устройства

1. Использование тега Viewport.
2. Отсутствие горизонтальной прокрутки.
3. Крупный размер шрифта.
4. Крупные значки.
5. Контрастный текст.
6. Настройка Gzip-сжатия.
7. Открытые для роботов стили CSS.
8. Быстрая загрузка сайта с мобильных.
9. Всплывающие окна не закрывают контент.
10. Ширина картинок и полей ввода 100%.

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

№1. Использование тега Viewport

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

Где viewport — название тега, device-width — указание, что ширина браузерного окна должна быть равна ширине устройства, а 1 означает необходимость использования оригинального масштаба. Таким образом вы сообщите браузеру, что сами адаптируете контент под размеры гаджета и ему не нужно менять масштаб, чтобы уместить все в область просмотра.

№2. Отсутствие горизонтальной прокрутки

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

№3. Крупный размер шрифта

Вчитываться в мелкий текст на телефоне никто не захочет — особенно люди с проблемами зрения. Адаптировать сайт под мобильные устройства — значит, в том числе, сделать текстовую информацию удобочитаемой. Увеличьте шрифт, чтобы пользователям не приходилось масштабировать страницу или напрягать глаза в попытке различить маленькие буквы. Для iOS-гаджетов стандарт обычного текста — 17pt, для Android — 13sp.

Рекомендуется также оптимизировать высоту строки (примерно 140% от кегля текста). Оптимально, если в длину она будет около 50–60 символов с пробелами.

№4. Крупные значки

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

№5. Контрастный текст

Черный шрифт на белом фоне — стандарт, который можно и нужно нарушать. Не стоит использовать резко контрастные цвета, чтобы, опять же, лишний раз не нагружать зрение пользователя. Например, вместо строгого черно-белого сочетания выберите темно-серый с белым. Человек может и не заметить разницы, но его глаза скажут вам спасибо. То же касается и обратной ситуации: белое на черном воспринимается еще хуже, поэтому для «темной темы» лучше подобрать разные оттенки серого. В интернете есть немало сервисов, которые помогают найти хорошие цветовые сочетания для адаптации текста на мобильных устройствах.

№6. Настройка Gzip-сжатия

Как мы уже сказали, оптимизировать нужно не только клиентскую, но и серверную часть. Технология gzip позволяет сжимать контент и целые страницы, чтобы ускорить их передачу браузеру. Настройте ее на своем сервере, чтобы перед отправкой файлы уменьшались в объеме, а после их получения пользователем — восстанавливались до привычного размера. Это рабочий способ адаптировать загрузку сайта под мобильные устройства, ведь так они будут тратить меньше трафика. Gzip-сжатие поддерживают все популярные веб-браузеры, так что проблем с ее внедрением возникнуть не должно.

№7. Открытые для роботов стили CSS

Поскольку сайт адаптируют через файлы стилей (.CSS), нужно, чтобы боты поисковых систем могли их просканировать. Без этого краулеры могут решить, что ресурс не адаптивен, а значит, следует понизить его в выдаче при запросах с мобильных устройств. Правила для индексирующих роботов обычно прописывают в robots.txt. Файл с таким именем находится в корневом каталоге проекта. Если его там нет, создайте новый, впишите туда разрешение на сканирование CSS- и JavaScript-файлов (через директиву allow), а затем загрузите на сервер. Это позволит оптимизировать проект не только для пользователей с гаджетами, но и для разных систем поиска.

№8. Быстрая загрузка сайта с мобильных

Еще одно условие для хорошего адаптива — высокая скорость загрузки (в пределах 2–3 секунд). Как правило, на телефонах контент грузится дольше, чем на компьютерах, поэтому обязательно проверьте время загрузки сайта в специальном сервисе (например, в PageSpeed Insight). Там вы узнаете, какие элементы «съедают» больше всего трафика при открытии с мобильных устройств, и сможете оптимизировать их для улучшения этого показателя. Обычно первым делом адаптируют изображения: сжимают, конвертируют в более легкий формат, уменьшают размер. Графический контент очень много весит, поэтому, оптимизировав его, вы существенно ускорите загрузку и, соответственно, сделаете веб-ресурс более удобным.

№9. Всплывающие окна не закрывают контент

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

Адаптируя проект, следите за тем, чтобы поп-апы занимали менее 50% экрана и легко закрывались. Это также поможет оптимизировать его под поисковые системы — из-за назойливой рекламы боты часто оценивают ресурс, как некачественный.

№10. Ширина картинок и полей ввода 100%

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

.header

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

То же самое необходимо проделать с полями ввода: если их не адаптировать, то вводить информацию на вашем сайте станут только самые терпеливые. Добавьте в CSS-файл следующий код:

input, textarea

Теперь и изображения, и поля ввода не будут выходить за края экрана.

Заключение

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

Похожие статьи

Как ускорить загрузку сайта: ТОП-10 способов

Скорость работы сайта является одной из важнейших характеристик, по которым оценивают его качество. Если страница быстро загружается, то пользователи не покидают ее сразу. А когда уменьшается процент отказов, налаживаются и поведенческие факторы, что впоследствии приводит к улучшению ранжирования и повышению позиций в поиске. Отсюда увеличение трафика, конверсии и продаж. Между ожиданием и более быстрым ресурсом человек обычно выбирает второе. Чтобы удовлетворить клиентов и роботов, необходимо ускорить загрузку в среднем до 2–3 секунд. Особенно этот показатель важен для посетителей с мобильных устройств. В статье мы дадим десять общих советов о том, как увеличить скорость загрузки сайта.

Самостоятельное SEO-продвижение сайта: инструкция для новичков

Поисковая оптимизация (Search Engines Optimization, SEO) — это процесс улучшения сайта таким образом, чтобы он соответствовал требованиям и критериям качества поисковых систем (ПС). Представительство ресурса в поиске играет важную роль для его продвижения, поскольку именно выдачи Яндекса и Google являются главными источниками органического трафика в рунете. В базах поисковиков хранятся сотни миллионов веб-сайтов, и чтобы попасть на первые страницы результатов ранжирования, оптимизаторы настраивают и продвигают свои проекты самостоятельно. Если этого не делать, сами алгоритмы SE (Search Engine) не поднимут сайт на верхние позиции. В статье говорим о том, как настроить SEO самому за 10 шагов.

Увеличение конверсии сайта: ТОП-10 способов

Конверсия может решать разные задачи, но одинакова важна для сайтов разных типов. Для интернет-магазина — это лиды, продажи и прибыль, для электронных СМИ — база для рассылки новостей и заказ платных подписок. Однако целевых действий не будет, если путешествие по сайту окажется неудобным или карточка товара не убедит пользователя в качестве продукта. Представители профессионального сообщества постоянно обмениваются опытом и делятся советами о том, как увеличить конверсию сайта. Однако универсальной формулы для достижения этой цели нет, ведь то, что принесет конверсию одному сайту, может не сработать для другого. Выбирать инструмент нужно, отталкиваясь от особенностей проекта. Делаем в статье обзор 10 эффективных методов, которые вы сможете протестировать и выбрать для своего веб-ресурса.

Нажмите дважды, чтобы увеличить

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

Сегодня больше половины транзакций в сети осуществляются с использованием мобильных устройств. Согласно статистике «Similarweb Introduces», мобильный трафик за период с 2017 по 2021 год уже вырос на 50%. И продолжает неуклонно расти.

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

Проблемы, которые решает адаптация сайта

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

Проблема 1: Некорректное отображение текста и элементов

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

Проблема 2: Отсутствие популярности ресурса

Адаптированный сайт, будучи простым и приятным в использовании, не отталкивает потенциального клиента, а привлекает его, заставляя посещать сайт снова и снова. Посетители особо удачных адаптированных версий сайта советуют его знакомым по принципу сарафанного радио: «Смотри, как удобно они сделали!».

Проблема 3: Низкое ранжирование сайта в поисковой выдаче

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

Проблема 4: Низкая конверсия

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

Проблема 5: Неработающий таргетинг

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

Приступаем к адаптации

Комплексная адаптация сайта — это сложный технический процесс, который лучше поручить специалисту (веб-разработчику или веб-дизайнеру). Тем не менее, простейшую верхнеуровневую адаптацию можно сделать и самостоятельно.

Существует три основных вида адаптации сайта:

• Создание адаптивного дизайна.
• Преобразование сайта в мобильную версию.
• Создание динамической демонстрации.

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

Создание адаптивного дизайна

Адаптивный дизайн — самый простой и эффективный способ общей адаптации веб-ресурса. Его суть состоит в том, что сам по себе код сайта HTML остается без изменений. Наша задача — видоизменить дизайн сайта, сделав его адаптивным.

Для этого мы можем:

• Значительно увеличить шрифт текста, представленного для ознакомления посетителям сайта.
• Разделить дизайнерские блоки на сайте (при их наличии), уменьшив их количество по горизонтали (это избавит посетителя от нужны листать сайт влево-вправо).
• Сделать контекстное меню открывающимся/всплывающим, не забыв при этом сделать каждый пункт меню читаемым.
• Уменьшить формат изображений и GIF-изображений на сайте до такого, какой будет удобен посетителям для просмотра с экрана их смартфонов.
• Сделать маркированные списки на сайте доступными для прочтения и восприятия (для это цели их часто приходится видоизменять).

Теперь пошагово выполняем каждое из указанных действий:

1. Открываем доступ к коду страницы (или ее исходному ресурсу). Речь идет о параметрах CSS, JScript, изображениях всех форматов и тому подобное.
2. Вписываем в код страницы специальный метатег под названием «Viewport». Он позволит нам настроить ширину страницы под нужды того или иного устройства, в нашем случае — мобильного. Параллельная переадресация при использовании этого метатега самостоятельно не применяется.
3. После инжекта метатега (HTML-код которого Вы легко можете найти в открытых источниках), создаем разметку и настраиваем CSS-фреймворк, используя инструкции и свойства кода.

ВАЖНО! Каждое из перечисленных действий выполняется вне зависимости от типа сайта и его дизайна. Случается, что полученная веб-версия становится более компактной благодаря смещению формата по горизонтали, но не становится адаптивной из-за наложения блоков друг на друга и некорректного переноса шрифтов.

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

Десктопный вариант главной страницы сайта

Мобильный вариант главной страницы сайта

Что мы получаем в итоге? Узнаваемый при просмотре с экрана мобильного телефона или планшета сайт.

Создание мобильной версии сайта

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

ВАЖНО! При создании мобильной версии сайта обязательным условием станет вписывание в код сайта тега типа «Link rel=»alternate» с добавлением действующего адреса мобильного сайта. Зачем нужен этот тег? После создания второй веб-страницы и присвоения ей доменного имени, автоматическая система идентификации поисковых систем (у Яндекса и Гугла уж точно) посчитает оба сайта за дубликат одного и, скорее всего, заблокирует один из доменов к выдаче. У поисковиков это называется антиспам-политикой.

Динамическая демонстрация

Динамическая демонстрация по своей сути объединяет оба предыдущих метода адаптации. При ее использовании вы сохраняете единственный адрес для мобильной и ПК-версий сайта, но код формата HTML все же меняется.

Каждый из трех, приведенных выше, способов адаптации сайта под мобильные устройства.

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

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

Также вы можете использовать специальные онлайн-конструкторы по созданию сайтов. Самым популярным из них является к Tilda.

Создание сайта на Tilda

Tilda — это довольно старый и проверенный сервис по созданию сайтов. Несмотря на то, что Tilda позиционирует себя как универсальный конструктор, следует принять во внимание, что лучше всего он подходит для одностраничных сайтов (лендингов). Это связано с тем, что у Tilda простой и понятный, но вместе с тем довольно ограниченный функционал. Базовые функции предоставляются пользователям сервиса бесплатно, но за дополнительные фишки придется заплатить небольшую сумму.

В интерфейсе Tilda вы сможете найти вкладку по созданию сайтов для мобильных приложений. На сайте реализован достаточно удобный пользовательский интерфейс, а также имеется доступный FAQ. К основным преимуществам сервиса относятся:

• широкий инструментарий, доступный каждому;
• понятный пользовательский интерфейс;
• высокая скорость работы;
• интересный выбор дизайнерских решений (например, шрифты и оформление блоков);
• выбор шаблонов для ориентирования.

Вместе с тем, сервис обладает и рядом особенностей:

• ежемесячно взимаемая плата за использование расширенных функций сервиса;
• принадлежность сайта платформе Tilda и использование ее внутреннего движка;
• ограниченный функционал для создания объемных многостраничных сайтов;
• ограниченное место на хостинге.

Создание сайта на профессиональной платформе ADVANTSHOP

ADVANTSHOP — платформа для создания интернет-магазинов, лендингов и воронок продаж без программистов и дизайнеров. Продажи через ADVANTSHOP сейчас ведут сейчас более 5000 предпринимателей, в их числе: Игорь Рыбаков, группа «Би-2», Аэропорт «Домодедово», «Ахмад» и др.

Внутри ADVANTSHOP есть все для онлайн-продаж:

• 74 готовых шаблона дизайна сайтов.
• Интеграции с сервисами оплаты (Яндекс.Касса, Qiwi, Web Money и др.) и доставки (СДЭК, EMS, Почта России и др.).
• Встроенная CRM-система для управления заказами.
• Интеграции с маркетплейсами: Ozon, Wildberries, Яндекс. Маркет, AliExpress, СберМегамаркет.
• Автоматическая выгрузка товаров соцсети: ВК, Одноклассники.
• Триггерные email-рассылки для работы с клиентами.
• SEO-оптимизация для продвижения продвижение сайта в поиске: редактирование H1, Title, Description, правильная структура URL, страница 404, 301 редиректы, sitemap.xml, SEO-фильтры.
• Бонусная программа для покупателей.
• Аналитика продаж.
• Мобильное приложение для интернет-магазинов.
• Партнерская программа.

Другие конструкторы сайтов

Разумеется, Tilda является далеко не единственным сервисом, позволяющим нативно конструировать интернет-страницы. Мы разобрали принцип именно его работы по причине того, что сегодня Tilda занимает первую строчку в рейтинге самых популярных конструкторов сайтов. Другие конструкторы имеют схожий с Tilda интерфейс, разобраться в котором не составит труда. Предлагаем вам ознакомиться со списком наиболее популярных конструкторов:

• Wix.com;
• uKit.com;
• Nethouse.ru;
• Конструктор сайтов от Tinkoff.ru;
• Bitrix24.ru.

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

Как проверить готовый сайт на адаптивность

Допустим, вы уже создали адаптивную версию сайта для мобильных устройств. Теперь нужно проверить его работу на наличие ошибок/сбоев. Для полноценной проверки прямо с экрана компьютера отлично подойдет сервис Google Mobile Friendly. Он позволит посмотреть, как пользователи, посещающие сайт со смартфона или планшета, видят его.

При работе с браузера Google Chrome просто нажмите F12 и выберите соответствующую функцию в «Инструментах разработчика». Аналогичная процедура применяется в Yandex Browser.

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

Заключение

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

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

За экспертной оценкой ресурса и помощью в адаптации обращайтесь в наше агентство. Мы уже много лет помогаем компаниям адаптировать ресурсы под смартфоны и планшеты. А потому дадим экспертную оценку вашего сайта, поможем с выбором оптимального способа адаптации и его реализацией. Вам понравится работать с нами! 😉

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

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

Вакансии

• Back-end разработчик (Middle)
  РА-Студио Санкт-Петербург от 95 000
• Копирайтер
  Up! Company Удаленная работа По договоренности
• Директор по развитию продаж
  Связи Удаленная работа По договоренности
• Онлайн-консультант
  Light-Tech Удаленная работа 40 000 – 60 000
• Junior маркетолог / SMM-специалист
  Институт повышения квалификации IPPSY Удаленная работа 30 000 – 50 000

Как Адаптировать Сайт под Мобильные Устройства: Руководство

Если вы не имеете ни малейшего представления о том, как создать мобильный сайт или адаптировать сайт под мобильные устройства, когда он уже давно запущен и работает, вы попали по адресу!

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

Оптимизация Сайта под Мобильные Устройства — Почему это Важно?

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

Таким образом, наличие мобильного сайта автоматически открывает двери для большей аудитории. Фактически, 70% интернет-трафика сегодня (англ) приходит с мобильных телефонов.

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

Более того, 89% людей (англ), отметили, что готовы рекомендовать бренд, если их мобильный опыт будет положительным.

Стоит упомянуть ещё один фактор — Google обновил систему оценки сайтов, чтобы улучшить результаты поиска для мобильных пользователей.

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

Преимущества Отзывчивого Сайта

Создание хорошего мобильного сайта начинается с отзывчивого дизайна.

«Отзывчивый сайт» — это сайт, который реагирует на то, с какого устройства заходит пользователь и адаптируется под его особенности. Другими словами, такой сайт хорошо выглядит и функционирует на любом устройстве.

Ниже мы более подробно описываем преимущества отзывчивого сайта.

1. Лучше для SEO

Отзывчивый дизайн означает, что сайт использует те же URL и HTML независимо от устройства, из которого на него заходят. Благодаря этому Google намного проще исследовать, индексировать и управлять контентом такого сайта. В результате SEO вашего сайта будет намного эффективней.

2. Не Нужно Создавать Новый Дизайн Сайта

Отзывчивый дизайн, в отличие от адаптивного, не требует создания отдельного макета для мобильных. Другими словами, отзывчивый сайт — это один макет, который “умеет приспосабливаться” под разные устройства.

Таким образом, вы сэкономите много времени и энергии.

3. Легче в Управлении и Экономней

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

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

7 Советов, Как Адаптировать Сайт под Мобильные Устройства

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

Мы ценим ваше любопытство и желание узнавать что-то новое, но всё-таки склонны считать, что оптимизация сайта под мобильные устройства может быть довольно сложной для новичка. Поэтому рекомендуем нанять разработчика сайтов, который поможет вам решить эту задачу.

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

1. Придерживайтесь Подхода Mobile First

Большинство дизайнеров, начиная разработку сайта, ориентируются на устройства с большим экраном, такие как ПК или ноутбук. Это не совсем правильно, так как в будущем при попытке оптимизировать сайт под телефон могут возникнуть определённые трудности.

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

Оптимизировать сайт под экран меньшего размера, например, смартфона или планшета, намного сложнее, чем под экран большого размера. Поэтому разумнее начинать с мобильной версии.

2. Преобразование Десктопной Версии Сайта в Мобильную

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

К счастью, есть как минимум два очень хороших способа сделать: конвертировать ваш сайт с помощью онлайн-сервиса или плагинов CMS.

Преобразование Сайта с Помощью Конструктора Онлайн

Во-первых, вы можете использовать специальный онлайн-сервис. Два самых популярных сервиса для создания мобильной версии сайта — bMobilized и Duda Mobile .

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

Сервис стоит 19,99$ в месяц . Помимо услуги создания мобильной версии сайта, bMobilized также предоставляет профессиональную поддержку для разработчиков.

Ещё один отличный сервис — Duda Mobile. Главная функция этого конструктора — создание полнофункциональных мобильных сайтов.

Этот конструктор сайтов можно использовать бесплатно. Однако, если вам понадобятся премиальные функции сервиса, такие как поддержка по электронной почте, пользовательские домены или услуги резервного копирования, то их цена — 19$ в месяц .

Кроме того, Duda Mobile предлагает набор расширенных функций для разработки отзывчивых сайтов электронной коммерции с поддержкой мультиязычности. Однако за такой функционал вам придётся заплатить от 22$ до 46$ в месяц .

Создание Мобильной Версии Сайта с Помощью Плагинов CMS

Второй вариант, как адаптировать сайт под мобильные устройства — использовать плагины CMS. Однако этот метод лучше подходит тем, у кого уже есть готовый сайт на CMS Joomla, Drupal или WordPress.

Пользователи WordPress для решения этой задачи могут использовать такие плагины, как WPtouch и JetPack.

Что касается пользователей Joomla, то им доступны такие решения, как Responsivizer и JoomlaShine.

Если же вы используете Drupal, рекомендуем ThemeKey и MobileTheme.

Однако имейте в виду, что не все из этих плагинов доступны бесплатно. Например, премиум-план WPtouch pro Enterprise обойдётся вам до 359$ в год.

3. Установите Отзывчивую Тему

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

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

Avada — одна из самых быстрых и отзывчивых тем в WordPress. С этой темой скорость загрузки вашего сайта на мобильных устройствах не превысит секунды.

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

Pingdom — лучший инструмент для проверки производительности сайта, который предоставит исчерпывающие данные о скорости загрузки страниц. Всё, что вам нужно сделать, это скопировать ссылку вашего сайта, а затем вставить её в столбец URL. Выберите, где вы хотите начать тестирование, и нажмите кнопку «Начать тест» («Start Test»).

Pingdom выдаст оценку вашего сайта (в зависимости от его общей производительности), время загрузки и другие важные показатели.

Инструмент также предложит некоторые советы, как улучшить скорость.

Вот результат теста живой демонстрационной версии темы Avada — сайта-портфолио.

Как видите, для загрузки сайта теме Avada понадобилось 953 миллисекунды.

4. Никогда не Используйте Flash

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

Кроме того, Flash может навредить SEO.

Также важно отметить, что ни Android, ни iOS не поддерживают Flash, поэтому использование этого программного обеспечения — не лучшее решение, если вы хотите создать сайт, оптимизированный для мобильных устройств.

5. Поддерживайте Скорость Сайта

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

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

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

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

• Уменьшите количество публикаций на главной странице (ограничьтесь 5-10 постами).
• Удалить ненужные виджеты.
• Удалите неважные, неактивные или ненужные плагины.
• Поддерживайте чистоту и порядок на странице.

Мы уверенны, что чистая, хорошо оптимизированная домашняя страница способна не только улучшить общий внешний вид вашего сайта, но и ускорить его загрузку!

6. Следите за Внешним Видом Вашего Сайта

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

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

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

7. Включите Ускоренные Мобильные Страницы (AMP)

Ускоренные мобильные страницы (AMP) — один из проектов Google. Его целью является ускорение загрузки сайтов посредством сжатия данных, которые в восемь раз меньше обычного размера мобильных страниц. Эта технология обещает повысить скорость вашего сайта в четыре раза, что, в свою очередь, сделает его более мобильным.

AMP широко используется ведущими компаниями, включая Twitter, New York Times и Adobe. Вот несколько причин, почему она так популярна.

Ускоряет Загрузку Сайта на Мобильных Устройствах

По данным Google, около 53% мобильных пользователей покидают сайт, загрузка которого занимает более 3 секунд (англ).

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

Делает Сайт Более Заметным в Поиске

Google обозначает AMP-сайты в мобильном поиске иконкой молнии. Её задача, обозначить для пользователей сайты с поддержкой AMP и без.

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

Google AMP Cache Повышает Производительность Сервера

Google AMP Cache — сеть доставки контента (CDN), основанная на прокси. Используется для ускорения процесса передачи данных с действительных документов AMP пользователю.

Проще говоря, Google AMP Cache хранит данные вашего сайта. Этот метод позволяет быстрее загружать веб-страницы, благодаря чему ресурс лучше работает на мобильных устройствах.

Вот некоторые функции Google AMP Cache, которые могут повысить производительность вашего сервера:

• Может сохранять изображения и данные шрифтов
• Автоматически ограничивает максимальные размеры изображения
• Конвертация изображений в форматы для мобильных устройств
• Может снизить качество изображения, чтобы ускорить процесс загрузки
• Использует безопасные каналы (HTTPS) и последние версии веб-протоколов (SPDY, HTTP/2).

Выводы

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

Подводя итог, давайте ещё раз напомним, как адаптировать сайт под мобильные устройства:

• Придерживайтесь подхода Mobile first.
• Превратите свой десктопный сайт в мобильный с помощью онлайн-сервисов, таких как bMobilized и Duda Mobile, или воспользуйтесь плагином мобильной оптимизации для вашей CMS.
• Используйте отзывчивую тему и протестируйте её с помощью Pingdom.
• Не используйте Flash!
• Поддерживайте нормальную скорость вашего сайта, используя быстрый и надёжный хостинг.
• Убедитесь, что ваш сайт хорошо выглядит.
• Попробуйте использовать ускоренные мобильные страницы (AMP), чтобы повысить производительность веб-сайта на мобильных устройствах.

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

Уверенны, что знание того, как оптимизировать сайт для мобильных устройств, поможет вам быстрее принять решение — заниматься этим самостоятельно или обратиться к специалистам. Не тяните. Без мобильной версии сайта вы теряете много органического трафика. Удачи!

Ольга вже близько восьми років працює менеджером у сфері IT, три з яких вона займається SEO. Написання технічних завдань та інструкцій — один з її основних обов’язків. Її хобі — дізнаватися щось нове і створювати цікаві та корисні статті про сучасні технології, веброзробку, мови програмування, пошукову оптимізацію сайтів та багато іншого.