Демистификация Cannabusiness — как сделать бренд для начинающего рынка марихуаны — Новости

Прочие тематики

Найдите подходящие дизайны и прикоснитесь к нужной аудитории, прочитав книги большой студии по брендингу для индустрии каннабиса. Одной из первых вещей, на которую обращает внимание посторонний человек, когда проезжает по определенным районам Соединенных Штатов, является реклама на дому каннабиса и продуктов с добавлением каннабиса. Если хотите, назовите это культурным шоком, но наши глаза на Digital…

Как сделать предварительный заказ Galaxy S10 (и лучшие предложения на данный момент)

Прочие тематики

Последние смартфоны Samsung только что появились из тостера, и теперь они готовы к предварительному заказу. На выбор предлагается три новых телефона Galaxy — S10, S10 Plus и S10e. Какой из них подходит вам? Мы выложили все, что вам нужно знать, вместе со всеми известными страницами о сделках и предварительных заказах Galaxy S10, которые мы нашли…

6 шагов, чтобы сделать ваш веб-дизайн доступным

Статьи по дизайну

Мы живем в мире, где все больше и больше мы зависим от Интернета. Подумайте об этом: где вы нашли свою последнюю работу? Как вы подали заявку на эту работу? Как вы занимаетесь банковским делом? Где вы делаете покупки? Как вы поддерживаете связь со своими друзьями и близкими?

Иллюстрация женщины-врача, сидящей за столом с тремя экранами над головой, на каждом из которых отображается свое приложение "width =" 1841 "height =" 1304 "/> <figcaption> Мы используем Интернет почти для всего и это не изменится. Дизайн приложения Spoon Lancer. </figcaption></figure> <p> Интернет может быть постоянным ресурсом для большинства людей, но для тех, кто живет с ограниченными возможностями, подключение не всегда Это программы и устройства, которые позволяют людям с ограниченными возможностями получить доступ ко всему вашему веб-сайту, например программы чтения с экрана, но это только часть решения. </p> <p> Другая часть уравнения заключается в разработке веб-сайтов и приложений таким образом, чтобы сделать их доступными для людей с ограниченными возможностями либо с помощью вспомогательных устройств, либо просто с помощью продуманного дизайна. </p> <h2> Почему доступность в веб-дизайне важна <br /> — </h2> <figure data-id= круговая диаграмма с выделением 15 процентов от всей ширины "width =" 2000 "height =" 2000 "/> <figcaption> Это процент людей на Земле, которые живут с какой-либо инвалидностью. Via Wikimedia Commons . </figcaption></figure> <p> Согласно данным за 2012 год, почти каждый пятый американец живет с инвалидностью какого-либо типа. Во всем мире примерно один миллиард человек, или 15 процентов населения мира, живет с инвалидностью. </p> <p> Не все виды инвалидности не позволяют людям читать с экрана и пользоваться Интернетом. Например, эти цифры включают людей, которые полагаются на ходунки и инвалидные коляски. Но другие условия, такие как ухудшение зрения, трудности с захватом предметов, аутизм и глухота, и это лишь некоторые из них, могут серьезно ограничить способность человека пользоваться компьютером или смартфоном без приспособлений. </p> <h2> Доступность в веб-дизайне: в некоторых местах это предложение, в других — закон <br /> — </h2> <p> Если вы находитесь в Соединенных Штатах, вы, вероятно, знакомы со стандартами веб-соответствия, которые являются частью Закона об американцах-инвалидах (ADA). Во многих других странах по всему миру действуют аналогичные руководящие принципы, такие как Закон о дискриминации в отношении инвалидов в Австралии, Закон о доступности Бразилии и План действий Европейского союза в отношении Европы. </p> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'> <!-- Yandex.RTB R-A-268541-2 --> <div id=

Многие из руководящих принципов, включенных в эти законы и инициативы, взяты из глобальных Руководящих принципов доступности веб-контента (WCAG), набора руководящих принципов, созданных и поддерживаемых Консорциумом всемирной паутины (W3C) посредством его Инициативы обеспечения доступности веб-сайтов (WAI). Достаточно сокращений для тебя?

