Мобильный сайт Додо: работа над адаптивностью под планшет
Прежде чем оптимизировать под планшет адаптивный дизайн, нужно определить, где начинаются нужные нам разрешения. Я исхожу из того, что начиная с 1024 пикселей в ширину (или чуть меньше, с учетом элементов браузера, занимающих пространство экрана) можно показывать полноценный сайт, как на десктопе, так и на мобильных устройствах. Поэтому выбирается в качестве «адаптивной точки» ширина 960 пикселей. Такой же дизайн увидят пользователи смартфонов при разрешении больше 395 пикселей.
Нужно определить проблемы текущего варианта верстки, а в конце поста будет показано, как были решены эти проблемы.
Большинство внутренних страниц выглядит под планшетом так же, как на минимальных разрешениях, над которыми я работал в прошлом посте.
Это то, как сейчас выглядит меню продуктов на сайте на разрешениях планшета.
Шапка сайта
Можно намного более эффективно использовать пространство.
Блоки продуктов
По сути, это просто растянутая версия отображения под смартфон. Можно показать больше продуктов в более интересной компоновке. Иначе, продукты выстраиваются в длинную страницу, которую нужно очень долго скроллить. Нужно делать компактнее.
Блок с ценой и кнопкой «Корзина»
Скорее всего нужно зафиксировать в нижней части экрана.
Сегодня я поработал над страницей меню продуктов. Вот так теперь она выглядит:
Шапка стала компактнее, блоки продуктов ниже по высоте, чтобы меньше скроллить. Блок цены и кнопка «Корзина» зафиксированы в нижней части экрана.
PS Единственное что изменяется в нашем случае при редизайне - CSS. Весь код HTML остается неизменным.
Нужно определить проблемы текущего варианта верстки, а в конце поста будет показано, как были решены эти проблемы.
Большинство внутренних страниц выглядит под планшетом так же, как на минимальных разрешениях, над которыми я работал в прошлом посте.
Это то, как сейчас выглядит меню продуктов на сайте на разрешениях планшета.
Шапка сайта
Можно намного более эффективно использовать пространство.
Блоки продуктов
По сути, это просто растянутая версия отображения под смартфон. Можно показать больше продуктов в более интересной компоновке. Иначе, продукты выстраиваются в длинную страницу, которую нужно очень долго скроллить. Нужно делать компактнее.
Блок с ценой и кнопкой «Корзина»
Скорее всего нужно зафиксировать в нижней части экрана.
Сегодня я поработал над страницей меню продуктов. Вот так теперь она выглядит:
Шапка стала компактнее, блоки продуктов ниже по высоте, чтобы меньше скроллить. Блок цены и кнопка «Корзина» зафиксированы в нижней части экрана.
PS Единственное что изменяется в нашем случае при редизайне - CSS. Весь код HTML остается неизменным.