По релевантности По дате

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона?

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

О заказчике

«Петербургская Недвижимость» - одна из компаний холдинга Setl Group и крупнейшее агентство по продаже новостроек региона, для которой мы уже разработали основной сайт.

Для чего нужна мобильная версия?

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

Задача

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

Процесс

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

Утвержденный вариант

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона? - 1

Что «такого» в мобильной версии spbrealty.ru?

Все «фишки», которые есть в десктопной версии сайта, мы перенесли и в мобильную.

Меню и строка поиска

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

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона? - 2

Поиск по карте

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона? - 3

Избранное

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

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона? - 4

Карточки объектов — все данные на одной странице

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

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона? - 5

Связь с менеджером с любой страницы

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

Мобильная верстка spbrealty.ru: как уместить километры информации на экран телефона? - 6

Понравилась статья? Расскажи об этом друзьям!

Нужен успешный проект или реклама?
Хочу заказать