Перейти к содержимому
Участников клуба
43 531
Владислав Носов

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

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

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

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

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

  • Like 1

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


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

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
Please login or register to see this quote.

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

  • Upvote 2

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


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

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

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


Ссылка на сообщение
Поделиться на других сайтах
Dima Enes    0
Please login or register to see this quote.

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

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


Ссылка на сообщение
Поделиться на других сайтах
Please login or register to see this quote.

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

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

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


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

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

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

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


Ссылка на сообщение
Поделиться на других сайтах
Dima Enes    0
Please login or register to see this quote.

На iPad пример - Please login or register to see this link.  выглядит так же в один столбик как и на телефоне. Мне кажется это не очень удобно. Или что-то с айпадом или настройками?))

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

Please login or register to see this attachment.

Please login or register to see this attachment.

Please login or register to see this attachment.

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


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

Оставлять сообщения могут только участники клуба

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


Новая статья

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