Прошу дать советы по дизайну сайта

@Renat174 · Регистрация: 08.10.2020

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Мой сайт - https://7x6.ru/
Прошу дать советы по улучшению дизайна сайта, удобству работы, каким то базовым недочетам и т.п.
На сайте представлены калькуляторы стройматериалов - вникать в точность/правильность расчетов не надо, только визуальную составляющую прокомментируйте и общее впечатление.
Если будут ссылки с примерами, показывающими удачное решение той или иной проблемы на моем сайте, буду очень признателен.

@Renat174 · 13.02.2024, 14:55 **[ТС]**

Прикрепил скриншот страницы с одним из калькуляторов

@Renat174 · 13.02.2024, 19:20 **[ТС]**

По-видимому, не в том разделе тему создал. Как то может автор переместить тему? Или удалить по крайней мере? Подскажите, пожалуйста...

@DrType · 13.02.2024, 23:08

По-моему, подходящий раздел.

@Usaga · 14.02.2024, 06:21

Renat174, сделано весьма недурно. Но мобильная версия немного крировата: контент страницы не умещается по ширине и появляется скроллер. Не критично, но всё же. Это легко и в обычном браузере воспроизводится, достаточно ширину окна уменьшить.

Добавлено через 5 минут
А вот сами калькуляторы конечно сделаны так себе. При попытки что-то рассчитать вся страница перезагружается. Хотя там модальные окна вроде как есть, соответственно, ожидается нормальная интерактивность, а не привет из двухтысячных...

@Renat174 · 14.02.2024, 07:26 **[ТС]**

Про перезагрузку...
Делать на чистом Javascript не стал, так как не хочу скрипт в паблик сливать. По этому сделал на PHP. Познания довольно поверхностные у меня, думал про Ajax, но наверное голос лени оказался громче, убедил себя, что не так критична перезагрузка формы.
А, про Ajax еще что подумал... Поскольку у меня в калькуляторах много параметров, получается что при изменении каждого будет происходить перезагрузка, т.е. очень много промежуточных ненужных обращений к серверу.
Или я не прав? Просвятите, пожалуйста, по этому вопросу, т.к. знаний у меня не достаточно.

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

@Usaga · 14.02.2024, 07:46

Renat174, про скрипт я не совсем понял, что в нём такого ценного. Но это не проблема - собираешь параметры, шлёш на сервер по аяксу, получаешь ответ и выводишь его.

Сообщение от Renat174

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

Ну, как сделаешь, так и будет) Если ты о том, что пока пользователь параметры забивает, ты промежуточные результаты считать пытаешься... Ну, сделай расчёты вызываемыми явно по кнопке. Или debounce какой-нибудь (запрос отправляется с задержкой, когда юзер ничего не вводит в течении какого-то времени).

Сообщение от Renat174

Про скроллеры (не помещается по горизонтали) - уточните пожалуйста, при какой ширине дисплея и какая страница - буду проверять/исправлять.

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

@Renat174 · 14.02.2024, 07:54 **[ТС]**

Еще мысль такая... Если я просто тело калькулятора помещу в iframe... Я правильно понимаю, что при перезагрузках у меня будет только содержимое iframe обновляться, а не весь сайт. Это как альтернативное решение будет работать?

@Usaga · 14.02.2024, 07:59

Renat174, фреймы лучше не трогать. Это старая технология, не удобная и её потихоньку начинают резать. Если уж хочется разметку с сервера вернуть по аяксу, то руками её в DOM вставляй. Хотя это тоже такое себе.

@Renat174 · 14.02.2024, 08:00 **[ТС]**

Я не противник аякса, просто не знаю как внедрить, вот и пытаюсь найти вариант быстрый и сподручный.

Добавлено через 1 минуту
Ок, понял. Значит буду собираться с духом и приступать к изучению аякса... Спасибо!

@Usaga · 14.02.2024, 08:05

Renat174, я бы эти калькуляторы реализовал на каком-нибудь фронтовом фреймворке, типа Angular. Ну или на минималестичной библиотечке типа KnockoutJS, если впадлу всё на SPA переписывать и нужно точечно интерактивность добавить. Это было бы оптимальнее, чем гонять туда-сюда разметку и в DOM её вставлять, пол страницы перерисовывая.

Но тут сам смотри. Мне, как пользователю, главное, чтобы страница не перезагружалась вся. А как оно технически будет сделать - всё равно.

@Renat174 · 14.02.2024, 08:05 **[ТС]**

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

@Renat174 · 14.02.2024, 08:07 **[ТС]**

