Всем привет! Эту неделю с вами буду я — Артур Корнаков @fliptheweb. Работаю в aviasales.ru на острове Пхукет, Таиланд.

Специализируюсь на верстке, RWD, типографике, анимации, оптимизациях рендеринга и ui дизайне. Тот самый программист, который больше дизайнер

В компании занимаюсь всем вышеперечисленным, пишу на js и иногда на чем придется, так как большинство ребят у нас по определению full stack.

Сегодня немного расскажу о себе — первый свой полноценный сайт на таблицах сверстал почти 10 лет назад, фтп, шаред хостинг, все по науке!

Сейчас специально все пересчитал, потому что не может быть так давно, я еще слишком молодой, но нет, может.

Еще в школе начал играться с флешем и action script, многие элементы были сделаны как раз на нем (например кнопки, которые не подгрузились)

За 3D логотип отдельное спасибо моему тогдашнему однокласснику Сергею, который смог сделать такое в 3ds Max.

А помните ваш первый сверстанный сайт? Он еще в интернете? Как говорил @makishvili в своем докладе «36», что вы сможете показать детям? :)

@cssunderhood Делал для школьного эко-кружка goo.gl/VLDoZV (2007, retina-ready)
Не отображается уже, исследовать можно через сорсы

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

Помню, как было сложно начать верстать дивами, без таблиц, прозрачных gif распорок в 1px. Весь интернет был наполнен холиваром div VS table.

Но фриланс отнимал очень много времени, было ощущение, что работал абсолютно всегда, потому что место работы и дом не были разделены.

Потом пришло понимание, что хочется делится опытом в реальной жизни, хочется сильной команды и окружения.

Не всем работодателям нравилось, что я фрилансил тогда, делалось это в тайне. Но думаю по мешкам под глазами меня не трудно было разгдать 😅

@cssunderhood а вот мой compasspools.com.ua все еще работает) дизайн тоже для него делал. но уже давно не занимаюсь им. во власти других

@cssunderhood 2003, ImageReady slices, 12 лет верстку не трогали :) realmebel.ru

Но вообще ты чертовский прав. Когда поднимался вопрос об отмене поддержки IE8, как раз таки смотрели рентабельно ли заниматься ей. @sapegin

Вообще, по части новых технологий (читай flexbox) со временем я стал сторонником прагматичного подхода.

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

Но на pet-проектах,а не на сайтах с посещаемостью овер 1М. Не встречал еще ни одного _реального_ дизайна,в котором без flexbox не справиться

Поверьте, придет время и технология, которая сделана для того, чтобы упростить работу разработчикам, действительно таковой станет.

До того как переехать жить в Таиланд, я работал во Владивостоке. У нас есть несколько крутых компаний — Drom.ru, Farpost, KamaGames, Rhonda.

В этих компаниях работает большинство толковых ребят Владивостока. Возможно есть и другие компании, но я их, к сожалению, уже не застал.

Еще @andrey_sitnik из Владивостока, но он уже давно человек мира :D

Владивосток довольно обособленный город, находится очень далеко от центральной России и, соответственно, коммьюнити. Это проблема.

Лет 5 назад передо мной остро встала проблема, что фронтендщиков, как таковых, в городе почти не было, не с кем было делиться опытом irl.

Да и локального комьюнити, не то что во Владивостоке, а на Дальнем Востоке попросту не было. Решено было это менять.

Собравшись с ребятами из твиттера мы в итоге организовали конференцию VLDC @vldcru, которая до сих пор была одной из самых больших на ДВ.

Было проведено 4 больших конференций (на последней, в 2013г) было порядка 250 человек, и много маленьких митапчиков.

После моего переезда, к сожалению, конференцией больше никто не занимался и дело загнулось, а жаль =/

Кстати, маскотом конференции был дальневосточный нян-тигр :D До сих у многих (и у меня) остались наклейки на ноутах. pic.twitter.com/e5mdlCaQIB

Опыт проведения конференции — просто бесценный, я познакомился с кучей крутых разработчиков и, надеюсь, помог другим значительно вырасти.

Если у вас в городе еще нет сформировавшегося коммьюнити или просто конференции, но вы чувствуете потенциал, то не бойтесь начать.

Самое сложное для меня в подготовке конференции было найти спонсоров, которые оплатят зал. Найти докладчиков по сравнению с этим цветочки :)

Чуть позже расскажу о своем переезде в Таиланд, как решился на такой шаг, что ожидал и что увидел и приобрел в итоге. А пока работать.

@cssunderhood да, можно дать им ширину, флоуты, считать отступы, убирать отступ у последнего. или флекс в 2 строки. pic.twitter.com/y0qg2z7eVn

@cssunderhood ну и год назад мы рассказывали о нашем опыте внедрения их на avia.yandex.ru vimeo.com/107806094

Чисто субъективно. Для меня верстальщик — это человек, который большинство времени занимается css/html кодингом.

При этом разбирается в юзабилити, типографике, анимациях. Человек на стыке двух специализаций — дизайна и программирования.

Фронтенщик сегодня — это очень обширное понятие, стек технологий css/html/js, node.js, системы сборки (devOps) и прочее.

Но, к удивлению, я все чаще встречаю фронтендщиков, которые вообще не умеют верстать или делают это очень нехотя.

Насколько я знаю, на «западе» такого понятия как «верстальщик» не существует. Есть web designer (который и рисует и верстает).

И есть HTML/CSS coder, но все таки большинство это front end developer (или модный нынче full stack).

@cssunderhood я знаю дизайнера который ещё и на реакте и метеоре пишет

Еще существует мнение, что верстальщики — это junior front end, которые в дальнейшем станут усиленно кодить на js.

Но честно говоря, я не согласен, потому что не раз видел верстальщиков, которым js безразличен, но которых тянет в дизайн.

В любом случае, главное заниматься тем, что вам интересно и что приносит удовольствие, а названия профессий давайте оставим эйчарам :D

@cssunderhood hr которые думают что я java программист :D

@cssunderhood о, таких очень много и они всегда были. У нас сейчас на проекте четыре фронтендера и все как один ненавидят верстать :)

Расскажу теперь немного про то, как я попал в Таиланд.

Все в принципе обычно — отослал резюме в aviasales по совету моего бывшего (и уже нынешнего) коллеги @Timrael, успешно прошел собеседование.

И тут пришло понимание того, что придется переезжать. Честно, мандраж был, никогда до этого из Владивостока я не выбирался надолго.

Читал перед этим про то как жизнь возле моря расслабляет,как люди становятся ленивыми и не могут работать в райском месте. Как я ошибался :D

Забегая немного вперед скажу — если ехать сюда работать в одиночку, фрилансить, то мотивировать себя возможно и не получится.

Но когда вокруг тебя не маленькая компания (~60 человек) с отличными разработчиками со всей России/Украины, то это держит в тонусе.

В компании в основном работают молодые люди, от 22 до 30, поэтому с друзьями и единомышленниками при переезде проблем тоже не возникло.

@cssunderhood Один из первых коммерческих, что сохранился в archive.org, 2006 год: web.archive.org/web/2007070608…

@cssunderhood Из коммерческих, что дожил до сегодня без изменений, 2008 год, моя путёвка в тусовку #wstdays: pintagon.com.ua

Если есть какие-то вопросы о жизни в Тае и aviasales, обязательно задавайте, так будет даже проще :)

Опять же, границы очень размыты. Когда разбираешься в node.js очень сильно прокачиваешь свои фронт скиллы. @serhey_shmyg

В универ, кстати, почти перестал ходить из-за фултайм работы, о чем сейчас совсем не жалею.

@cssunderhood @serhey_shmyg без ноды современный фронтенд-разработчик как слепой котёнок — сам себе не может помочь

С приходом node.js фронтенд вообще взлетел, движется очень быстро и пока останавливатся не собирается @weblegko

@cssunderhood мне больше, и норм:)))

@cssunderhood Значит мало видел ;-)

А если серьёзно, то спрашивали фундаментальные основы - как работают браузеры, gc, рендеринг, принципы некоторых фреймворков @_sashashakun

На эту тему есть отличный доклад Вадима Макишвили «36», который тут уже упоминали events.yandex.ru/lib/talks/2235/ @_sashashakun @weblegko

А кто-нибудь уже придумал, как комбинировать и расширять CSS-трансформации из разных селекторов, не переписывая их? /cc @cssunderhood

