При создании веб-страницы необходимо принять множество решений. Куда идет название? Насколько большим я его сделаю? Куда уходит изображение? Как это будет выглядеть, когда у меня будет один абзац? Пять абзацев?
Если в вашей команде есть дизайнер, он может дать вам макеты! Это здорово, и это плацдарм для задачи размещения контента. Но прежде чем вы начнете раскидывать «lorem ipsum» по всей странице, могу я дать совет? Используйте скелет.
Что такое скелет?
Вы, вероятно, уже видели их, когда посещали свой любимый сайт в социальной сети. Прежде чем страница будет полностью загружена, вы увидите заполнители серого цвета, где должно быть содержимое. Это скелет.
Почему я должен начать там?
Использование «lorem ipsum» приятно, но иногда отвлекает, потому что вы всегда хотите его прочитать. Вы когда-нибудь показывали кому-то свой прогресс, и они спрашивали: «Что все это значит?» Создавая свою страницу со скелетом, вы можете сосредоточиться исключительно на макете, интервалах и пропорциях.
Используйте это в производстве
Ваше время и усилия по созданию страницы-скелета не потеряны. Вы можете использовать свой скелет в процессе загрузки страницы. При этом вы увеличиваете воспринимаемую скорость и отзывчивость вашего сайта. Используйте его везде, где вы отправляете запросы на серверную часть для получения большего количества контента, а пользователю приходится ждать.
Покажите мне пример
Мой пример приложения — это простой поиск фильмов. Он имеет текстовое поле, которое позволяет пользователю ввести заголовок, который он ищет. Это будет отправлено в IMDbOT API, который вернет кучу результатов. Результаты включают постер фильма, название, краткую информацию и информацию о рейтинге.
Я создаю это приложение, используя quasar framework, который построен на VueJS и имеет большую библиотеку доступных компонентов, включая скелет!
Я создал div.movie-result, который будет обертывать каждый из результатов фильма. Чтобы создать несколько, я добавил цикл VueJS for, чтобы вывести некоторые из них на экран, чтобы я мог получить представление о том, как они будут выглядеть. Затем я добавил q-skeleton компонентов, которые сопоставляются с каждым фрагментом контента, который я получу от вызова API (т. е. постер, заголовок, рейтинг и сводка). Подводя итог, вы можете видеть, что я использовал несколько текстовых скелетов, чтобы имитировать абзац текста.
Итак, теперь мы можем начать играть с компоновкой, интервалами и пропорциями. Я написал следующий SCSS.
Теперь у меня есть что-то похожее на это!
Здесь я начинаю видеть форму контента, как он будет располагаться на странице, как все это будет располагаться. Если бы у меня был макет моего дизайнера, я мог бы легко сравнить результат и поделиться им с ними для комментариев.
Ничто из этого не является напрасной работой. Я могу обернуть свой скелет в div, который я могу использовать во время загрузки. Все классы, которые я создал для макета, я могу применить к контенту.
Соберем все вместе…
Вот как выглядит результат.
Заключение
Начать со скелета — отличный способ сосредоточиться на макете, размере, расположении и пропорциях контента вашего сайта. Затем результат можно повторно использовать для экранов загрузки, чтобы увеличить воспринимаемое пользователем время загрузки, а стили макета можно применять к живому контенту.
Для тех, кто не использует Quasar для разработки, есть замечательный набор инструментов для разных фреймворков под названием Skeleton Elements, который вам стоит попробовать.
