Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Конкурс для веб-разработчиков. 10k Apart — Responsive Edition. Сделай веб-сайт и выиграй $3000

Microsoft


Читатели хабра, наверняка, помнят предыдущую итерацию конкурса 10k Apart, проводимого Mix Online совместно с An Event Apart. Для тех, кто хочет освежить память, рекомендую пройтись по ключевым словам 10k и 10k apart.

Новый конкурс посвящен идее отзывчивого дизайна (Responsive Design), разработке сайтов, хорошо подстраивающихся под различные внешние условия — от мобильных устройств до планшетов и десктопов.

На этот раз максимальный объем всех используемых ресурсов (кроме особо обозначенных популярных библиотек) не может превышать 10k в сжатом виде.

Сайт должен одинаково хорошо работать в последних версиях IE10 Platform Preview, свежей версии Firefox и свежей версии браузера, основанного на WebKit (на ваш выбор Chrome или Safari).

Подача заявок — до 12 сентября.

Дополнительные подробности и подача заявок — на сайте соревнования и в блоге MIX Online.
Читать дальше →
Всего голосов 42: ↑28 и ↓14 +14
Просмотры7.6K
Комментарии 7

Результаты конкурса 10k Apart — Responsive Edition

Ненормальное программирование
image

Итак, завершился конкурс 10k Apart — Responsive Edition.
Напомню, что по условиям конкурса созданные приложения должны работать и выглядеть одинаково хорошо на различных устройствах — от десктопов до мобильников и планшетов. Требуется поддержка IE10 Platform Preview, свежих версий Firefox и WebKit-браузера по выбору (Chrome или Safari). Допустимый размер приложения — до 10 Кб в zip-архиве (не считая некоторых популярных библиотек).

В этот раз за призовые места боролись 128 приложений (в прошлом году — 367). Как и в прошлом году для победителей были предусмотрены одна главная, три технических номинации и девять Honorable Mentions. В отличие же от прошлого раза, для приложений не проводилось открытого голосования (с выставлением оценок), а вместо этого использовались вездесущие фейсбуковские Like.

Итак, встречаем победителей.
Читать дальше →
Всего голосов 20: ↑20 и ↓0 +20
Просмотры982
Комментарии 3

Переводим в код 5 действительно полезных шаблонов адаптивной разметки

Разработка веб-сайтовCSS
Приветствую всех.

Недавно наш хабраколлега опубликовал интересную статью об адаптивной разметке.
Уже не далеко то время, когда мы будем уделять верстке под все разрешения намного больше внимания, нежели делаем это сейчас. Посему считаю нужным подходить к этому периоду подкованным в данном вопросе, ну или хотя бы иметь четкое представление, что это такое и с чем его едят. Запасаемся смартфонами и таблетками.
Читать дальше →
Всего голосов 102: ↑100 и ↓2 +98
Просмотры32.3K
Комментарии 24

62 полезных инструмента для адаптивного дизайна (Responsive web design)