Привет всем! Сегодня в aviasales конец спринта и демо — когда команды показывают друг другу наработки, поэтому не мог уделить вам времени.

А у вас есть подобная практика? Принято ли собираться и показывать коллегам то, что сделано? Меня, например, это заставляет держать темп.

Тут я впервые встретился с такой практикой — очень нравится, что всегда остаешься в курсе событий, знаешь какие проблемы давно решены.

Не сказал бы, что это самый удобный график по которому я работал, но так мы синхронизируемся с питерскими mobile-разработчиками @sushkazzlo

Но зато во время дикого солнцепека мы уже на работе :D @sushkazzlo

@sapegin @cssunderhood подобной практики не было - проектов было много, и пришлось бы часто отрывать от работы большое кол-во людей

@sapegin каждые 2 недели закрываем спринт проекта, 1 программист обычно на нескольких проектах, обычно это понедельник @cssunderhood

@cssunderhood у нас все четко по scrum: спринт - демо - ретроспектива - планирование/груминг

Расскажите, а есть методология именования классов №2 (после БЭМ или перед)? А-то ученикам не интересен SMACSS, а альтернативу дать хочется.

Немного переиначу картинку про js фреймворки :D Таких же популярных как БЭМ нет, но методологий много. @simonenko pic.twitter.com/NLhTX2beEX

Чтобы не быть голословным, пройдусь по нескольким последним, которые запомнил — Reasonable System for CSS rscss.io

Очень похоже на «нестрогий» БЭМ, понравилось пара моментов (например .-mod синтаксис),но использование дочернего селектора > везде — это бе.

AMCSS – amcss.github.io, стилизуем элементы через html аттрибуты, но, кажется, идея ни у кого особой симпатии не вызвала.

Ну и напоследок список статей про мастабируемую CSS архитектуру, зачем и, главное, как github.com/davidtheclark/…

Cкоро всю команду можно будет отправлять на конкурс скороговорок @victoria_veles @sapegin

@simonenko CSS Modules и забыть о правилах

@simonenko так какой смысл давать альтернативу? Я бы сказал, что сейчас CSS Modules — главное, а БЭМ просто альтернатива к нему.

Соглашусь тут с @andrey_sitnik — за CSS Modules будущее (пока не придумают что-нибудь менее overhead).

Зачем думать о конфликтах классов, если заботу об этих вещах можно переложить на комп? «Машины должны страдать!»

@cssunderhood не забудь ещё all: initial и локальный ресет, чтобы не полагаться на наследуемые стили

@cssunderhood и медиа-выражения для компонента, а не страницы, чтобы совсем изолировать компоненты github.com/ausi/cq-prolyf…

Зарплата в долларах, конкурентная была еще когда устраивался, сейчас по сравнению с Россией и подавно :D @nemons

Но все равно расплачиваемся тут в тайских батах, так что разница не сильна заметна. Кризис нас задел, но без сильных последствий. @nemons

Какие именно проблемы были и почему отказались есть в докладе Антона Плешивцева youtube.com/watch?v=sHMhpr… @trolizmaslom

Сейчас своя реализация flux на выдаче (без React), если интересно, то могу рассказать в своем основном акке @trolizmaslom

@cssunderhood на мидспринте у нас чаще всего проводятся психологические тренинги, чтоб команды все сторонне развивались, не только по проф.

Есть проект-пример для того, чтобы было проще разобраться github.com/css-modules/we… @GrawlCore

Там, опять же, используется React, но на его месте может быть совершенно любой шаблонизатор, а не jsx @GrawlCore

Сегодня я хотел бы поднять вопрос о взаимодействиях с дизайнером, как продуктивнее работать в связке и обязан ли верстальщик уметь рисовать.

@cssunderhood UI/UX скиллы конечно же должны быть.

Всегда был убежден, что верстальщик и дизайнер должны быть лучшими друзьями и сидеть за одним столом. Это решает несколько важных проблем.

Выгоды очевидны — вы чаще общаетесь и обсуждаете совместную работу, обмениваитесь знаниями и последними трендами в мире разработки/дизайна.

Так я, например, подтянулся по типографике, сеткам, стал больше думать об интерфейсах в плане ux (спасибо @valeranazzarov и @aka_LeLique)

