Адаптивный дизайн (отзывчивый дизайн)

Число пользователей, выходящих в Интернет через планшеты и мобильные телефоны, растет. Это, как вы уже знаете, означает, что уже недостаточно создать хорошую веб-страницу, которая хорошо выглядит на нашем компьютере: ее также необходимо просматривать на каждом мобильном устройстве. Проблема? Разные размеры и разрешения экрана. Вот почему так сложно сделать дизайн, который правильно адаптируется ко всем медиа (знаменитый адаптивный дизайн, переводится как адаптивный дизайн).

Вот несколько советов, которые следует учитывать при создании дизайна с этими характеристиками. Обращать внимание!

Советы по адаптивному дизайну

1. Сделайте простой шаблонПод простым я не имею в виду безвкусный. Я говорю о структура HTML вашего сайта: чем он понятнее, тем лучше. Имейте в виду, что на экране компьютера можно разместить три вертикальных столбца; на экране мобильного у вас поместится только один. Подумайте об этом и о том, как вы будете перемещать элементы.
2. Избавьтесь от всего лишнегоИзбегайте эффектов jQuery, Flash-анимации и любого другого кода, который замедляет загрузку вашей страницы. Чем меньше у вас контента этого типа, тем быстрее будет загружаться Интернет.
3. Определите стиль css для каждого "размера"Создайте (например) файлы tiny.css, small.css и big.css, которые будут запускаться на основе устройства, на котором они просматриваются. Например:
   

   @import url (tiny.css) (минимальная ширина: 300 пикселей);

   @import url (small.css) (минимальная ширина: 600 пикселей);

   @import url (big.css) (минимальная ширина: 900 пикселей);

4. Наиболее часто используемые разрешения320 пикселей / 480 пикселей / 720 пикселей / 768 пикселей / 900 пикселей / 1024 пикселей
5. Сделайте ваш шаблон ГИБКИМПо возможности работайте с процентами, а не с фиксированными суммами. Вот некоторые эталонные эквиваленты: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
6. Типография важнее, чем когда-либо Иногда экран вашего устройства может быть настолько маленьким, что все, что вы видите, - это текст. Вот почему мы должны очень тщательно отбирать лучшие шрифты на нашем сайте, чтобы при уменьшении размера они не теряли разборчивости. Кроме того, мы должны знать, как сочетать более нейтральные шрифты с другими шрифтами с индивидуальностью, которые придают Интернету необходимый характер. Поэтому первый совет - потратьте время на выбор шрифтов, которые собираетесь использовать.
7. Использовать изображения высокого качестваПо мере уменьшения пространства изображения будут сопровождать его. Выберите те, которые не теряют качества при уменьшении и работают так же при масштабировании. Изображение низкого качества ухудшит внешний вид вашего сайта.
8. Что ваши изображения всегда видны полныйПредотвратите обрезку ваших фотографий, добавив код img (width: 100%;) в ваш CSS. Таким образом, вы указываете устройству пересчитать высоту изображения, чтобы его ширина была видна на все сто процентов.
9. Все низко тот же URLЗабудьте о субдоменах вроде www.mysite.com/mobile, поскольку один и тот же файл index.html в корневой папке будет работать для всех устройств (если вы правильно сделаете адаптивный дизайн). Вы уже знаете преимущество: чем меньше поддоменов, тем быстрее будет загрузка страницы.
10. Воспользуйтесь опорами: Будьте изобретательны. Доступ к веб-сайту с настольного компьютера - не одно и то же, чем с iPad или мобильного телефона. С первым вы будете двигаться спокойно и спокойно. С последним вы сделаете это в часы простоя и закроете окно, как только вам надоест. Воспользуйтесь этими условиями, чтобы развлечь пользователя и заставить его повеселиться в те несколько минут, которые они собираются посвятить вам. Возможно, когда он вернется домой, он решит навестить вас более расслабленно.
11. Вдохновиться В цифровых публикациях вы удивитесь, почему этот совет. Очень просто: цифровые журналы (хорошо) знают, как воспользоваться поддержкой, и их дизайн очень умный. Вдохновляйтесь ими и сделайте сайт, с которого сложно уйти.

Больше информации - Цифровые журналы

Источник - Сплио, 960.gs, столбчатый