Верстка \ HTML&CSS

Техники адаптивной типографской разметки текста

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

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

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

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

Простая адаптация с помощью фоновых изображений CSS

От автора: Эта статья отображает лишь одно из многих решений проблемы адаптивных изображений. До выбора конкретного решения мы предлагаем вам рассмотреть разные подходы, включая эти два: Как избежать дублирования загрузки адаптивных изображений (How To Avoid Duplicate Downloads In Responsive Images ) и Выбор решения для адаптивных изображений (Choosing A Responsive Image Solution).

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

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

Выбор решения для адаптивных изображений

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

Выучить основы довольно просто, но как только вы их усовершенствуете, то обнаружите, что масштабирование изображений – это только начало, вам также придется решать вопросы производительности и загадки художественной постановки. Вы столкнетесь с огромным выбором решений проблемы адаптивных изображений, каждое со своими сильными и слабыми сторонами — и ни одного идеального! Эта статья введет вас в основы, а затем вооружит информацией, нужной для того, чтобы выбрать самое лучшее решение для адаптивных изображений в вашей ситуации.

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

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

Адаптивно модифицируем старые сайты

От автора: Можно применять адаптивные методики к старым сайтам в качестве первого этапа получения опыта работы с маленькими экранами. Сдерживайте свой идеализм.

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

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

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

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

От автора: В магазинах продаются пятидюймовые мобильные устройства с тем же разрешением экрана, что у 50-дюймовых телевизоров. У нас есть пользователи с неограниченной высокоскоростной широкополосной сетью, и есть пользователи, оплачивающие каждый переданный мегабайт. Адаптивный дизайн изображений означает оптимизацию процесса их доставки к пользователям. В настоящей статье мы поделимся своей методикой адаптивных изображений — “padding-bottom”, которую мы изучили и применили в мобильной версии шведского новостного вебсайта Aftonbladet.

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

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

Адаптация дизайна

От автора: Это – история того, чему мы научились во время переделки дизайна для нашего самого требовательного клиента — самих себя! В этой статье из собственного опыта обновления вебсайта нашего агентства я объясню, почему мы забросили отдельный мобильный сайт, и сделаю обзор процесса создания нового адаптивного дизайна.

У себя в Cyber-Duck на протяжении уже нескольких лет мы делали сразу и адаптивные вебсайты, и адаптивные мобильные сайты. Оба варианта, конечно, имеют свои «за» и «против». На отдельном мобильном вебсайте есть возможность приспосабливать к контексту своих пользователей содержимое и даже взаимодействие, тогда как адаптивный вебсайт означает лучшее контентное равенство для пользователей и поддержку единственного вебсайта.

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

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

Создание трехуровневого адаптивного выпадающего меню

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

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

Верстка \ HTML&CSS

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

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

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

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

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

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

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

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

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

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

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

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

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