Рубрика «responsive design»

image

Magento U опубликовало 4 бесплатных курса:

Которые будут доступны до 31го марта 2017 года абсолютно бесплатно для всех желающих.
Курсы включают набор видео уроков, а также pdf материалы и презентации с задачами и тестами в конце каждого урока, которые помогут быстрей разобраться с архитектурой Magento 2.

Содержание курса под хабракатом.
Читать полностью »

Привет!

Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.
Читать полностью »

Тостер: новый отзывчивый дизайн и планы на будущее

Мы рады представить новый отзывчивый (responsive) дизайн «Тостера»! Теперь задать вопрос или дать ответ можно с одинаковой лёгкостью с любого устройства, оказавшегося у вас в данный момент под рукой.

Затевая глобальный редизайн «Тостера», мы ставили перед собой три цели:

  1. Доступность. Чтобы можно было задавать вопросы и давать ответы в любое время дня и ночи, где бы вы ни находились.
  2. Понятность. Язык интерфейса без дополнительных инструкций должен очень быстро доносить смысл сервиса и то, как им правильно пользоваться.
  3. Гибкость. При добавлении новых функций не должно возникать препятствий в интерфейсе для их быстрого и качественного внедрения.

Читать полностью »

*Перевод статьи Криса Койера «Ideas Behind Responsive Emails»

Скажем, вы создали 3-х колоночный email макет. Из-за ограниченной и странной поддержки CSS почтовыми клиентами, электронные письма верстаются с помощью таблиц. Трехколоночный макет смотрится здорово на больших экранах, но неуклюже сплющивается на маленьких. Теоретически @media query могут спасти нас, но так как мы не можем использовать float, мы, конечно, не можем рассчитывать и на них. Хотя есть еще способ.

В этой статье я просто хочу показать некоторые идеи относительно отзывчивых email. Они не являются надежными, готовыми к продакшену идеями. Я просто считаю, что было весело подумать об этом. Меня вдохновило на это недавно прослушанная речь Фабио Карнейро. Фабио, работая для MailChimp сделал крутой email макет и поделился некоторыми идеями, лежащими в основе отзывчивых email писем в этой беседе. У него также есть Treehouse курс по электронным письмам.

Джейсон Родригес также немного писал по этой теме недавно.
Читать полностью »

Рады представить первый выпуск «Самого интересного из мира веб-дизайна». Мы постараемся делать такие выпуски регулярно. В сегодняшнем выпуске мы поговорим про дизайн как таковой: 1) Что должен знать дизайнер об отступах в заголовках; 2) Как иконка прелоадера влияет на наше отношение к сервису; 3) Азы адаптивного дизайна; 4) Использование «Photoshop Generator» для создания прототипов; 5) Руководство по стилю от Yelp. Расскажем о новых интересных и красивых сервисах: 1) Генератор случайных пользователей; 2) Сервис Peek. Видео-отзыв о сайте от реального человека; 3) Recordit.co. Сервис для записи скринкастов; 4) Peekcalendar. Карманный календарь. Покажем, что нового, у всем известных ребят: 1) Iconfinder. Версия 5.0; 2) Новый Ted.com 2.0


Что должен знать дизайнер об отступах в заголовках

image

В своей статье Артём Гобунов раскрывает простое «правило внутреннего и внешнего», которое является частным случаем теории близости. На конкретном примере демонстрируется, как нужно рассчитывать вертикальные расстояния между заголовком и подзаголовком, а также между ними и контентом страницы, чтобы все элементы не «смешивались в кашу».

http://artgorbunov.ru/bb/soviet/20140224/

Читать полностью »

Блоггинг для хипстеров — Roon.io

Просыпались ли Вы когда-нибудь в холодном поту от того, что Вам срочно необходимо изложить свои мысли в личном блоге? А сколько раз Вы начинали искать подходящий сервис для блоггинга, но были разочарованы тем, что есть на рынке? Возможно Вы даже успели пощекотать себе нервы установкой WordPress в облаке (а то и написали собственный движок на Ruby on Rails, отставив в сторону стакан смузи). Остались ли Вы довольны?

Лично со мной такое приключалось аж несколько раз, и приходилось выдумывать всякое. Cреди всего, до чего я дотягивался в такие моменты, ни один сторонний сервис не смог отличиться эстетическим совершенством и удобством управления, а различные велосипеды ручного производства быстро убивали музу в зародыше. Да-да, именно техническая сторона вопроса помешала мне стать Великим Блоггером :)

Успешные стартапы обычно рождаются в борьбе с насущими проблемами. Мне кажется, что 7 июня на свет появился стартап, способный решить и мою. Предлагаю Вам познакомиться с тем, что сделали ребята из солнечной Калифорнии.

Roon.io — простая и красивая платформа для блоггинга.
Читать полностью »

image

Контекст данного поста об изменениях для веб-разработчиков, я вижу многих разработчиков которые «застряли», особенно в .NET.
Если вы еще не начали совершенствоваться в Вашем искусстве и адаптироваться к изменяющимся трендам, вы должны начать это делать сегодня.

Подумайте о разработке веб-приложений должным образом. Используйте здравый смысл чтобы смешивать и сочетать основываясь на данных советах.
А теперь 6 советов для веб-разработчиков, чтобы оставаться на пике того что вы делаете.
Читать полностью »

Статья является переводом отличного, вдохновляющего, хоть и небольшого поста Mixing Responsive Design and Mobile Templates от одного из создателей CodePen, Криса Койера.

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

Отзывчивый дизайн с помощью камерыБоитесь, что пользователь не сможет прочитать текст на вашем сайте издалека? Не вопрос, посмотрите на это (необходима камера и поддержка WebM).

При помощи WebM и скрипта для распознования лиц HeadTrackr можно легко сделать дизайн, который будет подстраиваться под пользователя в зависимости от его отдаленности от монитора. Это ли не будущее?

Читать полностью »

Доброго времени суток уважаемые читатели. На сегодняшний день уже многие знакомы с понятием адаптивный дизайн и я хочу поделиться интересной реализацией страницы портфолио с фильтрами.

Netcribe
ДЕМО

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js