Думаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчевого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Читать полностью »
Рубрика «responsive web design» - 2
Коллекция паттернов поведения для элементов отзывчивого веб-дизайна
2012-09-12 в 10:41, admin, рубрики: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Веб-разработка, Дизайн в IT, Мобильный веб, Отзывчивый веб-дизайн, метки: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Отзывчивый веб-дизайнАдаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?
2012-07-21 в 19:16, admin, рубрики: Adaptive Web Design, css, css3, html, Progressive enhancement, responsive web design, адаптивный веб-дизайн, веб-дизайн, Веб-разработка, Отзывчивый веб-дизайн, Прогрессивное улучшение, метки: Adaptive Web Design, css, css3, html, Progressive enhancement, responsive web design, адаптивный веб-дизайн, Отзывчивый веб-дизайн, Прогрессивное улучшение 
С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вилжами Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:
Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
Читать полностью »
Книга Итана Маркотта «Отзывчивый веб-дизайн»
2012-07-19 в 17:16, admin, рубрики: css, css3, html, responsive web design, веб-дизайн, Веб-разработка, книги, Отзывчивый веб-дизайн, метки: css, css3, html, responsive web design, книги, Отзывчивый веб-дизайн 
Возможно, многие из вас уже читали книгу Итана Маркотта «Responsive Web Design» в оригинале. Для тех, кто еще этого не сделал, у меня есть хорошая новость – весной этого года издательство «Манн, Иванов и Фербер» выпустило данную книгу на русском языке под названием «Отзывчивый веб-дизайн».
Почему стоит прочитать эту книгу?
Во-первых, эта тоненькая книга (всего 176 страниц) содержит описание технологии, которая уже стала революционной. Если оценивать влияние, которое оказала данная книга на Сеть и процесс веб-разработки, то ее можно поставить в один ряд с такими инновационными книгами прошлых лет, как: «WEB-дизайн по стандартам» Джеффри Зельдмана и «AJAX в действии».
Во-вторых, данная книга была написана Итаном Маркоттом (Ethan Marcotte) — человеком, который придумал само понятие отзывчивый веб-дизайн.
В-третьих, в ноябре 2011 года «Отзывчивый веб-дизайн» был признан журналом .net magazine одной из 25 лучших книг для веб-дизайнеров и разработчиков.
Читать полностью »
Разработка сайтов с адаптивным дизайном
2012-06-12 в 14:36, admin, рубрики: responsive web design, веб-дизайн, переводы, Песочница, метки: responsive web designПеревод статьи “Responsive workflow” финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen).
На прошлой неделе я был на конференции Webshaped, где Стивен Хэй (Stephen Hay) рассказывал о процессе разработки адаптивного дизайна. Этот пост не совсем о том же самом, но подход Стивена напомнил мне мой собственный, поэтому я решил изложить некоторые мысли по этому поводу, описать как моя работа эволюционировала за прошедшие два или три года и как может измениться в будущем.
Отзывчивая типографика: Основы
2012-06-08 в 21:07, admin, рубрики: responsive web design, веб-дизайн, Веб-разработка, типографика 
Когда мы создаем веб-сайты обычно мы начинаем с определения текста документа. Определение основного текста задает ширину главной колонки на странице, все остальное должно произойти само по себе. Должно. До недавнего времени разрешение экрана было более менее одинаковым. Сегодня мы имеем дело с огромным количеством экранов разного разрешения и размеров. Это делает вещи намного сложнее.Читать полностью »
Какое средство для обеспечения отзывчивых картинок следует вам использовать?
2012-06-08 в 10:09, admin, рубрики: faq, responsive web design, веб-дизайн, Веб-разработка, отзывчивые картинкиВ последнее время появилась целая куча способов создания отзывчивых картинок (responsive images) — иными словами, появились технические средства, обеспечивающие подстановку правильной иллюстрации в зависимости от ряда условий (например, от размеров экрана и скорости доступа к Интернету у читателя). Все эти средства делают своё дело несколько по-разному; чтобы сопоставить их, мы с Кристофером Шмиттом составили электронную таблицу их возможностей и требований.
В таблице указаны сведения, однако для усвоения их давайте обдумаем их через посредство практических вопросов.
При выборе того метода, который подходит для вас и для вашего проекта, эти вопросы смогут послужить подсказкою. К вашему проекту могут относиться многие из этих вопросов, так что вам придётся оценить, какие технические приёмы бывают лучше в каких обстоятельствах, а затем обобщить это понимание.
HTML5 Адаптивные изображения
2012-06-06 в 22:02, admin, рубрики: html, html5, responsive web design, rwd, w3c, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн, Веб-разработка, метки: html5, responsive web design, rwd, w3c, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн 
Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением.Читать полностью »
Адаптивный веб-дизайн на практике
2012-04-25 в 9:20, admin, рубрики: futubra, mobile first, responsive web design, Блог компании Futubra, метки: futubra, mobile first, responsive web designМы уже писали о методах (Mobile First и Response Web Design), которые используем при разработке нашего сервиса. В этой статье я хочу поделиться с вами нашим опытом. То, что в теории кажется простым, на практике порой оборачивается кошмаром. Речь пойдет о том, как нам удается создавать универсальный веб-сервис, способный работать на большом количестве устройств.Читать полностью »
62 полезных инструмента для адаптивного дизайна (Responsive web design)
2012-04-16 в 7:42, admin, рубрики: css, css3, html, html5, media queries, responsive design, responsive web design, адаптивная вёрстка, адаптивная разметка, адаптивный дизайн, веб-дизайн, Веб-разработкаПеревод крайне ценной статьи «Responsive Web Design Techniques, Tools and Design Strategies» популярного интернет-издания для разработчиков Smashing Magazine.
Еще в январе мы опубликовали статью об адаптивном дизайне «Responsive Web Design: What It Is and How To Use It» (Адаптивный веб-дизайн: Что это такое и как им пользоваться). Адаптивный веб-дизайн продолжает привлекать к себе много внимания, но, учитывая, насколько он отличается от традиционных методов разработки сайтов, он может показаться заоблачно сложным для тех дизайнеров и разработчиков, которые его не пробовали.
По этой причине мы составили обзор ресурсов, полезных при создании адаптивных сайтов. В обзор вошли подробные руководства, подходы, инструменты, статьи, содержащие практические советы, необходимые для создания вашего собственного адаптивного сайта.
Техники Responsive web design
1. CSS Transitions and Media Queries
CSS Transitions и Media Queries
Elliot Jay Stocks подробно рассказывает о методе сочетания CSS Media Queries и CSS transitions. Основная идея в следующем: разрабатывая адаптивный сайт с помощью Media Queries, вы постоянно изменяете ширину вашего браузера, чтобы посмотреть, как сайт ведет себя при этом. Но каждый раз, когда отрабатывает один из ваших Media Queries, виден жесткий переход между стилями (первый, например, для десктопов, второй — для планшетов). Почему бы не использовать CSS transitions для сглаживания этих жестких переходов с помощью анимации?
.jpg "62 полезных инструмента для адаптивного дизайна (Responsive web design)")
Несколько примеров применения Responsive Web Design, или Ваш сайт может и должен быть резиновым
2012-03-29 в 12:33, admin, рубрики: css, css3, html5, responsive web design, адаптивный дизайн, веб-дизайн, Веб-разработка, метки: css3, html5, responsive web design, адаптивный дизайнДоброго времени суток!
Несколько дней назад, гуляя по интернету, я наткнулся на достаточно интересную подборку сайтов, которые следуют, если можно так сказать, практике под названием Responsive Web Design. В двух словах, эта практика подуразумевает создание «резинового» сайта, который будет тянуться в зависимости от размера окна вашего браузера, или же экрана вашего мобильного телефона. Итак, встречайте наших сегодняшних героев!
Читать полностью »