Как сделать адаптивный сайт: Что менять в HTML и CSS коде

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

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

Чтобы помочь вам разобраться в особенностях подхода, мы собрали советы, как сделать адаптивный дизайн, на известных профессиональных ресурсах: 99designs, The Next Web, WIRED.

Не ищите «стандартные разрешения экранов»

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

• Маленькие: ширина до 600px. Это для телефонов.
• Средние: 600px–900px. К таким устройствам относятся фаблеты, планшеты и небольшие нетбуки.
• Большие: 900px. Это ноутбуки и мониторы.

Другую версию мы слышали от представителя крупной российской веб-студии. Они разрабатывают дизайн под 5 разрешений:

• 320x568px
• 360x640px
• 768x1024px
• 768x1366px
• 1080х1920px

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

Смотрите также

Разными бывают не только устройства, но и браузеры

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

Что делать? Попробуйте протестировать мобильную и десктопную верстку на максимальном количестве устройств. Используйте специальный софт, например, Am I Responsive? Пока ничего лучше для проверки адаптивной версии сайта не придумали.

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

Выражение mobile first уже набило оскомину, но актуальность не потеряло. Больше всего проблем возникает с текстом и логотипом. И тут очевидно, что если текст читается на телефоне, то у вас будет меньше проблем на планшетах, а затем — на десктопе.

Изображения должны подходить под все устройства

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

Верстка мобильного меню — это отдельный вопрос

Чаще всего элементы меню на мобильных устройствах убирают в иконку «Гамбургер»:

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

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

В плане навигации на мобильных устройствах специалисты чаще всего хвалят решения YouTube:

Учитывайте жесты

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

• Tap (Тап) — это клик
• Swipe (Свайп) — прокручивание экранов влево-вправо
• Scroll (Скролл) — прокручивание экрана вверх-вниз
• Long Press (Долгое нажатие) — как клик правой кнопкой мыши
• Pinch (Стягивание)
• Spread (Растягивание)
• Double tap (Двойное нажатие)
• Сильное нажатие

Задача дизайнера — сделать такие жесты удобными в адаптивных шаблонах сайта. Подумайте о том, что, например, точки в фотогалерее-«карусель» будет трудно кликать с небольшого экрана.

Согласно гайдлайнам Apple, минимальный размер элементов для тапа — 44x44px. Правда, этот стандарт часто нарушается, и веб-дизайнеры уменьшают показатель до 25x25px.

Не делайте адаптивные макеты под устройства абсолютно разными

Это особенно опасная ошибка, если вы делаете не резиновую верстку, а отдельный HTML под каждый макет.

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

Найдите крутого разработчика в помощь

Без гуру Bootstrap или человека, который может создать и подключить адаптивные версии под каждое устройство, ничего не получится.

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

А если вас интересует сайт как объект бизнеса, а не дизайна, изучите инструкцию Комплето к разработке сайтов.

Хотите получить предложение от нас?

(Visited 760 times, 1 visits today)

Разработка адаптивного сайта

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

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

Само понятие «адаптивный дизайн сайта» было введено в обиход в 2010 году в статье Итана Маркота. Спустя несколько лет адаптивная верстка сайта стала использоваться большинством крупных компаний.

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

Для начала поясним, чем отличается адаптивный дизайн сайта от обычной «резиновой верстки»

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

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

Чем отличается мобильная версия сайта от адаптивной?

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

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

И вот почему…

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

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

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

А теперь о технической стороне вопроса. Как сделать адаптивный сайт и на что нужно обратить внимание?

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

Создание адаптивного дизайна сайта включает в себя

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

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

Хотите заказать адаптивный сайт? Добро пожаловать к нам.

Как сделать адаптивный дизайн сайта

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