В хроме при включении режима просмотра на разных размерах экрана эпизодически появляется ошибка, но при береходе на др старницу и возвращении обратно уже нет ошибки - подумал, что глюк браузера

@Usaga · 14.02.2024, 08:08

Сообщение от Renat174

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

Вот, это в Edge. В Safari и Хроме (на андроиде) тоже самое.

@Renat174 · 14.02.2024, 08:09 **[ТС]**

Ок, понял - буду исправлять

@Usaga · 14.02.2024, 08:09

Бог бы с ним на десктопах, мало кто окно браузера кукожит. Но на мобилах оно всегда видно.

@Renat174 · 14.02.2024, 08:13 **[ТС]**

Ну да, особенно актуально, что у меня мобильный трафик в 2 раза больше чем на ПК

@Renat174 · 15.02.2024, 09:05 **[ТС]**

Нашел, в чем проблема. На классе .row отрицательные значения margin-left и margin-right на небольших экранах в некоторых браузерах давали такой эффект. В итоге добавил @media (max-width: 991.98px){.row{margin-left:0; margin-right:0;}} и, кажется, проблема ушла

@Usaga · 15.02.2024, 09:09

Renat174, да, теперь нормально.

@voral · 15.02.2024, 10:30

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

Условно в простом варианте на css переход от opacity:1 к opacity:0 и обратно. (смотрите как на других сайтах популярных это реализуется)

Присоединяюсь к мнению, что необходимо переходить на Ajax. Т.е. на сколько "тонким" будет клиент в браузере уже решите по необходимости. А так будете условно с сервером общаться при помощи json.

Так же присоединяюсь к совету использования фреймворков. Про angular точно не скажу по сложности, но его альтернатива это React и Vue. Первый более популярный. По функционалу +/- одинаковы. Vue на мой взгляд и опыт, чуть проще для вхождения. Angular (тут я сам не пробовал, но то что смотрел, читал) - мне кажется чуть сложнее для входа.

Так же плюсом что к Vue и React есть UI библиотеки. Т.е. практически готовый дизайн (включает не просто визуал, но и функционал). Для примера можете погуглить про Matrerial UI

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53

	Прошу дать советы по дизайну сайта 13.02.2024, 14:28. Показов 1540. Ответов 22 Метки дизайн сайта, навигация по сайту, юзабилити (Все метки) Здравствуйте! Мой сайт - https://7x6.ru/ Прошу дать советы по улучшению дизайна сайта, удобству работы, каким то базовым недочетам и т.п. На сайте представлены калькуляторы стройматериалов - вникать в точность/правильность расчетов не надо, только визуальную составляющую прокомментируйте и общее впечатление. Если будут ссылки с примерами, показывающими удачное решение той или иной проблемы на моем сайте, буду очень признателен. 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	13.02.2024, 14:55 [ТС]
	Прикрепил скриншот страницы с одним из калькуляторов Миниатюры 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	13.02.2024, 19:20 [ТС]
	По-видимому, не в том разделе тему создал. Как то может автор переместить тему? Или удалить по крайней мере? Подскажите, пожалуйста... 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	13.02.2024, 23:08
	По-моему, подходящий раздел. 0

@Usaga 14117 / 9334 / 1350 Регистрация: 21.01.2016 Сообщений: 35,071
	14.02.2024, 06:21
	Renat174, сделано весьма недурно. Но мобильная версия немного крировата: контент страницы не умещается по ширине и появляется скроллер. Не критично, но всё же. Это легко и в обычном браузере воспроизводится, достаточно ширину окна уменьшить. Добавлено через 5 минут А вот сами калькуляторы конечно сделаны так себе. При попытки что-то рассчитать вся страница перезагружается. Хотя там модальные окна вроде как есть, соответственно, ожидается нормальная интерактивность, а не привет из двухтысячных... 1

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 07:26 [ТС]
	Про перезагрузку... Делать на чистом Javascript не стал, так как не хочу скрипт в паблик сливать. По этому сделал на PHP. Познания довольно поверхностные у меня, думал про Ajax, но наверное голос лени оказался громче, убедил себя, что не так критична перезагрузка формы. А, про Ajax еще что подумал... Поскольку у меня в калькуляторах много параметров, получается что при изменении каждого будет происходить перезагрузка, т.е. очень много промежуточных ненужных обращений к серверу. Или я не прав? Просвятите, пожалуйста, по этому вопросу, т.к. знаний у меня не достаточно. Добавлено через 4 минуты Про скроллеры (не помещается по горизонтали) - уточните пожалуйста, при какой ширине дисплея и какая страница - буду проверять/исправлять. 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 07:54 [ТС]
	Еще мысль такая... Если я просто тело калькулятора помещу в iframe... Я правильно понимаю, что при перезагрузках у меня будет только содержимое iframe обновляться, а не весь сайт. Это как альтернативное решение будет работать? 0

