Статическая веб-страница, созданная с помощью CSS и HTML - до и не до
26.04.2023 09:57
Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время, чтобы понять, что результат далек от совершенства.
Допы #1 Проектирование для настольных компьютеров. Только.
Все выглядело хорошо, правда - но только на моем рабочем столе. В мобильном представлении пользователь не мог видеть полный контент и был вынужден прокручивать страницу по горизонтали. Это приводит к плохому пользовательскому опыту.
Don'ts #2 Фиксированные единицы (пиксели)
Это плохая практика. Если вы хотите разработать веб-страницу для разных экранов (а вы хотите), заданные значения должны быть более регулируемыми (проценты, ems или rem). Так вы сможете убедиться, что макет вашего сайта или приложения отзывчив и подстраивается под размер экрана устройства.
Не рекомендуется #3 Код без точек останова
С точки зрения дизайна это, пожалуй, самая большая ошибка. Создание точек останова дает возможность менять расположение определенных частей в зависимости от размера экрана (планшет/мобильный/десктоп).
Что было хорошо?
Dos #1 Медиа запрос
Я использовал его один раз, но использовал! Теперь я знаю: для создания отзывчивой веб-страницы мне нужно использовать несколько медиа-запросов для разных размеров экрана и внести соответствующие изменения в код.
...
@media screen and (max-width: 1200px) {
.main-container {
width: 95%;
}
}Dos #2 Tag lang
Мой контент был на польском языке. Мне потребовалось три смены шрифта, чтобы понять, что для отображения определенных символов мне нужно что-то задать в HTML. Да, я нашел это! Это была эта часть:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
...Dos #3 Минималистский дизайн
Это было вынуждено моими возможностями (или их отсутствием ;) ), но в результате получился чистый, простой дизайн. Надеюсь, это можно рассматривать как преимущество (см. демо здесь).
Каковы хорошие практики для отзывчивых статических страниц?
Подведем итог. Эти несколько дней кодинга дали мне большой урок о веб-дизайне. Я надеюсь, что мой пример будет хорошим примером того, чего следует избегать и что делать вместо этого.
Хорошие практики для отзывчивого дизайна:
- начните с вьюпорта:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
- относительные единицы в стилизации: выбирайте относительные единицы, такие как проценты, ems или rems, вместо фиксированных единиц, таких как пиксели, при разработке веб-макета.
#hero-section {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 15em 5em;
grid-template-areas:
'profile-pic short-intro';
}- используйте медиазапрос для добавления точек останова: помните, что вы можете изменить отображение макета на экранах разных размеров.
- раздел media query: с его помощью можно скрыть определенные элементы в зависимости от размера экрана.
@media screen and (max-width: 600px) {
.video-wrapper {
display: none;
}
}- оптимизируйте размер изображений: обратите внимание, как каждое из них отображается (и загружается) на маленьком экране. При необходимости уменьшите размер файла.
- размер шрифта и стилизация: посмотрите, как шрифт отображается на мобильных устройствах, и убедитесь, что содержимое остается читабельным.
Ресурсы
Этот список далеко не полный, но надеюсь, что он поможет! Вот более обширные ресурсы:
- отзывчивый веб-дизайн от W3 Schools
- исходный код сайта портфолио от Dennis Ivy
- исходный код simplefolio от Cobiwave
Стоит ли изучать PHP в 2023-2024 годах?
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
Концепция локализации и ее применение в приложениях React ⚡️
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
Пользовательский скаляр GraphQL
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.