Разработка веб-сайтовCSS
Перевод
UPD. Для краткого введения в адаптивный дизайн рекомендую прочитать статью «Как сделать один сайт для всех устройств (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 для сглаживания этих жестких переходов с помощью анимации?



Читать дальше →
Всего голосов 112: ↑107 и ↓5 +102
Просмотры195.7K
Комментарии 14

Коллекция паттернов поведения для элементов отзывчивого веб-дизайна

Разработка веб-сайтовРазработка мобильных приложений
Думаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчивого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.
Ну же, где паттерны то?!
Всего голосов 51: ↑49 и ↓2 +47
Просмотры28.3K
Комментарии 10

Создаем адаптивную навигацию на сайте

Разработка веб-сайтовCSS
Перевод
Tutorial
Одна из самых непростых задач в верстке адаптивного сайта — это навигация. В этой статье подробно описан один из способов реализации адаптивного меню.



Демо Скачать исходники
Читать дальше →
Всего голосов 48: ↑46 и ↓2 +44
Просмотры82.1K
Комментарии 40

Создаем адаптивную страницу портфолио с фильтрами

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

Netcribe
ДЕМО

Читать дальше →
Всего голосов 45: ↑29 и ↓16 +13
Просмотры27.9K
Комментарии 25

Отзывчивый дизайн с помощью камеры

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

При помощи WebM и библиотеки для распознования лиц HeadTrackr можно легко сделать дизайн, который будет подстраиваться под пользователя в зависимости от его отдаленности от монитора. Это ли не будущее?
Всего голосов 84: ↑77 и ↓7 +70
Просмотры28.7K
Комментарии 49

Комбинирование адаптивной верстки и шаблонов для мобильных

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

Итак, вы заняты стратегической проработкой поведения своего сайта для мобильных устройств. По идее вам надо бы выбрать что-то одно — или адаптивный дизайн, или создание отдельного сайта для мобильных. Что ж, возможно, это не так. Может быть, вам удастся сочетать сразу несколько стратегий.
Читать дальше →
Всего голосов 9: ↑8 и ↓1 +7
Просмотры17.9K
Комментарии 2

Времена меняются для веб-разработчиков — 6 советов чтобы выжить

CSSjQueryHTML
Из песочницы
Recovery mode
image

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

Подумайте о разработке веб-приложений должным образом. Используйте здравый смысл чтобы смешивать и сочетать основываясь на данных советах.
А теперь 6 советов для веб-разработчиков, чтобы оставаться на пике того что вы делаете.
Читать дальше →
Всего голосов 52: ↑28 и ↓24 +4
Просмотры15.4K
Комментарии 15

TDD for Responsive Design. Или как автоматизировать тестирование отображения сайта для разных устройств с помощью Galen Framework

Разработка веб-сайтовТестирование IT-системTDD
Из песочницы
Трудно одним заголовком сформулировать, чем же является Galen Framework. Все началось с того, что у меня возникла потребность тестировать сайты в различных браузерах и проверять: не поехала ли разметка, например, в том же Internet Explore или Chrome. Затем возникла мода на Responsive Web-Design, и пришлось вручную менять ширину браузера и проверять, как отображаются сайты. И, хотя все это время были WebDriver и Selenium Grid под рукой, так и не получалось нормально тестировать верстку сайта в Java коде. Одна из идей была: делать скриншоты в разных браузерах в Selenium Grid и затем собирать их все в один большой отчет, по которому один из тестировщиков обязан пробежаться глазами и, в случае обнаружения несоответствий, рапортовать о дефекте. К сожалению, вся эта затея долго не продержалась. Тестировщикам стало лень листать огромный отчет и сравнивать скриншоты, и они все равно пропускали мелкие дефекты. А затем пошли требования внедрения во всех сайтах Responsive Design. И вот тут появился Galen Framework. Решение оказалось простым: проверять размер и расположение элементов относительно друг друга. Для этого понадобился специальный язык Galen Specs, который было бы легко читать и понимать.



Если коротко, Galen Framework — это специальный язык и инструмент для тестирования отображения сайта в браузере. Он позволяет тестировать адаптивный дизайн, а также проводить кросс-браузерное тестирование сайта.
Читать дальше →
Всего голосов 28: ↑27 и ↓1 +26
Просмотры18K
Комментарии 8

Самое интересное из мира веб-дизайна. Дайджест Genue №1, февраль 2014

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


Читать дальше →
Всего голосов 38: ↑34 и ↓4 +30
Просмотры25.9K
Комментарии 7

Идеи, лежащие в основе отзывчивых email писем

CSSHTML
Из песочницы
*Перевод статьи Криса Койера «Ideas Behind Responsive Emails»

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

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

Джейсон Родригес также немного писал по этой теме недавно.
Читать дальше →
Всего голосов 22: ↑22 и ↓0 +22
Просмотры9.4K
Комментарии 4

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

Хабр Q&AУправление сообществом


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

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

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

Далее обо всём по порядку
Всего голосов 52: ↑37 и ↓15 +22
Просмотры18.7K
Комментарии 123

Практическое применение FlexBox

Разработка веб-сайтовCSS
Привет, хабр!

Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.
Читать дальше →
Всего голосов 56: ↑54 и ↓2 +52
Просмотры353.5K
Комментарии 40

Виталий Фридман на UXPeople: «Responsive Design – это не небольшая рихтовка, он требует изменить всё»

ИнтерфейсыUsability
Одно из самых ярких выступлений прошлой UXPeople в виде текста.



Я практически никогда не выступаю на русском, и мне это очень непривычно – но почему бы и нет? Cегодня я бы хотел поговорить о Responsive Design.
Читать дальше →
Всего голосов 21: ↑17 и ↓4 +13
Просмотры13.7K
Комментарии 9

Создаём отзывчивые письма для будущего без медиа-запросов

CSSHTMLВерстка писем
Перевод
Tutorial
Создавая HTML код для email, приходится иметь дело с изрядным количеством больных вопросов. И вряд ли для кого то будет приемлемо, если нам к тому же ещё и придётся следить за новыми email-клиентами и размерами устройств, которые появляются каждую неделю. Поддержка media query как и сам CSS разнятся среди приложений, в следствии этого, каждый раз когда вы слышите что появилось новое восхитительное почтовое приложение, для которого тоже нужно провести тесты, вас неизбежно одолевает страх.

Но что если бы вы могли создать шаблон, который был бы отзывчивым даже в окружениях с наименьшей поддержкой современного CSS? Что если каждый раз, услышав о каком-то очередном почтовом приложении, которое все испытывают, вместо того чтобы предаваться страху, можно было бы чувствовать себя спокойно и уверенно, зная что ваши email наверняка будут выглядеть хорошо?

Приведенный ниже метод, сторонником которого я являюсь, всецело ориентирован на создание положительного опыта взаимодействия при работе с email-клиентами, у которых вообще отсутствует поддержка media query.

Он называется fluid-hybrid method, иногда упоминается как spongy метод для email разработок. Часть fluid предполагает что мы используем изрядной количество процентных вычислений. Часть hybrid означает что мы также используем max-width дабы ограничить некоторые из наших элементов на экранах большего размера.
Читать дальше →
Всего голосов 17: ↑16 и ↓1 +15
Просмотры29.6K
Комментарии 7

Magento U опубликовало бесплатный курс Fundamentals of Magento 2 Development

PHPРазработка под e-commerceMagento
Tutorial
image

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


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

Содержание курса под хабракатом.
Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры6.3K
Комментарии 0

Медиа-запросы в адаптивном дизайне 2018

Разработка веб-сайтовCSSHTML
Перевод
image

В июле 2010 года я написала статью «Как использовать CSS3 медиа-запросы для создания мобильной версии вашего сайта» для журнала Smashing. Спустя почти восемь лет эта статья по-прежнему очень популярна. Я решила вернуться к этой теме, поскольку теперь у нас есть такие методы компоновки, как Flexbox и CSS Grid. В этой статье мы рассмотрим современные методы использования медиа-запросов в адаптивном дизайне, а также рассмотрим, что может произойти в будущем.
Читать дальше →
Всего голосов 18: ↑17 и ↓1 +16
Просмотры69.5K
Комментарии 5
1