Обзор сайта

Современные направления в верстке коммерческих сайтов

Александр Рыбка 01:11:2017 384

Использование анимации на сайте

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

Когда возникает вопрос о  реализации красивой анимации, которая корректно отображается во всех браузерах, на помощь верстальщику приходит такой инструмент как ANIMATE.CSS.

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

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

Github

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

animate css

codepen.io

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

Колыбель Ньютона

Анимация стрелок

Кнопка атом

Марcс

Посмотреть примеры использования CSS анимации на сайте можно в можно в моем портфолио.

Оптимизация скорости загрузки сайта

Сегодня информация, получаемая человеком в день, достигает нереальных показателей. Философ Ален де Боттон в своей книге «Новости: инструкция по применению» пишет: «Через офис одного международного новостного агентства за день проходит больше данных, чем все человечество создало за 23 века с момента смерти Сократа до изобретения телефона».

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

Зависимость конверсии от скорости загрузки сайта />
</div>
<p>Хочу перечислить основные инструменты и методы, которые я использую именно в верстке для оптимизации скорости загрузки сайта. Возможно в будущем я напишу отдельную статью на данную тему, так как этот вопрос достаточно интересен.</p>
<ul class=
  • Объединение иконок и миниатюрных изображений в png спрайты
  • Оптимизация изображений в целях уменьшения суммарного веса изображений. Для этого я использую сервис TinyPNG. Как правило экономия веса существенная (до 75%)
  • Перед сдачей проект должен иметь версию минифицированного кода CSS/JS.
  • Настройка хостинга на кеширование страниц
  • Использование плагинов (применяется на CMS)
  • Ориентация на мобильные устройства

    То что больше 60% населения совершают покупки с мобильных устройств уже ни для кого не новость. Сайты в мобильном телефоне (или любом другом гаджете) должны быть удобными, быстрыми и понятными.  Но на практике еще не все сайты делают упор на данное направление. Даже у лидеров рынка в мобильной версии можно найти неприятные “сюрпризы”, которые поджидают пользователей: то текст поплывет, то пункты меню перемещаются .

    Вот некоторые из требований к верстке под мобильные устройства:

    • Под адаптивностью оперируем определением «отзывчивость» — т.е. responsive. Другими словами, глобальные контейнеры всегда должны быть 100%
    • Допускается использование desktop first методов в подходе
    • Мобильная версия (как правило в 1 колонку) начинается с 568px (не 768 как в старом bootstrap)
    • Адекватное, пропорциональное изменения отступов и размеров шрифтов на ключевых точках
    • Основные точки 1200px (wide), 992px (desktop), 768px (tablet), 568px (mobile), 414px (mobile-s)
    • Допускается использование других точек при необходимости с произвольным интервалом. Однако слишком большое количество может негативно сказаться на пользовательском опыте (при изменении размера станица будет слишком часто “прыгать”). К примеру, если пункт меню не помещается в шапке и на размере XXX вызывает перенос на другую строку. В таком случае допускается media-запрос на скрытие этого элемента

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

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

    До связи, Александр Рыбка.

    Видео