Ресурсы сообщества, еженедельный информационный бюллетень и повышение квалификации в Интернете

Улучшение — это вопрос постоянной, постоянной итерации. Если вы давно знакомы, то знаете, что Smashing претерпел множество изменений в прошлом: новый дизайн, новый макет, новый технический стек и многое другое. Тем не менее, это всегда делалось с учетом качества контента.

Например, недавно мы изменили расположение панели навигации в верхней части страницы — вы заметили? Присмотритесь, и вы найдете несколько тщательно подобранных руководств по основным темам, освещаемым в журнале, выступлениях на конференциях и в других местах. Каждое руководство объединяет лучшее, что у нас есть по этой теме, чтобы помочь вам исследовать и учиться. И, говоря о руководствах, сегодня мы только что опубликовали всеобъемлющее руководство по SEO!

Наряду с нашими руководствами, печатными книгами, электронными книгами и печатными журналами мы очень рады, что у нас есть еще одно дополнение к нашим потрясно заветным жемчужинам: познакомьтесь с нашими новыми контрольными списками шаблонов проектирования интерфейсов . Соучредитель Smashing Magazine Виталий Фридман годами собирал, курировал и уточнял каждый контрольный список — мы убеждены, что эта колода карт всегда окажется полезной при разработке и создании любого компонента интерфейса. Действительно.

Если вы хотите (виртуально) встретиться с самим Виталием и глубже погрузиться в детали интеллектуальных шаблонов проектирования интерфейсов, вы можете посетить его предстоящий онлайн-семинар по интеллектуальным шаблонам проектирования интерфейсов (издание 2020 г.), где вы изучите сотни практических примеры более 5 × 2,5 часов живых сессий.

Обратите внимание, что карты в настоящее время доступны только в формате PDF — мы делаем все возможное, чтобы распечатать их, как только появится возможность отправить их по всему миру!

Предстоящие онлайн-мероприятия: увидимся?

С таким количеством эмоций, связанных с COVID-каботажным судном, мы очень огорчены продолжающейся ситуацией и не можем встретиться с вами лично, поэтому мы решили перенести все наши физические мероприятия на 2020 год в онлайн, чтобы оставаться на связи с нашими дорогими. и ценное сообщество.

Несмотря на обстоятельства, мы гордимся тем, что у нас на борту так много блестящих спикеров, и чтобы извлечь из этого максимум пользы, вам даже не нужно ехать, чтобы встретиться с ними. Итак, мы обещаем максимально передать то же чувство общности, но из вашего собственного дома (офиса).

• SmashingConf Live (20–21 августа)
  Мероприятие, полное интерактивных и живых сессий с участием вдохновляющих и знающих спикеров.
• SmashingConf Freiburg Online (7–8 сентября)
  Конференция нашего «родного города» перенесена в онлайн и открыта для всех желающих!
• SmashingConf Austin Online (13–14 октября)
  Мы объединили первоначальные события в Остине и Нью-Йорке, которые будут проходить в удобном для всех часовом поясе.
• SmashingConf San Francisco Online (10–11 ноября)
  Два полных дня фронтенда, UX и всего остального, что нас связывает и помогает нам становиться лучше в том, что мы делаем.

Для проведения конференций мы используем Hopin. Это оказался лучший вариант с точки зрения качества, надежности и доступности, с рецепцией и зоной для нетворкинга, спонсорскими стендами и секционными сессиями. Чтобы присоединиться, установка не требуется! Перед мероприятием мы вышлем вам волшебную ссылку, чтобы вы могли сразу перейти к конференции.

Обучение и нетворкинг, сокрушительный путь

Мы знаем, что все заняты — и, возможно, у них даже есть домашнее обучение и другие вещи, которые нужно решить вдобавок к этому — поэтому мы хотим поддержать вас, не тратя впустую ваше драгоценное время. Мы разбили наши семинары на 2,5-часовые сегменты по дням и неделям , чтобы вы могли учиться в своем собственном темпе и в удобное время ( материалы семинара и записи включены! ).

Пожалуйста, ознакомьтесь с нашими пакетными скидками, если вы хотите посетить более одного семинара — вы можете сэкономить до 100 долларов США и потратить немного больше на мороженое!