@Usaga 14117 / 9334 / 1350 Регистрация: 21.01.2016 Сообщений: 35,071
	14.02.2024, 07:59
	Renat174, фреймы лучше не трогать. Это старая технология, не удобная и её потихоньку начинают резать. Если уж хочется разметку с сервера вернуть по аяксу, то руками её в DOM вставляй. Хотя это тоже такое себе. 1

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:00 [ТС]
	Я не противник аякса, просто не знаю как внедрить, вот и пытаюсь найти вариант быстрый и сподручный. Добавлено через 1 минуту Ок, понял. Значит буду собираться с духом и приступать к изучению аякса... Спасибо! 0

@Usaga 14117 / 9334 / 1350 Регистрация: 21.01.2016 Сообщений: 35,071
	14.02.2024, 08:05
	Renat174, я бы эти калькуляторы реализовал на каком-нибудь фронтовом фреймворке, типа Angular. Ну или на минималестичной библиотечке типа KnockoutJS, если впадлу всё на SPA переписывать и нужно точечно интерактивность добавить. Это было бы оптимальнее, чем гонять туда-сюда разметку и в DOM её вставлять, пол страницы перерисовывая. Но тут сам смотри. Мне, как пользователю, главное, чтобы страница не перезагружалась вся. А как оно технически будет сделать - всё равно. 1

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:05 [ТС]
	С горизонтальным скролом пока не понял в чем проблема - не отследил ошибку Миниатюры 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:07 [ТС]
	В хроме при включении режима просмотра на разных размерах экрана эпизодически появляется ошибка, но при береходе на др старницу и возвращении обратно уже нет ошибки - подумал, что глюк браузера 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:09 [ТС]
	Ок, понял - буду исправлять 0

@Usaga 14117 / 9334 / 1350 Регистрация: 21.01.2016 Сообщений: 35,071
	14.02.2024, 08:09
	Бог бы с ним на десктопах, мало кто окно браузера кукожит. Но на мобилах оно всегда видно. 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	14.02.2024, 08:13 [ТС]
	Ну да, особенно актуально, что у меня мобильный трафик в 2 раза больше чем на ПК 0

@Renat174 10 / 9 / 4 Регистрация: 08.10.2020 Сообщений: 53
	15.02.2024, 09:05 [ТС]
	Нашел, в чем проблема. На классе .row отрицательные значения margin-left и margin-right на небольших экранах в некоторых браузерах давали такой эффект. В итоге добавил @media (max-width: 991.98px){.row{margin-left:0; margin-right:0;}} и, кажется, проблема ушла 0

@Usaga 14117 / 9334 / 1350 Регистрация: 21.01.2016 Сообщений: 35,071
	15.02.2024, 09:09
	Renat174, да, теперь нормально. 0

@voral 3012 / 1446 / 262 Регистрация: 16.03.2008 Сообщений: 6,449 Записей в блоге: 2
	15.02.2024, 10:30
	Самое первое, что прям "бесит". (конечно это индивидуально, но тем не менее) это индикатор загрузки, появляющийся посредине страницы, немножко подергается и потом улетает вверх (с белым фоном на всю ширину). Уж если индикатор делать то, +- типовое решение: плавно затемнить.засветлиь (в общем то хоть для полной заливки белым) фон, посредине индикатор... а потом это все также плавно "растворить". Условно в простом варианте на css переход от opacity:1 к opacity:0 и обратно. (смотрите как на других сайтах популярных это реализуется) Присоединяюсь к мнению, что необходимо переходить на Ajax. Т.е. на сколько "тонким" будет клиент в браузере уже решите по необходимости. А так будете условно с сервером общаться при помощи json. Так же присоединяюсь к совету использования фреймворков. Про angular точно не скажу по сложности, но его альтернатива это React и Vue. Первый более популярный. По функционалу +/- одинаковы. Vue на мой взгляд и опыт, чуть проще для вхождения. Angular (тут я сам не пробовал, но то что смотрел, читал) - мне кажется чуть сложнее для входа. Так же плюсом что к Vue и React есть UI библиотеки. Т.е. практически готовый дизайн (включает не просто визуал, но и функционал). Для примера можете погуглить про Matrerial UI 1