CMS – Веб-студия EIPE – создание и продвижение сайтов в Клину

3 эффективных способа сделать дизайн сайта более привлекательным

sproadmin — Wed, 28 Dec 2016 20:02:31 +0000

Забудьте о Font Awesome, попробуйте другие иконки!
В первую очередь отметим, что нет ничего плохого в использовании Font Awesome. Но при этом стоит помнить, что далеко не каждый элемент страницы нуждается в акцентированном внимании. Придумайте что-то свое, такое, которого нет на других сайтах. В общем, старайтесь избегать шаблонности.

Не используйте Flat Design лишь потому, что им пользуются все вебмастера!

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

Хедер во всей экран – большой риск!

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

Несколько советов по улучшению фонового видео на веб-сайте

sproadmin — Wed, 28 Dec 2016 19:51:40 +0000

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

Сжимайте видео

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

Используйте короткие видео

Конечно, максимальное сжатие может обеспечить нормальное воспроизведение даже достаточно длинного видео. Однако не стоит считать, что посетитель вашего сайта зашел на него для того, чтобы посмотреть фоновое видео. Вполне может быть, что он вовсе будет не рад, что на вашем сайте есть это самое фоновое видео. Именно поэтому, лучше всего, чтобы длина фонового видео не превышала 30 секунд.

Лучшие инструменты для веб разработчиков

sproadmin — Thu, 22 Dec 2016 12:10:03 +0000

sloc
Инструмент, который представляет собой командную строку для осуществления сбора статистических данных исходного кода. На выходе пользователь получает простой список, но при желании результат может быть преобразован в CSV или даже таблицу CLI.

VisSense.js
Специальная библиотека, которая предназначена для исследования DOM. Основной особенностью данной библиотеки является то, что она работает с элементами вне поля экрана. При этом стоит отметить, что библиотека не используется для вещей: display: none и visibility: hidden.

Sass Director
Простой Sass инструмент, который может быть очень полезен при разработке новых Sass проектов. На основании кода манифест файла инструмент создает команду, после реализации которой автоматически строится структура проекта.

Awesomplete
Независимый скрипт автозаполнения. Скрипт используется без привлечения дополнительного кода JavaScript кода и предлагает широкие функциональные возможности для опытных пользователей.

Проверка кода веб-сайта

sproadmin — Thu, 22 Dec 2016 12:00:02 +0000

Проверка кода сайта называется литингом. Проверка кода осуществляется с целью анализа кода на его соответствие существующим правилам веб-програмирования. Такая проверка является обязательным мероприятием, ведь именно от правильности кода во многом зависит нормальная работоспособность сайта.

Проверка кода может приобретать разные формы:
– для проверки HTML это валидация. Сама проверка может включать в себя анализ на соответствие общим принципам, например, это может быть анализ соответствия стандартам отступа во вкладках;
– в случае с проверкой таблицы стилей то здесь все не так просто как в случае с HTML. Вместе с тем, стоит отметить, что многие препроцессоры, имеют встроенные инструменты для проверки. Сама проверка осуществляется для анализа правильности объявления свойств и их совместимости;
– проверка JavaScript. Проверка JavaScript осуществляется с использованием специальных инструментов, например – ESLint.

Несколько способов сделать свой сайт более уникальным

sproadmin — Thu, 22 Dec 2016 11:42:30 +0000

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

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

Страница FAQ
Достаточно интересный способ повысить оригинальность своего сайта. Согласитесь, на сегодняшний день мало сайтов, на которых есть страница FAQ. Разумеется, на больших порталах и сервисах такие страницы есть, а вот на обыкновенных информационных веб-сайтах…

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

Основные этапы загрузки веб-шрифтов

sproadmin — Thu, 22 Dec 2016 11:25:26 +0000

В данной статье мы кратко рассмотрим основные этапы истории загрузки веб-шрифтов.
Итак:

Этап №1
По сути, это этап, когда никто ничего не делал. Сюда же можно отнести и неправильное применение блока font-face. По мнению многих веб-мастеров это самый настоящий «анти шаблон». С подобного рода подходом в браузерах возникает проблема мигания невидимого текста.

Этап №2
Data URI для мигающего и не имеющего стиля текста. Асинхронная загрузка CSS стилей со шрифтами, представленным через Data URI. Такой метод является устаревшим и может приводить к короткому миганию невидимого текста.

Этап №3
Использование класса в области видимости для текста, не имеющего стилей: таблица стилей применяется для введения класса, который защищает контент от веб-шрифтов, загрузка которых не была произведена.

Этап №4
Использование классов в области видимости для мигающего текста. Данный метод использует два различных этапа в классах, которые находятся в области видимости. Первый этап предполагает загрузку шрифта Roman, а уже на втором этапе осуществляется загрузка той или иной вариации данного шрифта, например Bold. Такой метод хорошо подходит для не очень скоростных соединений, ведь благодаря нему перестройка страницы менее заметна для пользователя.

Автоматическое добавление адаптивных изображений

sproadmin — Thu, 22 Dec 2016 11:09:15 +0000

Казалось бы, ничего сложного в создании адаптивных изображений нет. А как быть, если, например, речь идет об Интернет-магазине? Неужели веб-мастеру придется вручную создавать разные варианты изображений? Конечно, нет! Конечно, есть выход из этой ситуации.
Суть метода заключается в добавлении определенной логики в CMS, позволяющей вебмастеру загружать изображения, выбирать определенные точки на каждой картинке и автоматически генерировать все обрезанные варианты.
Если у вас нормально обстоит дело с изменением размеров картинок и браузер может выбрать наиболее подходящую картинку, то проблема может быть решена очень просто – путем использования ImageMagick или какого-либо иного графического редактора.
Не менее эффективным вариантом решения проблемы будет использование специальных плагинов. На сегодняшний день подобного рода плагинов существует огромнейшее количество, и вы без проблем сможете подобрать и установить именно то расширение, которое в полной мере отвечает вашим требованиям.

Что представляет собой Лендинг-пейдж?

sproadmin — Tue, 20 Dec 2016 17:22:51 +0000

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

Различают следующие виды лендинг-пейджев:

– Click-through пейдж, предназначенная для привлечения пользователей, повышения их заинтересованности и последующего перенаправления на страницу покупки того или иного товара;

– Лидген Пейдж, предназначенная для мотивирования пользователей осуществить подписку на новостную ленту сайта. При этом взамен пользователь получает абсолютно бесплатно какой-либо товар или какую-либо услугу.

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

Обзор самых новых веб-инструментов и приложений 2016-го года

sproadmin — Tue, 20 Dec 2016 17:11:07 +0000

Сегодня мы рассмотрим несколько наиболее популярных веб-приложений 2016-го года. Итак:
Tickera.
В данном случае речь идет о специальном плагине, который поможет организовать продажу и доставку билетов на мероприятие, которое вы планируете провести. Плагин берет на себя решение всех проблем, начиная от способов оплаты билетов, заканчивая описанием мелких деталей.

Backblaze

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

Ultimatum Theme

Ultimatum Theme представляет собой удобный онлайн-конструктор для создания сайтов. В случае необходимости и при наличии соответствующих технических знаний у вас есть возможность произвести редактирование таблицы стилей CSS. Отличительной особенностью конструктора является то, что к нему можно подключать практически все существующие плагины Вордпресс.

Simbla Website Builder

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

Инструмент для анализа и отладки веб-страниц

sproadmin — Tue, 20 Dec 2016 16:38:21 +0000

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

В технической документации на этот инструмент четко не указано, каким образом осуществляется работа с ним на операционной системе Windows, а поэтому считаем необходимым рассмотреть этот процесс более детально. Первое что от нас потребуется, так это знание нашего IP. В операционной системе Windows узнать свой IP можно воспользовавшись командой ipconfig. Отметим, что для веб-разработчика лучше всего иметь статистический IP, ведь в противном случае придется узнавать свой адрес после каждой новой загрузки своего ПК.

Также нам потребуется http сервер, поскольку у вас не будет возможности загружать файлы мобильное устройство. В данном случае можно использовать Apache или node.js. Вот, собственно, и все, что нам необходимо для начала работы.