Описание внешнего вида страницы сайта хранится в таблице стилей CSS, иными словами, это файл, который формирует верстальщик на основании вашего дизайна. Там описывается, какой будет фон страницы, отступы объектов, выравнивание, размеры шрифтов и т. д. И все эти значения будут разными, в зависимости от того, какой размер экрана у пользователя, просматривающего сайт в данный момент. Задаются разные правила стилей для следующих размеров экрана (если кому интересно, это правило media query – min-width (минимальная ширина, то есть то значение ширины экрана, при котором текущие правила дизайна будут действовать)):

min-width — 1200px; — большой десктоп

min-width — 992px; — десктоп поменьше

min-width — 768px; — планшет

min-width — 480px; — смартфон

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

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

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

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

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

Так же возможен вариант, когда все иконки с header перемещаются в кнопочное меню, как здесь.

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

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

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

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

Например, кнопки для соц сетей. 

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

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

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

(Visited 1 211 times, 1 visits today)

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

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

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

Итан Маркот – дизайн-разработчик, чье качественное кодирование гармонично сочетается с уникальным и захватывающим оформлением, в 2010 году впервые ввел понятие адаптивного дизайна. Эту идею быстро подхватили управляющие крупных компаний, и через несколько лет большинство интернет-ресурсов были преобразованы. Сегодня же главы веб-проектов наслышаны о такой возможности, но не до конца понимают ее специфику, поэтому и не задумываются, как сделать мобильную версию сайта. Давайте же проясним основные отличия адаптивного дизайна и привычной «резиновой верстки»:

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

Сделать адаптивную верстку сайта или мобильную версию?

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

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

• Не создает необходимости поддерживать несколько разных вариаций сайта для компьютера, планшета или смартфона. Так, пользователь сможет просмотреть полный контент основного портала, который прилаживается к персональному устройству.
• Находится на одном URL. При переходе на мобильную версию переадресация может давать сбои, что напрямую влияет на доступность контента, что сказывается, как на самом проекте, так и на его госте, который вероятнее всего просто перейдет на более комфортный и адаптированный веб-ресурс.
• Играет важную роль в SEO-оптимизации. К примеру, поисковая система Google ранжирует сайты с учетом их адаптированности к мобильным гаджетам. 

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

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

Этапы работы включают в себя:

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

Если вы желаете сделать адаптивный дизайн сайта, то милости просим!

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

Содержание статьи

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

Итак, существует три способа построения мобильных версий сайтов:

1. Адаптивный дизайн. Страница сайта в данном случае не меняется, но CSS-файл применяет другие правила, в зависимости от ширины окна браузера, и “адаптируется” под него.
2. Отдельный мобильный сайт. Он размещается на поддомене или в подкаталоге, иногда основной и мобильный сайт имеют одинаковый URL. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»). Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает их изменить, так как эти версии сайтов хранятся в разных каталогах. Отличный пример – мобильный сайт ВКонтакте (m.vk.com).
3. Мобильная версия сайта или RESS (Responsive Design + Server Side). Этот метод сложный в разработке, но включает в себя преимущества как адаптивного дизайна, так и отдельного мобильного сайта.

Прогрессивные веб-приложения

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

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

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

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

Тенденции веб-дизайна

1. «Mobile First»

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

2. Навигация

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

3. Размеры экрана

Большинство смартфонов имеют расширение 320 пикселей.  Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.

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

4. Тачскрин

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

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

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

4. По возможности нужно отказаться от ввода текста.
5. Не пренебрегайте такими возможностями платформы, как функция «click to call» или адрес компании в виде ссылки (загрузка карты с маршрутом).

Как сделать адаптивную верстку

При адаптивном дизайне используется один HTML-код для всех размеров экранов. Все элементы меняются в зависимости от правил, которые прописывают в файле CSS media.

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

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

Правила верстки

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

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

Поисковую строку лучше заменять иконкой «увеличительное стекло». А верхнее меню сделать выпадающим. Это обеспечивает удобство использования и экономит пространство.

Что такое Progressive Web Apps

Любую реорганизацию начинают с ключевых блоков, а менее значимые элементы не отображают на усмотрение дизайнера.

Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:

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

Все блоки, которые удалены с мобильной версии, необходимо внести в HTML-код и скрыть их отображение на определенных устройствах.

Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.

Удачные примеры адаптивных сайтов:

1. New Adventures In Web Design Conference 2012

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

2. Ribot

Дизайн этого сайта удобен для экранов всех гаджетов и отображает всю информацию о компании и сервисе.

3. Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.

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

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

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

Перед разработкой важно проверить ключевые запросы, по которым пользователи ищут данный контент. Эту информацию можно просмотреть в Google Analytics в отчете «Поисковая оптимизация».

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

Преимущества и недостатки этих способов разработки

Заключение

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

Учитывая нынешние тенденции использования мобильных устройств, создание мобильной версии просто необходимо, так как большинство пользователей заходят в Интернет через гаджеты. Если у вас ограниченный бюджет и вы не хотите тратить деньги на создание мобильного приложения для вашего сайта — компания Google рекомендует новую технологию Progressive Web App  или прогрессивные веб-приложения.

Технология позволяет совместить качества мобильного сайта и приложения. Пользователь заходит на сайт и сразу же получает предложение установить его на рабочем столе. Установка происходит по одному клику (ярлык сохраняется на рабочем столе). PWA занимает минимум места (до 200 Кб) и не тратит ресурсы мобильного устройства, работает в режиме оффлайн и при плохой Интернет-связи, автоматически обновляет контент при наличии хорошего интернет-соединения, загружается мгновенно (!).

Кроме того, в технологию «вшита» функция push-уведомлений, которые возвращают посетителей на сайт, напоминая им о нем. Наконец, раскрутка сайта с PWA происходит по той же схеме, что и раскрутка обычного сайта (не приложения — иметь дело с Интернет-магазинами приложений даже не придется) при помощи обычных маркетинговых инструментов, без задействования дополнительного бюджета. Если учесть, что уже с лета компания Google анонсирует введение ранжирования мобильных страниц по скорости загрузки, то становится ясно — супербыстрые прогрессивные веб-приложения PWA помогут добиться лидерских позиций в этом рейтинге.

Вас также может заинтересовать

Адаптивный сайт — как не потерять мобильных клиентов? :: Айкон

Согласно нашим аналитическим данным, более 35%, а в некоторых нишах и более 50% пользователей сайтов посещают их с мобильных устройств — смартфонов и планшетов. Когда пользователи мобильных устройств открывают обычную (desktop) версию сайта, многие элементы для них могут быть неудобными.

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

• Необходимость масштабирования (pinch-to-zoom) и прокрутки сайта

• Неудобства в работе с управляющими элементами (поля и кнопки)

• Сложности в целостном восприятии сайта, необходимо постоянно менять область просмотра и прокручивать сайт “во все стороны”

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

Отношение поисковых систем к адаптивным сайтам

Значительным плюсом создания адаптивной версии сайта является положительное отношение к адаптивным сайтам поисковыми системами. Это значит, что в мобильном поиске Яндекс и Google адаптивный сайт будет ранжироваться выше, чем неадаптивный, а значит вы получите больше трафика и продаж.

Как проверить, есть ли у сайта адаптивная версия?

Многие сайты, которые были разработаны в 2016 году, а особенно те, которые сделаны на базе готовых решений WordPress или 1С-Битрикс, уже имеют адаптивную версию сайта и отлично подходят для просмотра на мобильных устройствах.

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

Проверка сайта paeserussia.com при помощи сервиса Google:

Адаптивная или мобильная версия?

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

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

Пример адаптивной версии сайта:

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

Процесс разработки адаптивной версии сайта

1. Разработка макетов дизайна

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

2. Адаптивная верстка сайта

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

Что важно для разработки адаптивной версии сайта?

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

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

2. Подготовка изображений

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

Приведем пример: на сайте есть блок преимуществ (4 штуки) с изображениями формата 200х300 пикселей. Для адаптивной версии сайта, четыре преимущества, скорее всего, будут расположены в одну колонку по одному преимуществу в ряд.

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

