rudu-pomogaet-dobyvat-komp-yuter

Как оптимизировать графику для Retina диcплеев (часть 1)

Ни для кого не секрет, что большинство веб-сёрферов в интернете быстро переходят к мобильным устройствам.

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

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

С выходом нового iPad и включая оба поколения iPhone 4, у компании Apple теперь есть миллионы устройств в руках ее верноподданных пользователей, которые радуют глаз красивыми высокоплотными дисплеями.

Люди часами залипают у экранов мобильных устройств, играя в игрушки, которые мы разрабатываем для них. Если Вы спроектировали ту графику неправильно, ее расплывчатый внешний вид может отпугнуть пользователя использовать ваше приложение или же заходить на ваш сайт.

Поэтому, чтобы такого не происходило, я вам покажу как привнести графическое спокойствие в мобильное королевство ( по крайней мере, на неделю или две J ).

Когда Apple выпустили iPhone 4, у которого Retinaдисплей, они стали измерять экран в points, вместо пикселей. Каждый pointравен 4 пикселям. Дисплей увеличивает каждый пиксель в 2 раза так, что физический размер графики остается неизменным, смотрите ли вы с iPhone 4 или же с iPhone 3gs.

Это важно, потому что если бы они не удваивали каждый пиксель, все было бы очень маленьким, чтобы рассмотреть элементы должным образом. Вы же не хотите, чтобы люди щурились или увеличивали элементы на странице, чтобы увидеть вещи, которые раньше они без проблем видели.

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

Когда вы смотрите на графику на Retina дисплее, которая не была специально увеличена для него, вы не увидите огромной размытости. Все, что вы увидите – это края, которые не так чисты, как должны быть, и текст будет немного труднее прочитать.

Лично для меня этот вопрос очень важен, поэтому я хочу видеть всю графику идеально четко, как новый доллар.

Так каково же решение?

Одно из – это использование mediaqueries для ретина дисплеев, разделяя графику на графику низкого и высокого разрешения.

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
    logo {  
        background: url(images/scribe-logo@2x.png);
        background-size: 130px 40px;
    }
}

Обратите внимание на 2 изображения ниже.

Первая картинка — обычная, вторая — высокого разрешения.

Увеличьте масштаб на компьютере или вашем мобильном устройстве, и вы увидите размытость на первой картинке. Вторая картинка будет отображаться очень четко.

Этот способ работает хорошо, но он требует очень большого объема работы.

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

Один из новых способов сделать это – использовать iconfonts.

Преимущества использования iconfonts:

  • бесконечно масштабируемые
  • независимое разрешение
  • Поддерживается всеми браузерами
  • Вы можете создавать на лету (легко изменить цвета с CSS)
  • Небольшой размер файла

Вот как это работает:

1) Загрузите ваш шрифт на веб-сервер

2) Объявите ваш шрифт в CSS:

@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.eot');
    src: url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.eot?#iefix')format('embedded-opentype'),
         url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.woff') format('woff'),
         url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.ttf') format('truetype'),
         url('http://www.studiopress.com/wp-content/uploads/modernpics-webfont.svg#ModernPictogramsNormal')format('svg');
    font-style: normal;
    font-weight: normal;
}

3) Создайте разметку

<div><span class="icon">i</span>View Basket</div>
<div><span class="icon">a</span>Read More</div>
<div><span class="icon">(</span>Settings</div>

4) Создайте класс в css и пропишите свойства.

.icon {
     color: #3090cf;   
    font-family: 'ModernPictogramsNormal';
    font-size: 18px;
    padding: 0 15px;  
}

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>