Кстати, на случай, если вы обнаружите, что дважды подумали о том, чтобы присоединиться к Smashing Workshops, потому что вы беспокоитесь, что вашему боссу может понадобиться немного убеждения, тогда мы прикроем вашу спину с помощью аккуратного шаблона: убедите своего Босс. Удачи!

Подкаст, выходящий раз в две недели: полный вдохновения и идей

Каждый второй вторник Дрю Маклеллан беседует с экспертами по дизайну и разработке об их работе в Интернете. Вы можете подписаться через свое любимое приложение, чтобы получать новые эпизоды, как только они будут готовы.

Пссс. Кстати, есть ли тема, о которой вы хотели бы услышать и узнать больше? Или, может быть, вы или кто-то из ваших знакомых хотели бы поговорить на тему, связанную с веб-сайтами и дизайном, которая дорога вашему сердцу? Мы хотели бы услышать от вас! Не стесняйтесь обращаться к нам в Твиттере, и мы сделаем все возможное, чтобы ответить вам как можно скорее.

В центре внимания доступность и прототипирование

Отметьте свои календари! Мы будем рады приветствовать Чен Хуэй Цзин и Адекунле Одуйе на виртуальной сцене Smashing TV. Если вы хотите принять участие, вам необходимо установить клиент Zoom для собраний, который доступен для всех основных операционных систем. (Скачивание и установка может занять некоторое время, поэтому, если можете, скачайте его заранее.)

• «Доступность без (вне) приоритетов» 1 сентября (14:00 по лондонскому времени)
  Хуэй Цзин коснется причин, почему это так, и обсудит стратегии, позволяющие убедить клиентов и начальство по-прежнему «инвестировать» в доступность.
• «Хорошее, плохое и безобразное прототипирование» 1 октября (19:00 по лондонскому времени)
  Адекунле поделится методами эффективного и результативного прототипирования, как создать структуру для прототипирования, подходящую для вашей организации, и как использовать прототип в производстве.

Актуальные темы в журнале Smashing Magazine

Мы стремимся публиковать новую статью каждый день, посвященную различным актуальным темам в веб-индустрии. Вы всегда можете подписаться на нашу RSS-ленту, чтобы быть в числе первых, кто прочитает новый контент, опубликованный в журнале.

Вот несколько статей, которые понравились нашим читателям больше всего и которые они рекомендовали в прошлом месяце:

• «Как создать Porsche 911 с помощью Sketch» ​​(полное руководство)
  автор Никола Лазаревич
• «Можете ли вы создать веб-сайт для пяти чувств?»
  автор Сюзанна Скакка
• «Как настроить цветовые схемы приложения с помощью пользовательских свойств CSS»,
  автор Артур Басак
• «Современные методы CSS для улучшения удобочитаемости»,
  автор Эдоардо Кавацца
• «Перевод каркасов дизайна в доступный HTML/CSS»,
  автор Харрис Шнайдерман

Smashing Newsletter: еженедельные лучшие подборки и новости

У нас новости! Мы будем рассылать еженедельный выпуск Smashing Newsletter, но стремимся к более коротким и конкретным темам. Они могут быть посвящены доступности, CSS или UX — вам просто нужно подождать и посмотреть! Мы хотим предоставить вам полезный контент и поделиться всеми интересными вещами, которые, как мы видим, люди делают в сообществах веб-индустрии. Никаких сторонних рассылок и скрытой рекламы, а ваша поддержка действительно помогает нам оплачивать счета. ️

Заинтересованы в спонсорстве? Не стесняйтесь ознакомиться с нашими вариантами партнерства и связаться с командой в любое время — они обязательно свяжутся с вами, как только смогут.

Положение вещей в 2020 году

Каждый день в сети происходит так много всего, что трудно уследить, но еще труднее остановиться на мгновение и подробно рассмотреть, где мы на самом деле находимся в данный момент. К счастью, существует множество обзоров и отчетов, собирающих некоторые конкретные события в одном месте. State of CSS и State of JS подчеркивают общие тенденции в CSS и JavaScript. Есть также исследования по системам проектирования в 2019 году, интерфейсным инструментам и безопасности с открытым исходным кодом.

