Верстка \ HTML&CSS

Применение min-width к тянущимся изображениям

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

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

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

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

Как бесплатно протестировать адаптивный дизайн

От автора: «Прекрати менять размер этого браузера, он уже скоро сотрется!» Как часто вы это слышите? Ну, ладно, может и не так уж часто, но если вы разрабатываете адаптивные веб-сайты, то знаете, о чем я говорю: при каждом редактировании DOM или CSS вы таскаете туда-сюда край браузера, тестируя изменения и отыскивая неточности.

В общем, по большей части такие усилия – это попытка имитировать размеры экрана разных устройств.

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

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

Меню как в Facebook’е (адаптивное)

От автора: несомненно, адаптивная технология становится все более популярной. Она позволяет нам сэкономить время при разработке дизайна, предназначенного для применения на множестве устройств: от мобильных до широкоэкранных компьютеров. Не нужно разрабатывать отдельные версии сайта для каждого формата (устройства). Сегодня мы создадим новое адаптивное меню, которое выглядит, как в facebook’е. Для его создания не понадобится javascript, все выполняется с помощью одного CSS3 (для IE7-IE10, Firefox, Opera, Safari, Chrome и iPad/iPod/iPhone).

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

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

Разбираем растяжение поля поиска

От автора: Учебник о том, как создать адаптивное растяжение поле поиска с хорошей поддержкой сенсорного ввода.

Возможно, вы заметили те маленькие усовершенствования, которые в последнее время появились здесь, на Codrops. Одной из тех вещей, которые мы решили изменить, стало поле ввода для поиска. Оно было перенесено из боковой колонки в верхний колонтитул и применен простой эффект, при котором нужно щелкнуть, чтобы поле ввода увеличилось. Мы получили множество просьб объяснить, как это сделано, и сегодня хотели бы показать вам, как «с нуля» создать подобный input для поиска. Нашей целью стало максимальное увеличение совместимости мобильных устройств и старых браузеров (вплоть до IE8). Хотя это может показаться очень легкой задачей, нам придется применить несколько хитростей, чтобы все заработало должным образом.

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

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

Адаптивное меню для экранов RETINA

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

Сегодня мы создадим яркое адаптивное и подходящее к экранам Retina меню, вдохновленное цветовой палитрой Maliwan, производителя игры «Borderlands». Меню автоматически изменяется под одну из трех разных разметок в зависимости от размера окна браузера: встроенную версию «десктопа», оптимизированную под «таблетку» версию с двумя колонками и мобильную версию с ссылкой на меню для отображения и сокрытия навигации для маленьких экранов. Чтобы сделать меню полностью под retina, мы применим шрифты-иконки с тем, чтобы иконки меню при изменении размера не поддавались пикселизации.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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