При использовании устройств с экранами Retina, вы заметите, что многие веб-сайты отображаются слегка мутно. Это из-за низкого разрешения картинок, которые растягиваются на необходимое количество пикселей, и поэтому выглядят не очень привлекательно. Проще говоря, экраны Retina увеличивают 1 пиксель до 2, то есть, удваивают его размер.
Секрет разработки веб-сайта, адаптированного под экраны Retina, заключается в качестве использованных изображений. Картинки должны быть минимум в два раза больше размером чем для обычных устройств.
К примеру, если вы хотите отобразить изображение шириной в 400 пикселей, то исходный размер этой картинки должен быть 800 пикселей. В противном случае, если вы растянете картинку 400px в Photoshop, то увидите, что она становится мутной.
Чтобы вы лучше понимали то, как работают экраны Retina, взгляните на следующие примеры Retina-fy веб-сайтов. Не пугайтесь! Мы объясним вам этот процесс от корки до корки!
Ресурсы, необходимые для прохождения данного руководства:
* Изображение в высоком разрешении (на протяжении всего руководства мы будем использовать лишь одно изображение, и оно бесплатно).
* Opera Mobile Emulator
* Retina.js
* Время и терпение
Оптимизируем стандартный экран Retina
Этап 1:
Создайте новую папку в предполагаемом месте и назовите ее retina. Затем, внутри папки retina, создайте еще одну папку и назовите ее img.
Далее нам нужно найти высококачественное изображение, которое мы будем использовать в данном руководстве. Давайте скачаем изображение пригородной тропинки. Это изображение имеет размеры 1555px x 1037px, и оно отлично подходит для нашего демо.
Этап 2:
Откройте файл countryside_trail_landscape.jpg в Photoshop и сохраните его под названием retina_image@2x.jpg в папке img.
Далее, измените его размер до 50%. Чтобы сделать это, пройдите в меню Image -> Image size и укажите 50%. Это даст нам новый файл, уменьшенный вдвое. Сохраните его в папке img под названием retina_image.jpg.
Этап 3:
Теперь давайте перейдем к процессу отображения этого изображения на нашей веб-странице. Создайте новый HTML-файл и назовите его retinaDisplay.html. Внутрь тэга body поместите следующий код:
<img alt="" src="img/retina_image[AT]2x.jpg" width="778" height="519" />
<img alt="" src="img/retina_image.jpg" width="778" height="519" />Вы также можете использовать внутренний и внешний CSS для отображения Retina-изображений на сайте. Для примера взгляните на нижеприведенный код:
<img class="imgRetina" alt="" src="img/retina_image@2x.jpg<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>" />
<img class="imgRetina" alt="" src="img/retina_image.jpg" /><style>
.imgRetina { width: 778px; height: 519px; }
</style>Теперь вы можете проверить ваш проект на устройстве с экраном Retina, и увидите, что первое изображение выглядит гораздо более четко, чем второе. Нет устройства с Retina? Не беда.
Тестируем Retina при помощи Opera Mobile Emulator
Скачайте Opera Mobile Emulator и установите этот инструмент на компьютер, а затем запустите его.
Так как разрешение iPad составляет 1536х2048px, давайте добавим это разрешение в Opera Mobile Emulator. Чтобы сделать это, нажмите кнопку Add под ярлыком Resolution, и задайте имя iPad Retina, установив разрешение 1536х2048px. После чего нажмите ОК.
Далее нажмите Launch, и поместите туда URL вашего HTML-файла. На данный момент, на экране показываются сразу два варианта изображения. Пожалуйста учтите, что вы также можете масштабировать страницу для сравнения изображений.
Только что вы увидели, как высокое качество изображений может влиять на опыт взаимодействия ваших посетителей. Retina-устройства позволяют видеть чуть-чуть больше изображения. Они используют эти данные для заполнения дополнительных PPI (Pixels Per Inch), из которых состоит экран.
Существует множество способов адаптировать ваши веб-страницы под экраны Retina. Предлагаем вам ознакомиться со следующими примерами.
Применение SVG и CSS3-эффектов
Если у вас есть логотип или векторная графика, которую вы хотите отобразить на экране Retina, то мы настоятельно рекомендуем вам использовать SVG-файлы. SVG (Scalable Vector Graphics) использует масштабируемые 2D-изображения на базе фигур и линий.
Это значит, что изображение будет отображаться четко даже на Retina-устройствах. В целом, SVG-файлы можно создавать в Adobe Illustrator.
С другой же стороны, вы также можете использовать CSS3-эффекты для адаптации вашего сайта под Retina. CSS3 эффекты позволяют добиться эффекта теней и контуров, которые раньше можно было добавить только в Photoshop.
Используя CSS3 для создания кнопок и блоков, вы также можете воссоздавать ранее графические элементы, но в более четком качестве.
Применение веб-шрифтов
Веб-шрифты очень удобны потому, что предлагают возможность адаптировать и видоизменять их. Сегодня в интернете можно видеть множество разных шрифтов. Их можно встраивать в HTML-разметку при помощи тэга link. Вдобавок, @font-face для CSS3 представляет невероятные возможности дизайнерам.
@font-face
{
font-family: Sansation Light;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}Такие веб-шрифты как Google fonts также упрощают работу над дизайном, так как позволяют импортировать доступные шрифты на сайт. Вам просто нужно скопировать и вставить отрезок кода.
<link href="http://fonts.googleapis.com/css?family=Arbutus" rel="stylesheet" type="text/css" />body { font-family: 'Arbutus'; }Отличительная черта веб-шрифтов заключается в том, что они способы адаптироваться под современные дизайны сайтов. Они дают дизайнерам больше возможности в вопросе оформления адаптивных веб-страниц.
Ресурсы для веб-шрифтов
Вы можете воспользоваться услугами следующих сервисов:
* Google Fonts
* Fonts.com
* Typekit
* Fontdeck
Применение спрайт-изображений
При разработке крупных веб-сайтов, важно учитывать необходимость сократить количество изображений, которые пользователь вынужден скачивать. Спрайт-изображения позволят вам добиться сокращения их количества за счет размещения множества картинок в виде одного большого изображения.
Вы без труда можете создать спрайт-изображение в Photoshop. Чтобы узнать, как это сделать, можете кликнуть здесь.
Другие способы оптимизации сайтов под экраны Retina
Кроме базовых методов «ретинизации» веб-страниц, существуют и другие методы, которые позволят вам предоставить вашим посетителям лучший опыт.
CSS Media Queries
Стоит отметить, что заставлять владельцев устройств Retina скачивать все изображения подряд – это тоже не лучший выбор. Это снизит скорость загрузки страниц. К счастью, эту проблему поможет решить media queries.
Media Queries – это техника замены изображений, которая позволяет вам предоставлять пользователям именно ту версию картинки, которая нужна для его устройства. Давайте применим ее к нашему предыдущему примеру.
Этап 1:
Создайте новый HTML-файл и назовите его mediaRetina.html. Внутрь тэга body поместите следующий код:
</pre>
<div class="”imgRetina”"></div>
<pre>Этап 2:
А затем внутрь нашего внутреннего или внешнего CSS-документа, поместите код для изображений не в формате Retina.
.imgRetina { background: (‘../img/retina_image.jpg’)no-repeat; width: 778px; height: 519px; margin: 0 auto; }Этап 3:
Теперь, давайте добавим CSS-код для Retina-изображений. Мы заменим обычное изображение на изображение для экрана Retina, если пользователь использует соответствующее устройство.
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.imgRetina { background: (‘../img/retina_image@2x.jpg<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>)no-repeat; width: 778px; height: 519px; margin: 0 auto; }
}Наш media query начинается с выражения < @media query, после которого следует only, что означает, что этот код будут считывать только устройства с Retina. Затем мы добавили min-device-pixel-ratio, что значит, что разрешении экрана должно быть равно или вдвое больше.
Мы также добавили браузерный префикс –webkit, дабы гарантировать, что наш код будет работать только в старых версиях браузеров Safari. Поздравляем!
Вам обязательно следует познакомиться с техникой замены Media Queries. Каждый раз когда пользователь будет просматривать страницу посредством устройства Retina, обычные изображения будут заменять на более качественные.
jQuery-оптимизация под экраны Retina
Мы также можем использовать jQuery для замены изображений в том случае, если пользователь использует экран с высоким разрешением. Для данного руководства мы решили воспользоваться преимуществом функционала retina.js. Retina.js представляет собой open source скрипт, который упрощает процесс предоставления высококачественных изображений для устройств с экранами Retina. Давайте попробуем!
Этап 1:
Создайте новый HTML-документ и назовите его jqueryRetina.html. В заголовочную часть поместите ссылку на jQurty-библиотеку от Google.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>Этап 2:
Далее, создайте новую папку для Retina и назовите ее js. Теперь давайте скачаем retina.js, а затем поместим код link перед закрывающим тэгом.
<script type="text/javascript" src="js/retina.js.js"></script>Этап 3:
Поместите следующий код в тело документа. Сюда включена разметка для retina-изображений с классом imgRetina.
</pre>
<div class="imgRetina"></div>
<pre>Этап 4:
После чего, внутрь внешнего или внутреннего CSS-документа нужно поместить код для простых изображений. Сюда включен источник изображения с указанием ширины и высоты. Затем, в самом конце, нам нужно просто центрировать изображение при помощи margin: 0 auto.
.imgRetina { background: (‘../img/retina_image.jpg’)no-repeat; width: 778px; height: 519px; margin: 0 auto; }И на этом все! Нет, мы не шутим, это действительно конец! Скрипт предполагает использование модификатора (@2x) от Apple, который позволяет определять изображения с высоким разрешением в папке img.
Если вы помните, название изображения, предназначенного не для Retina, retina_image.jpg, а значит адаптированное под Retina изображение должно иметь название retina_image@2x.jpg.
В завершение
Retina-экраны позволяют видеть большее число пикселей на дюйм, нежели обычные экраны. Перед загрузкой на веб-сервер, вам следует проверить ваш сайт на предмет того, адаптирован ли он под экраны с высоким разрешением. Если вы не уверены в этом, то можете использовать другие методы замены изображений.
В данном руководстве мы представили вам и иные ресурсы, которые позволяет вам улучшить уровень взаимодействия с экранами Retina. Мы также рассказали вам о том, как оптимизировать ваши веб-изображения для Retina-устройства. Вы можете использовать все эти подходы для улучшения собственного сайта и для того, чтобы избежать жалоб посетителей о возможном ухудшении качества отображения вашего дизайна на экранах с поддержкой технологии Retina.
