Перейти к содержимому
  • 0
mckey

Адаптивная композиция

mckey    0

Возник вопрос, связанный с адаптивным дизайном.

Текстовые блоки и простые прямоугольники с изображениями достаточно легко трансформируются. Трудности возникают при создании более сложных композиций.

Например, беру простую композицию, помещаю в нее картинку, заголовок, текст и кнопку (считаем - 4шт). Получается что-то вроде "Специальные новости". При изменении размеров браузера, естественно, все расползается.

Под следующую точку остановки, а их у меня - 1280 - 1024 - 960 - 720 - 480 - 320 (6шт) приходится все подгонять вручную. Теперь умножим на количество слоев в слайдере (5 шт) Получается, что ( 4*6*5 ) приходиться менять 120 параметров! И попробуй отклонись хоть на пиксель, картинка начинает "скакать".

К чему я это? Подскажите, пожалуйста, есть ли возможность адаптировать сразу всю композицию? Хотя бы послойно. Или придется все делать "ручками"?

Заранее благодарен за ответы и рекомендации!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендуемые сообщения

  • 0
10 минут назад, mckey сказал:

К чему я это? Подскажите, пожалуйста, есть ли возможность адаптировать сразу всю композицию? Хотя бы послойно. Или придется все делать "ручками"?

Заранее благодарен за ответы и рекомендации!

Нет. Композиция не поддерживает отзывчивость, пока. Только ручками
 

10 минут назад, mckey сказал:

Под следующую точку остановки, а их у меня - 1280 - 1024 - 960 - 720 - 480 - 320

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Новая статья

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

Здравствуйте, Павел! Большое спасибо за ответ! С композицией все ясно. Будем ждать улучшения возможностей программы.

С Вашего позволения, я продолжу тему, не относящуюся к основной. Как видите, сайт достаточно плотно "укомплектован" различными элементами. Все они имеют разные размеры и расположение. И этих элементов будет шесть - семь "этажей" информации. Если просто сдвигать ползунок и фиксировать точки остановки в момент конфликтов, то их (точек) получится в несколько раз больше. Смело можно ставить каждые 50px.

Поэтому я и пошел по пути не самой выгодной стратегии установки точек, ориентируясь на разрешения.

Кстати, раз уж зашел разговор, какие, на Ваш взгляд, разрешения являются правильными? Это так - ради ликбеза.

К сожалению, в Сети очень мало обучающих материалов по адаптивности в Muse. Приходится пользоваться малоэффективным "методом тыка". Не судите строго - это моя первая "проба пера".

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
4 часа назад, mckey сказал:

С Вашего позволения, я продолжу тему, не относящуюся к основной. Как видите, сайт достаточно плотно "укомплектован" различными элементами. Все они имеют разные размеры и расположение. И этих элементов будет шесть - семь "этажей" информации. Если просто сдвигать ползунок и фиксировать точки остановки в момент конфликтов, то их (точек) получится в несколько раз больше. Смело можно ставить каждые 50px.

Вам надо понять основные принципы построения отзывчивого дизайна. И то, что  в отзывчивом дизайне нельзя делать всё что хочешь. Кроме дизайнерской мысли, более важную роль здесь играет инженерная мысль. Отзывчивые сайты строятся по принципам таблицы - столбцы и строки.  То есть дизайн надо подгонять под возможности, а не возможности под дизайн. Ваша компоновка изначально не подходит для отзывчивого сайта. Рекомендую вам сделать свой сайт в адаптивном варианте - 3 статичных макета - компьютер планшет телефон - тут можно лепить дизайн без особых ограничений. И к тому же с мобильной адаптацией дела обстоят значительно лучше, чем в отзывчивых сайтах.... Или фундаментально пересмотреть дизайн, опираясь в первую очередь на инженерию. Но для этого нужно понимание, которое придет только с практикой.
Говоря словами известного демотиватора  - "Нельзя просто так взять и сделать отзывчивый сайт" :).  Ну и к тому же, в музе, эта технология  пока очень и очень далека от совершенства.
 

4 часа назад, mckey сказал:

Кстати, раз уж зашел разговор, какие, на Ваш взгляд, разрешения являются правильными? Это так - ради ликбеза.

Разрешений сейчас сотни. Те, что выбрали вы - вполне нормальные, только надо учитывать не размер монитора, а размер окна браузера. Например при разрешении 1280, реальное окно браузера будет 1263. На мобильных разрешениях браузер не учитывается, так как там нет такого скролл бара как на компьютерах.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
mckey    0
8 часов назад, Павел Хомерики сказал:

То есть дизайн надо подгонять под возможности, а не возможности под дизайн.

Собственно, обилие трудностей, возникающих при верстке этого сайта, склоняло меня к такой-же мысли. )

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

Последую Вашему совету - не буду хвататься за "курсовые" или, тем более, "дипломные" работы. Потренируюсь на "лабораторках", штудируя "матчасть". Пожалуй,  только в компьютерном шаблоне сделаю два варианта - стандартный (960) и 1200. Все-таки мониторы сейчас у всех широкоформатные.

И за напоминание -

8 часов назад, Павел Хомерики сказал:

Например при разрешении 1280, реальное окно браузера будет 1263.

спасибо!

Надо будет сделать окончательные варианты (мобильную версию я еще не рассматривал - там совсем другой дизайн получится) верхних "этажей" и закинуть себе на сервер - посмотреть в реале на разных браузерах.

Еще раз благодарю Вас за рекомендации!

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
akademik    0

Возможно для кого-то будет полезным, (сам подсмотрел и пользуюсь):

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

480 px - 6 кол

768 px - 5 кол

980 px - 8 кол

1185 px - 10 кол

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

×