Число пользователей, выходящих в Интернет через планшеты и мобильные телефоны, растет. Это, как вы уже знаете, означает, что уже недостаточно создать хорошую веб-страницу, которая хорошо выглядит на нашем компьютере: ее также необходимо просматривать на каждом мобильном устройстве. Проблема? Разные размеры и разрешения экрана. Вот почему так сложно сделать дизайн, который правильно адаптируется ко всем медиа (знаменитый адаптивный дизайн, переводится как адаптивный дизайн).
Вот несколько советов, которые следует учитывать при создании дизайна с этими характеристиками. Обращать внимание!
Советы по адаптивному дизайну
- Сделайте простой шаблонПод простым я не имею в виду безвкусный. Я говорю о структура HTML вашего сайта: чем он понятнее, тем лучше. Имейте в виду, что на экране компьютера можно разместить три вертикальных столбца; на экране мобильного у вас поместится только один. Подумайте об этом и о том, как вы будете перемещать элементы.
- Избавьтесь от всего лишнегоИзбегайте эффектов jQuery, Flash-анимации и любого другого кода, который замедляет загрузку вашей страницы. Чем меньше у вас контента этого типа, тем быстрее будет загружаться Интернет.
- Определите стиль css для каждого "размера"Создайте (например) файлы tiny.css, small.css и big.css, которые будут запускаться на основе устройства, на котором они просматриваются. Например:
@import url (tiny.css) (минимальная ширина: 300 пикселей);
@import url (small.css) (минимальная ширина: 600 пикселей);
@import url (big.css) (минимальная ширина: 900 пикселей);
- Наиболее часто используемые разрешения320 пикселей / 480 пикселей / 720 пикселей / 768 пикселей / 900 пикселей / 1024 пикселей
- Сделайте ваш шаблон ГИБКИМПо возможности работайте с процентами, а не с фиксированными суммами. Вот некоторые эталонные эквиваленты: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Типография важнее, чем когда-либо Иногда экран вашего устройства может быть настолько маленьким, что все, что вы видите, - это текст. Вот почему мы должны очень тщательно отбирать лучшие шрифты на нашем сайте, чтобы при уменьшении размера они не теряли разборчивости. Кроме того, мы должны знать, как сочетать более нейтральные шрифты с другими шрифтами с индивидуальностью, которые придают Интернету необходимый характер. Поэтому первый совет - потратьте время на выбор шрифтов, которые собираетесь использовать.
- Использовать изображения высокого качестваПо мере уменьшения пространства изображения будут сопровождать его. Выберите те, которые не теряют качества при уменьшении и работают так же при масштабировании. Изображение низкого качества ухудшит внешний вид вашего сайта.
- Что ваши изображения всегда видны полныйПредотвратите обрезку ваших фотографий, добавив код img (width: 100%;) в ваш CSS. Таким образом, вы указываете устройству пересчитать высоту изображения, чтобы его ширина была видна на все сто процентов.
- Все низко тот же URLЗабудьте о субдоменах вроде www.mysite.com/mobile, поскольку один и тот же файл index.html в корневой папке будет работать для всех устройств (если вы правильно сделаете адаптивный дизайн). Вы уже знаете преимущество: чем меньше поддоменов, тем быстрее будет загрузка страницы.
- Воспользуйтесь опорами: Будьте изобретательны. Доступ к веб-сайту с настольного компьютера - не одно и то же, чем с iPad или мобильного телефона. С первым вы будете двигаться спокойно и спокойно. С последним вы сделаете это в часы простоя и закроете окно, как только вам надоест. Воспользуйтесь этими условиями, чтобы развлечь пользователя и заставить его повеселиться в те несколько минут, которые они собираются посвятить вам. Возможно, когда он вернется домой, он решит навестить вас более расслабленно.
- Вдохновиться В цифровых публикациях вы удивитесь, почему этот совет. Очень просто: цифровые журналы (хорошо) знают, как воспользоваться поддержкой, и их дизайн очень умный. Вдохновляйтесь ими и сделайте сайт, с которого сложно уйти.
Больше информации - Цифровые журналы
Источник - Сплио, 960.gs, столбчатый
Есть вещи, с которыми я не очень согласен.
В пункте 5 ... поскольку 200 пикселей = 15,38% и следующие ... это эталонное сравнение не может быть выполнено без какой-либо родительской меры, размер на пиксель не является относительной мерой, как проценты!
Указывайте изображения с шириной: 100% неверно, я не думаю, что это должно быть рекомендацией. Изображения лучше определяют их по ширине и высоте, поэтому серверу требуется меньше времени для обработки информации (ему не нужно вычислять ее размер), и мы улучшаем скорость загрузки страницы (что очень важно в адаптивном или адаптивном вебе). дизайн).
Я бы уже включил, хотя это работа носа ... изображения для экранов сетчатки. Если мы хотим создать адаптивный веб-дизайн, обязательно использовать изображения для отображения на сетчатке, поскольку эти экраны используются в большинстве представлений на мобильных устройствах и планшетах. Так что нет смысла вкладывать усилия в конструкцию для них на полдроссельной заслонке.
Хорошо для отдыха
В пункте 5 они помещают вас в контекст и рассказывают об общем макете 1300 пикселей с 3 столбцами: 200, 300 и 1000.
Если вы передадите его в проценты, в их случае они будут, как вы говорите, 15,38% ((200 * 100) / 1300) (десятичная дробь ниже, международная система: P)
Но если мы говорим о макете 500 пикселей и у нас есть 3 столбца, один из 200, другой из 200 и еще один из 100 пикселей, проценты уже не те, в данном случае 200 пикселей = 40% ((200 * 100) / 500)
Они будут: 200 пикселей = 40% и 100 пикселей = 10%.
Да ладно, как я уже сказал, они не являются ссылкой на то, что вы указываете, это всего лишь ссылка на макет 1300 пикселей.
привет
Какой неудачник, вы абсолютно правы в этом мире! Еще раз спасибо ;)