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

5 мощных техник адаптивного веб-дизайна

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

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

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

Текущее состояние адаптивного вебдизайна

От автора: Адаптивный вебдизайн используется уже насколько лет, а в 2012г. он был горячо обсуждаемой темой. У многих хорошо известных дизайнеров, таких как Брэд Фрост (Brad Frost) и Люк Вроблевски (Luke Wroblewski), имеется большой опыт работы с ним и они помогли нам сильно продвинуться в этой области. Но сделать нужно еще очень многое.

В этой статье мы рассмотрим, что возможно сделать сейчас, что станет возможным в будущем при помощи еще не стандартизированных свойств (таких как CSS Уровня 4 и HTML5 APIS), и что еще нуждается в улучшении. Это – неутомительная статья, и мы не станем глубоко вдаваться в каждую технику, но у вас будет достаточно ссылок и источников знаний для дальнейшего самостоятельного исследования вопроса.

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

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

Техника Clown Car: изображения в адаптивном вебдизайне

От автора: Сейчас изображения – «горячая» тема споров в адаптивном вебдизайне. Почему? Потому, что еще никому не понравились существующие решения. Для облегчения нашей сильной головной боли – обеспечить пользователя одним изображением, оптимизированным к размеру и разрешению его дисплея, без потери времени, памяти или пропускной способности и на стороне клиента – обсуждаются новые элементы и атрибуты.

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

Верстка \ 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.

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