Дизайн мобильных версий сайтов

Разрешение.

Статистика разрешения гаджетов на 2016 год говорит нам о том что, что среднее — 720px

Естесственно, с выходом iPhone 7 и прочих новейших самсунгов разрешение повышается до 1080 по короткой стороне — она нас и интересует.

остальные размеры не значительны.
Итак, рисуем дизайн сайта под 720 пикселей. Оставшиеся страницы адаптируем на этапе верстки.

Размер элементов

Он должен быть мало того что читабельным с небольшого экрана, но и чтобы можно было попасть пальцем по кнопкам/ Шрифт должен быть в 3-4 раза крупнее десктоп версии. Кнопки высотой не менее 200px.

Все элементы не несущие существенной смысловой нагрузки убираем

Никакого Flach!

Флеш в 2016 практически умер — кроме баннеров. да и те режут надстройки браузера. А уж мобильники просто не ви

Учитываем — эффекты наведения не работают

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *