rezult (rezult) wrote,
rezult
rezult

Мобильная версия сайта Додо

В разработке сайтов есть подход, который называется «mobile first». Он подразумевает под собой приоритетную роль дизайна для мобильных устройств. Т.е. изначально дизайн планируется для отображения на смартфонах и планшетах.

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

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

00-all-compared
Сайт при разных разрешениях браузера.

Проблемы, которые уже сейчас можно выделить для существующей верстки:

  • Верстка не всегда тестируется на малых разрешениях, есть проблемы отображения (иногда верстка «едет»).

  • Не все скрипты работают хорошо на десктопе и на мобильных устройствах (нужно проводить «дебаггинг»).

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


Я выделяю три критичные страницы для приоритетной оптимизации для мобильных устройств:

  • Главная страница с меню пицц

  • Страница корзины

  • Страница адреса при оформлении заказа

Планшет

01-tablet.-prevjpg
Версия стилей для планшета начинает срабатывать при разрешении браузера меньше 960px.

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

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

Смартфон

01-phone-prev

Версия стилей для планшета начинает срабатывать при разрешении браузера меньше 395px.

Основная проблема здесь — сайт превращается в «длинную простыню» на странице меню. На остальных страницах можно разместить элементы более удобным способом.

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

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

Вывод

Все эти проблемы будут решены, в том числе используя опыт разработчиков, которые делали это уже не раз: статей, примеров и литературы в сети достаточное количество.
Tags: Додо, сайт
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments