десктоп что это на сайте
Адаптивный дизайн, респонсив и мобильная версия: зачем это нужно и в чём различия
В мобильнике современного человека умещаются банк, супермаркет, почта и библиотека. Всё благодаря адаптивному дизайну.
Что такое адаптивный дизайн?
Это способ корректно отображать интерфейс сайта на любых устройствах. Дизайнер отрисовывает отдельные макеты веб-страниц для смартфонов, планшетов и компьютеров. Разработчик при вёрстке задаёт для каждого макета соответствующие размеры и разрешение экрана. Когда пользователь заходит на сайт, система распознаёт тип его устройства и показывает подходящий вид интерфейса.
Значит, в адаптивном дизайне каждую страницу отрисовывают трижды: для ПК, смартфона и планшета?
Нет, необязательно. Ведь, например, размеры экранов старых и новых смартфонов различаются. Планшет имеет вертикальную и горизонтальную ориентацию. А у экранов Apple разрешение больше, чем у других. Если нужно безупречное воспроизведение какого-нибудь сложного интерфейса на всех устройствах, макетов может быть гораздо больше трёх. Часто отрисовывают шесть макетов под самые популярные форматы.
А если веб-страницы простые, дизайнер может сделать всего два макета — с горизонтальной и вертикальной ориентацией. Но разработчик потом всё равно будет их незначительно изменять под все необходимые размеры.
Пишет о дизайне в Skillbox, а в перерывах и сама орудует графическим планшетом. Влюблена в советские шрифты, японскую рекламу и русский язык.
Чем различается дизайн для разных экранов?
На маленьких экранах многие элементы уменьшают. Но если бы весь десктопный сайт на смартфоне просто уменьшился, вряд ли пользователь смог бы что-то разглядеть. Поэтому размер элементов меняют не прямо пропорционально размеру экранов, а незначительно, чтобы было удобно читать и смотреть. А чтобы всё уместить, изменяют расположение блоков.
На экране ПК пользователь, не перелистывая, видит много информации: заголовки, тексты, картинки, иконки, кнопки. Со смартфона одновременно видно меньше элементов — всё рассчитано на скроллинг.
Блоки чаще всего располагают вертикально один за другим. А менее значимые элементы скрывают, например, в контекстное меню — чтобы не загромождать пространство. При необходимости пользователь может кликнуть на меню и добраться до нужного элемента.
Можно пример адаптивного дизайна?
Пожалуйста, вот сайт сети аптек:
А функциональность адаптивных сайтов различается на разных устройствах?
Обычно все версии идентичны. Люди привыкли делать со смартфонов всё то же самое, что и с компьютера: от покупок в интернет-магазинах до рабочей коммуникации. С какого бы устройства человек ни зашёл на сайт, он не должен быть ограничен.
Но это идеальный расклад. В действительности иногда функциональность для смартфонов урезают. Скажем, расширенный поиск со множеством параметров трудно сделать удобным на маленьком экране.
Логично! А все сайты адаптируют для разных девайсов или некоторые заточены подо что-то одно?
В большинстве случаев отображение на разных экранах — это мастхэв для современного сайта. Но бывают исключения. Например, иногда сайт нужен только для пользователей смартфонов. На некоторые лендинги пользователи попадают, сканируя QR-коды с упаковок или вывесок — сделать это с ПК нельзя, и адаптировать сайт для компьютера нет смысла.
Для отдельных компаний, наоборот, пользователи ПК могут быть в приоритете, и сайт сделают только в десктопной версии. Но таких сейчас всё меньше. Мобильный трафик в среднем уже превышает десктопный. Более того, поисковики учитывают этот фактор в ранжировании — преимущество отдают сайтам, которые удобно просматривать со смартфонов.
Значит, все современные сайты используют адаптивный дизайн?
Почти. Адаптивный дизайн — самый распространённый способ «подогнать» интерфейс под разные экраны. Но он не единственный. Есть ещё респонсивный дизайн и мобильные версии сайтов.
Хм, ладно, пойдём по порядку. Что ещё за респонсивный дизайн?
Это способ корректно отображать интерфейс, при котором сайт сам подстраивается под любой размер и разрешение экрана. Для этого используют программный модуль: он растягивает или сжимает один и тот же макет.
Должно быть, это удобнее, чем рисовать несколько макетов?
Да, эта технология проще и дешевле. Но есть и минусы.
Такие сайты больше весят и дольше загружаются. В случае с адаптивным дизайном загрузить надо один оптимизированный макет, и это происходит быстро. Если у сайта респонсивный дизайн, то макет с максимальным размером и разрешением загружается и сжимается — на это нужно больше времени.
А ещё респонсивный дизайн подходит не для всех сайтов. Если вёрстка сложная, страницы не будут красиво сжиматься автоматически.
Как выглядят респонсивные сайты?
Вот, например. С ПК видно по три изображения по горизонтали, а меню вверху развёрнуто. С мобильного меню скрыто, и мы видим по одной картинке на всю ширину экрана:
Понятно. А что собой представляют мобильные версии сайтов?
Мобильной версией называют отдельный мобильный сайт со своим адресом. Это ещё одна альтернатива адаптивному дизайну. Дизайн и функциональность мобильных версий могут кардинально отличаться от дизайна и функциональности десктопного сайта, нет никаких ограничений. А ещё пользователь может сам выбирать, с какой версии зайти: при желании можно открыть мобильный сайт с ПК или десктопный — со смартфона. Известный пример — мобильная версия «ВКонтакте» с отдельным адресом m.vk.com.
Мобильные версии часто используют?
Нет, достаточно редко. Они дороги в разработке — это полноценный второй сайт. Кроме того, наличие отдельного адреса — это иногда минус, пользователь может запутаться.
Выходит, адаптивный дизайн оптимален по соотношению цены и возможностей?
Это зависит от нужд конкретной компании, но большинство используют его. Он дороже респонсивного, но дешевле мобильной версии. Для любых нестандартных дизайн-решений можно настроить правильное отображение, а страницы у пользователя быстро грузятся.
Кто создаёт адаптивные сайты?
Чтобы сделать красивые и функциональные веб-страницы для разных экранов, нужны навыки дизайна и программирования. Сначала надо отрисовать внешний вид макетов, а потом воплотить задумки в коде. Адаптивные сайты может создавать команда узкопрофильных спецов или один разработчик со знаниями в дизайне.
обложка: Анастасия Телесницкая для Skillbox Media
Меню, которое вызывает пользователь. Например, с помощью клика.
Одностраничные сайты, которые обычно используют в рекламных целях.
Советы по разработке адаптивных веб-сайтов: начинайте с десктопа
Мобильная эра стала основной причиной появления адаптивного дизайна. Сегодня дизайн сайта изначально разрабатывается с оглядкой на мобильные устройства. Но есть еще один метод, менее популярный, но который может решить очень многие проблемы.
Используйте немного другой подход – ориентируйтесь в первую очередь на десктоп. Так вы сможете реализовать очень много функций максимально эффективно. Затем, когда вы будете тестировать сайт на более мелких устройствах, вы сможете оставить только самые необходимые, и самые важные из них.
Процесс работы над таким проектом отличается от привычного, но он будет лучше для веб-дизайнеров, которые создают многофункциональные проекты.
Преимущества Desktop-First
Технически «Desktop-First» был традиционным способом, благодаря которому все делали сайты до мобильной эпохи.
В настоящее время многие люди говорят о мобильных устройствах, но есть веские причины придерживаться традиционного подхода. Например, когда на сайте будет множество подробных функций на больших экранах.
Основное преимущество — вы сразу видите все основные функции
Это позволяет вам представить все самые большие возможности для вашего дизайна в первую очередь.
Это лучшая стратегия, если ваша аудитория в основном использует настольные компьютеры / ноутбуки.
Когда вы думаете о современных веб-сайтах, таких как Twitter, вы считаете его больше мобильным. Но у них есть много дополнительных функций, которые видны только с компьютера. И пользовательский опыт с десктопа на порядок выше.
Конечно, нельзя отрицать, что мобильный телефон важен. Совсем недавно доля заходов в сеть с мобильных устройств превысила долю заходов с компьютера, поэтому разрабатывать под мобильные нужно непременно.
Но многофункциональные веб-сайты часто зависят от сильного дизайна десктопа.
Это, пожалуй, самое большое преимущество в этом плане. Вы можете увидеть сайт так, как он должен выглядеть со всеми функциями. Эти дополнительные функции могут (и должны) удаляться для небольших экранов. Но прежде нужно определить, какие именно из них невозможно перенести на мелкие устройства корректно.
Другой нюанс — это простота мобильного дизайна. Когда вы создаете дизайн с ориентацией на мобильные устройства, сначала вы начинаете с самых простых функций, а затем добавляете дополнительные функции для больших экранов. Но очень легко забыть о функциях или просто не иметь надлежащего планирования, чтобы решить, куда их поставить, или как они должны функционировать.
Но с использованием подхода, ориентированного на рабочий стол, вы рассматриваете эти функции как основной метод отображения, а затем выбираете их удаление по мере необходимости.
Нет идеального выбора, поэтому нужно пробовать. Если действительно обожаете многофункциональный десктоп, то стоит начать.
Поддержка всех браузеров
Самая сложная часть настольного дизайна — обработка браузера.
Всего десять или два назад единственным рынком были настольные компьютеры и ноутбуки. Революция смартфонов изменила все это с кучей мобильных браузеров для iOS, Android и других устройств, таких как Blackberry.
В большинстве старых браузеров отсутствует поддержка современных элементов десктопа, таких как аудио / видео. Но за последние годы многое изменилось.
В настоящее время нужно, чтобы все мобильные браузеры поддерживали те же функции, что и компьютерные браузеры. Современные браузеры также отображают большинство элементов одинаково.
Самые большие различия не в поддержке HTML / CSS, а в поддержке сенсорного ввода.
Мобильные экраны намного меньше, и на них нужно работать пальцем. Компьютерные мыши более точны по сравнению с человеческим пальцем, не говоря уже о том, что компьютерные экраны гораздо более просторны и удобны в обращении.
При переходе с настольных компьютеров на мобильные устройства важно учитывать, как работают разные браузеры, что они поддерживают, и как обрабатывать входные данные пользователя на основе сенсорного интерфейса.
Несколько хороших правил, которые следует учитывать при уменьшении размера вашего интерфейса:
Вы всегда можете проверить спецификации HTML5 для всех браузеров, чтобы увидеть, какие элементы поддерживаются в браузерах.
И вы можете использовать множество бесплатных ресурсов, таких как TouchSwipe, которые добавляют поддержку сенсорных жестов ко всем веб-сайтам.
Вы можете использовать JavaScript для проверки размеров браузера или операционной системы, такой как iOS или Win Mobile. С помощью этой информации вы можете загружать дополнительные таблицы стилей и создавать совершенно другой опыт с жестами, которые применяются только мобильными пользователями.
Начните со списка функций, которые нужны на веб-сайте. Организуйте все новые свойства CSS3, новые элементы HTML5 и все, с чем может быть проблема с поддержкой браузера.
Затем найдите все браузеры, в которых могут работать ваши пользователи, чтобы рассмотреть, как вы можете обрабатывать резервные копии. По прошествии времени старые браузеры будут поэтапно отключены, и поддержка станет проще.
Создайте все основные функции своего веб-сайта, а затем, если другие браузеры не могут их поддерживать, возвращайтесь к методам резервного копирования.
Общим примером такой тактики является удаление всплывающих меню для мобильных устройств. Поскольку пользователи смартфонов не могут перемещаться по ссылкам меню, имеет смысл скрывать нависшие меню и вместо этого создавать тумблер или скрытое меню-гамбургер.
Это изменение пользовательского опыта. Вместо этого вы ищете функции JS или свойства CSS3, которые буквально не могут поддерживаться в определенном браузере.
Для этого вам нужно найти вариант, который создает менее изящный опыт, но тот, который все еще работает для пользователя.
К счастью, большинство современных браузеров поддерживают JavaScript, HTML5 видео, поэтому у вас действительно нет ограничений. Самая сложная часть — поддержка устаревших браузеров. Однако этот рынок быстро сокращается.
Если вы запустите Google Analytics, вы можете изучить все браузеры и ОС от своей аудитории, чтобы узнать, какие из них самые популярные. Если никто не использует IE7 для просмотра вашего сайта, то зачем его поддерживать?
Каждая проблема, которую вы решаете, будет уникальной, поэтому решайте их по одной. Полагайтесь на такие сайты, как Can I Use, чтобы оценить, какую проблему нужно решить в первую очередь.
Когда десктоп получает приоритет
Когда именно нужно ориентироваться на десктоп? Если это ваша стратегия по умолчанию для каждого проекта?
Может быть. Но в конечном итоге он работает лучше всего, когда вы разрабатываете сайт, где десктоп имеет приоритет над мобильным телефоном.
Если мобильный опыт может быть невероятно простым, но сайт на компьютере должен быть детализированным и динамичным, начинайте с десктопа. Так у вас будет меньше работы.
Если вы всегда предпочитаете работать с десктопом и постепенно упрощать дизайн под мобильные, то вы получите удовольствие от этого процесса. И это прекрасно, потому что это все равно приведет к отличным результатам.
Просто убедитесь, что у вас есть план для мобильного сайта с хотя бы смутной идеей в виду того, как он будет выглядеть. Нарисуйте несколько каркасов для обоих устройств, чтобы дать себе отправную точку.
Одним из ярких примеров сильного настольного подхода является Mashable. Их полнофункциональный веб-сайт охватывает 1440 пикселей в ширину и содержит 3 столбца новостей с огромным меганавигационным меню.
Mashable выглядит потрясающе на мобильных устройствах, но вы можете сказать, что настольная версия ни в коем случае не хуже.
То же самое касается YouTube, где пользовательский опыт должен работать для обеих аудиторий. И в отзывчивую эпоху это не просто «рабочий стол» или «смартфон».
Вам также необходимо рассмотреть планшеты, меньшие нетбуки и ноутбуки, которые имеют разные размеры экрана. Desktop-first помогает вам создать опыт, который работает на больших экранах, прежде всего, сосредоточив внимание на каждой возможной функции.
Затем вы можете уничтожить детали, чтобы уточнить свой интерфейс, чтобы он работал повсюду.
Мобильная версия, веб-приложение, адаптивный дизайн или десктопный формат сайта?
Известно, что сайты в Сети различаются в зависимости от отображения на разных устройствах. Так, принято выделять:
В этой статье мы подробно рассмотрим все типы сайтов, чтобы понять, какие преимущества и недостатки скрывает каждых из них и что подходит именно вам.
Мобильная версия
Мобильные версии сайтов создаются специально для мобильных устройств. Часто они имеют свой собственный url-адрес (например. m.vk.com) и значительно отличаются от полной версии:
По сравнению с тем же адаптивным сайтом, мобильная версия отличается именно этим — собственным интерфейсом и содержимым.
Веб-приложение
Веб-приложения сильно разнятся с оригинальным сайтом даже по сравнению с мобильной версией. Это полностью переработанный, даже можно сказать специально созданный вариант веб-ресурса. Доступен только для мобильных устройств.
Адаптивный дизайн
Адаптивный дизайн представляет собой технологию, по которой внешний вид и функционал сайта подстраивается под формат устройства пользователя. В зависимости от этого на экране будет отображаться то, что вписывается в экран конкретного посетителя.
Transport for London (tfl.co.uk) — это пример сайта с адаптивным дизайном. На скриншоте ниже вы видите, как полная версия преобразуется на разных экранах мобильных устройств
Дизайн для планшета (слева) и мобильного устройства (справа) отличается количеством колонок, в которых размещается контент
Одним из самых главных недостатков мобильных версий сайтов, по мнению многих пользователей, является именно урезанный контент и функционал. Адаптивный дизайн как раз-таки решает эту проблему. Минусом, в свою очередь, является не всегда правильная адаптация под конкретное устройство, что может создать реальные неудобства для пользователей:
Пример адаптивной версии сайта Authenticjobs.com. Полная версия содержит контент, располагающийся в колонке справа. Например, предложение разместить объявление о вакансии, который отсутствует в мобильной
Как видите, в мобильной версии Authenticjobs.com некоторого контента просто нет
Ниже мы попробуем сравнить эти два варианта.
Мобильная версия или Адаптивный дизайн?
Перечислим несколько очевидных преимуществ и недостатков двух подходов:
1. Сайты с адаптивным дизайном поддерживают разные устройства и формат экранов, в то время как мобильная версия разрабатывается только для смартфонов и не подходит для работы с персонального компьютера.
2. Адаптивный дизайн предполагает наличие полного контента и всех функций, в отличие от мобильной версии, где опции и содержимое ограничено возможностями смартфонов/планшетов и предполагаемого юзабилити.
3. Сайты с адаптивным дизайном часто лучше индексируются поисковиками. С мобильными версиями, особенно, если они отличаются еще и URL, сложнее — для их продвижения в поиске понадобится больше времени. Некоторые веб-мастера находят выход в переадресации посетителя с полной версии на мобильную, но это занимает время, что не всегда нравится пользователю.
4. Сайты с адаптивным дизайном легче модерировать, так как опять же не нужно заботиться о различном содержании.
5. Адаптивные сайты, как правило, обходятся своим владельцам дороже.
6. Адаптивный дизайн чаще работает медленнее, чем «шустрая» и подстроенная под устройство мобильная версия. Дело именно в отличии контента и функционала.
7. Сайты с адаптивным дизайном не очень хорошо интегрируются со сторонними веб-ресурсами. Если вы, например, разрабатываете сайт, который опирается на независимый бекэнд-сервис (например, систему бронирования на сайте отеля), будет сложно подстроить интерфейс этого сервиса под адаптивный дизайн.
Полная версия сайта на мобильном устройстве
Некоторые пользователи говорят, что они предпочитают загружать полную версию сайта, даже если они используют мобильное устройство. В основном такой выбор связан с предыдущим неудачным опытом взаимодействия с мобильной версией веб-ресурса (недостаток контента и функций — все то, о чем написано выше). Иногда это просто дело привычки.
Есть даже случаи, когда посетители мобильных версий отказывались от конверсионного действия. Такое произошло с одним из пользователей сайта отеля в Лас-Вегасе. Как потом выяснилось, человек ожидал от гостиницы в таком легендарном городе «более яркого сайта». Очевидно, что мобильная версия не позволила продемонстрировать все достоинства. Так неужели придется отказываться от удобства и простоты из-за ожиданий некоторых пользователей?
Нет. Эксперты утверждают, что обращать внимание нужно на пользовательский опыт, а не на слова. Часто на оптимизированных под мобильные устройства сайтах он оказывается успешнее и эффективнее, даже если посетители заявляют обратное.
Вместо заключения
Как видите, преимущества и недостатки имеет каждый из вариантов. Единственно правильное решение, которое вы можете принять при выборе способа адаптации вашего сайта или лендинга под мобильные устройства — это провести сплит-тестирование. Посмотрите, как ведут себя ваши пользователи на ресурсе, и разработайте наиболее удобный вариант именно для вашей целевой аудитории.
Чем мобильная версия сайта отличается от десктопной: особенности, которые вам нужно учесть
Задачи пользователя
По данным StoneTemple, 55,79% трафика приходит с мобильных устройств. При этом статистика отказов на 40% выше, чем в десктопной версии, а просмотренных страниц и времени, проведенного на сайте — в 2-3 раза меньше (в зависимости от отрасли). Например, категория «красота и фитнес» собирает с мобильных 63,6% трафика. При этом среднее время просмотра тематических сайтов с десктопа — 5,05 минут, а с мобильного — всего 3,32. Тенденция сохраняется независимо от тематики. Есть только одно исключение: на сайтах, посвященных книгам и литературе, мобильные пользователи проводят больше времени, чем те, кто предпочитает десктопную версию.
Пользователи же смартфонов ищут быстро и по необходимости — парикмахерские, рестораны, СТО, мелкую электронику, подарки. Они способны принять решение о покупке спонтанно — особенно это касается одежды, украшений и недорогих гаджетов. Задача мобильной версии — упростить процесс заказа и сделать все, чтобы покупатель не только выбрал, но и оплатил покупку. Поэтому рекомендуем затачивать воронку именно под конверсионной действие: заказ, консультацию, звонок и т. д.
Оптимизация
Наполнение и дизайн
57% пользователей не будут рекомендовать компанию, если мобильная версия выглядит дешево — в их глазах плохо проработанный дизайн автоматически понижает уровень фирмы, заставляет ее выглядеть непрофессионально.
Внимание нужно уделить размеру кнопок, меню, текстам. Очень важно, чтобы верстка была ровной, без горизонтальной прокрутки, а на ссылки легко было кликнуть. Подробнее о таких моментах мы уже писали.
Реклама и аналитика
70% мобильных пользователей заявили о неприятии рекламы на своих устройствах, и число их с каждым годом растет на 90% (то есть почти в 2 раза!). Экран смартфона намного меньше, объявления очень сильно бросаются в глаза. Если реклама необходима, сократите ее к минимуму – максимум 1 шт. на экран. При этом нужно придерживаться допустимых форматов. С января 2017 года Google строго наказывает за назойливую рекламу и pop-up окна, понижая в выдаче отдельные страницы.
Для мобильной версии есть отдельный поиск, и там действуют свои факторы ранжирования. Чтобы точно измерять трафик и конверсии, стоит настроить аналитику отдельно. Кстати, ее результаты могут весьма сильно отличаться от параметров десктопной, будьте к этому готовы.
То же правило касается рекламных кампаний для мобильной версии. нужно настраивать другие форматы рекламы через Google и сеть Яндекса, т. е. разделять рекламные кампании тоже.
Подведем итог
Неважно, чем вы занимаетесь в интернете — продаете одежду, проводите курсы, предлагаете услуги по ремонту бытовой техники, ведете блог и зарабатываете на нативной рекламе, etc. — если у вашего сайта еще нет удобной и красивой мобильной версии, пришло время это исправить. Для решения этой задачи вы можете как улучшить существующую мобильную версию, поработав над дизайном, юзабилити и технической стороной, так и создать новую — в том числе с помощью конструктора Flexbe. И пусть ваши сайты продают!