Студия дизайна «Разумный подход» · брендинг, цифровые продукты и медиакоммуникации

Идёт распродажа плагина Elementor Pro для Wordpress, скидка 20%. 

Это современный визуальный редактор для Wordpress, чтобы из готовых блоков драг-н-дропом строить станицу, анимацию. Очень удобен для создания сайтов-визиток, лендингов, блогов.

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

Есть большой объём хорошей документации, множество видеоуроков, существует большое сообщество, огромное количество расширений от других разработчиков. Разработчики ведут Github и несколько групп в фэйсбуке. Всё это хорошие признаки того, что проект будет только больше развиваться и уверенно поддерживаться.

Приобрести плагин Elementor Pro

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

Иногда это совмещается с искажением макета в перспективе, с уменьшением.

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

Причины, по которым дизайнер может решить показывать «макеты в рамке» могут быть такие:

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

Если вам показывают работу над сайтом, макет которого находится в рамке из ноутбука или планшета, значит вас пытаются обмануть. В профессиональной среде «макеты в рамках» не показывают: на них неудобно оценивать результат, создание таких изображений отнимает лишнее время в производстве, не добавляя ничего существенного.

Разумеется, есть задачи когда использование мокапа, в виде рамки из устройства, оправдано:

• Показать, что расположение важных элементов сайта продумано и они умещаются на «первом экране»;
• Продемонстрировать, что у пользователя не возникнет сомнений в том, что на сайте есть скролл;
• Дизайн подразумевает вёрстку «на весь экран», совсем без прокрутки или только с горизонтальной;
• Макет показывает как сайт выглядит среди других, созданных в том же стиле, продуктов: других сайтов и приложений, фирменной и сувенирной продукции.

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

Исторический сложилось, что принципы указания размеров элементов веб-страницы в стилях CSS были сформированы при небольших, по сегодняшним меркам, разрешениях экранов. При этом в CSS приняты к использованию несколько различных систем измерения: привязанные к размерам пикселя px, к пропорциям браузера % и к размера шрифта em и pt. Чтобы не связываться с этим историческим наследием можно использовать современные возможности стилей.

Чтобы быстро адаптировать сайт к высоким разрешениям, не переделывая ничего кардинально, следует в стилях CSS на всеохватывающий тэг HTML поставить увеличение с помощью последовательных диапазонов media queries.

@media (min-width: 4200px) and all {
html{zoom: 3;}
}

@media (min-width: 3500px) and (max-width: 4199px) {
html{zoom: 2.5;}
}

@media (min-width: 2800px) and (max-width: 3499px) {
html{zoom: 2;}
}

@media (min-width: 2000px) and (max-width: 2799px) {
html{zoom: 1.5;}
}

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

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