Резиновый сайт без костылей

Вопросы, связанные с адаптивным и мобильным веб-дизайном в WYSIWYG Web Builder.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 1
Аватара пользователя

Автор Темы
gavrushev
Неофит
Сообщения: 2
Зарегистрирован: 26 апр 2017, 01:45
Версия Web Builder: 12.0.2

Резиновый сайт без костылей

Сообщение gavrushev » 26 апр 2017, 02:28

Добрый день, а точнее ночь. Уже неделю долблюсь над своим первым собственным проектом и не могу в толк взять, что я делаю не так. Софт WB 12-й, последняя версия. Макет сайта такой
Изображение
На данный момент смог сделать резиновыми только Хидер (шапку) и фон сайта, притом пробовал делать в лоб, через слои и через флекс-бокс, одинаково хорошо растягивается и сжимается указанное содержимое.

Попытка размещения чего-то большего из этих двух позиций приводит к двум вещам, либо все плавает хаотично, без точек привязки, либо все стоит колом на одном месте, причем если элементы все резиновые, судя по маркеру адаптивности (ctrl+shift+R). Тексты, картинки, менюшки, никакого порядка.
Удалось у кого-то без костылей сделать адаптивную верстку сайта?
Перепробовал тонну разных вариаций и комбинаций настроек слоев, сеток, флексбокса и тд, меня уже накрывать начинает по тихоньку от безисходности.
Сайт простой до жути, но отнял столько времени и нервовов...
Точки останова это костыли и не подходят, аудитория моя будет 18-... с большим трафиком, одних только широкоформатных разрешений (16/9) не меньше 10-ка.
Мобильную версию буду делать отдельно, это понятно, одинаково красиво 16/9 и 9/16 не сотворить, это чудо.

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

Реклама
Аватара пользователя

Gudwinn
Эксперт
Эксперт
Сообщения: 1299
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

Резиновый сайт без костылей

Сообщение Gudwinn » 26 апр 2017, 14:10

Нужно изучать спецификации, ну и практика естественно. К сожалению , если абсолютно исключить костыли, то ничего оригинального не получится сделать (так как увязать работу без конфликтную кучи инструментов в принципе невозможно), но это и естественно, ведь веббилдер не панацея, а просто средство , позволяющее ускорить разработку.
http://wysiwygwebbuilder.offershop.ru/
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 4789
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Резиновый сайт без костылей

Сообщение anonimus » 26 апр 2017, 21:39

gavrushev, точки останова это не костыли, а отметки к которым привязывается изменение стилей тех или иных элементов и это основы адаптивной и отзывчивой вёрстки
эти отметки используются не только в веб билдере, а везде и называется это медиа запросы css ( @media )
и вообще забудьте слово резиновый

резиновые сайты были актуальны, когда мониторы имели разрешение 640x480, 800х600, 1024х768, т.е. очень давно
у дизайнеров были крутые моники с чуть большим разрешением и использовались они отнюдь не для веб дизайна
смартфонов вообще в природе не существовало :-)
вот тогда и были популярны резиновые сайты у которых ширина боковых колонок была либо фиксирована, либо задана в процентах и ограничивалась ещё мин.шириной и максимальной, что бы в порнуху не превратилось всё это ))))
и всё было просто, так как разрешения экранов было не столь разнообразным

а сейчас, когда разрешения варьируются от 240х320 пикселей и до 3640x2160, резиновый сайт будет выглядеть ужасно
подробности ужасов описывать не буду, ибо лень

в общем поизучайте особенности адаптивной и отзывчивой вёрски.
отзывчивая вёрска - это по сути адаптивная вёрстка + резиновая
до 9 версии билдер умел делать только фиксированную вёрстку
с 10 версии он научился делать адаптивную вёрстку
с 11 версии появилась возможность отзывчивой вёрстки

кстати, вот вам пример, если вам не совсем ясно что искать, где описывается различие способов вёрстки
Скрытый текст
Для просмотра скрытого текста необходимо быть авторизованным пользователем.
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Можете в личку отправить свой вайбер, телеграмм, вотсап или просто мобильный и я вас наберу

Аватара пользователя

Автор Темы
gavrushev
Неофит
Сообщения: 2
Зарегистрирован: 26 апр 2017, 01:45
Версия Web Builder: 12.0.2

Резиновый сайт без костылей

Сообщение gavrushev » 26 апр 2017, 22:10

Спасибо за наставления, хотел как обычно в лоб без знаний на амбразуру, получилось в общем как всегда это и бывает в таком случае... Буду изучать.

Аватара пользователя

Kirill23
Интересующийся
Интересующийся
Сообщения: 41
Зарегистрирован: 27 июн 2014, 07:21
Версия Web Builder: 9.4

Резиновый сайт без костылей

Сообщение Kirill23 » 19 окт 2017, 13:31

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

Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 4789
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

Резиновый сайт без костылей

Сообщение anonimus » 19 окт 2017, 17:17

даю подсказку
если вы используете слои, то они должны быть в режиме Плавающие (floating)
область данных так же нужно делать в плавающем режиме (floating)
Изображение
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
Можете в личку отправить свой вайбер, телеграмм, вотсап или просто мобильный и я вас наберу


Ответить Вложения 1

Вернуться в «Адаптивный и мобильный веб-дизайн.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость