Главная - Без рубрики - Отзывчивый веб-дизайн: продолжение

Отзывчивый веб-дизайн: продолжение

Несколько дней назад я начал перевод довольно интересной и свежей статьи, в которой идет рассказ о разных приемах и способах создания привлекательного сайта.

Сегодня — продолжение.

*   *   *

Настройка разрешения экрана

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

Как мы знаем, растет популярность новых iPhone, IPAD и продвинутых смартфонов, большинство новых мобильных устройств способны автоматически менять ориентацию с книжной на альбомную по нашей прихоти.

Как вы, владелец сайта, должны быть к этому готовы?

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

Большинство владельцев своих сайтов вставляют картинки в записи, не задумываясь о будущем отображении этих картинок в устройствах посетителей. Независимо, заходит посетитель через домашний компьютер с разрешением  1280 на 1024 точек (наиболее распространенный пока в Рунете монитор) или с разрешением 1680 на 1050 и больше… Или наоборот, с разрешением 800 на 600 и меньше.

Morten Hjerde и несколько его коллег определили 400 наиболее распространенных устройств за период 2005 — 2008 г.г., разрешение экрана которых выглядит так:

С тех пор появилось еще много чего нового… Очевидно, что невозможно подстроится под каждый вариант в отдельности. Что тогда?

Возможно все

Несколько лет назад вариант гибкого, «резинового» макета сайта считался едва ли не единственным верным и правильным. Многие дизайнеры приняли на «ура» этот стиль и стали предлагать все свои новые дизайнерские разработки с применением «резинового» стиля верстки.

Однако, главное неудобство «резинового» макета — растягивание и образование пустого места внутри страниц — ликвидировать не удалось. Также к проблемам резинового макета можно отнести такой факт, как «искривление» портретных и альбомных фотографий при переходе с одного разрешения на другое. Какое здесь может быть решение?

Вариант — смена альбомных фотографий на портретные. Смена должна быть автоматической.

На скриншоте выше виден пример такого дизайнерского решения (автор — Этан Маркот).

К этим методам можно отнести еще несколько, а именно:

  • Скрытие и выявление части изображений
  • Созданре раздвижных композитных изображений

Если интересно узнать о этих способах и методах подробнее, узнать больше о резиновом стиле с использованием этих технологий — поищите книгу Zoe Mickley Gillenwater «Flexible Web Design: Creating Liquid and Elastic Layouts with CSS».

Кроме того, автор много пишет о использовании «резиновых и упругих» шаблонов, вы можете почитать по ссылке.

Продолжение будет


 

vocal-profi.ru — уроки вокала. Хотите открыть в себе талант певца? Участвовать в конкурсе и стать знаменитым? Возьмите уроки вокала у профессионалов и, возможно, в один прекрасный день вы проснетесь знаменитым!

О admin

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*