{"id":9389,"title":"\u041c\u0438\u043b\u043b\u0438\u043e\u043d \u043d\u0430 \u043e\u0431\u043b\u0430\u043a\u0430 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u043e\u0432","url":"\/redirect?component=advertising&id=9389&url=https:\/\/vc.ru\/promo\/318366-korotko-poluchit-million-na-testirovanie-oblachnoy-infrastruktury&placeBit=1&hash=573eeb526e6c42315ad14d1bf2a7c0879182f777f5702dcd30be48e10aa549e1","isPaidAndBannersEnabled":false}
Дизайн
Polina Bielohlazova

Пять наиболее распространённых ошибок адаптивного дизайна

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

Обратимся к мировой статистике:

  • 2018 год – через смартфоны было сгенерировано 52,2% всемирного онлайн-трафика; это на 1,9% больше, чем в 2017 году (Statista, 2018);
  • 70% владельцев мобильных телефонов, сделавших ту или иную покупку в магазине, сперва искали информацию о продукте на смартфоне (Google, 2017);
  • 89% пользователей с высокой вероятностью порекомендуют бренд знакомым, если онлайн-опыт с телефона был успешным (Google, 2017);
  • 40+% онлайн-транзакций совершается с помощью смартфонов или других устройств (Google, 2017);
  • 80% начальников B2B-компаний по вечерам ищут информацию о товарах на своих планшетах (IDG Global Solutions).

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

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

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

№1. Сокращение контента

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

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

№2. Огромный «вес» изображений

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

Как свидетельствуют результаты исследования, проведенного Strangeloop, ели сайт на мобильном гаджете будет загружаться дольше 3 секунд, его покинут 57% пользователей.

№3. Мелкие элементы

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

В адаптивной версии элементы навигации должны быть крупными!

№4. Игнорирование специфики пользования

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

Замечательный пример: смартфоном люди пользуются очень часто «на ходу». Поэтому так важно наличие в мобильной версии сайта уже упоминаемых нами крупных шрифтов. Немаловажно, чтобы все ключевые элементы навигации находились в пределах доступности большого пальца руки. Учитывайте и то, что на гаджетах не работает анимация и другие визуальные эффекты (ховеры). Дизайн должен выглядеть красиво и в статичном виде, а пользование – быть удобным без ховеров.

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

№5. Проектирование со смартфона на декстоп

«Mobile first» - популярный в последнее время подход к разработке сайтов. Он подразумевает под собой отказ от сложившейся традиции, когда сперва разрабатывается версия для декстопа, а уже после – для мобильных гаджетов.

Этот подход весьма разумный, но многие понимают его неправильно. «Mobile first» вовсе не означает, что сперва нужно проектировать дизайн для мобильной версии. Его суть – начинать проектирование сайта, как обычно, с декстопа, одновременно продумывая вид версии для гаджетов. А именно, какой вид будет у кнопок, чем заменить анимацию, как сдвигать блоки.

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

«Mobile first» подразумевает увеличение важности адаптивной версии сайта. Ведь более половины всех пользователей увидят сайт с мобильного устройства и будут рассматривать его функционал там же. Поэтому на продумывание и тестирование адаптивной версии должно быть уделено не менее половины вашего времени. Вторая половина – для декстопной версии. И никак иначе.

0
5 комментариев
Популярные
По порядку

"«Mobile first» - популярный в последнее время подход к разработке сайтов."

Данный подход уже лет 10 как практикуют. ред.

2

верно подмечено;)

1

Насчет "Mobile first" немного не верно, но по-сути новичкам так будет понятнее.
MobileFirst по определению идеально подходит тем сайтам, которые изначально (в первую очередь) рассчитаны именно на мобильные устройства, например какой-нибудь "музыкальный сервис онлайн, с возможностью прослушивать MP3'шки в качестве 32-64Кбит, специально для тех у кого кончился трафик и интернет работает с ограничениями скорости", а десктоп просто чтобы был и закрывал вопросы остальной группы пользователей, при этом оставался с тем же функционалом.

В целом все верно.

1

Спасибо за подсказку! :)

1

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

0
Читать все 5 комментариев
Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

Взломан аккаунт VK и вместо помощи поддержки, получаешь от них блокировку

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

9 декабря банк «Открытие» и Яндекс.Бизнес проводят очередное бизнес-шоу «Цифровая эволюция бизнеса»

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

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

Глава СберМаркета Асан Курмангужин запустил подкаст Asan Talks в YouTube

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

«СберПрайм» ввёл лимит на бесплатную доставку продуктов из «СберМаркета» — её называли выгодой для подписчиков Статьи редакции

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

Webmoney на полгода приостановила переводы по рублёвым кошелькам Статьи редакции

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

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

Pinterest купила белорусский сервис для редактирования видео Vochi Статьи редакции

Покупка поможет Pinterest развивать видеонаправление.

vc.ru превратился в книгу жалоб

Вам не кажется, что vc.ru превращается в сайт для жалоб на разные сервисы и компании?

null