Адаптивные веб-дизайны: делаем изображения как можно более экономичными

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

Наиболее экономичным путем. Например, рассмотрим флаги в верхней и нижней части дизайна. Вместо того чтобы создавать одну длинную полосу и сохранять ее как графический файл, я использовал фрагмент, включающий изображение двух флагов. Он будет повторяться по горизонтали в качестве фонового изображения в области просмотра, создавая иллюзию одной длинной полосы (независимо от того, насколько широкой она окажется). В реальном выражении это даст нам разницу в 16 Кбайт (сплошная полоса шириной 960 пикселов была бы PNG-файлом размером 20 Кбайт, в то время как фрагмент с двумя флагами будет занимать лишь 4 Кбайт) для каждой полосы. Мобильные пользователи, которые будут просматривать сайт, подключаясь к Интернету через сотовую связь, оценят такую экономию! На рисунке 2.4 показано, как выглядел этот фрагмент (увеличенный на 600 %) до экспорта.

Рисунок 2.4. Фрагмент полосы с двумя флагами

После того как фоновые изображения займут свое место и будет задан базовый размер шрифта, сайт And the winner isn’t… в окне браузера будет выглядеть так, как показано На рисунке 2.5.

Мудро подходите к стилизации, поскольку еще много чего нужно сделать. Например, цвет навигационного меню не меняется с красного на черный, главная кнопка These should have won (Они должны были стать победителями) в области содержимого и кнопки Full info (Полная информация) во врезке отсутствуют, а все шрифты сильно отличаются от тех, что есть в графическом файле. Однако все это можно исправить с помощью HTML5 и CSS3. Использование для решения этих проблем HTML5 и CSS3 вместо простой вставки файлов изображений (как мы, возможно, поступали ранее) позволит сделать сайт соответствующим нашей адаптивной цели. Помните, что нам необходимо, чтобы «накладные расходы», касающиеся кода и данных, были минимальными, благодаря чему мы сможем обеспечить пользователям с невысоким по скорости каналом подключения возможность комфортно работать с нашим сайтом.

Страница сайта And the winner isn’t…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *