Перейти к содержимому
  • 0
Владислав Носов

Точки остановки в Адаптивной версии Muse.

Здравствуйте! Нужно сделать адаптивный сайт с 4 точками остановки:

1) для компьютерной версии --- 1920х1080 px
2) для ноутбука --- 1366х768 px
3) для планшета --- 960 px (или меньше?)
4) для смартфона --- 320 px (этот размер по умолчанию в muse - его и оставлю)

Вопрос. Какой размер проекта|какую точку остановки (сколько рх) нужно поставить для Компьютерной версии и для Ноутбука?

  • Мне нравится 1

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


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

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

  • 0
3 часа назад, Владислав Носов сказал:

Здравствуйте! Нужно сделать адаптивный сайт с 4 точками остановки

Точки остановки не ставятся под разрешения. Они ставятся только тогда когда дизайн ломается и никаким образом не привязываются к разрешениям. Разве что максимальная и минимальная точки остановки.
Если охота много поработать и получить тяжелый сайт - начните с 1920. На пути к 320 у вас получится много точек остановки, что утяжелит  сайт. Разумно будет  - взять 1200.
И, за отзывчивый дизайн лучше совсем не браться, если вы не понимаете ( а вы судя по вопросу не понимаете) как он строится. Кроме дизайнерской мысли здесь большую роль играет инженерная мысль. И по дизайну есть множество ограничений.
Если сайт многостраничный и /или имеет много контента, то скорее всего вы замучаетесь делать его в отзывчивом макете. Лучше делать в адаптивном (статичном) макете - компьютер, планшет, телефон.
Для справки: То что вы называете адаптивным, на самом деле отзывчивый дизайн. А адаптивный - это статичные макеты под разные устройства

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


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

Новая статья

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

И все таки присоединяюсь к вопросу.
Точку остановки с каким значением делать для экранов с шириной 1920рх? И аналогично для экранов ноутбуков 1366 а так же планшетов. Но с планшетами вообще не понятно так как экраны очень разные.
Как я понял точка остановки со значением 960 подходит только для старых ipad, а у новых разрешение в разы больше. Другие планшетные устройства не изучал так как от количества айпэдов только голова кругом пошла.
Совсем запутался с этими разрешениями, форматами, масштабами...
Я использую полноэкранную прокрутку и в моём случае сайт адаптируется только по ширине. По высоте контент только центрируется. Получается что планшеты с вертикальной ориентацией переплетаются с ноутами где ориентация горизонтальная. Пытаюсь найти золотую середину.
Сайт пример: test.pianohof.de

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


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

Спасибо за быстрый ответ. В моём случае скорость загрузки играет не главную роль. И я пока почему-то не замечал что при добавлении точек остановки сайт дольше загружается. Но может я еще к этому прийду. Допустим я хочу поэкспериментировать и сделать 5 точек остановки. 1 - для телефонов, 2 - планшетов, 3 - ноутбуков, 4 - full hd и 5 - больших экранов. По другому выглядит не красиво а красивый сайт - главная задача.
320-700 - телефоны и фаблеты
700-960 - планшеты, (тут не понимаю почему 960 ведь лучше к примеру 1200)
960-1450 - к примеру ноуты с разрешением 1366рх и 1440рх
1450-2000 для 1920px
а дальше гибкая ширина. Это правильно? Точки остановки которые предлагаются мне показались не совсем логичными и я считаю что на планшетах и телефонах сайт должен выглядеть по разному. А под 768рх подпадают наверное много планшетов.

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


Ссылка на сообщение
Поделиться на других сайтах
  • 0
37 минут назад, Dima Enes сказал:

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

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

37 минут назад, Dima Enes сказал:

1450-2000 для 1920px

Ради эксперимента - сделайте страницу такой ширины и посмотрите на нее на мониторе 1920px  - у вас глаза будут разъезжаться в разные стороны от такой ширины сайта. 1200 - вполне адекватная ширина для любых сайтов, ну максимум 1600. Ведь визуально сайт расширяют блоки 100% ширины. А для контентной части 1200 - с головой. - комфортный размер обзора для человека. Вот этот сайт Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.  шириной 1200 пикселей - и смотрится вполне органично на 1920.

37 минут назад, Dima Enes сказал:

700-960 - планшеты, (тут не понимаю почему 960 ведь лучше к примеру 1200)

Лучше не 960, а 1024 - это покроет  90% планшетов. Под планшеты с бОльшим разрешением не стоит ориентироваться, так как вам придется оптимизировать под них сайт - а это значит отказаться от множества решений которые хорошо бы работали на компьютере. Не вижу смысла. По крайней мере не в Музе.

37 минут назад, Dima Enes сказал:

1 - для телефонов

Для телефонов имеет смысл иногда сделать две точки, если дизайн сложный - 768 и 480.

37 минут назад, Dima Enes сказал:

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

Он и будет выглядеть по разному - посмотрите пример в той теме. Вы просто не поняли разницу между фиксированной точкой 768 и гибкой точкой 768.

37 минут назад, Dima Enes сказал:

А под 768рх подпадают наверное много планшетов.

Если планшет попадает под эту точку, то не имеет смысла показывать ему другую - учитывайте размеры и мощности устройств. И не забывайте про комфорт для человеческого зрения. Такому планшету самое место в сегменте точек для смартфонов.

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

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


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

у меня такая проблема: сделал от 768 до 320 гибкую, загрузил на хостинг, получилось что нижняя часть : футор и чуть выше ушло за рамки мобильного браузера, смотрел с айфона 5s. чуть больше делаешь, низ выходит из за горизонта)) 

Не пойму почему так?

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


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

Ради эксперимента - сделайте страницу такой ширины и посмотрите на нее на мониторе 1920px

Сделал. Вроде всё выглядит органично. Но кажется я понял откуда расхождения в значениях точек с другими. Нужно попробовать растянуть контент на всю ширину поля))

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

Он и будет выглядеть по разному - посмотрите пример в той теме. Вы просто не поняли разницу между фиксированной точкой 768 и гибкой точкой 768.

На iPad пример - Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке. выглядит так же в один столбик как и на телефоне. Мне кажется это не очень удобно. Или что-то с айпадом или настройками?))

Спасибо за помощь)

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

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

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

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


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

×