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
Share on other sites

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
Share on other sites

Новая статья

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

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

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

Share this post


Link to post
Share on other sites
Sign in to follow this  

×
×
  • Create New...