Jump to content
  • 0
Sign in to follow this  
Василий Болюк

Непонятный баг Adobe Muse при работе с адаптивным дизайном

Question

Здравствуйте, коллеги! Прошу помочь разобраться с проблемой. Сделал несколько лендингов в адаптивном дизайне Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. и другие на Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке..
Общее правило: блоки = гибкое значение по ширине, текст = нет (не изменяемый размер), картинки = гибкое значение ширины и высоты. Элементы закреплены по-разному, слева, по центру, справа.
Сначала всё шло хорошо. Сделал 4 точки останова, там изменил размеры блоков и шрифтов. Всё ОК.
На 3-й день заметил изменения - там, где закрепление блока было слева - он начал сползать вверх при уменьшении ширины разрешения (его размеры по вертикали не изменялись, только сползал вверх). Это было странно, потому что так вели себя только некоторые блоки (не все). Они уменьшались по горизонтали, как положено, но сползали вверх. Но если этот объект закрепить справа - баг исчезает (по центру - тоже баг для этих объектов остаётся). 
Ещё через день новый баг - объекты, не закрепленные, расположенные по центру, при изменении разрешения сползают вправо. Если объекты выровнены по горизонтали - они сдвигаются не равномерно (см. в примере - логотипы 6-ти брендов "Radisson" и т.д.).

Коллеги, я буду очень рад вашей помощи, разобраться с этими 2-мя багами. 

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

Спасибо!!

Share this post


Link to post

6 answers to this question

Recommended Posts

Новая статья

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

Коллеги, кто-нибудь с этим сталкивался? И как решал эту проблему?

Ваш вопрос глобален. Это не какая-то отдельная ошибка, на которую можно указать. Кроме тех моментов про которые вы спрашиваете, на вашем сайте еще целая куча проблем - уменьшайте окно браузера чтобы их увидеть. Всё это следстивя глобального, не полного понимания того как это работает в общем и в Музе в частности. Вам просто надо изучить поведение различных объектов в Музе при отзывчивом дизайне. И, самое главное правило отзывчивого макета - здесь нельзя подгонять возможности под дизайн, надо подгонять дизайн под возможности. Отзывчивый макет имеет множество ограничений и в связи с этим превалирующей должна быть инженерная мысль, а уже потом дизайнерская. От некоторых дизайнерских решений придется отказаться.

Share this post


Link to post
  • 0
7 часов назад, Павел Хомерики сказал:

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

Павел, благодарю вас за ответ. Я прошу вас выскажите менее абстрактно, укажите, пожалуйста, где (в каком направлении) искать недостатки. Сейчас я понял то, что и так знаю - недостаточное знание Muse мешает делать мне правильный отзывчивый дизайн. Мне нужно знать, где именно я допускаю ошибки. Спасибо заранее!!

Share this post


Link to post
  • 0
2 минуты назад, Василий Болюк сказал:

Павел, благодарю вас за ответ. Я прошу вас выскажите менее абстрактно, укажите, пожалуйста, где (в каком направлении) искать недостатки. Сейчас я понял то, что и так знаю - недостаточное знание Muse мешает делать мне правильный отзывчивый дизайн. Мне нужно знать, где именно я допускаю ошибки. Спасибо заранее!!

Для меньшей абстрактности нужен ваш файл.muse

Share this post


Link to post
  • 0
11 час назад, Василий Болюк сказал:

Благодарю вас, Павел!!

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

Открываю проект и первое что делаю - предпросмотр  главной страницы. И вот какая картина открывается:

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

1) Нет фонового изображения, потому что его заблокировал AdBlock. (Если у вас не установлен блокировщик рекламы, то обязательно его установите, для проверки сайтов). Почему AdBlock его заблокировал? - потому что имя файла содержит, похожее на название рекламных материалов, слово и дополнительно к этому размеры - что очень характерно для рекламных баннеров. Всегда переименовывайте файлы прежде чем добавить их в Музу. Названия не должны содержать :
а) такие слова как banner, teaser, ad, add и т.п.
в) кириллицу, большие буквы (кроме системных файлов Музы), пробелы, спец символы.

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

2) Мой экран 1920х1080, однако несмотря на то что вы установили точку остановки на 1920, внизу имеется горизонтальный скроллинг. Никогда не устанавливайте точки остановки строго по разрешениям экрана. Всегда надо вычитать 20 px на скрроллбар. То есть правильное значение было бы 1900.

3) Могу предположить, что вы хотели сделать одноэкранную страницу без всякого вертикального скроллинга, но это не получилось ввиду не знания свойств различных объектов и умения их комбинировать.
Смотрим как это работает у вас:

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

Предположу, что вы хотели сделать так:

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

Второй вариант работает правильно без танцев с бубнами, значительно легче - не нужны никакие точки остановки кроме одной, нет не нужных объектов утяжеляющих html. Что бы сделать это надо знать что прямоугольник растянутый на 100%, всегда имеет фиксированную высоту, поэтому не подходит для реализации. Удалить

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

Совершенно нет никакого смысла использовать изображение так в данном случае - это заставляет делать доп точки остановки, создает доп копии изображения - что всё вместе утяжеляет сайт и совершенно не нужно, так как есть другой способ для одноэкранного сайта. Удалить. И так как точки остановки теперь не нужны, их тоже можно удалить.

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

Заливаем картинку как заливку в браузере

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

В шаблоне удаляем подложку футтера и переносим напрявляющую

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

Получаем

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

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

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке./applications/core/interface/imageproxy/imageproxy.php?img=http://dl1.joxi.net/drive/2016/10/14/0008/0401/545169/69/210bd364ca.png&key=6e945d6c86dcc03fb1770005ff521946d1f8d9208419aa81451f9f8cfc8626dd" />

Я потратил на этот пост 2 часа и в нем затронута всего лишь одна простая страница, которая наглядно показывает, что вам не хватает комплекса знаний, а не только знаний по музе. Имея комплексные знания по сайто строительству и веб дизайну, многие вещи в самой Музе становятся интуитивно понятны. Поэтому мой "абстрактный" совет - прокачиваться глобально, не такой уж и абстрактный. Надеюсь вы понимаете, что я не могу описать здесь ваш сайт полностью. И надеюсь, что дал вам большее понимание вектора в котором надо двигаться.

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...