3. Мобильное меню

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

4. Длина сайта

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

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

5. Размер шрифта

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

6. Элементы интерфейса в мобильной версии сайта

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

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

7. Скажите “нет” технологии Flash

Технология Flash постепенно исчезает из веб-индустрии, и множество мобильных устройств перестают ее поддерживать. Если говорить про обычную версию сайта, то на ней поддержка Adobe Flash тоже постепенно прекращается, например, браузером Google Chrome планируется завершение поддержки данной технологии в 2017 году.

8. Технические параметры, необходимые для адаптивного сайта

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

Подведем итоги

В данной статье мы рассмотрели основные требования по создании адаптивной версии сайта и факторы, почему создание адаптивной версии в настоящее время особенно актуально. Если у вашего сайта пока еще нет адаптивной версии, то вы можете оставить заявку вы можете в разделе “Разработка сайтов”.

Читайте далее: Актуальность SEO-продвижения

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

Адаптивный дизайн или адаптивную вёрстку сайтов нельзя игнорировать, сегодня, когда львиная доля пользователей пользуется мобильными устройствами. Тем, кто не использует адаптив, закрыты топовые позиции в поисковой выдаче и гарантирован негативный пользовательский опыт. Нет мобильной версии сайта — о высоких конверсиях и продажах можно забыть. Почему адаптивный веб-дизайн сайта так важен и как его сделать, подробно разберем в статье. Обсудим следующие моменты:

Для чего мне адаптивный сайт?

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

Google регулярно собирает статистику и выпускает отчёты о том, какие устройства выбирает аудитория: смартфоны, планшеты или компьютеры. Примерно 60% людей открывают сайты только с мобильных устройств, 25% — имеют и то, и другое, никогда не берут в руки мобильники только 15%.

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

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

Если у вас есть полная (десктопная) версия и менять её вы не хотите, можете сделать мобильную версию. Она будет такой же, но сможет подстроиться под масштаб экрана устройства, с которого её откроют. К адресу впереди обычно добавляется буква m, то есть адрес начинает выглядеть так: m.domainname.com. Это помогает пользователю понять, что в данный момент он находится именно на мобильной версии сайта.

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

Схема работы с DudaMobile:

1. Задать адрес вашего ресурса, для которого нужна мобильная версия.
2. Подождать около трёх минут, пока система обработает информацию.
3. Самостоятельно создать адаптивную страницу, начав с раздела «Дизайн». Выбрать макет страницы, цвета, шрифты, фон.
4. Перейти в раздел «Страницы» и отредактировать каждую страницу сайта по отдельности.
5. Перейти во вкладку «Предпросмотр», проверить получившуюся мобильную версию.
6. Перейти на страницу оплаты и перечислить деньги за разработку.

Создание адаптивной версии с DudaMobile обойдется в 159$. Это выгоднее, чем заказывать разработку в агентстве или у специалиста.

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

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

1. Конструктор сайтов Tilda Publishing.

Отличный сервис предлагает огромный выбор красивых, сочных и современных шаблонов, каждый из которых — адаптивный. С Тильдой вы сможете за несколько минут создать качественный сайт или landing page. Адаптивный дизайн доступен по умолчанию. О нём подумали при подготовке шаблонов разработчики платформы, поэтому вам не нужно писать ни одной строчки кода. И дополнительно доплачивать за адаптивность тоже не требуется.

2. Конструктор сайтов Wix.

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

3. Конструктор сайтов uCoz.

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

4. Система управления контентом WordPress.

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

Адаптив, мобильная версия или приложение?

Предположим, вы всерьёз задумались об удобстве ваших пользователей. Перед вами обязательно возникнет вопрос: что выгоднее и удобнее: адаптивная версия, мобильная версия или собственное приложение для Android или iOS? Универсальное решение – сделайте адаптивный дизайн и адаптивную вёрстку. Это удобно, сравнительно быстро и недорого.

