Что означает десктопная версия сайта
Адаптивный дизайн, респонсив и мобильная версия: зачем это нужно и в чём различия
В мобильнике современного человека умещаются банк, супермаркет, почта и библиотека. Всё благодаря адаптивному дизайну.
Что такое адаптивный дизайн?
Это способ корректно отображать интерфейс сайта на любых устройствах. Дизайнер отрисовывает отдельные макеты веб-страниц для смартфонов, планшетов и компьютеров. Разработчик при вёрстке задаёт для каждого макета соответствующие размеры и разрешение экрана. Когда пользователь заходит на сайт, система распознаёт тип его устройства и показывает подходящий вид интерфейса.
Значит, в адаптивном дизайне каждую страницу отрисовывают трижды: для ПК, смартфона и планшета?
Нет, необязательно. Ведь, например, размеры экранов старых и новых смартфонов различаются. Планшет имеет вертикальную и горизонтальную ориентацию. А у экранов Apple разрешение больше, чем у других. Если нужно безупречное воспроизведение какого-нибудь сложного интерфейса на всех устройствах, макетов может быть гораздо больше трёх. Часто отрисовывают шесть макетов под самые популярные форматы.
А если веб-страницы простые, дизайнер может сделать всего два макета — с горизонтальной и вертикальной ориентацией. Но разработчик потом всё равно будет их незначительно изменять под все необходимые размеры.
Пишет о дизайне в Skillbox, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.
Чем различается дизайн для разных экранов?
На маленьких экранах многие элементы уменьшают. Но если бы весь десктопный сайт на смартфоне просто уменьшился, вряд ли пользователь смог бы что-то разглядеть. Поэтому размер элементов меняют не прямо пропорционально размеру экранов, а незначительно, чтобы было удобно читать и смотреть. А чтобы всё уместить, изменяют расположение блоков.
На экране ПК пользователь, не перелистывая, видит много информации: заголовки, тексты, картинки, иконки, кнопки. Со смартфона одновременно видно меньше элементов — всё рассчитано на скроллинг.
Блоки чаще всего располагают вертикально один за другим. А менее значимые элементы скрывают, например, в контекстное меню — чтобы не загромождать пространство. При необходимости пользователь может кликнуть на меню и добраться до нужного элемента.
Можно пример адаптивного дизайна?
Пожалуйста, вот сайт сети аптек:
А функциональность адаптивных сайтов различается на разных устройствах?
Обычно все версии идентичны. Люди привыкли делать со смартфонов всё то же самое, что и с компьютера: от покупок в интернет-магазинах до рабочей коммуникации. С какого бы устройства человек ни зашёл на сайт, он не должен быть ограничен.
Но это идеальный расклад. В действительности иногда функциональность для смартфонов урезают. Скажем, расширенный поиск со множеством параметров трудно сделать удобным на маленьком экране.
Логично! А все сайты адаптируют для разных девайсов или некоторые заточены подо что-то одно?
В большинстве случаев отображение на разных экранах — это мастхэв для современного сайта. Но бывают исключения. Например, иногда сайт нужен только для пользователей смартфонов. На некоторые лендинги пользователи попадают, сканируя QR-коды с упаковок или вывесок — сделать это с ПК нельзя, и адаптировать сайт для компьютера нет смысла.
Для отдельных компаний, наоборот, пользователи ПК могут быть в приоритете, и сайт сделают только в десктопной версии. Но таких сейчас всё меньше. Мобильный трафик в среднем уже превышает десктопный. Более того, поисковики учитывают этот фактор в ранжировании — преимущество отдают сайтам, которые удобно просматривать со смартфонов.
Значит, все современные сайты используют адаптивный дизайн?
Почти. Адаптивный дизайн — самый распространённый способ «подогнать» интерфейс под разные экраны. Но он не единственный. Есть ещё респонсивный дизайн и мобильные версии сайтов.
Хм, ладно, пойдём по порядку. Что ещё за респонсивный дизайн?
Это способ корректно отображать интерфейс, при котором сайт сам подстраивается под любой размер и разрешение экрана. Для этого используют программный модуль: он растягивает или сжимает один и тот же макет.
Должно быть, это удобнее, чем рисовать несколько макетов?
Да, эта технология проще и дешевле. Но есть и минусы.
Такие сайты больше весят и дольше загружаются. В случае с адаптивным дизайном загрузить надо один оптимизированный макет, и это происходит быстро. Если у сайта респонсивный дизайн, то макет с максимальным размером и разрешением загружается и сжимается — на это нужно больше времени.
А ещё респонсивный дизайн подходит не для всех сайтов. Если вёрстка сложная, страницы не будут красиво сжиматься автоматически.
Как выглядят респонсивные сайты?
Вот, например. С ПК видно по три изображения по горизонтали, а меню вверху развёрнуто. С мобильного меню скрыто, и мы видим по одной картинке на всю ширину экрана:
Понятно. А что собой представляют мобильные версии сайтов?
Мобильной версией называют отдельный мобильный сайт со своим адресом. Это ещё одна альтернатива адаптивному дизайну. Дизайн и функциональность мобильных версий могут кардинально отличаться от дизайна и функциональности десктопного сайта, нет никаких ограничений. А ещё пользователь может сам выбирать, с какой версии зайти: при желании можно открыть мобильный сайт с ПК или десктопный — со смартфона. Известный пример — мобильная версия «ВКонтакте» с отдельным адресом m.vk.com.
Мобильные версии часто используют?
Нет, достаточно редко. Они дороги в разработке — это полноценный второй сайт. Кроме того, наличие отдельного адреса — это иногда минус, пользователь может запутаться.
Выходит, адаптивный дизайн оптимален по соотношению цены и возможностей?
Это зависит от нужд конкретной компании, но большинство используют его. Он дороже респонсивного, но дешевле мобильной версии. Для любых нестандартных дизайн-решений можно настроить правильное отображение, а страницы у пользователя быстро грузятся.
Кто создаёт адаптивные сайты?
Чтобы сделать красивые и функциональные веб-страницы для разных экранов, нужны навыки дизайна и программирования. Сначала надо отрисовать внешний вид макетов, а потом воплотить задумки в коде. Адаптивные сайты может создавать команда узкопрофильных спецов или один разработчик со знаниями в дизайне.
обложка: Анастасия Телесницкая для Skillbox Media
Меню, которое вызывает пользователь. Например, с помощью клика.
Одностраничные сайты, которые обычно используют в рекламных целях.
Как посмотреть ПК / десктопную версию сайта на мобильном телефоне
Друзья, ловите очередную маленькую хитрость, которая упростит вашу жизнь.
Представим жизненную ситуацию: исполнитель, программист или любой другой подрядчик отправил вам ссылку на просмотр готовой или промежуточной версии сайта, а вы находитесь в дороге и в руках у вас только мобильный телефон, через который удается открыть в браузере только мобильную версию сайта. А вам же нужно оценить ещё и отображение ПК (десктопной) версии. Как быть? Рассказываю!
Временное решение проблемы
На самом деле, проверку компьютерной версии сайта можно произвести и с мобильного телефона, поэтому откладывать задачу до дома или офиса не придется.
Достаточно в вашем браузере открыть основное меню – обычно это три точки или три полоски в правом верхнем (в Сhrome, Mozilla firefox) или нижнем (Яндекс.браузер) углу экрана – и выбрать один из пунктов под названием “версия для ПК”. Возможно точное название будет немного отличаться в разных браузерах, но путь будет именно таким.
Готово – открытый сайт моментально перестроится на обычную пк-версию. Вернуть обратно мобильную версию можно таким же путем – убрав галочку из меню браузера возле “Версия для ПК”.
Переход к ПК версии сайта в мобильном на длительный период
Как быть, если вам нужно проверить компьютерную версию нескольких страниц сайта или нескольких сайтов, а постоянно переключаться между разными режимами просмотра неудобно, долго, трудоемко. Тогда на выручку придет браузер от Яндекс. Да, почему-то именно в нем реализована функция фиксации режима просмотра страниц (назовем ее так). В других браузерах подобного не обнаружено.
Мобильная версия, веб-приложение, адаптивный дизайн или десктопный формат сайта?
Известно, что сайты в Сети различаются в зависимости от отображения на разных устройствах. Так, принято выделять:
В этой статье мы подробно рассмотрим все типы сайтов, чтобы понять, какие преимущества и недостатки скрывает каждых из них и что подходит именно вам.
Мобильная версия
Мобильные версии сайтов создаются специально для мобильных устройств. Часто они имеют свой собственный url-адрес (например. m.vk.com) и значительно отличаются от полной версии:
По сравнению с тем же адаптивным сайтом, мобильная версия отличается именно этим — собственным интерфейсом и содержимым.
Веб-приложение
Веб-приложения сильно разнятся с оригинальным сайтом даже по сравнению с мобильной версией. Это полностью переработанный, даже можно сказать специально созданный вариант веб-ресурса. Доступен только для мобильных устройств.
Адаптивный дизайн
Адаптивный дизайн представляет собой технологию, по которой внешний вид и функционал сайта подстраивается под формат устройства пользователя. В зависимости от этого на экране будет отображаться то, что вписывается в экран конкретного посетителя.
Transport for London (tfl.co.uk) — это пример сайта с адаптивным дизайном. На скриншоте ниже вы видите, как полная версия преобразуется на разных экранах мобильных устройств
Дизайн для планшета (слева) и мобильного устройства (справа) отличается количеством колонок, в которых размещается контент
Одним из самых главных недостатков мобильных версий сайтов, по мнению многих пользователей, является именно урезанный контент и функционал. Адаптивный дизайн как раз-таки решает эту проблему. Минусом, в свою очередь, является не всегда правильная адаптация под конкретное устройство, что может создать реальные неудобства для пользователей:
Пример адаптивной версии сайта Authenticjobs.com. Полная версия содержит контент, располагающийся в колонке справа. Например, предложение разместить объявление о вакансии, который отсутствует в мобильной
Как видите, в мобильной версии Authenticjobs.com некоторого контента просто нет
Ниже мы попробуем сравнить эти два варианта.
Мобильная версия или Адаптивный дизайн?
Перечислим несколько очевидных преимуществ и недостатков двух подходов:
1. Сайты с адаптивным дизайном поддерживают разные устройства и формат экранов, в то время как мобильная версия разрабатывается только для смартфонов и не подходит для работы с персонального компьютера.
2. Адаптивный дизайн предполагает наличие полного контента и всех функций, в отличие от мобильной версии, где опции и содержимое ограничено возможностями смартфонов/планшетов и предполагаемого юзабилити.
3. Сайты с адаптивным дизайном часто лучше индексируются поисковиками. С мобильными версиями, особенно, если они отличаются еще и URL, сложнее — для их продвижения в поиске понадобится больше времени. Некоторые веб-мастера находят выход в переадресации посетителя с полной версии на мобильную, но это занимает время, что не всегда нравится пользователю.
4. Сайты с адаптивным дизайном легче модерировать, так как опять же не нужно заботиться о различном содержании.
5. Адаптивные сайты, как правило, обходятся своим владельцам дороже.
6. Адаптивный дизайн чаще работает медленнее, чем «шустрая» и подстроенная под устройство мобильная версия. Дело именно в отличии контента и функционала.
7. Сайты с адаптивным дизайном не очень хорошо интегрируются со сторонними веб-ресурсами. Если вы, например, разрабатываете сайт, который опирается на независимый бекэнд-сервис (например, систему бронирования на сайте отеля), будет сложно подстроить интерфейс этого сервиса под адаптивный дизайн.
Полная версия сайта на мобильном устройстве
Некоторые пользователи говорят, что они предпочитают загружать полную версию сайта, даже если они используют мобильное устройство. В основном такой выбор связан с предыдущим неудачным опытом взаимодействия с мобильной версией веб-ресурса (недостаток контента и функций — все то, о чем написано выше). Иногда это просто дело привычки.
Есть даже случаи, когда посетители мобильных версий отказывались от конверсионного действия. Такое произошло с одним из пользователей сайта отеля в Лас-Вегасе. Как потом выяснилось, человек ожидал от гостиницы в таком легендарном городе «более яркого сайта». Очевидно, что мобильная версия не позволила продемонстрировать все достоинства. Так неужели придется отказываться от удобства и простоты из-за ожиданий некоторых пользователей?
Нет. Эксперты утверждают, что обращать внимание нужно на пользовательский опыт, а не на слова. Часто на оптимизированных под мобильные устройства сайтах он оказывается успешнее и эффективнее, даже если посетители заявляют обратное.
Вместо заключения
Как видите, преимущества и недостатки имеет каждый из вариантов. Единственно правильное решение, которое вы можете принять при выборе способа адаптации вашего сайта или лендинга под мобильные устройства — это провести сплит-тестирование. Посмотрите, как ведут себя ваши пользователи на ресурсе, и разработайте наиболее удобный вариант именно для вашей целевой аудитории.
Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки
Мобильная аудитория в Рунете обогнала десктопную еще в 2018 году, и с тех пор продолжает расти. Поэтому оптимизация сайта под мобильные устройства уже стала необходимостью. Каким образом это лучше сделать – с помощью адаптивной верстки или с помощью отдельной мобильной версии сайта – разбираем в сегодняшней статье.
Про мобильный трафик и новые требования к дизайну сайта
Объем мобильного трафика в мире колоссален и с каждым днем продолжает увеличиваться.
Во главе веб-разработки теперь стоит адаптивность – свойство, позволяющее сайту корректно отображаться на экранах любого размера: хоть на планшетах, хоть на смартфонах, проекторах, телевизорах. Без всяких дополнительных настроек и танцев с бубном.
Экран каждого устройства обладает различной диагональю, ориентацией, соотношением сторон. Естественно, если сайт не использует адаптивный шаблон, то страница будет корректно выводится только на мониторе компьютера, но не на экране смартфона. На практике адаптивный дизайн выглядит следующим образом:
Если говорить простым языком, то термин «адаптивный» означает дизайн, автоматически подстраивающийся под экран каждого устройства. Сам термин стал известен благодаря книге «Отзывчивый веб-дизайн» за авторством Итана Маркотта. Книга очень интересная не только для веб-разработчиков, но и для тех, кто интересуется, как устроен процесс создания дизайна в интернете с технической точки зрения. Очень рекомендую.
Как выглядит адаптивный сайт
Посмотрим на реальном примере, как выглядит адаптивный сайт на трех разных устройствах. Для примера возьмем сайт известного дизайнера Саймона Коллисона – colly.com.
Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)
Что тут важно? Во-первых, сайт удобен для посетителя при открытии с любого устройства. Во-вторых, все элементы одинаково отображаются на экранах всех устройств. Мелкие элементы и шрифты остаются читаемыми.
Зачем нужен адаптивный дизайн и адаптивная верстка
Устройства, с которых можно выходить в интернет, не ограничиваются десктопами и смартфонами. Необходимо учитывать, как сайт отображается и на других видах устройств, например, планшетах и умных телевизорах. Поправка на эти устройства появилась и во многих веб-аналитиках, в частности в Google Analytics и «Яндекс.Метрике»:
И хотя посетители, просматривающие веб-страницы через телевизоры, все еще остаются диковинкой, в ближайшем будущем стоит ожидать увеличения такой доли устройств.
Вот интересная статистика по числу планшетных пользователей с 2014 года по 2021. Доля планшетных устройств не сокращается, а увеличивается от года к году, пусть и довольно медленно:
Именно поэтому веб-разработчики стремятся к тому, чтобы контент сайтов корректно отображался на экранах самых разных типов устройств.
Сложности адаптивной разработки
Из-за разнообразия разрешений экранов и форматов процесс разработки значительно усложнился. Аспект адаптивности учитывают не только веб-разработчики, но и дизайнеры, верстальщики, другие специалисты, которые занимаются созданием сайтов.
Во многих случаях возникают проблемы при попытке переноса уже существующего сайта на адаптивный «шаблон». Особенно если сайт самописный и был создан много лет назад. В ряде случаев дешевле и проще создать новую версию сайта, чем заниматься переносом старой версии.
Удобство / юзабилити для мобильных устройств / адаптивность – это отдельные факторы ранжирования, которые учитываются Google и «Яндекс». К ним можно отнести сразу несколько показателей:
Если сайт не адаптирован для мобильного трафика, то начнут расти отказы и ухудшаться поведенческие факторы аудитории. Это, в свою очередь, ведет к потере позиций в выдаче и снижению трафика.
Как проверить адаптивность сайта
Проверить адаптивность сайта можно прямо в браузере – без всяких дополнительных сервисов. Если вы используете Mozilla Firefox, достаточно воспользоваться сочетанием горячих клавиш Ctrl + Shift + M:
Проверить адаптивность сайта в Google Chrome можно, воспользовавшись сочетанием горячих клавиш Ctrl + Shift + I или просто нажав клавишу F12, затем – кликнуть по иконке эмуляции устройств (Toggle Device Toolbar):
Кроме этого, проверить адаптивность сайта можно при помощи инструмента «Проверка оптимизации для мобильных» от Google:
Какой экран учитывать изначально
Вопрос интересный. Есть два основных подхода.
Первый: за основу берется экран смартфона, и затем работа по расположению элементов двигается в сторону увеличения размеров экрана.
Второй: за основу берется экран классического монитора, и далее прорабатывается отображение элементов на более мелких экранах.
Раньше наиболее распространенным способом разработки был второй вариант. Сегодня более актуален первый способ – эта концепция получила название Mobile First. Этот способ разработки является более логичным и простым изначально.
Основные правила адаптивного дизайна
Адаптивный дизайн подразумевает соблюдение нескольких основных «законов». Поговорим о самых главных из них подробнее.
Размеры макетов. Брейкпоинты
При создании адаптивного дизайна разработчик ориентируется не на конкретные значения, а на так называемые брейкпоинты. Брейкпоинты указывают конкретное разрешение экрана, при котором должно произойти изменение дизайна страницы.
Допустим, для просмотра страницы вы используете смартфон с определенными настройками экрана. При открытии неадаптивной страницы содержимое начинает смещаться или уползать. Брейкпоинты помогут этого избежать. Смена условий отображения страницы и ее элементов будет происходить в зависимости от ширины экрана посетителя сайта. Элементы могут увеличиваться, уменьшаться, вовсе исчезать или добавляться на страницу:
«Каноничные» значения для адаптивного дизайна следующие:
Относительность координат, размеров и масштабов
Большое разнообразие экранов и типов устройств не позволяет использовать какие-либо точные единицы измерения. Когда мы говорим об адаптивном дизайне, то нужно понимать, что в качестве таких единиц используются относительные значение. Потому что на каждом экране существует своя собственная плотность пикселей, которая, естественно, соотносится и с его размером. Так, разрешение 360 x 240 пикселей будет абсолютно по-разному выглядеть на экране планшета и телевизора. Именно поэтому адаптивный дизайн использует относительные значения. Например: координаты/размеры/масштабы блока определяются по отношению к верхней границе или по отношению к любому другому элементу.
Вложенность
На любой странице присутствует много разных объектов. Относительное их позиционирование – это не только достоинство, но и недостаток, так как возникают сложности с расположением интерактивных объектов касательно друг друга. Обычно эту проблему решают при помощи блок-контейнера – в него отправляют всю группу элементов.
Поточность
Имеется в виду отсутствие сдвигов блоков. При приеме сайта обратите внимание: если блоки смещаются, то просмотр страницы становится настоящим испытанием.
Графические форматы
С графикой существует простое правило. Когда на изображении присутствует минимальная детализация – выбираем вектор. Когда требуется максимальная детализация – выбираем растр. В любом случае, абсолютно все изображения на сайте должны использовать компрессию.
Шрифты
Самые красивые дизайнерские шрифты, кроме неоспоримых достоинств, имеют некоторые недостатки. Да, встраиваемые шрифты – это красиво, и они эффективно отделяют ваш сайт от серой массы и десятков конкурентов, которые используют системные шрифты. Но у встраиваемых шрифтов есть существенный минус: кроме того, что многие из них платные, они также увеличивают время загрузки страницы для посетителя. Здесь придется искать компромисс между двумя типами шрифтов, либо делать идеальную оптимизацию всего сайта, чтобы добиться наилучшей скорости загрузки страниц.
Мобильная версия: что учесть
Адаптивная верстка и мобильная версия – в чем разница
В первом случае речь идет об одном сайте, страницы которого автоматически подстраиваются под размер экрана посетителя. Во втором – о полноценном сайте, дизайн и функционал которого разрабатываются специально под определенное разрешение экрана.
Мобильная версия разрабатывается под размер экрана/разрешение только определенного мобильного устройства, но на практике она должна красиво выводиться на большинство экранов
Технические требования: чеклист мобильной версии
Разработка мобильной версии ставит своей целью решить все проблемы, возникающие у мобильной аудитории сайта:
В рамках данной статьи я не ставлю своей целью описать все технические требования к мобильной версии сайта. Но эти вопросы вы обязательно должны уточнить у исполнителя перед приемкой сайта:
При разработке мобильной версии ни в каком виде не должны использоваться Applet, Microsoft Silverlight, Flash.
Юзабилити: чек-лист мобильной версии
Мы видим, что здесь не нужно заполнять ФИО, город, адрес, e-mail – достаточно авторизоваться по номеру телефона и указать код из SMS. Если ваша форма заказа для нового покупателя содержит очень много полей, лучше сократить их до минимума, либо разбить заполнение формы на несколько экранов.
Адаптивная верстка или мобильная версия: что выбрать
Сегодня сайт должен быть максимально оптимизирован под потребности мобильной аудитории. Каким именно способом достигать такой оптимизации, каждый владелец сайта выбирает сам. Чтобы подытожить все вышесказанное, предлагаю сравнение достоинств и недостатков:
Со стоимостью вопрос неоднозначный. Как правило, разработать мобильную версию – дешевле, но поддерживать ее – дороже: фактически это второй сайт, который тоже нужно продвигать, поддерживать и на котором нужно устранять ошибки. Разработать адаптив, наоборот, дороже, но поддерживать дешевле. О том, какой вариант будет оптимальным для вашего сайта, лучше проконсультироваться со специалистами агентства или студии веб-разработки, куда вы обратились.
Что выбрать? Если сайт «тяжелый» (с точки зрения оптимизации, контента, функционала), то можно разрабатывать полноценную мобильную версию. Если сайт небольшой и простой, хватит и возможностей адаптивной верстки.
Создание полностью мобильной версии сайта – это олдскул. Считаю, что это невыгодно ни при каких обстоятельствах, за исключением создания сайта не для поискового продвижения, на котором нужно отображать контент, отличающийся от десктопной версии.
Если на это смотреть как на сайт для продвижения, то 100 % стоит выбирать адаптивную верстку:
Для большинства сайтов оптимальной будет адаптивная верстка. Но, как и везде, в этом вопросе много нюансов. Если вы не уверены, какой вариант лучше для вашего проекта, оставьте заявку на консультацию. Мы делаем мобильные версии сайтов и создаем адаптивные сайты – с нуля или с доработкой уже существующих.