Содержание
- 01. Как начать отзывчиво думать
- 02. 9 советов по адаптивной типографике
- 03. Правила адаптивной веб-типографики
- 04. Создайте адаптивный сайт с масштабированием по электронной почте.
- 05. Руководства по приоритетам: альтернатива каркасам, ориентированная на контент.
- 06. Руководство по адаптивному веб-дизайну для профессионалов.
- 07. Как разрабатывать адаптивные формы, не зависящие от устройства.
- 08. Создайте адаптивный макет с помощью CSS Grid.
- 09. Руководство веб-дизайнера по Flexbox.
- 10. Справочник по Codrops Flexbox
- 11. Стеки: Flexbox для Sketch
- 12. Ускоренный курс по техническому заднему колесу.
- 13. Создавайте гибкие макеты с помощью Susy и Breakpoint.
- 14. Как создавать адаптивные направляющие в Adobe XD
- 15. CSS в BBC Sport
- 16. Пять способов прикрепления нижнего колонтитула
- 17. Адаптация к вводу
- 18. Наши лучшие практики убивают производительность мобильного Интернета.
- 19. Как создавать адаптивные веб-приложения с контейнерными запросами
Адаптивный веб-дизайн больше не является обязательным; в наши дни сайты просто должны быть отзывчивыми. К счастью, внедрить RWD проще, чем когда-либо, поскольку существует множество отличных инструментов, которые помогут вам создавать и тестировать свои проекты, а также гарантируют, что вы создадите лучший пользовательский интерфейс.
Вот наш обзор некоторых из лучших ресурсов, которые помогут вам улучшить работу своих веб-сайтов и их внешний вид на любом устройстве. Хотите еще несколько полезных ресурсов? Наши гиды по лучшим конструкторам веб-сайтов и веб-хостингу всегда готовы помочь. А если вы беспокоитесь о безопасном хранении файлов, вам понадобятся эти великолепные варианты облачного хранилища.
01. Как начать отзывчиво думать
В этом посте на FreeCodeCamp Кевин Пауэлл подчеркивает, что адаптивный веб-дизайн больше не является тенденцией; именно так и предполагается создавать сайты, а это значит, что с самого начала нужно мыслить гибко. Здесь он демонстрирует, как достичь гибкого настроя при создании полностью адаптивного 3-страничного веб-сайта.
02. 9 советов по адаптивной типографике
Адаптивный веб-дизайн, естественно, требует адаптивной типографики. Но что это вообще значит и как это реализовать? Мы попросили семь ведущих веб-дизайнеров дать советы по созданию элегантного, разборчивого текста во всех окнах просмотра.
03. Правила адаптивной веб-типографики
Адаптивная веб-типографика - это непросто - вам нужны как дизайнерские решения, так и технические ноу-хау. Но как бы сложно это ни было, ошибиться невозможно, потому что типографика - краеугольный камень веб-дизайна. Следуйте этим принципам дизайна и практическим решениям, чтобы добиться правильного результата.
04. Создайте адаптивный сайт с масштабированием по электронной почте.
Используя em-единицы для изменения размера шрифта, вы можете создавать компоненты на странице, которые автоматически реагируют на изменение размера шрифта. Затем с помощью хитроумного трюка для гибкого размера шрифта вы можете создать всю страницу, которая динамически настраивается в зависимости от ширины области просмотра браузера. Следуйте этому руководству, чтобы узнать, как использовать «относительное» поведение ems для создания масштабируемых и гибких дизайнов.
05. Руководства по приоритетам: альтернатива каркасам, ориентированная на контент.
Каркасные модели могут быть наиболее широко используемым инструментом для разработки веб-сайтов, приложений и других цифровых интерфейсов, но они не лишены недостатков, особенно когда речь идет об адаптивном дизайне. Здесь Хелен ван Нуэс и Леннарт Оверкамп представляют свою предпочтительную альтернативу каркасам: руководства по приоритетам, которые содержат контент и элементы для мобильного экрана, отсортированные по иерархии сверху вниз и без спецификаций макета.
06. Руководство по адаптивному веб-дизайну для профессионалов.
Написанное Джастином Эйвери, куратором еженедельного информационного бюллетеня по адаптивному дизайну, это руководство от сетевого журнала знакомит веб-профессионалов с основ до более совершенных методов адаптивного веб-дизайна.
07. Как разрабатывать адаптивные формы, не зависящие от устройства.
Формы - один из самых важных элементов в дизайне любого цифрового продукта, и независимо от того, нужен ли вам процесс регистрации или шаговый режим с несколькими представлениями, вам необходимо разработать его так, чтобы он эффективно работал на мобильных устройствах так же, как и на настольных компьютерах. Вот как это сделать, а также полезные советы по использованию Flexbox.
08. Создайте адаптивный макет с помощью CSS Grid.
Поддержка CSS Grid Layout в браузерах растет с каждым днем, и хотя она не является заменой Flexbox или даже плавающим элементам, при использовании в сочетании с ними это отличный способ создавать новые захватывающие адаптивные макеты. Следуйте этому пошаговому руководству по созданию адаптивного сайта-портфолио с использованием Grid.
09. Руководство веб-дизайнера по Flexbox.
Вы уже начали использовать Flexbox? В этом руководстве Вес Бос дает исчерпывающее руководство по основным концепциям, которое даст вам четкое представление обо всем, что вам нужно, чтобы разобраться с этим мощным инструментом.
10. Справочник по Codrops Flexbox
Это полное руководство по Flexbox написано Сарой Суэйдан, автором, известной своей способностью объяснять концепции таким образом, чтобы легко следовать, не скупясь на детали. Руководство Codrops регулярно обновляется, так что это отличный ресурс, к которому можно вернуться, когда он понадобится.
11. Стеки: Flexbox для Sketch
Стеки, входящие в состав плагина Auto Layout, позволяют использовать технологию Flexbox в Sketch без использования CSS. В этой статье объясняется, как можно использовать эту мощную технику для легкого адаптивного дизайна.
12. Ускоренный курс по техническому заднему колесу.
В своем блоге Treehouse Джерри Цао собрал много полезной информации в относительно короткую, удобочитаемую статью.
13. Создавайте гибкие макеты с помощью Susy и Breakpoint.
Если вы не хотите использовать фреймворк для создания своего адаптивного сайта, эти расширения Sass являются хорошей альтернативой, каждое из которых имеет свои сильные стороны. Они позаботятся об адаптивной математике, чтобы вы могли сосредоточиться на дизайне.
14. Как создавать адаптивные направляющие в Adobe XD
Если вы хотите попробовать Adobe Experience Design (XD), вот хорошее руководство для начала. Он включает в себя видео-демонстрацию, которая проведет вас через каждый щелчок по процессу.
15. CSS в BBC Sport
Само по себе это не учебное пособие, но здесь можно многому научиться. В этом посте, первом из серии, состоящей из двух частей, фронтенд-разработчик Шон Бент подробно рассказывает о том, как делается CSS в BBC Sport. Им удалось сохранить CSS-основу этого огромного сайта менее 9 КБ, и интересно видеть, как это было сделано.
16. Пять способов прикрепления нижнего колонтитула
Липкий нижний колонтитул ... это должно быть достаточно просто, не так ли? К сожалению нет. Поместить нижний колонтитул в нужное место на каждом устройстве может оказаться сложнее, чем вы ожидаете. К счастью, Крис Койер собрал пять уловок, которые помогут вам добиться этого, используя calc (), Flexbox, отрицательные поля и сетка.
17. Адаптация к вводу
Адаптивный дизайн - это не только то, чтобы ваша страница правильно отображалась на любом устройстве, вы также должны сделать так, чтобы она хорошо работала - а это означает, что он должен хорошо воспринимать ввод в мире, где у настольных компьютеров есть сенсорные экраны, а у телефонов есть клавиатуры. В этой статье Джейсона Григсби из Cloud Four есть несколько полезных советов.
18. Наши лучшие практики убивают производительность мобильного Интернета.
Некоторые передовые практики, которые были применены без рассмотрения, были разработаны в эпоху настольных компьютеров, и могут отрицательно повлиять на производительность мобильного Интернета. Эта статья заставит вас глубже задуматься о том, как заставить ваш сайт работать на мобильных устройствах.
19. Как создавать адаптивные веб-приложения с контейнерными запросами
Узнайте, как преобразовать красивое и сложное веб-приложение - с компонентами, состояниями и взаимодействиями - в разных измерениях и разрешениях с помощью контейнерных запросов.