Дизайнер от такого сотрудничества получает быстрый фидбек по своей работе, макеты прорабатываются более подробно с технической точки зрения.

Верстальщик может показывать дизайнеру на что сейчас способны сегодняшние технологии (многие не думают об интерактивности, анимациях, svg).

@cssunderhood Рисовать — нет, а хотя быть чуть-чуть разбираться в дизайне, типографике и прочих штука — обязательно.

Это очень важный момент, не все дизайнеры способны следить за всем происходящим во фронтенд тусовке (мы то иногда не успеваем :D)

В общем от такого сотрудничества все в выигрыше! А еще это веселей, чем сидеть одному 😄

Мы всегда начинаем работать над макетов вместе с дизайнером,еще до того как он готов, продумываем сетку, проверяем гипотезы, делаем прототип

На моей практике, такой подход хорошо прижился в продуктовой команде. Но, уверен, что приживется и в студиях. @abrosimov

Конечно есть правила, которые позволяют работать вместе проще, но главное тут быстрые и легкие коммуникации @abrosimov

Есть старый сайт i-love-psd.ru на котором описаны некоторые правила для дизайнера по взаимодействия с верстальщиком.

Несмотря на то что документ старый и большинство людей сейчас дизайнит в Sketch, некоторые правила применимы и для него.

@cssunderhood +1 хотя по умолчанию дизайнер, а еще мне бэкэнд нравится под веб задачи и маркетинг 😆

А как у вас с этим дела обстоят? С чего чаще всего верстаете? Ну и, соответсвенно, где работаете, в продукте, студии или фриланс, это важно.

@cssunderhood аутсорс, заказчик - крупная веб-студия из NY, клиенты в основном со штатов, мокапы шлют нам оттуда. Пока что сплошные PSD

@cssunderhood фриланс: psd, psd, png, дизайн в браузере, psd, illustrator ( #sick)

@cssunderhood на аутсорсе, 99% макетов в PSD и только 1 дизайнер отдает макеты из sketch

@cssunderhood мы обычно именно со скетчем и работаем в нем, никаких особых проблем не замечали

@cssunderhood работал в Avocode на винде с файлами из Скетча, всё ок, полёт отличный.

@abrosimov @cssunderhood Hey, sorry to hear that. :/ Are you still having issues? We improved the import quite a lot!

Осознав большие пробелы в дизайне интерфейсов я пошел на интенсив UI/UX в Британскую высшую школу дизайна в Москве этим летом.

Кратко о том что это за штука — большому количеству людей на протяжении 10 дней читают лекции и ведут по процессу проектирования продукта.

В начале выбираете в каком проекте будете участвовать (своя идея, маленький стартапчик, проекты от Яндекса, Mail.ru, Альфа банка, Aviasales)

Прорабатываете эту идею вместе с командой, проводите исследования, рисуете прототипы в перерывах между теоретическими занятиями.

В самом конце от вашей команды ждут рабочий прототип и презентацию перед всеми студентами и представителями компаний упомянутых выше.

Впечатление в конце были довольно противоречивые — многое, что преподавали я уже практиковал (в основном процессы проектирования).

Тому, чего я ожидал от интенсива, а именно красиво визуализировать свои идеи, рисовать интерфейсы, в итоге не научился :)

Но получил неожиданные скиллы управления командой и выступления на публике, познакомился с невероятным количеством крутых ребят!

Не говоря уже о передовиках дизайна в России — @jvetrau, @darkboutique, @k00 и других. Побывал в московских офисах многих крупных компаний.

Если интересно подробней про процесс, то я описывал каждый день в своем fb, смело добавляйтесь в друзья facebook.com/fliptheweb/pos…

В общем мне очень понравилось, это заложило фундаментальную основу по интерфейсам и дало большой пинок развитию в этом направлении.

Этой зимой в Британке тоже будут интенсивы. Если есть время и свободные деньги на образование, сходите, не пожалеете britishdesign.ru/programs/fc/

А еще у Британки тоже есть коллективный аккаунт, который ведут преподаватели @BritishDesign

Что почитать, если хотите подтянуть свои знания по интерфейсам?
По основам можно designpreppy.ru — подготовительный класс ui диза.

Самый крутой список статей и видео по дизайну, который я видел hackdesign.org Подпишитесь на порционную рассылку. Люто рекомендую!

