Адаптивный логотип как важная часть современного веб-сайта

0

поделились

Сохранить

Evernote

Pocket

Pdf

07.05.2015

0

4442

На сегодняшний день адаптивный веб-дизайн используется очень часто, любой крупный и средний веб-проект использует адаптивность для удобства пользователей. Сегодня технологии позволяют людям иметь доступ к веб-сайтам с портативных устройств в любой точке мира, где это им позволяет мобильный Интернет.  Это необходимо учитывать при веб-разработке и принимать меры для того, чтобы веб-проект был адаптивен: адаптивный дизайн, адаптивная вёрстка, оптимизация для многих устройств (персональный компьютер (с разными разрешениями от 1280*1024 до 3840 × 2160);  tablet-устройства (планшеты имеют разные диагонали и разрешения экранов) и смартфоны (разрешение варьируется от 800*600 до 1920*1080). Поэтому необходимо учитывать  многообразие устройств пользователя, чтобы ему было удобно использовать веб-проект, начиная  со смартфона заканчивая smart-TV  телевизором.
Далее, речь пойдёт об адаптивном логотипе, как важной части адаптивного веб-дизайна.
Логотип должен быть узнаваемый и на любом устройстве.  Так как уменьшение логотипа нам не поможет для реализации этой задачи из-за того, что при уменьшении размеров логотип теряет возможность запомниться и становится менее заметным. Нам необходимо изменить подход,  вместо изменения размера контейнера логотипа необходимо изменять сам логотип. Для этого наряду с основным логотипом разрабатывается ещё две версии (итого три: для персонального компьютера и ноутбука, для планшетного устройства, для смартфона), это позволяет сделать логотип адаптивным.  
Чем отличаются версии логотипа.  
Полная версия логотипа содержит: полный логотип и слоган бренда.
1.png 
Промежуточный вариант для планшетов и компьютеров с небольшим экраном. Содержит:  Полный  логотип.   
2.png 
Сокращённая версия логотипа. Используется на смартфонах. Содержит: сокращённый логотип. 
3.png 
Это позволяет без изменения контейнера логотипа оставить его узнаваемым и выполнять свою функцию,  при этом не делая веб-проект неудобным.

Примеры адаптивных логотипов мировых брендов.  
4.png

Технический реализовать адаптивный логотип довольно просто. Добавив на сервер три варианта логотипов. В  CSS (каскадная таблица стилей) в файл style.css  прописывается следующий код:
@media only screen and (max-width: 959px) {
   .site-title img {
      display: none;
   }
   .site-title a {
      display: inline-block;
      background: url("http://yoursite.com/uploads/logo2.png") no-repeat center center;
      background-size: contain;
      width: 220px;
      height: 40px;
   }
}
 
@media only screen and (max-width: 519px) {
   .site-title a {
      background-image: url("http://yoursite.com/uploads/logo3.png");
      width: 100px;
      height: 44px;
   }
}
Используется media queries :
@media only screen and (max-width: 519px)
При разрешении равном или меньше 519px будет использован следующий код:
.site-title a {
      background-image: url("http://yoursite.com/uploads/logo3.png");
      width: 100px;
      height: 44px;
Этот код реализует использование третьего варианта логотипа (для мобильных устройств).
Для вашего сайта необходимо будет изменить ссылку на логотип и пропорции.
Адаптивный логотип готов.

0 комментария

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

Ваш e-mail не будет отображаться. Обязательные поля отмечены +

Ломакин Александр

Поиск по блогу

  • по тегам

Подписка на рассылку

X

Мы будем отправлять вам только дайджесты с подборками постов за неделю. Никакой рекламы.

Понятно, закрыть окно.

X

Благодарим за интерес к АйТи!
email добавлен в базу рассылки, мы будем отправлять вам дайджест новых статей!

X

Адрес подписки уже существует.
Пожалуйста, укажите другой адрес.

Понятно, закрыть окно.

Популярные статьи