LUVIT | Веб-разработчик

8 Oct 2020

#занудныемысли #процессразработки

Данный текст предназначен либо для веб-дизайнеров, либо для тех,Show more кому просто интересен процесс разработки и возникающие трудности.

Один из наиболее интересных участков secet-k.ru - блок "Как работаем мы?". Дело в том, что в языках программирования лучше всего расставлять все элементы по порядку. При этом порядок может быть справа налево, но никак не может быть снизу вверх. Как видно на картинке, третий элемент находится ниже четвертого, что не даёт возможность использовать стандартную расстановку. Конечно, можно в коде поставить четвертый элемент раньше третьего, но тогда и в мобильной версии порядок будет нарушен.

Решением в таких ситуации всегда будет абсолютное позиционирование элементов. Прописывая расположение вручную мы может ставить элементы куда хотим, словно в Фотошопе. Вроде бы всё прекрасно, но почему же это не используется всегда?

Все дело опять-таки в различных разрешениях экрана. Если все наши элементы следуют друг за другом, а их размеры имеют процентную зависимость от размера экрана, то они почти всегда будут хорошо смотреться на любом экране. Да, их всё равно придётся адаптировать под мобильную верстку, но всё это можно сделать за 3-4 шага.

Если же наши элементы имеют абсолютное позиционирование, то при любом изменении ширины экрана все данные элементы не меняют свои позиции. Таким образом высока вероятность, что эти элементы начнут выходить за границы экрана. Чтобы такое не происходило, абсолютные элементы следует адаптировать под разные экраны с шагом 50-100 пикселей. Максимальная ширина экрана, на которой я делаю изменения 1800 пикселей. Всё, что шире, я не меняю, так как сайт там обычно смотрится и так хорошо, но при уменьшении экрана как раз и начинаются проблемы. Это значит, что мне нужно адаптировать все эти элементы с 1800 пикселей до 300 пикселей (экран меньше сейчас почти нигде не используется) с шагом в 50-100 пикселей. Путем нехитрых вычислении можно выявить, что потребуется минимум 15 шагов для этого. На самом деле, это не совсем так. На маленьком экране подобное позиционирование теряет смысл и я меняю его на стандартное, так что после определенного размера (примерно 500-600 пикселей) особого смысла изменять элементы нет.

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

144

LUVIT | Веб-разработчик

7 Oct 2020

Ещё в феврале моё портфолио пополнилось новым сайтом - secret-k.ru

Одностраничный сайт был выполнен примерно за 3 недели (макет +Show more

Секрет-К — Наша компания занимается установкой систем безопасности для частных и юридических лиц: secret-k.ru

106

LUVIT | Веб-разработчик

26 Mar 2020

Центр-Недвижимость Конаково | Конаковский район

19 Mar 2020

Агентство «Центр–Недвижимость» официально занимается оценочной и риэлтерской деятельностью. Сегодня АН «Центр-Недвижимость» - это грамотный и работоспособный коллектив. Все специалисты имеютShow more