Тим Бернерс-Ли взволнованно смотрит на экран компьютера "width =" 1023 "height =" 1291 "/> <figcaption> Человек, стоящий за глобальной инициативой сделать сеть доступной для всех. Via Wikimedia Commons. </figcaption></figure> <p> W3C был основан в 1994 году Тимом Бернерсом-Ли, да, <em>который </em> Тимом Бернерсом-Ли, с целью создания руководящих принципов и протоколов, способствующих долгосрочной, устойчивой рост Всемирной паутины. Сегодня в нее входят более 400 организаций, многие из которых участвуют в WAI. Самая последняя версия руководств, которую она опубликовала, — WCAG 2.1, вышедшая в 2018 году. </p> <p> WCAG 2.1 включает в себя все последние руководящие принципы и передовые практики, которым должны следовать веб-дизайнеры, чтобы их сайты были доступны для всех пользователей. Это длинный, плотный документ, состоящий из множества технических терминов. Вместо того, чтобы погрузиться в течение следующих двух месяцев, чтобы прочитать все это, создайте свой веб-сайт с учетом следующих принципов доступности. Затем попросите разработчика проверить ваш код, чтобы привести ваш дизайн, ориентированный на доступность, к полному соответствию. </p> <h2> Дайте вашим изображениям альтернативные теги <br /> — </h2> <p> Alt-теги — это краткие описания изображений, которые вы используете, которые скрыты в html сайта. Большинство пользователей никогда не видят эти описания, но посетители сайта, использующие программы чтения с экрана, полагаются на них, чтобы узнать, что находится на изображениях на вашем сайте. Хороший тег alt — это короткое, креативное описание, которое точно описывает изображение, к которому он прикреплен. </p> <figure data-id= реалистичная иллюстрация рыбных и хлебных хлебов в корзине "width =" 1535 "height =" 1316 "/> <figcaption> Мы будем использовать это изображение, чтобы проиллюстрировать, что является хорошим, а что нет. tag. Иллюстрация BATHI. </figcaption></figure> <p> Посмотрите на изображение слева. Вот пример хорошего альтернативного тега для этого изображения: r <em> эалистическая иллюстрация рыбы и хлебных буханок в корзина. </em> </p> <p> А вот альтернативный тег, который не так хорош: <em> хлеб и рыба </em> </p> <p> Видите разницу? </p> <p> Alt-теги предназначены не только для пользователей с нарушениями зрения; они тоже для вашей выгоды. Хорошо продуманные alt-теги улучшают SEO вашего сайта, что означает увеличение релевантного трафика сайта и, в конечном итоге, больше конверсий. </p> <h2> Сохраняйте предсказуемость навигации <br /> — </h2> <figure data-id= Коллекция иконок для мобильного приложения "width =" 2026 "height =" 1169 "/> <figcaption> Значки, которые вы используете, и способ их использования имеют значение. Дизайн иконок @alexanderk. </figcaption></figure> <p> Навигационная система, которую использует ваш веб-сайт, должна быть согласованной по всем его страницам, включая используемые вами значки и то, как посетители попадают на разные страницы сайта. Например, если ваша домашняя страница имеет верхнюю панель заголовка с выпадающие меню, каждая из ваших других страниц должна иметь такую ​​же компоновку. </p> <p> Точно так же значки, которые вы используете на своем сайте, должны быть согласованными. У вас нет телефонной трубки для значка «свяжитесь с нами» на домашней странице, а также значок смартфона на странице «О нас». Это сбивает с толку и может затруднить доступ к вашему сайту для программ доступности. Вам также следует избегать любых видов автоматической навигации и автоматического воспроизведения музыки и видео. </p> <p> Почему? Поскольку они не только раздражают, но и пользователю с программой чтения с экрана трудно определить, как их приостановить. А когда слайд-шоу или карусель прокручивают контент с высокой скоростью, пользователи могут запутаться и расстроиться. </p> <h2> Избегайте содержимого, которое может вызвать физические реакции <br /> — </h2> <figure data-id= Мультяшный шмель в защитном снаряжении с надписью «Саймон говорит: безопасность всегда на первом месте» "width =" 2000 "height =" 2000 "/> <figcaption> Всегда делайте свой сайт безопасным для любого пользователя, который может Посетите его. Дизайн персонажей Хосе Рекены. </figcaption></figure> <p> Вспомните эпизод с покемонами, который привел к тому, что около 700 детей были доставлены в больницу, потому что это вызвало приступы у них? Приходите с фоточувствительными предупреждениями об изъятиях. Некоторые люди подвержены судорогам при воздействии быстро мигающих огней и движущихся моделей. Избегайте подобных видов анимации на своем веб-сайте, чтобы обеспечить их безопасность для каждого пользователя. </p> <h2> Сделайте свой текст большим, жирным и организованным <br /> — </h2> <figure data-id= Текст с засечками и без засечек "width =" 768 "height =" 512 "/> <figcaption> Шрифты без засечек проще для чтения и, следовательно, доступны для выбора. Через Design Hack. </figcaption></figure> <p> Сделайте ваш веб-сайт доступным для людей с ограниченным зрением, сделав текст большим. В основном, сделайте его эквивалентом большой печатной книги. 16px — это, как правило, хороший размер для основного текста с большими заголовками. </p> <p> Сделать текст более читабельным, чем сделать его большим, — это больше. Используйте шрифт, который читается и легко читается пользователями с дислексией. Министерство здравоохранения и социальных служб США рекомендует использовать шрифты Times New Roman, Arial, Helvetica, Tahoma, Calibri и Verdana в качестве доступных шрифтов. Вы можете рисковать, выбрав один из них, или найти другой шрифт, который подойдет всем посетителям вашего сайта. Самые простые для чтения шрифты — это шрифты, которые: </p> <ul> <li> Не имеют засечек </li> <li> имеют фиксированную ширину между буквами </li> <li> Используйте жирные буквы </li> </ul> <figure data-id= кофейная чашка с пальмой, выходящей из нее с надписью «Belt Road. Выросли здесь Здесь нет информации »" width = "2000" height = "2000" /> <figcaption> Выбор высококонтрастной палитры может показаться простым выбором, но он имеет огромное значение для многих пользователей. Разработка логотипа Frisheid. </figcaption></figure> <p> Ваш текст также должен быть организован понятным, логичным способом. Разбейте текст на более мелкие разделы, разделенные на заголовки и подзаголовки. Это не только делает ваш текст более аккуратным, но и облегчает его для программ чтения с экрана, чтобы расшифровать для своих пользователей. </p> <p> Наконец, ваш текст должен иметь высокую контрастность на фоне. Текст, который слишком похож по цвету на фон, трудно читать многим пользователям компьютера, особенно тем, кто страдает дальтонизмом. Воспользуйтесь онлайн-инструментом, таким как Contrast Checker, чтобы увидеть, как ваши запланированные цвета шрифта и фона работают вместе. </p> <h2> Сделайте так, чтобы он работал только с клавиатурой (и без нее) <br /> — </h2> <figure data-id= человек, использующий систему прямого доступа движением головы, чтобы играть в игру на ноутбуке "width =" 2100 "height =" 1749 "/> <figcaption> А для тех, кто не может использовать клавиатуру, есть другие способы навигации в Интернете. С помощью Instructables. </figcaption></figure> <p> Некоторые пользователи не могут удерживать мышь или держать руку на сенсорной панели ноутбука. Эти пользователи полагаются на свои клавиатуры для навигации по веб-сайтам, поэтому вы можете использовать их в своих целях. для них, создав его таким образом, чтобы сделать его полностью функциональным с помощью только клавиатуры. </p> <p> Есть также пользователи, которые не могут использовать клавиатуру и полагаться на другие средства навигации по веб-сайтам, такие как программы распознавания речи и наведение головы. Ваш веб-сайт также должен быть совместим с такими программами, потому что без них люди без использования их рук не смогут использовать ваш сайт. </p> <h2> Проверьте свой код (или сделайте это сами) <br /> — </h2> <p> Не публикуйте свой веб-сайт в мире, пока весь код не будет проверен компетентным разработчиком, знакомым с последними рекомендациями по обеспечению доступности веб-сайтов. Кроме того, вы можете использовать инструмент аудита, такой как инструмент Google Chrome WAVE, который найдет места в вашем коде, где вам не хватает ключевых функций доступности. Никогда не повредит, чтобы разработчик-человек проверял ваш код после того, как вы запустили его с помощью такого инструмента, как WAVE, чтобы убедиться, что ничего не пропущено или не вырвано из контекста. </p> <h2> <span style= Предоставьте всем возможность использовать ваш сайт
—
Рисование линии большой группы людей разного цвета в силуэте "width =" 1920 "height =" 1161 "/> <figcaption> Когда ваш сайт доступен, каждый может использовать его одинаково. Через Arts People. </figcaption></figure> <p> Помните, почему вы делаете такой выбор дизайна: устраняйте любые барьеры, которые могут помешать людям использовать ваш сайт. Конечно, вы также хотите соблюдать закон и избегать создания ситуации, когда Вы несете ответственность за ущерб, нанесенный дискриминацией пользователя, но всегда помните причину, по которой следует соблюдать руководящие принципы: если ваш сайт разработан с учетом всех потребностей пользователей, никто не останется в стороне. </p> <div class=

Хотите узнать больше о веб-дизайне?
Ознакомьтесь с нашим полным руководством по созданию веб-сайта!