Создание адаптивной эмблемы сайта + html и css

На мобильных устройствах эмблема сайта подвергалась искажению и потери качества... Решением стало использование той-же эмблемы, но размерами в два раза больше.

1. Процесс создания.
В фотошопе на основе старой эмблемы создаем новую заготовку, размеры которой превышают старую в два раза.


Применяем градиентную заливку с нужными цветами, используем эффект шума, добавляем "строчки" и текст. После отключаем розовый фон и сохраняем в png для web устройств. Дополнительно через сервис http://punypng.com оптимизируем и сжимаем заготовку.


2. Подключение и верстка
Заливаем заготовку на сервер. Старую верстку со старой заготовкой не трогаем:

<div class="logo right"><a href="/"></a></div>

Где right

.right {float:right}

А logo

.logo {
margin:0 -2px 0 0
}
.logo:hover {
opacity:0.95;
filter:alpha(opacity=95);
-moz-opacity:0.95
}
.logo a {
display:block;
width:203px;
height:60px;
background:url(../images/sp.png) no-repeat;
background-position:-1px 10px;
background-size:275px 450px
}

А вот в адаптацию подключим новую эмблему и дописываем пару строчек

@media (max-width:800px) {...}

Добавляем

.logo {
margin:0
}
.logo a {
width:169px;
background:url(../images/sp2.png) no-repeat;
background-position:-2px -7px;
background-size:210px 75px
}

За счет background-size уменьшаем новую эмблему до размера старой, тем самым повышаем качество на мобильных устройствах.