html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Формы в отзывчивом веб-дизайне

Формы помогают пользователю взаимодействовать с администрацией сайта.  Невозможно организовать работу интернет-магазина, блога, новостного портала или любого другого интерактивного сайта без формы. Сегодня мы рассмотрим основные проблемы использования форм при создании адаптивного дизайна и способы их решения.

 

Вот, как мы обычно видим форму, когда заходим на сайт с мобильного устройства.

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

Как должна выглядеть форма на мобильном устройстве?

Начнем с требований, которые нужно придерживаться, чтобы получить адаптивные формы:

  • Пользователь должен иметь возможность легко и просто выбрать какой-либо элемент формы
  • Все подписи и текст должны легко читаться на мобильных устройствах
  • При необходимости форма должна изменять свой внешний вид
  • Форма для мобильных устройств должна включать в себя все элементы, что и версия для настольного компьютера за исключением <input type=file>, так как загрузка файлов может быть недоступна в некоторых мобильных операционных системах.

Проблемы и решения

Проблема №1:

Такая форма, скорее всего, даже не нуждается в дополнительной оптимизации, так как ширина формы не будет превышает 500-600 пикселей. На смартфоне, однако, правая часть не будет видна и появится дополнительная горизонтальная прокрутка.

Решение:
Все, что нужно сделать — это расположить <label> на отдельной строке перед <input>. Это, по мнению Джейкоба Нильсена, — самый удобный вариант для пользователей.

________________________________________________________________________

Проблема №2:

Этот тип форм обычно используется для интернет-магазинов, создатели которого сэкономили пространства в заголовке для других элементов. Эта форма, безусловно, не вписывается в экран смартфонов.

Решение:
Как и в предыдущем примере, мы должны поместить <label> и <input> на разных строках. Кроме того, очень важно, чтобы поля были резиновыми, это позволит пользователям смартфонов любой модели одинаково удобно работать с формой.

________________________________________________________________________

Проблема №3

Регистрационные формы, в которых нужно заполнить контакты и / или платежную информацию, очень популярных на различных сайтах. Для того, чтобы заполнить такую форму с помощью мобильного устройства, вам придется прокручивать и часто перемещать страницы.

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

Автор: webcodebuilder

Перевод: Дежурка

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

2

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции