Можно добавить резиновую вёрстку к адаптивной на действующем сайте?

Question

[Alyona_IM]

Добрый день!
У нас есть сайт, на котором реализована адаптивная вёрстка. Два макета. Для мобильной и для десктопной версии, шириной 320 и 1920 пикселей соответственно.

Для ширины экрана в диапазоне между этими двумя значениями (например, 1536) сайт выглядит, мягко говоря, не совсем красиво. Для решения этой проблемы нам сказали отрисовать ещё один, а лучше два макета для меньших ширин.

Но возможности сделать это нет, поэтому подскажите, есть ли другие варианты решения этой проблемы в рамках уже свёрстанного и действующего сайта? Можно ли резиновую и адаптивную вёрстки "совместить"?

Comments

[Froggyweb]

Можно ли резиновую и адаптивную вёрстки "совместить"?
Обычно так и делается.
А вообще нужно видеть сайт

[Sand]

Но возможности сделать это нет

Это как?

[Alyona_IM]

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

[Alyona_IM]

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

[Антон Литвиненко]

Есть этот сайт чтобы глянуть? на хостинге я имею в виду

[Pavel-ww]

Alyona_IM, ну в большинстве случаев дизайнер и не требуется. Хотя зависит от того, есть ли чувство прекрасного у верстальщика. Лично в моей практике в 80% случаев предоставляют только десктоп макет. А адаптацию я делаю сам на свой вкус

[Alyona_IM]

Froggyweb, https://clck.ru/YmNTL

[Alyona_IM]

Антон Литвиненко, https://clck.ru/YmNTL

[Антон Литвиненко]

Alyona_IM, ваш сайт вполне себе резиново-адаптивный. Просто так себе сверстанный

[Alyona_IM]

Антон Литвиненко, спасибо! В чём же общая проблема вёрстки, что, например, у нас хедер при уменьшении ширины выстраивается в несколько строк, в то время как мы отчаянно хотим, чтобы он просто пропорционально уменьшался?
Нам отвечают: дайте макет на меньшую ширину, и мы сделаем. А мне, опять же, отчаянно не верится, что это единственный способ решить проблему)

[Ankhena]

Alyona_IM,

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

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

Немножко смущает то, что вы не можете нанять дизайнера.
С другой стороны, смена дизайнера приведет к полной смене оформления сайта.

Можно ли резиновую и адаптивную вёрстки "совместить"?

Это понятия уже некоторое время назад слились в одно.

В чём же общая проблема вёрстки, что, например, у нас хедер при уменьшении ширины выстраивается в несколько строк, в то время как мы отчаянно хотим, чтобы он просто пропорционально уменьшался?

Так и напишите это в ТЗ тому человеку, который будет это делать.
Судя по вопросу, вы не сами собираетесь этим заниматься?

Нам отвечают: дайте макет на меньшую ширину, и мы сделаем.

А они это кто?

[Антон Литвиненко]

Alyona_IM, как раз таки адаптивный дизайн не будет пропорционально уменьшаться. А вот вам пример сайта который реально пропорционально уменьшается, потому что там адаптивом и не пахнет
https://mozayka.kiev.ua/

[Alyona_IM]

Ankhena,

Немножко смущает то, что вы не можете нанять дизайнера.

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

А они это кто?

Мы работаем с подрядчиком, команда которого делает вёрстку и интеграцию с CMS.

Так и напишите это в ТЗ тому человеку, который будет это делать.

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

В моём представлении проблема решается (должна решаться) использованием в CSS относительных единиц, типа %, em или rem, но, думается, что это - обманчивое предположение.

[Ankhena]

Alyona_IM,

В моём представлении проблема решается (должна решаться) использованием в CSS относительных единиц, типа %, em или rem, но, думается, что это - обманчивое предположение.

Нет, не очень обманчивое.
Но не только в единицах измерения дело.

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

[Alyona_IM]

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

[Антон Литвиненко]

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

[Alyona_IM]

Антон Литвиненко, Ankhena, большое спасибо за отклик и развёрнутые ответы на этот вопрос!
Будем искать решение.

Успехов вам!

[Froggyweb]

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

[Alyona_IM]

Froggyweb,

Какое-то гигантское все на десктопе

Вы точь-в-точь повторили наши слова. Сайт свёрстан по макету на 1920, размеры соответствуют.

На вашем месте я бы нашел подходящий шаблон и работал бы с ним.

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

[Антон Литвиненко]

Froggyweb, это ж битрикс. тут печаль с шаблонами

Answer 1

[Михаил Р.]

Можно ли резиновую и адаптивную вёрстки "совместить"?

Можно, законом не запрещено!

Answer 2

[FrelFrloich]

Вы не правильно подходите к вопросу, если определённые разрешения экранов, допустим 1920 1440, 1024, 768, 460, 360, 320

Между 1920 и 1440 по большей части плевать как выглядит сайт и это разрабатывается на стадии дизайна и изначальной вёрстки,

Но вы привели в пример 1536px, это разрешение 1920 с включённой по дефолту в винде 125% увеличением, соответственно если ваш макет разработан как полагается с 1920 то всё нормально должно смотреться до разрешения 1536px, а дальше уже будет плыть.

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

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

Вы не сможете впихнуть в полку с глаженным бельём 100 рубашек, когда полка предназначена для 20, без последствий в плане мятости или обрезания лишнего. Хотя желание у вас такое может быть.

Comments

[Alyona_IM]

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

Мы увидели это не сейчас внезапно вдруг.

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

определённые разрешения экранов, допустим 1920 1440, 1024, 768, 460, 360, 320

1536 я привела для примера
Нам сказали дорисовать для ширины 1024 px и 728 px

И мы пытаемся понять, вешают ли нам лапшу или нет.
Судя по Вашим комментариям и комментариям Ваших коллег, первый вариант более чем имеет место быть.

[FrelFrloich]

Alyona_IM, вешают, сейчас делаю для крупной компании сайт, 100 уникальных страниц и хрен знает сколько похожих без того или иного блока , на некоторых есть макет 1440 1024 768 и 460, на некоторых имеется только 460 и 1440, остальное самостоятельно. В общем макет в фигме выглядит как том Война и Мир.

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

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

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

[Alyona_IM]

Прочитав немного ваших желаний, они не имеют ничего общего с реальностью, вы хотите впихнуть не впихуемое,

Возможно, я не так выразилась, у нас возникло недопонимание.

Нас устраивает то, как выглядит приложение при 320 ширине (т.е. с макетом для моб версии), но категорически не устраивает так, как выглядит, к примеру, на 1536. А нам отвечают: рисуйте ещё макеты, чтобы решить проблему. Мы рисовать не хотим и ищем иное решение.

[Alyona_IM]

FrelFrloich, спасибо за Вашу обратную связь и помощь!

Успехов!