Веб-дизайнеры, похоже, пришли к единому мнению, что создание отдельных сайтов для огромного количества доступных устройств практически невозможно. Адаптивные сайты — это будущее, если мобильный сайт не требует какой-то очень специфической функциональности или совершенно другого контекста, который стоит дополнительной разработки.
Знаменитые слова, которые вы, возможно, уже знаете, — это отзывчивый дизайн, мобильный подход в первую очередь и постепенное снижение качества. Это основные инструменты и методы для создания широко доступных веб-сайтов и веб-приложений.
В этой статье я остановлюсь на первом аспекте дизайна для мобильных устройств, а также расскажу о некоторых методах, которые могут также улучшить настольную версию вашего сайта.
Mobile сначала не обязательно означает, что вы должны начинать стилизацию с ширины экрана 320px. Это больше о рассмотрении всех возможных вариантов использования с самого начала рабочего процесса.
Простота
Простая и понятная компоновка гарантирует, что пользователь получает наилучшие впечатления даже на небольшом экране. Но стоит ли относиться к переносным посетителям только таким добрым способом? После того, как вы создали мобильный сайт с отличной доступностью и хорошим потоком, посмотрите на версию для настольного компьютера и сравните. Меньше может быть больше.
Не забывайте, однако, что касание и мышь очень разные по своей природе. Не заставляйте пользователей настольных компьютеров вывихнуть запястье только потому, что им нужно пройти 200 пикселей между двумя пунктами меню. Медиа-запросы ваши друзья.
Брось, спрячь
Таким образом, вы решили создать мобильный сайт или макет и увидеть, что некоторые функции менее важны, чем другие. Лучшее, что можно сделать, это избавиться от них, просто чтобы сохранить несколько пикселей и обеспечить лучший пользовательский опыт. Хорошая работа до сих пор.
Теперь спросите себя: нужно ли вообще иметь его на настольной версии? Может быть, это просто сбивает с толку или отвлекает посетителей? Может быть, эти пункты должны быть скрыты для опытных пользователей в подменю? Может быть, пользователи оценят наличие только 4 пунктов главного меню вместо 6?
Отзывчивость для настольных браузеров
Мне, например, нравится часто менять размер окна моего настольного браузера, особенно при многозадачности. Иногда вы просто не можете позволить себе тратить всю экранную недвижимость на одном сайте. При создании адаптивного веб-дизайна с использованием медиа-запросов учитывайте и пользователей настольных компьютеров.
Я думаю, я не единственный, кто сходит с ума, если мне нужно изменить масштаб сайта, чтобы подогнать его под видео или изображение. Поэтому, пожалуйста, исправьте это для меня и начните использовать адаптивные медиа. И это только одно из многих изменений, которые вы можете сделать.
ориентация
Ориентация является относительно новой спецификацией, которая основана на том, просматривается ли устройство в книжной или альбомной ориентации. Посредством медиазапросов вы можете назначать разные макеты вашим сайтам в зависимости от ориентации.
Некоторые настольные браузеры способны «подделывать» ориентацию, основываясь на пропорциях ширины и высоты окна. Это позволяет вам добавить несколько приятных настроек для улучшения пользовательского опыта.
Типы ввода
HTML5 имеет некоторые новые функции, которые помогают мобильным пользователям заполнять формы. Пример: если вы добавите в поле input type = ”email”, браузеры мобильных устройств будут предлагать клавиатуру с символами, относящимися к адресам электронной почты, такими как символ «@» или расширение «.com».
Помните, что это также помогает пользователям настольных компьютеров. Они получат свои ранее использованные адреса электронной почты, предлагаемые в выпадающем меню, или даже всю форму, заполненную автоматически, на основе ранее использованных данных.
Меньше навигации, лучшие прогнозы пользователей
Просмотр на мобильном устройстве часто раздражает меня (да, я раздражительный) и чувствую себя потерянным, если мне нужно перейти на несколько ссылок вниз от главной страницы. Я спрашиваю себя: я в правильном месте? Должен ли я просто вернуться и начать все сначала? Это не круто, так как мобильные пользователи немного страдают от недостатка без правильных вкладок, полного URL-адреса и большого пространства для описания.
Прокрутка кажется более естественной для пользователей с сенсорным экраном, чем навигация по пунктам меню. По возможности избегайте создания сложной структуры сайта. Вместо этого попытайтесь предсказать, что пользователи, вероятно, ищут, и попытайтесь разместить товары в соответствующем порядке (вы знаете, как это делают супермаркеты… Нет!).
Все это может быть верно и для вашего рабочего стола. Просто потому, что для вас очевидно, что определенный элемент находится в определенном пункте меню, у пользователя может быть другая идея. Я думаю, что стоит рассмотреть более крупные категории с более широким контентом, в отличие от очень специфических пунктов меню, которые вынуждают пользователя играть в азартные игры.
Давайте не будем забывать о великолепных функциях автоматической прокрутки jQuery. Это отличное сочетание навигации по меню и прокрутке, учитывая, что вы не против смешивать разные типы контента на одной странице.
Принять новые стандарты
Не проходя ненужных дебатов «о, флэш, зачем», я просто предлагаю вам сделать ваши сайты ориентированными на будущее, используя, по возможности, новые стандарты. Например, CSS3 для переходов и других модных визуальных элементов, HTML5 для расширенных взаимодействий. Это, кажется, путь. Помимо отмены некоторых довольно устаревших спецификаций, W3C довольно последовательно поддерживает устаревшую поддержку, поэтому я думаю, что это хорошая ставка, даже в долгосрочной перспективе.
Таким образом, решая проблему отсутствия флэш-памяти для мобильных телефонов, вам также нравятся современные настольные браузеры. Это беспроигрышный.
Давайте завернем это
Как вы видите, я не вдавался в технические детали, но в целом я думаю, что наличие этих аспектов может сэкономить вам значительное количество времени в процессе разработки, а также в будущем.
Не забывайте думать о кросс-устройстве, а не только о мобильном. Вместо создания неконтролируемого двуглавого зверя (или добавьте еще немного), сближение ваших портативных и настольных сайтов друг с другом по поведению приведет к единому опыту, который лучше всего подходит для любого контекста.