Метка «responsive design»

в 5:50, , рубрики: css, email, html, responsive design, веб-дизайн, метки: , , ,

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

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

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

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

в 9:36, , рубрики: Facebook, responsive design, styleguide, TED, yelp, адаптивный дизайн, Блог компании Студия дизайна Genue, дайджест, дизайн, Дизайн в IT, интерфейс, интерфейсы, прелоадер, фотошоп, метки: , , , , , , , , , ,

Рады представить первый выпуск «Самого интересного из мира веб-дизайна». Мы постараемся делать такие выпуски регулярно. В сегодняшнем выпуске мы поговорим про дизайн как таковой: 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/

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

в 22:07, , рубрики: markdown, responsive design, SaaS, блоггинг, блогосфера, социальные сети, Социальные сети и сообщества, стартапы, метки: , , , , ,

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

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

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

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

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

в 11:04, , рубрики: css, css-фреймворк, css3, html, html5, http, javascript, javascript library, jquery, node.js, responsive design, rest, Twitter Bootstrap, метки: , , , , , , , , , ,

image

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

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

в 13:14, , рубрики: css, html, mobile web, responsive design, адаптивная вёрстка, адаптивный дизайн, веб-дизайн, Мобильный веб, мобильный интерфейс, переводы, метки: , , , , , , ,

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

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

в 16:06, , рубрики: html5, javascript, responsive design, responsive web design, Typekit, video streaming, web camera, webm, веб-дизайн, Веб-разработка, метки: , , , , , , ,

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

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

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

в 16:44, , рубрики: css, css3, html5, responsive design, адаптивная вёрстка, веб-дизайн, Веб-разработка, метки: , , ,

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

Netcribe
ДЕМО

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

в 10:41, , рубрики: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Веб-разработка, Дизайн в IT, Мобильный веб, Отзывчивый веб-дизайн, метки: , , , , , , ,

Коллекция паттернов поведения для элементов отзывчивого веб дизайнаДумаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчевого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Читать полностью »

в 3:15, , рубрики: css, css3, media queries, responsive design, адаптивная разметка, веб-дизайн, Веб-разработка, метки: , , ,

Приветствую всех.

Недавно наш хабраколлега опубликовал интересную статью об адаптивной разметке.
Уже не далеко то время, когда мы будем уделять верстке под все разрешения намного больше внимания, нежели делаем это сейчас. Посему считаю нужным подходить к этому периоду подкованным в данном вопросе, ну или хотя бы иметь четкое представление, что это такое и с чем его едят. Запасаемся смартфонами и таблетками.
Читать полностью »

Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js