Jump to content
  • 0
Sign in to follow this  
Евгений Зубов

Как подготовить Adobe Muse сайты под Retina дисплеи?

Question

Всем привет!
 
Retina дисплеи появились достаточно давно. И сейчас устанавливаются практически в любое устройство. Это значит, что все больше людей смотрят на интернет в супер высоком качестве. Я отлично помню тот бум, который сопровождал запуск Retina дисплее в MacBook и Mac, в то время только ленивый не делал версию своего сайта для Retina! Я, как дизайнер, создающий сайты в Adobe Muse, не могу игнорировать появление подобной технологии и всегда готовлю все свои сайты к просмотру с дисплеев с высокой плотностью пикселей.
 
Если не подготавливать сайт заранее, то человек, использующий подобный Retina дисплей, увидит у себя на устройстве сильно "мельченый" интерфейс. То есть любая кнопочка, иконка и т.д. будут очень маленького размера, и использовать такой сайт просто напросто будет настолько не удобно, что проще уйти на другой сайт, чем мириться с такими неудобствами.
 
Вот подробная инструкция о том, как подготовить ваш Adobe Muse сайт к просмотру с Retina дисплеев:

  • Первым делом скачайте специальную JS библиотеку, которая будет автоматически определять какой дисплей у посетителя. Перейдите по Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. и сохраните архив себе на компьютер.


     
  • Распакуйте архив в удобное для себя место.
  • Перейдите в Adobe Muse и через меню Файл - Добавить файл для передачи укажите на файл retina.js:

    Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
     
  • Находясь в режиме План, щелкните правой кнопкой мыши по Мастер-шаблону и во всплывающем меню выберите пункт Свойства страницы. Далее перейдите во вкладку Метаданные и вставьте ниже следующий код в поле Код для <head>:
    <script type="text/javascript" src="assest/retina.js"> </ script>
    post-1-0-97500200-1395663735.gif
     
  • Теперь нужно подготовить всю графику для сайта. Для этого вы должны увеличить размер каждого изображения ровно в два раза. Например, есть логотип сайта размером 100х100 пикселей, а для того, чтобы подготовить логотип для показа на Retina дисплеях, нужно увеличить ее размер до 200х200 пикселей.
  • Для того, чтобы скрипт подхватил новое изображение и использовал его, нужно, чтобы увеличенный файл имел точно такое же название, как и оригинальный, но дополнительно нужно прибавить к нему @2x в конце:

    Например:
    Оригинальное изображение называется logo.png
    Retina версия файла должна называться logo@2x.png.
     
  • Теперь все подготовленные изображения нужно загрузить в папку images на хостинге, куда вы опубликовали свой сайт.
  • Вот и все! Теперь, когда кто-то из ваших посетителей зайдет на ваш сайт с устройства с Retina дисплеем, он будет приятно удивлен качеством сайта.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

http://muse.creatura.club/index.php?app=downloads&module=display&section=screenshot&id=54

Название: Retina.js файл для создания Retina версии Muse сайта

Добавил: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Добавлен: 24 марта 2014

Категория: Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Файл, который нужен для создания Retina-версии любого сайта, сделанного в Adobe Muse. Вот Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. на инструкцию о том, как это сделать.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

скажите а текст на ретино дисплеях сам будет масштабироваться?

Да! Эта инструкция актуальная для устаревшей версии Muse. В новых версиях Muse все это не нужно. Там новые инструменты для работы с ретиной.

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...