@cssunderhood @BritishDesign @desmonych и в жизни отличный. Его фейсбук интересней твиттера. Да инстаграм с задачами для дизайнеров тоже ок

Что еще посоветуете почитать по интерфейсам? @sapegin кидал недавно ссылку на nathanbarry.com/webapps/

Кстати о рассылках, в последнее время предпочитаю их другим источникам информации. Не сильно отвлекают, сразу понятно, что стоит читать.

Рассылки по верстке на которые подписан — css-weekly.com, html5weekly.com, uianimationnewsletter.com про анимации

@cssunderhood Джеф Раскин — Интерфейс. Алан Купер — Психбольница в руках пациентов.

Переход на Sketch во всех командах aviasales произошел после того, как я подсадил на него нашего продуктового дизайнера. @maksim_valiev

Уверен, что это произошло бы позже само собой, но мы показали другим насколько это удобно @maksim_valiev

@cssunderhood @valeranazzarov @aka_LeLique вот по типографике, кстати, шикос designpreppy.ru/layout.html @artgorbunov

@GrawlCore @cssunderhood до дыр! А еще вот Брингхерста «Основы стиля в типографике», а верстальщику prowebtype.com

Когда хочется что-нибудь посмотреть, но на примете ничего нет, то открываю этот список фильмов про дизайн и выбираю movielistfordesigners.link

«Indie Game: The Movie», «The Genius of Design», «Objectified», «Art & Copy» особенно понравились.

Оказывается, можно использовать системные шрифты из интерфейса, указывая font: menu, message-box, status-bar... smashingmagazine.com/2015/11/using-…

Новый инструмент для работы с psd и sketch макетами sympli.io. Как раз сегодня обсуждали!

Всем привет котятки!
Вчера мы разговаривали о взаимодействиях с дизайнером и как стать специалистом на грани дизайна и программирования.

Сегодня поговорим о смежной, и очень интересной для меня теме — анимациях интерфейса. Обещаю, будет много крутых штук :)

Зачем нужны анимации интерфейса? Любимый доклад чувака из stripe.com на эту тему youtube.com/watch?v=J6wUmQ…

Основная проблема UI анимаций сейчас — это не технологии, а неявная зона ответственности.

Многие веб-дизайнеры еще попросту не готовы думать динамикой и анимациями, не обладают (или так думают ;) инструментами для их создания.

Не поверите, но самый простой и быстрый способ сделать анимированный прототип сейчас — сделать его в KeyNote. vimeo.com/129807396

Несколько статей по анимации в KeyNote, попробуйте если на маке ;)
robots.thoughtbot.com/animating-with…
blog.invisionapp.com/animating-your…
medium.com/@_jshmllr/desi…

Со стороны фронтенда тоже не все гладко — многие (и я в том числе) не обладают достаточным чувством прекрасного. Я расскажу как это обойти.

@cssunderhood любой инструмент ограничивает своим функционалом. Поэтому тут два решения любо сразу дизайнер фигачит в среде…

@cssunderhood Эту инфу прекрасно разложил по полочкам Олег Турбаба на Dribbble Meetup, например youtube.com/watch?v=lWIYt_…

@cssunderhood для общего развития и расширения кругозора иногда просматриваю.
2014/youtube.com/watch?v=AvZ2Xh…
2015/youtube.com/watch?v=42BaW1…

@cssunderhood и еще одно из тех что помню youtube.com/watch?v=lWIYt_…

Если уж затронули тему производительности немного, то вот must read для понимания — html5rocks.com/en/tutorials/s…, html5rocks.com/en/tutorials/s…

Так кто же должен думать об анимациях? Дизайнер или верстальщик? Ответ прост — оба. А если они сидят вместе, то результат не заставит ждать.

Нам,как разработчикам, необходимо заполнять пробелы по дизу и анимациям, стараться делать не только с технической, но и с творческой стороны

Со стороны дизайнеров сейчас происходит тоже самое — например во @framerjs для прототипирования используется coffeeScript и простые скрипты.

На сайте framerjs вы можете найти много очень впечатляющих примеров framerjs.com/examples/

..многих специализации,поэтому не вижу ничего плохого,если любой участник процесса хоть немного разбирается в каждой