Полезно знать, где вы находитесь не только с точки зрения навыков, но и с точки зрения заработной платы: в этом вам поможет Levels.FYI Salaries, а также зарплаты UX-дизайнеров и Design Census 2019. Кроме того, обязательно ознакомьтесь с состоянием удаленной работы. 2020, освещая тенденции повышения эффективности удаленной работы. Предостережение: некоторые из них могут быть предвзятыми из-за демографических данных, на которые они нацелены, поэтому, пожалуйста, отнеситесь к выводам с долей сомнения.

Погружение в словари HTML и CSS

Если вы часто ищете правильное слово для этой конкретной вещи в своем коде CSS и HTML, мы уверены, что вы сразу же сделаете закладки для следующих ресурсов. Благодаря Вилле В. Ваннинен теперь вы можете узнать разницу между типами документов, именами атрибутов, тегами, медиа-функциями — и все это в интерактивном режиме.

Вы найдете хороший интерактивный список терминов CSS, а также еще один полезный список, посвященный словарю HTML, где вы можете щелкнуть любой из терминов, показанных справа, чтобы выделить соответствующие части в примере кода, представленном на странице. Списки также доступны на разных языках.

Практические советы по ребрендингу продукта

Делаем ребрендинг? И когда самое подходящее время для этого? Многие люди, занимающиеся продуктом, задают себе эти вопросы по мере того, как их продукт становится все более зрелым. Команда Overflow была в такой же ситуации некоторое время назад.

Чтобы отразить эволюцию своего продукта от простого в использовании и практичного инструмента для построения блок-схем до инструмента, который используется для проектирования коммуникаций и рабочих процессов презентации, они решили, что пришло время для ребрендинга. В статье «Развитие бренда Overflow» они делятся своим подходом и тем, чему научились на этом пути. Интересные идеи и выводы, которые вы можете включить в свой собственный процесс редизайна. Тот, который особенно помогает сделать задачу более доступной: подумайте о своем продукте как о человеке и представьте, на что они похожи и как они себя чувствуют, чтобы визуализировать новую идентичность вашего бренда.

Отключенные кнопки и как сделать лучше

«Отключенные кнопки — отстой». Хампус Сетфорс делает сильное заявление против широко распространенного шаблона пользовательского интерфейса. Как утверждает Хампус, отключенные кнопки обычно вредят пользовательскому опыту, вызывая раздражение и замешательство, когда ничего не происходит, когда нажимается кнопка со словом действия, например «Отправить». Но они не только мешают людям выполнять задачи с минимальными усилиями, отключенные кнопки также создают барьеры для людей с ограниченными возможностями — из-за проблем с низкой контрастностью и вспомогательными технологиями, которые не могут перейти к отключенным кнопкам. Теперь, как мы можем сделать лучше?

Hampus предлагает оставить кнопки включенными по умолчанию и показывать сообщение об ошибке, когда пользователь нажимает на них. Если вы хотите указать, что кнопка отключена, вы можете использовать CSS, чтобы сделать ее немного серой (конечно, с учетом контраста), но оставить ее включенной и сосредоточить внимание на осмысленном сообщении об ошибке. Маленькая деталь, которая имеет значение.

Кнопка «Назад» UX

Мы часто тратим довольно много времени на то, чтобы получить нужную функцию или улучшить дизайн с помощью смелых интерактивных функций. Мы измеряем влияние наших решений в тестах A/B, изучаем конверсию и рейтинг кликов, анализируем трафик и ищем распространенные проблемы с воронкой. Но данные передают только часть истории . Чаще всего у клиентов возникают самые разные проблемы, часто не связанные с нашими функциями или дизайном.

Качество опыта проявляется в ситуациях , когда что-то происходит неожиданно . Что происходит, когда покупатель случайно перезагружает страницу посреди оформления заказа, например, при прокрутке вверх и вниз на мобильном телефоне? Очищается ли платежная форма, когда пользователь замечает опечатку имени на странице обзора? Что происходит, когда клиент нажимает кнопку «Назад» в ходе многоэтапного процесса в нашем одностраничном приложении?

