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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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