• Адаптивность — стандарт в современной разработке сайтов. Пользователи ждут, что им не придётся сталкиваться с дополнительными неудобствами при посещении вашего портала.
• Мобильная версия вызывает необходимость делать одну и ту же работу дважды. Это влечёт за собой дополнительные расходы. К тому же мобильные версии попросту неудобны пользователям, особенно пользователям из поколения Z, которые повзрослели уже в эпоху тотального развития адаптива.
• Отдельное мобильное приложение — это вариант для крупных компаний, которым действительно есть что сказать пользователям. Если у вас малый или средний бизнес, приложение вам не нужно.

Выводы и рекомендации

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

Адаптивный веб-дизайн — Как сделать сайт хорошо выглядящим на телефонах и планшетах

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

Еще недавно термина «адаптивный веб-дизайн» не существовало. Но сегодня большинству из нас пришлось в той или иной степени принять его.

По данным Statistica, по состоянию на 2019 год 61% всех посещений в поисковой сети Google совершается на мобильных устройствах. В сентябре 2020 года Google изменит свой алгоритм поиска, чтобы отдавать предпочтение сайтам, оптимизированным для мобильных устройств.

В этом посте я расскажу о следующем:

• Что такое адаптивный веб-дизайн?
• Метатег области просмотра и его назначение
• Эффективные методы, используемые в адаптивном веб-дизайне для мобильных и планшетных устройств
• Инструменты, помогающие моделировать и контролировать взаимодействие с пользователем мобильных устройств и планшетов

Что такое адаптивный веб-дизайн? (RWD)

Адаптивный веб-дизайн — это подход, ориентированный на среду пользователя веб-сайта.Среда пользователя будет зависеть от того, какое устройство он подключил к Интернету.

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

• сетевое соединение
• размер экрана
• тип взаимодействия (сенсорные экраны, трекпады)
• графическое разрешение.

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

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

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

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

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

Ниже представлена ​​стандартная реализация:

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

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

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

Ниже приведен пример распространенного варианта использования стиля «сначала мобильные», в котором ширина столбца составляет 100% для небольших устройств, а для больших окон просмотра — 50%.

 .столбец {
  ширина: 100%;
}

@media (min-width: 600 пикселей) {
  .столбец {
    ширина: 50%;
  }
}  

Приведенный выше код является простым примером, но то, что он делает на самом деле, довольно интересно.

1. При рассмотрении в первую очередь мобильных устройств, элемент «столбец» имеет ширину 100%;
2. Используя медиа-запрос min-width , мы определяем правила специально для видовых экранов с минимальной шириной 600px (видовые окна шире 600px ).Итак, для видовых экранов шириной более 600px наш элемент столбца будет иметь ширину, равную 50% от его родительского элемента.

Хотя медиа-запросы необходимы для адаптивного веб-дизайна, многие другие новые функции CSS также получают широкое распространение и поддержку в браузерах. Flexbox — одна из этих новых важных функций CSS с точки зрения адаптивного веб-дизайна.

Что такое Flexbox?

Вам может быть интересно — «что делает Flexbox»? Лучший вопрос — «чего не может Flexbox»? Какой самый простой способ центрировать по вертикали с помощью CSS? Flexbox.Как создать адаптивный макет сетки? Flexbox. Как мы можем достичь глобального мира? Flexbox.

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

В приведенном ниже примере мы объединяем медиа-запросы, как описано выше, для создания адаптивной сетки.

  <стиль>
  основной {
    фон: # d9d7d5;
    дисплей: гибкий;
    flex-wrap: обертка;
    justify-content: пробел между;
  }

  div {
    фон: # 767775;
    флекс-основа: 100%;
    высота: 100 пикселей;
    нижнее поле: 0.5рем;
  }

  @media (min-width: 600 пикселей) {
    основной {
      Flex-wrap: nowrap;
    }

    div {
      флекс-основа: 33%;
    }
  }

<основной>