ТРИ основных фактора отзывчивого веб-дизайна

Термин «отзывчивый веб-дизайн» впервые ввёл Якоб Нильсон в своей книге «Отзывчивый веб-дизайн», которая стала одним из основных руководств начинающих веб-мастеров со всего мира. Что же это за терминология? И как она решает проблемы каждого, конкретно взятого сайта? Попробуем разобраться.

Технологии веб-дизайна призваны решать множество проблем, самая значимая из которых – корректное отображение сайта на разных экранах. Многие из нас замечали, что некоторые сетевые проекты выглядят безупречно на настольных мониторах, а на телефонах или планшетах «съезжают». Почему так происходит? Потому что веб-мастера – новички не озаботились проверкой кроссбраузерности сайта на экранах с разным разрешением.

Создавая веб-проекты, необходимо учитывать принципы технологии веб-дизайна, которые адаптированы к экранам разного разрешения. Применительно к терминологии интернета, это называется «резиновой вёрсткой», т.е. – сетевой проект «умеет» корректно отображаться на самых разных экранах: телефонах, смартфонах, планшетах, квадратных и локальных прямоугольных мониторах.

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

1. Технологии веб-дизайна — поток

Термином «поток» в веб-дизайне называется такое поведение веб-страницы, при котором при уменьшении экрана (например, при просмотре сайта на смартфоне) контент растягивается по высоте, а элементы (кнопки, меню и т.д.) смещаются вниз или вовсе пропадают с экрана. Подобную работу никак нельзя назвать «отзывчивым веб-дизайном» и пользователи зачастую уходят с подобного сайта, который при таком раскладе теряет для них всякую привлекательность. Поэтому, создавая сетевые проекты, обязательно протестируйте сайт перед публикацией на различных электронных носителях.

2. Технологии веб-дизайна — шрифты

Многие начинающие веб-мастера «колдуя» над сайтом, используют крутую гарнитуру шрифтов типа Futura или Didot, совсем не учитывая, что на экране пользователя эти шрифты могут не отражаться, поскольку пользователь пользуется стандартным набором кеглей. В этом случае браузер пользователя подставит вместо ваших «красивостей» свой шрифт «по умолчанию». Кроме того, чем больше шрифтов вы используете, тем медленнее загружается сайт, поэтому очень желательно пользоваться стандартным набором, не полагаясь на: «авось, у пользователей тоже имеются нестандартные шрифты».

3. Технологии веб-дизайна — изображения

Мы часто видим на веб-картинках (особенно если сайт создан с использованием Flash-технологий) большое количество мелких деталей, призванных создавать впечатляющие эффекты. Если и ваш сайт «грешит» подобной динамикой, применяйте растровые форматы для изображений – jpg, png или gif. Если же картинки на вашем сайте статичны, лучше использовать векторный формат SVG и шрифты для иконок. Каждое изображение обязательно сжимайте (применительно к терминологии интернета – оптимизация фото).

Помимо вышеперечисленного, имеются множество иных технологий, определяющих веб-дизайн для сайта как «отзывчивый». Но создавая сайты, необходимо обратить внимание на три вышеописанных, как на одни из самых основных.