Если вы поймаете сейчас моушен тренд и станете узким специалистом на грани разработки/дизайна, то уже очень скоро вам не будет цены.

@cssunderhood на проектах иногда бывает до 9 разных типова дизайнерских позиций Ai/UX/UI/Visual/.../ Interaction трудно что-то забрать

Если не знаете с чего начать верстку в Sketch, то воспользуйтесь оф документацией, она прекрасна sketchapp.com/learn/ @gearmobile

@cssunderhood четко разграничивать зоны ответственности. С дизайнера - концепт и вижуал, с меня - исключительно реализация.

Не все могут работать на пару с дизайнером. Как можно делать анимацию красивой, нам, верстальщикам, не прибегая к посторонней помощи?

Для себя я вывел несколько правил, которых стараюсь придерживаться.

1. Если не можете придумать хороший эффект — возьмите готовый или вдохновляйтесь у мира, который вас окружает. «Fake it till you make it»!

Коллекции анимационных эффектов интерфейса на все случаи жизни — daneden.github.io/animate.css/, h5bp.github.io/Effeckt.css/, justinaguilar.com/animations/

bouncejs.com — дает невероятно крутые и плавные эффекты, генерирует их как keyframes, без него как без рук.

2. Хорошо подобранный изинг — это уже половина успеха! Избегайте линейных переходов. pic.twitter.com/gU2P9eqf9k

Хорошая статья, которая поможет вам разобраться, зачем использовать изинги в анимациях и главное как medium.com/@sureshvselvar…

Если вы только начинаете разбираться, то вам поможет шпаргалка по наиболее употребляемым изингам easings.net

В Chrome DevTools (и Firefox Dev Edition) недавно добавили маленький редактор для изингов, часто выручает. pic.twitter.com/WCUehdhRUr

3. Используйте правильный тайминг и делайте анимации только там, где они действительно необходимы.

Отсутствие понимания функций анимации во времена flash привели нас к полному хаосу в вебе,но мы это заслужили. Давайте не повторять ошибок:)

Основные функции анимации — отзывчивость интерфейса, плавная смена контекста, управление вниманием. Все. Точка.

Одна из самых полезных статей на тему влияния анимации на юзабилити от студии Чулакова — chulakov.ru/life/animation…

Хороший дизайнер обязан быть политиком и продавливать интересы пользователя, биться за них. Просто рисовать не получится ¯\_(ツ)_/¯

@cssunderhood а кто знает причину - (OS X + Firefox v42) в Adobe Extract не работает опция “Copy text”. Под Linux (Firefox v42) - работает.

4. Освойте один из инструментов для создания анимаций. Не важно что именно, KeyNote, After Effects, Animate, Hype, Framer.js, что угодно.

Для себя понял, что начинаю перегорать под конец, когда пытаюсь сделать сложную анимацию кодом. С визуальным редактором проще в этом плане.

Люди, которых пишут об анимациях — @vlh, @sarah_edo, @legomushroom, @NikolayTalanov, ну и я @fliptheweb. Если дополните, то будет прекрасно!

@cssunderhood после работы с Origami понял что лучше кодом) По моему мнению наиболее логичный и приятный FramerJS

Еще в Chrome Canary добавили хороший редактор анимаций прямо в DevTools, скоро будет полноценный AfterEffects😬vimeo.com/146184432

@cssunderhood еще @SaraSoueidan @rachelnabors @chriscoyier @rachsmithtweets @ChrisGannon

Анонсировали плагин для скетча, который позволяет делать анимированные прототипы прямо в нем silverflows.com 🔥🔥🔥

Ну и раз заговорили про After Effects, есть плагин bodymovin, который конвертирует в canvas/SVG, вот много примеров codepen.io/airnan/

Растите культуру анимаций в вашей компании, работайте с дизайнером, обменивайтесь инфой, крутыми примерами и обязательно экспериментируйте!

Всем доброе утро! Сегодня в Таиланде солнечная(как и всегда) пятница, но вы не представляете как я хочу покататься на борде или лыжах :)

Вчера мы весь день посвятили анимациям интерфейса и проскакивало много ссылок на инструменты, интересные коллекции, скрипты и статьи.

