Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » CSS, Свой сайт

Как сделать сайт удобным для работы на планшетах

22 февраля 2013 3 комментария

В настоящий момент почти 70 миллионов планшетных устройств (это 30% пользователей Интернет) используются только на территории США. И количество их удвоилось за последний год, а трафик с планшетов для e-commerce сайтов вырос на 348% впервые обогнав веб-трафик смартфонов. По прогнозам экспертов ожидается наступление планшетов, которое потеснит рынок настольных ПК, а в ближайшем будущем и ноутбуки. Пора подумать о том, как сделать сайт удобным для разных платформ (в данном случае планшетных ПК). Игнорирование, в ближайшее время негативно скажется уже на другой статистике из веб-аналитики и это будет: низкий процент охваченной аудитории, слабая конверсия при высоком показателе отказов…

Что такое Tappiness?

Когда веб-сайт демонстрирует tappiness (англ. касание, постукивание) — это значит он легок в использовании для пользователей мобильных устройств (планшетов, смартфонов). Tappiness подразумевает разумное использование пространства и текст, который легко читать, логическую взаимосвязь в ходе подачи информации и достаточно большие кнопки для касания пальцами. Все эти удобства необходимы для уверенной навигации по сайту с планшетов.

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

способы оптимизации сайта под планшетыВозможно идеальным решением для сайта будет его редизайн с адаптивной версткой: когда вы используете адаптивный макет с поддержкой различных мобильных платформ. Поставленную задачу поможет решить адаптивный CSS-фреймворк, такой как Twitter  Bootstrap. Еще вариант: создание адаптивного дизайна на подходящем шаблоне Bootstrap. Финансовые и временные факторы могут препятствовать этому, но выход есть! Сайт можно сделать более удобным для сенсорных экранов при помощи несложных изменений в CSS.

Делаем сайт удобнее для пользователей планшетов в 6 шагов

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

1. Увеличьте значения size и margine для кнопок и призывов к действию. Известно, что средняя ширина указательного пальца для большинства людей 45-57 пикселей. Зачем же усложнять жизнь мобильному пользователю, заставляя его сначала отыскивать, а затем пытаться попасть по кнопке «Купить»?

оптимизация сайта под мобильные устройства (под планшеты) 2. Cсылки и призывы к действию должны быть заметны без наведения указателя мыши. Состояние hover не существует на планшетах. Согласуйте цвета ссылок со стилем вашего сайта и не бойтесь использовать подчеркивание для них по умолчанию.

Как адаптировать сайт под мобильные: цвета ссылок3. Увеличьте размер шрифта для лучшей читабельности. Увеличение размера шрифта на пару пикселей или em может иметь большое значение.

оптимизация сайта под планшет: размер шрифта4. Используя CSS свойство padding добавьте больше свободного пространства для пунктов меню навигации. Попробуйте сначала увеличить значение padding на 5-10 пикселей — или больше, если позволит дизайн.

оптимизация сайта под планшеты: меню навигации5. Используя CSS свойство margin увеличьте размеры полей страниц и текстовых блоков. Это повысит читабельность в целом. Когда мы добавляем «белое пространство» создается впечатление, как будто текст стал восприниматься легче. Особенно заметно в сравнении с перегруженной контентом веб-страницей.

адаптация сайта под мобильные устройства: margin, текстовые блоки и поля страниц6. Увеличьте размеры полей форм регистрации и пространства между ними. Упростите для ваших посетителей выбор и ввод информации в эти поля. Этого может оказаться достаточным для существенного увеличения конверсии.

Как адаптировать сайт под планшет: поля формВ качестве бонуса эти простые CSS настройки, скорее всего, будут выигрышными и для десктоп версии. Только не забывайте после подобных изменений протестировать сайт для различных платформ и браузеров.

Сайты, адаптированные под планшеты и мобильные устройства

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

Fitbit использует много свободного белого пространства в связке с крупным текстом и достаточно большие для пальцев размеры мишеней.

Адаптация сайта под мобильные устройстваXfinity  крупный текст, много свободного пространства, четко обозначенные ссылки и грамотная структура навигации. Трудно не заметить большие, легкие в использовании поля форм или кнопки выпадающего меню. Хотя e-commerce сайт не имеет адаптивного дизайна, разработчикам удалось сделать его удобным для малых экранов.

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

Как адаптировать сайт под планшетНе удивительно, что сайт Apple легко просматривать с планшетов (всё же они пионеры технологии портативных тачскринов).

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

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

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример