rezult (rezult) wrote,
rezult
rezult

Мобильный сайт Додо: работа над адаптивностью под смартфон

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

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

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

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

Нужно пересмотреть размещение элементов в блоках продуктов. Сделать их компактнее.

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

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

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


Существует несколько проблемных мест во внутренних страницах сайта. До последнего времени всплывающие окна не вмещались на экраны смартфонов — эта проблема решена добавлением адаптивности таким окнам. Требуют внимания страница корзины и страница принятого заказа. Но больше всего вопросов вызывает страница оформления. Формы требуют редизайна.

Скриншоты страниц, на данный момент:
Страница корзины
Страница оформления
Страница принятого заказа


Сегодня я успел переделать верстку страницы меню и страницы оформления под смартфоны.

Таким было меню:
01-before-01

Таким стало меню:
02-after-desktop


Такой была страница оформления:
01-before-03-prev

Такой стала страница оформления.
02-after-desktop-details


Впереди работа с версткой под планшеты.
Tags: mobile, Додо, сайт
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments