Верстка \ Адаптивная верстка

Адаптивное многоуровневое меню

От автора: адаптивное многоуровневое меню, показывающее свои подменю в их собственном контексте, позволяет экономить пространство при отображении и использовании.

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

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивные изображения

От автора: последнее время у меня была возможность работать с компанией, переходящей к адаптивному дизайну, на сайте у которой – более 800 000 изображений. Они приходят со всего света. Я многое узнал о том, что значит в большом масштабе биться над изображениями в адаптивном дизайне.

Одним из уроков оказалось то, что мы провели множество времени в дискуссиях о том, какими должны быть интерфейсные решения для адаптивных изображений—новый элемент picture или srcset, или волшебный новый формат изображения—и мало времени в спорах о том, какие изменения могут потребоваться серверным системам и человеческому труду.

Продолжить чтение

Верстка \ Адаптивная верстка

Создание более адаптивного вебсайта

От автора: ранее в этом году я находился на начальных этапах перепроектирования вебсайта нашей компании. Мы уже планировали применить прямой адаптивный подход веб-дизайна, что является предпочтительным решением для поддержки множества устройств. Узнав из откровенных дискуссий на конференции An Event Apart в Бостоне об ограничениях и трудностях адаптивного веб-дизайна, я понял, что наше решение требует небольшой регулировки.

Продолжить чтение

Верстка \ Адаптивная верстка

Сочетаем адаптивный дизайн и мобильные шаблоны

От автора: вашему сайту требуется мобильный вид. Вам придется выбирать: адаптивный дизайн или специальный мобильный сайт, верно? Может, и нет. Может быть, удастся сочетать и дополнить одну версию другой?

Каждый день я и наша команда трудимся над CodePen. Но нас трое. Наша мобильная стратегия состоит в том, чтобы уменьшить все как можно лучше, так как у нас 1) есть время и 2) отличное представление о том, как справиться с этой задачей.

Продолжить чтение

Верстка \ Адаптивная верстка

CSS: Адаптивное навигационное меню

В этом уроке мы научимся создавать адаптивное меню с помощью CSS.

От автора: я уже писал учебник о том, как сделать мобильную навигацию для адаптивного дизайна, теперь я открыл новую методику создания адаптивного меню без применения Javascript’а. В нем используется чистая семантическая разметка HTML5. Меню можно выравнивать по левой стороне, по центру или справа. В отличие от предыдущего учебника, где его нужно переключать, это меню переключается при проведении мышью, что более удобно для пользователя. В нем также имеется индикатор, показывающий активный/текущий элемент меню. Оно работает во всех мобильных и настольных браузерах, включая Internet Explorer!

Продолжить чтение

Верстка \ Адаптивная верстка

Большие меню, маленькие экраны: адаптивная многоуровневая навигация

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

Продолжить чтение