Шесть предположений, которые могут сломать ваш сайт
Ошибка, которую постоянно делают некоторые из крупнейших веб-сайтов, показывает, что они неправильно думают об адаптивном веб-дизайне.
В этом блоге Samsung в Интернете мы часто говорим о создании прогрессивных веб-приложений. Одним из краеугольных камней создания веб-приложений является адаптивный дизайн. Адаптивные веб-сайты могут вести себя правильно независимо от размера экрана. Команда цифровых служб правительства Великобритании рекомендует использовать следующие действия для веб-сайтов:
Компания Samsung, внедряя инновации в области оборудования, часто представляет новые устройства. Эти новые устройства часто ломают некоторые веб-сайты интересными способами, но один из наиболее распространенных и предотвратимых способов взлома веб-сайтов - это неправильная установка веб-сайта на устройство.
Это часто происходит, когда разработчики веб-сайтов делают слишком много предположений об устройствах, которые люди будут использовать для просмотра веб-сайта.
«Я поддерживаю оба форм-фактора: мой iPhoneX и Chrome на Macbook Pro 15».
В этой статье не будет технического глубокого погружения в адаптивный веб-дизайн, вместо этого мы обсудим некоторые ложные предположения, которые часто делают разработчики, которые делают веб-сайты хрупкими:
«Можно создавать отдельные сайты для мобильных устройств и компьютеров»
URL-адреса должны относиться к контенту, а не к форм-фактору. Назначение разных URL-адресов контенту для разных устройств является нарушением Единого веб-принципа. URL-адрес, отправленный с одного устройства, должен отлично работать на другом.
«Мобильный и настольный компьютер - это только два форм-фактора».
Веб-браузеры реализованы на самых разных устройствах. Помимо мобильных телефонов, существует широкий спектр портативных устройств, таких как обычные телефоны, электронные книги, планшеты и фаблеты. Которые бывают самых разных размеров экрана и соотношений сторон.
Вдобавок ко всему существуют устройства, которые можно просматривать на другом расстоянии, например браузеры, встроенные в телевизоры или холодильники.
Пользователи настольных компьютеров больше всего варьируются от пользователей на гигантских экранах 4K до пользователей крошечных карманных ноутбуков. Кроме того, пользователи настольных компьютеров, вероятно, изменят размер «на лету» или предпочтут использовать меньшее или вертикальное окно.
«Мобильные устройства имеют фиксированный размер или соотношение сторон».
Часто дизайнеры веб-сайтов устанавливают точки останова в соответствии с размером и соотношением сторон популярных iPhone Apple. К сожалению, это не соответствует реальности размеров устройств.
Что действительно делает сложным, так это то, что размеры телефонов меняются. Веб-страница, основанная на единственном поколении устройств, не будет служить надежной защитой в будущем. Вы можете установить правила для каждого известного доступного устройства, и завтра можно будет создать устройство, которое, как вы не ожидали, могло сломать все.
Я видел ситуации, когда каждое устройство, которое нарушает макет, становится новым пограничным случаем, обрабатываемым в CSS, до тех пор, пока не будет так много крайних случаев, в которые CSS становится трудно вносить изменения. Сделав CSS действительно отзывчивым с самого начала, CSS должно быть намного более управляемым.
«Размер окна на мобильных устройствах не меняется».
Однако не только пользователи настольных компьютеров меняют размер окна. Пару лет назад мы выпустили Samsung DeX, чтобы телефоны можно было использовать в качестве настольных компьютеров. Когда телефон подключен к монитору компьютера, он ведет себя как настольный компьютер, и наш веб-браузер Samsung Internet без проблем продолжит работу с того места, где пользователь остановился на телефоне.
Эта возможность была возможна только благодаря адаптивному дизайну. К сожалению, некоторые сайты, на которых были страницы только для мобильных устройств с отдельным URL-адресом, плохо воспринимались пользователями, когда их размер был изменен на полнофункциональный веб-сайт для настольных компьютеров.
Мы все еще сталкиваемся с этими проблемами сегодня, недавно с выпуском серии складных телефонов Galaxy Fold.
В этих телефонах два экрана, один тонкий снаружи, и экран почти квадратной формы.
При тестировании этого устройства мы обнаружили, что многие веб-сайты не могут справиться с изменением формы с маленького экрана на большой или с разрывом на более тонком, чем обычно, внешнем экране или широком развернутом экране.
На устройствах с большим экраном, таких как Note 9 или S10 +, пользователь устройства может выбрать разделение экрана по вертикали или запустить браузер в плавающем окне.
«Настоящая работа выполняется на настольных компьютерах или в приложениях».
Одна проблема, которую я вижу, заключается в том, что часто веб-сайты, которые в остальном имеют адаптивный дизайн, очень хорошо скрывают важные функции, такие как возможность входа в систему на мобильном телефоне, с предположением, что реальная работа будет выполняться на настольном сайте. Это вынуждает пользователей, у которых нет рабочего стола, использовать режим рабочего стола браузеров, что, вероятно, будет неудобно по сравнению с тем, что оптимизировано для мобильных устройств.
«Я могу сделать вывод, использует ли пользователь сенсорный интерфейс или мышь, по размеру экрана».
Ты не можешь.
Некоторые экраны ноутбуков меньше экрана моего телефона. Некоторые пользователи телефонов используют мышь и клавиатуру. Пользователи портативных компьютеров могут переключаться с мыши и клавиатуры на использование их как портативных компьютеров, вращая экран. Пользователи настольных компьютеров могут иметь внешний сенсорный экран ввода, на котором они просматривают страницы.
Чтобы справиться с этим, относитесь ко всем пользователям так, как будто они используют сенсорные устройства; сделайте осязаемые области большими и четкими с большим количеством места.
Вздох ... Значит, вы прочитали всю эту статью и все еще хотите сконцентрироваться на складном телефоне Samsung Galaxy Fold?
Используйте эту информацию только для тестирования своего сайта, не добавляйте эти параметры в файл CSS в качестве точек останова! Убедитесь, что он подходит для этих размеров, но не воспринимайте их как крайний случай.
Вот размеры браузера в пикселях CSS в каждом отдельном режиме:
- В закрытом виде: 320x747px
- Открыть: 586 × 820 пикселей
Но имейте в виду, что будущие устройства могут изменить размер экрана или пользователь телефона может переместить браузер в окно, занимающее только часть экрана.
На что обратить внимание при создании адаптивного веб-сайта
(Под адаптивным веб-сайтом я просто подразумеваю веб-сайт, все веб-сайты должны это делать.)
Адаптивный дизайн должен позволять изменять размер окна браузера до любого размера или соотношения сторон и при этом сохранять удобство просмотра.
Не используйте оборудование для определения макета. Вы не можете этого контролировать. Вместо этого основывайте макет своих страниц на своем контенте, чтобы он имел смысл независимо от того, на каком устройстве он находится.
Точки, в которых мы меняем макет на разные размеры, известны как «точки останова». Распространенной ошибкой является использование точки останова для каждого устройства, которое вы хотите поддерживать. Это ошибка, потому что каждая добавляемая вами контрольная точка делает ваш дизайн менее гибким и с большей вероятностью сломается на устройствах, которых вы не ожидали.
В идеале мы бы не использовали какие-либо точки останова и имели бы единый макет, который может хорошо обрабатывать все размеры экрана, но часто это непрактично. Мы используем медиа-запросы CSS, чтобы определить, как страница ведет себя при разных размерах. Наличие одной или двух точек останова позволит радикально изменить макет на разных размерах экрана, не привнося излишней негибкости.
Изящный способ сделать определенные свойства зависимыми от размера экрана без введения дополнительных точек останова - это использовать единицы окна просмотра vh и vw, которые имеют ¹ / высоты и ширины соответственно. В сочетании с calc() в CSS они могут быть очень мощными.
Недавние API-интерфейсы CSS означают, что создание адаптивного дизайна больше не является сложной задачей. API-интерфейс CSS-сетки позволяет создавать несколько разметок, которые имеют смысл, и содержимое затем будет соответствовать этой сетке. Чтобы узнать больше о CSS-сетке, посмотрите эти демонстрации от @thisisjofrank, в которых объясняется, как с помощью CSS Grid можно создавать общие макеты:
CSS Grid имеет почти универсальную поддержку в браузерах, поскольку пользователи, все еще застрявшие в старой версии IE, используют простой макет flexbox. Веб-сайты не выглядят одинаково для всех пользователей, и это одна из сильных сторон Интернета. Узнайте больше о CSS Grid и Flexbox на MDN.
Вы можете использовать правило @supports CSS, чтобы предоставить правильные стили для каждого браузера.
Примечание относительно масштабирования щипком: некоторые разработчики приложений предпочитают отключать масштабирование щипком на своем сайте, чтобы ускорить сенсорные клики или контролировать взаимодействие с пользователем. В современных браузерах вы можете использовать как быстрые сенсорные щелчки, так и масштабирование пальцем. Отключение просто означает, что пользователям с требованиями доступности будет сложнее использовать ваш веб-сайт.
<!-- Meta tag which enables responsive design has fast clicks and allows pinch to zoom. --> <meta name="viewport" content="width=device-width, initial-scale=1">
Большое спасибо Эми Диккенс и Дэниелу Аппельквисту за отзывы к этой статье.
(Бонус) Некоторые из моих любимых приемов CSS Grid
Макет становится намного проще, когда он создается с помощью CSS Grid. По сути, это очень мощный фреймворк, встроенный в браузер.
Для использования CSS Grid не требуется фреймворк.
CSS Grid - это фреймворк.
- Рэйчел Эндрю (@rachelandrew)
Пользовательские свойства CSS делают адаптивный дизайн очень простым. Используя только настраиваемые свойства в медиа-запросах, вы можете очень четко указать, что меняется при изменении размера экрана.
:root {
--padding: 15px;
--grid-columns: 5;
}
.my-grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
grid-gap: var(--padding);
}
@media only screen and (max-width: 1000px) {
:root {
--padding: 10px;
--grid-columns: 3;
}
}
@media only screen and (max-width: 600px) {
:root {
--padding: 20px;
--grid-columns: 1;
}
}
Еще одно удобное использование настраиваемых свойств - хранить сложные свойства в одном месте, которое легко редактировать.
// Each emoji represents a grid area, e.g. 🍱 is the header
:root {
--layout-big: "🍱 🍱" min-content
"🌯 🐠" min-content
"🍭 🐠" 1fr
"🏖️ 🏖️" min-content
/300px 1fr;
--layout-small: "🍱 🍱" min-content
"🌯 🍭" min-content
"🐠 🐠" minmax(min-content, 1fr)
"🏖️ 🏖️" min-content
/1fr 1fr;
--active-layout: var(--layout-small);
}
header {
grid-area: 🍱;
}
.my-grid {
display: grid;
grid-template: var(--active-layout);
grid-gap: 1em;
}
@media only screen and (min-width: 600px) {
.my-grid {
--active-layout: var(--layout-big);
}
}
Это позволяет хранить сложные операторы, такие как эти grid-template свойства, в верхней части документа или даже импортировать их из отдельного файла CSS, их можно изменить, обновив пользовательское свойство --active-layout.
Я надеюсь, вы обнаружите, что CSS Grid упрощает создание четких, надежных, отзывчивых макетов, которые не будут ломаться на будущих устройствах.
