Адаптивный дизайн является важнейшей и необходимой частью веб-разработки. Однако одной из самых больших проблем отзывчивого веб-дизайна в последнее время стали изображения. Многие спорят о лучшем способе отображения изображений на адаптивном сайте. И потом, как насчет фотогалерей?
Фотогалереи отличаются большей сложностью, чем одиночные изображения. К тому же существует множество переменных и других факторов, которые необходимо учитывать при реализации адаптивной галереи изображений на вашем сайте. Давайте взглянем на некоторые полезные советы по созданию отзывчивой фотогалереи правильным образом.
1) Слайд-шоу: скройте навигацию, когда это возможно
Вы можете не иметь элементы навигации на планшете или мобильном устройстве, а на столе, и это хорошая идея, чтобы скрыть эти детали, пока они не нужны. Такие элементы как стрелки вперед и назад или навигационные точки должен быть установлены на дисплее и отображаться лишь во время скольжения мышкой по галереи. Это позволит избежать отвлекающих факторов, а также поможет конфликтов между контентом и элементами навигации. В этом случае весь опыт покажется менее беспорядочным.
2) Избегайте вертикальных изображений
Если вы реализуете галерею, которая представляет собой сетку изображений, вам необходимо ориентироваться на горизонтальные снимки или квадратные, если это возможно. Такой выбор значительно облегчает их просмотр на маленьком экране. Вертикальные изображения будут хорошо выглядеть на смартфоне в вертикальном режиме, но широкоформатный просмотр на горизонтально ориентированным девайсе делает изображения сложными для просмотра. Горизонтальный вариант – это наилучший выбор, но вы так же можете остановиться и на квадратной форме, если он невозможен по какой-то причине. Все картинки могут быть установлены в соответствии с областью просмотра, но вертикальные изображения на горизонтальном экране выглядят очень маленькими. В этом случае ваши фотографии не будут так пристально рассматриваться, как если бы они были квадратными или горизонтальными. Это, в свою очередь, огромный недостаток, особенно если ваш сайт является портфолио.
3) Используйте жесты на таблетках и смартфонах
Люди любят использовать жесты на сенсорных экранах. Они чувствуют себя более уверенно, когда пролистывают изображения, поэтому опыт будет более захватывающим. Пытаться выявить крошечные стрелки или навигационные точки на мобильном устройстве — это слишком утомительно. Гораздо более естественно, просто взять палец и провести им по изображению вверх, вниз, влево или вправо.
4) Избегите лайтбоксы: отключите их на мобильных устройствах
Если у вас имеются изображения продуктов, такие как оборудование или другие товары, которые следует рассматривать более подробно (ткани, драгоценные камни и т.д.), в этом случае лайтбокс с большими изображениями имеет смысл. Но даже тогда, он должен использоваться только на рабочем столе. Когда вы просматриваете изображения на таблетках или экранах мобильных устройств, лайтбоксы должны быть отключены. Они могут вызвать целый ряд проблем для пользовательского опыта. Если что-то случится, и лайтбокс будет иметь неправильный размер, то пользователь не сможет получить доступ к кнопке выхода, или же изображения могут не отображаться должным образом.
5) Используя навигационные элементы, делайте их незаметными
Если у вас присутствует скользящая галерея изображений со значительным количеством слайдов, то навигация имеет смысл. Вы же не хотите заставлять пользователей ждать, пока прокрутятся все изображения. Так они смогут легко прокрутить галерею с их собственной скоростью, войти, получить то, что хотят и выйти. При использовании этих элементов, убедитесь, чтобы спрятать их в местах, где они выходят за рамки. Они не должны иметь навигационных точек, переходящих на текст или другие ссылки. Кроме того, избегайте чрезмерно сложных элементов управления. Они занимают много места, отвлекают пользователей от контента и создают беспорядочный вид. Так что не перестарайтесь!
6) Не смешивайте изображения и видео
Смешивание различных медиа файлов обычно хорошо, но смешивание видео там, где их не ждут, может вызвать проблемы. Вы не хотите, чтобы пользователь случайно воспроизвел видео, играющее звуки, которые могут услышать все. Отделяйте видео от изображений, чтобы пользователи знали чего им ожидать. Никому не нравятся такие неожиданности.
7) Убедитесь, что изображения не выходят за рамки их максимальной ширины
Это важно, потому что вы можете избежать пиксельного масштабирования изображений, которые слишком малы для пространства. Изображения должны быть достаточно большими, чтобы заполнить 100% экрана мобильного устройства (в большинстве случаев), но для рабочего стола размеры не должны превышать максимальной ширины.
8) Масштабирование изображений
Если у вас есть масштабирование изображения, убедитесь, что они масштабируются вниз, а не вверх. Лучше всего, чтобы установить точные размеры для ваших изображений. Очень часто, процентное отношение применяется для одной из величин, в то время как размер другой установлен на «авто». Например, если вы хотите изображение увеличивалось в браузере на 50% по ширине, то установите ширину изображения на 50%, а высоту на «авто».
9) Избегайте использования подписей к картинке
Подписи изображений или любой другой сопроводительный текст может вызвать кучу проблем для вас и ваших пользователей. Первая проблема заключается в том, что очень трудно приспособиться к тексту на мобильном устройстве. На смартфонах вы имеете ограниченное пространство, и попытка добавить текст может привести к ощущению тесноты и беспорядочности у пользователя. Другая проблема заключается в том, что вы ограничены в размерах текста, который вы можете использовать. К тому же вы должны учитывать разрывы слов, и как несколько строк текста будут выглядеть в конечном итоге вместе с изображением. Если текст используется в качестве наложения, вы также должны позаботиться о местах, где он падает на изображение. Светлый текст поверх светлой области изображения сделает текст нечитаемым. Контраст является ключевым, а каждое изображение индивидуальным.
Заключение
В итоге, когда дело доходит до какого-либо аспекта веб-дизайна, в первую очередь нужно позаботиться о хорошей работе сайта, думая о пользователях. Если никто не сможет использовать ваш сайт, то они не вернутся. Соблюдая эти несложные правила адаптивных фотогалерей, создавайте сайты, где пользователям не придется сталкиваться с общими проблемами при просмотре изображений.
0 комментариев