Все крутые ресурсы, которые касаются анимаций UI я заботливо собираю в список, пользуйтесь github.com/fliptheweb/mot…

Сегодня мы поговорим о респонсивном веб-дизайне (RWD) и трюках, которые используем для того, чтобы верстка под все устройства была легкой.

@cssunderhood Концепция колонок проста. сойдет любой мануал :: css-live.ru/articles-css/r… :: habrahabr.ru/post/153955/ :: htmlbook.ru/css3-na-primer…

@cssunderhood С автопрефиксером колонки поддерживаются 95% браузеров, то есть с некоторой натяжкой можно считать, что везде.

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

@cssunderhood WebKit неадекватно рендерит неразрывные блоки (отступы и тени), что лечится инлайн-блоками.

@cssunderhood А Firefox имеет непроизводительный Reflow при балансировке, что может вызвать медленный рендеринг большого количества данных.

@cssunderhood Причем тормоза пропорциональны не только количеству контента, но и числу колонок.

@cssunderhood Так что надо аккуратнее, особенно если контент в колонках динамический. В общем, пользоваться можно, но осторожно.

@cssunderhood еще у меня есть сборничек статей и видеодокладов про флексбокс afider.github.io/flexbox/

Основные паттерны для применения flexbox, на русском prgssr.ru/development/fl…

Рабочий момент — на Mac OS, всегда включайте показ скролла, иначе увидев сайт на windows можете сильно удивиться 😤 pic.twitter.com/rngzdyM9uJ

К вчерашнему разговору — новый зимний интенсив «Digital: Анимация интерфейса» в Британке от Дмитрия Карпова britishdesign.ru/programs/p/dig… 😱

@cssunderhood залежи инфы по flex-box heydesigner.com/flexbox/ на @HeyDesigner

@cssunderhood пользуюсь этой штукой, удобно сразу получить визуальное представление flexbox'а html5.by/blog/flexbox/

Давайте немного поговорим о респонсивной типографике, какие техники применяете? В последнем проекте пришел rem + mq webdesign.tutsplus.com/tutorials/the-…

Вспомнил эксперимент, он не применим в проде, но забавен. Меняем размер шрифта в зависимости от положения головы🔥 webdesign.maratz.com/lab/responsive…

@cssunderhood Ребят есть работа, надо 7 страниц сверстать, анимации по маске и что бы все не тормозило. Есть желающие? vk /andexds

Еще один эксперимент над RWD типографикой с использованием сложного calc и vw, возможно кого-то натолкнет на мысли madebymike.com.au/writing/precis…

@cssunderhood @sapegin специально для тебя избежал слово «респонсивный » 😆

Только недавно узнал об этом красивом способе сделать респонсив блок с пропорциями width/height, для видео,например css-tricks.com/snippets/sass/…

Вообще как у вас на работе с респонсив дизайном? Выдает ли дизайнер макеты под все брейкпоинты? Какие проблемы есть?

@cssunderhood от сложности макета зависит. Или рисует или на словах объясняет, как и что должно меняться

Недавно проскакивала ссылка на коллекцию отзывчивой навигации, особенно полезно вашим дизайнерам navnav.co

@cssunderhood Только сегодня вспомнил про доклад Завялова Александра об оптимизации анимаций с последнего WSD youtube.com/watch?v=f1DVxt…

Немного пятничного оффтопа не помешает 😬Что будете делать после работы? Какое пиво предпочитаете? Самое время отдохнуть :)

У нас, например, мало нормального, в основном лагер, который за 2 года уже порядком поднадоел. Остальное стоит овер 300р за пол-литра😨

Последняя ссылка по RWD на сегодня, пожалуй — коллекция отзывчивых паттернов всех UI элементов bradfrost.github.io/this-is-respon…

Ребят, сорян, что не писал в выходные, обычно запрещаю себе брать телефон в руки, путешествовал pic.twitter.com/OX8AS7E8sN

Чуть не забыл попрощаться. С вами был @fliptheweb из Aviasales. Надеюсь, рассказал что-то полезное за эту неделю.

Если вы хотите показать себя миру или просто позадавать вопросы сообществу и вести этот аккаун, обращайтесь к @juwain 😊

Главное, что я хотел донести — верстальщик, не только программист, но и дизайнер, не забывайте об этом, тогда вы станете профессионалами.