Фактически, неожиданное поведение кнопки «Назад» часто имеет серьезные проблемы с удобством использования, и некоторые из них освещены в статье Baymard Institute «Шаблоны проектирования, которые нарушают ожидания кнопки «Назад». Стоит протестировать кнопку «Назад» для оверлеев, лайтбоксов, якорных ссылок и переходов по контенту, бесконечной прокрутки и поведения «загрузить еще», фильтрации и сортировки, аккордеонов, проверки и встроенного редактирования.

Мы можем использовать API истории HTML5 или, в частности, history.pushState() , чтобы вызвать изменение URL-адреса без перезагрузки страницы. В статье подробно рассказывается о распространенных проблемах и решениях, позволяющих все исправить. Стоит прочитать, добавить в закладки и возвращаться к ней время от времени.

Современные решения CSS для старых проблем

Когда дело доходит до макета и стиля, некоторые проблемы продолжают появляться в каждом другом проекте — стилизация флажков и переключателей, шкала плавного шрифта, настраиваемые стили списков или доступная раскрывающаяся навигация.

В своей серии «Современный CSS» Стефани Эклз погружается в современные CSS-решения для старых проблем с CSS, подробно изучая каждую из них и исследуя самые надежные методы, позволяющие хорошо работать в современных браузерах. Стефани также предоставляет демонстрации и готовые к использованию фрагменты кода. Отличный сериал, который стоит посмотреть и подписаться!

Веселье с формами

Веб-формы есть буквально везде — от форм подписки до фильтров и информационных панелей, но их непросто настроить правильно. Как мы поступаем со встроенной проверкой? Где и как мы отображаем сообщения об ошибках? Как мы проектируем и создаем элементы управления автозаполнением? Неудивительно, что недостатка в ресурсах по дизайну форм нет — и в последнее время появилось несколько новых.

Джери Рид собрала рекомендации по дизайну форм с рекомендациями, результатами исследований, ресурсами и примерами. В «Развлечении с формами» Майкл Шарнагл собирает несколько малоизвестных фактов и забавных вещей, связанных с формами. Адам Сильвер довольно много писал о лучших практиках веб-форм в своем блоге, а также о выпуске системы дизайна веб-форм. Наконец, Хейдон Пикеринг по-прежнему хранит в своем блоге несколько инклюзивных шаблонов компонентов для форм. Все замечательные ресурсы, которые нужно отслеживать при проектировании или создании форм, чтобы не допустить дорогостоящих ошибок в будущем.

Анимированное подчеркивание только для CSS

Подчеркивать сложно, особенно если вы хотите сделать что-то, выходящее за рамки старого доброго text-decoration: underline . Вдохновленный эффектом наведения, который он увидел в подчеркивании ссылки в блоге Кэсси Эванс, Ники Мелеманн решил создать что-то подобное: цветное подчеркивание с эффектом наведения, когда линия отступает и заменяется линией другого цвета.

Изюминка: строки не должны соприкасаться во время анимации, и, что наиболее важно, ссылки, которые переходят на новые строки, должны иметь подчеркивание под всеми строками. Если вы хотите шаг за шагом следовать тому, как это делается, обязательно ознакомьтесь с руководством Ники.

Руководство по настройке рабочего процесса разработки на Mac

Настройка среды разработки на новом компьютере может вызвать затруднения не только у новичков в программировании. Вместе с участниками веб-сообщества Сурабх Баджадж опубликовал подробное руководство, которое поможет вам с легкостью выполнить работу.

Это руководство предназначено для всех, кто хочет настроить среду или установить новые языки или библиотеки на Mac. От Homebrew до Node, Python, C++, Ruby и многого другого — он шаг за шагом проведет вас через все, что вам нужно знать, чтобы начать работу. Вклад в руководство приветствуется.

Полезные интерфейсные и UX-функции, доставляемые раз в неделю.

С инструментами, которые помогут вам сделать вашу работу лучше. Подпишитесь и получите контрольные списки Smart Interface Design Checklists от Виталия в формате PDF по электронной почте.

Ваш (разгромный) адрес электронной почты

На интерфейсе и UX. Нам доверяют 190 000 человек.