Пт, 17/02/17 – 3:54 | No Comment

Что 2017-й год вносит нового в Веб? Каких главных направлений и трендов в веб-дизайне, стоит ожидать? Сейчас все выясним – в формате емкого …

Читать статью »
CSS верстка

Оформление веб-страницы: css3 html5 приемы верстки сайтов

Дизайн

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

Wordpress

Wordpress сайту: современные и креативные, шаблоны вордпресс

Интернет-маркетинг

О маркетинге в сети Интернет и web-эффективности

Свой сайт

О создании оформления сайта, как сделать свой сайт лучше

Главная » CSS верстка, Свой сайт, Советы и решения

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

22 Февраль 2013 Один комментарий

В настоящий момент почти 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 настройки, скорее всего, будут выигрышными и для десктоп версии. Только не забывайте после подобных изменений протестировать сайт для различных платформ и браузеров.

Читайте также:  10 бесплатных навигационных меню на HTML5 и CSS3

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

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

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

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

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

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

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

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

Читайте также:  9 трендов в веб-дизайне на 2017 год