Использование анимации на сайте
Один из самых популярных направлений сегодня это анимация. Она применяется как для создания эффектов, вывода меню, подсказок, так и для создания различных “красивостей”. Присутствие анимации на сайте поможет пользователю рассказать о продукте компании и наглядно выделить все его преимущества.
Когда возникает вопрос о реализации красивой анимации, которая корректно отображается во всех браузерах, на помощь верстальщику приходит такой инструмент как ANIMATE.CSS.
Преимущество данной библиотеки заключается в ее легковесности (важность данного плюса я рассмотрю во втором тренде) и простоте использования.
Если помните, в прошлой статье я рассказывал про то, что часто ищу вдохновение на сайтах с премией awwwаrds. Но сегодня я расскажу о других источниках своего вдохновения или поиска необходимых эффектов.
Данный ресурс скорее предоставляется моим заказчикам, для того чтоб они могли визуально оценить и подобрать необходимую анимацию. По своему опыту скажу, что иногда возникают проблемы с использованием данных анимаций.
codepen.io
Это онлайн редактор с идеями и кейсами разработчиков со всего мира, где они делятся примерами своих работ. На данном ресурсе можно найти много идей для анимирования отдельных элементов и проекты c их применением.
Колыбель Ньютона
Анимация стрелок
Кнопка атом
Марc
Посмотреть примеры использования CSS анимации на сайте можно в можно в моем портфолио.
Оптимизация скорости загрузки сайта
Сегодня информация, получаемая человеком в день, достигает нереальных показателей. Философ Ален де Боттон в своей книге «Новости: инструкция по применению» пишет: «Через офис одного международного новостного агентства за день проходит больше данных, чем все человечество создало за 23 века с момента смерти Сократа до изобретения телефона».
При таком количестве информации все важнее становится скорость ее получения. В интернете описано множество маркетинговых кейсов, в которых доказано, что увеличение скорости загрузки сайтов приводит к уменьшению процента отказов и повышению уровня конверсий.
Хочу перечислить основные инструменты и методы, которые я использую именно в верстке для оптимизации скорости загрузки сайта. Возможно в будущем я напишу отдельную статью на данную тему, так как этот вопрос достаточно интересен.
- Объединение иконок и миниатюрных изображений в 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-запрос на скрытие этого элемента
Подводя итоги можно сказать что с каждым годом в веб-разработке упор все больше делается на удобстве пользователей. Современный сайт должен быть простым но с продуманным дизайном и функционалом.
Если вам интересно узнать о других инструментах и технологиях, то оставляйте свои комментарии к данной статье. А также подписывайтесь и следите за последними статьями.
До связи, Александр Рыбка.