• Как опустить первую букву?

    @htmleater
    Конкретно это - результат работы простенького, но платного скрипта по созданию буквиц (названия не вспомню).
    Суть в том, что первая буква оборачивается в спан и с нею уже производятся действия. Копай в эту сторону.
    Ответ написан
    Комментировать
  • Как сделать фоллбэки?

    @htmleater
    Можно попробовать, к примеру, flexibility-master (есть на гитхабе) - маленький скрипт, который в ИЕ9 вместо флексбоксов подставляет флоаты.
    Ответ написан
    Комментировать
  • Как запретить разрыв таблицы при печати в контейнере flex?

    @htmleater
    caniuse.com/#search=page-break-inside
    Полноценно не поддерживается ни одним браузером, кроме Опера мини
    Ответ написан
    Комментировать
  • Как сверстать данный кусок макета?

    @htmleater
    .flex-item:first-child {
    flex: 0 0 200px; /*в любых единицах*/
    }
    .flex-item:last-child {
    flex: 1 1 auto;
    }
    Ответ написан
    Комментировать
  • Есть ли волонтерство в веб-разработке?

    @htmleater
    Я за свою практику делал 3-4 сайта + макеты для полиграфии в благотворительных целях бесплатно (семейные детдома). Ничего особо сложного нет или времязатратного, ибо максимум требований: фото-видеогалерея, новости, обратная связь. Никаких особых изысков в дизайне, как правило, хватает штатных шаблонов + логотип + слайдер.
    danneo.com
    сами освоите за 2-4 дня + несколько дней на нестандартные задачи с помощью сообщества и поиска + 2-3 дня на обучение тех. кто будет вести сайт в дальнейшем.
    Боитесь, что не справитесь сами, обращайтесь.
    Ответ написан
    Комментировать
  • Можете посоветовать качественные курсы/школу по веб дизайну?

    @htmleater
    Вот расскажу о проблеме с точки зрения профессионального художника, который в своё время самостоятельно освоил компьютер до нелюбительского уровня, заинтересовался вебом, который начал осваивать, освоил свободную вёрстку, умеющий сделать сайт под ключ и т.п.
    Преамбула:
    а) в "художестве" практически нет законов, но есть огромное кол-во правил, которые практически не сформулированы;
    б) профессиональный художник (дизайнер) знает эти правила и умеет ими пользоваться;
    в) хороший профессиональный художник (дизайнер) умееет эти правила нарушить так, что это сделает его работу лучше;
    г) дизайнер - это художник, имеющий склонность к систематизации и точным наукам;
    д) учёба художника (дизайнера) заключается в многолетнем дрочилове до состояния автоматизма, что даёт возможность в дальнейшем не заморачиваться всякой лабудой, забитой в подкорку.
    Пути:
    1. Сразу на йух тех, кто говорит, что дизайнер не должен уметь рисовать - результаты можно наблюдать в веб-дизайне конца 90-х - 2000-х, когда жил миф, что инженеры, ринувшиеся в нишу, используя шаблоны, покроют задачу;
    2. Плохая новость: научиться быть дизайнером нельзя без природных задатков. Можно долго учиться цветоведению, типографике, композиции и её основам и т.п., и даже вроде бы начать чего-то понимать. но не уметь решить простейшую задачу;
    3. Хорошая новость: самоучка с природными задатками может научиться делать серьёзную работу, но в несколько раз дольше, чем чел с профильным образованием;
    4. Дрочка, дрочка и дрочка. Часов так по 8-16 в сутки. (Попутный вопрос: почему в худ. ВУЗах учат по 6 лет, как в медах, а в училищах по 4-5 лет?);
    5. Учиться, учиться и ещё раз учиться. Всю жизнь. Ходить по музеям, листать альбомы, внимательно смотреть по сторонам, общаться, замечать мелочи - переформатировать мозги и взгляды на мир.
    Ответ написан
  • Animate.css+one-scroll-page.js как совместить?

    @htmleater
    Не очень давно в лендинге пытался поженить Анимате+Wоw.js с fullpage.js (как я понимаю, разновидность one scroll page).
    От Wоw.js пришлось отказаться практически сразу из-за явных конфликтов, которые и на скролл-скрипт стали влиять. Анимат удалось заставить "работать" только в таком виде: при начальной загрузке страницы проигрываются анимации со второго-третьего экранов, а уже потом прорисовывается первая страница.
    Решить проблему не сумел.(((
    Ответ написан
  • Где найти шпаргалки и обзоры по типографике, модульной сетке в Веб-дизайне?

    @htmleater
    Насчёт сеток - вопрос не простой.
    Самое полное описание, чтобы понять сам принцип, можно найти только в литературе по полиграфии (чаще всего, книжной). В 70-х-80-х издавалась даже отдельная прекрасная книга-альбом, по-моему, называлась «Модульная сетка».
    Поискать в архивах дизайнерских и полиграфических журналов: Print Magazine, [КАК] и т.п. Встречалась проблематика и в книгах Кричевского (или статьях, не вспомню точно).
    Ответ написан
    Комментировать
  • Сколько времени в процентах у вас уходит на дизайн, верстку, натяжку, программирование сайта?

    @htmleater
    От недели (если сроки горят и заказчик готов заплатить +40-50% за срочность) до двух недель. В одиночку, при условии, что в ТЗ нет какой-либо экзотики, и основные затраты времени не лягут на переговоры, т.е., когда заказчик созрел и готов к работе.
    Ответ написан
    Комментировать
  • Flex align-items:stretch; не работает если высота больше высоты окна, как пофиксить?

    @htmleater
    Если правильно понял вопрос, то удивлять нечему: что заказывали, то и получили. Контейнер на 100% процентов вьюпорта - он так и показался, а за содержимое он не ответчик.
    Либо контейнеру высоту авто, либо итему с переполнением оверфлоу: хидден или авто. И будет счастье.
    Это как требовать от кармана, чтобы в него ведро фиников поместилось.
    Ответ написан
    9 комментариев
  • Дизайн сайта: графическая вёрстка (текста и картинок) и модульная сетка, как лучше?

    @htmleater
    Давайте не будем смешивать в одну кучу мягкое, белое и холодное.
    1. Рококко или барокко или готика отличаются только размерами и бантиками.
    В основе всего лежит только сетка, сиречь Золотое сечение. Это общий принцип как для книг/газет, так и для сайтов, архитектуры и всего остального. Т.е. даже хреново сделанное по сетке будет восприниматься лучше, чем безошибочное, но как бог на душу положил. Это закон!
    Опытный художник/дизайнер интуитивно раскидает всё по странице с допустимой ошибкой в 1-2 пиксела, если бы он пользовался сеткой. Но очень опытный после раскидки всё же проверит по сетке.
    2. Закон №2. Хороший дизайнер точно знает как надо по правилам и следует этому. Всё будет ровно, без просиров и взлётов.
    Очень хороший дизайнер знает все правила и умеет их грамотно нарушить, не ломая законы и осн. правила.
    3. Закон № 3. ВСЕ САЙТЫ - ЭТО БИЗНЕС! И только это роднит лендинги, визитки, магазины, промо, корпоративные, порталы и всё остальное.
    Но подходы ко всем должны быть разными, хотя и подчиняться общим правилам (Золотое сечение, поведение и ожидание пользователя, стандартам и пр.).
    4. В ваших примерах первые два - очень грамотно сделанные лендинги с учётом трендов (большими пространствами, флэтом, картиночными бекграундами ковер, по разному окрашенному вьюпорту и т.п.).
    В трёх остальных 2 лендинга-каталога. Не знаю как они смотрятся во вьюпорте, но думаю, что ни разу не мешают и не делают неудобными просмотр деталей.
    Ещё один - магазин. Вот здесь мог бы поспорить с автором, т.к. считаю, что на странице покупки товара уже нет места горизонтам и хорошему виду из окна, только стимулировать нажать кнопарь "Купить".
    5. По вашему вопросу: в нижний слой кидаете сетку (в зависимости от того какие пропорции выбрали), быстро накидываете прямоугольники в соответствии с вашими задумками. Это структура страницы.
    А потом начинаем заполнять эти блоки.
    Я делаю вообще по-другому (скорее всего оттого, что давно не начинающий): я не сажусь делать что-либо, пока у меня в голове не сложиться общая картинка, чего же я хочу получить. Потом делаю быстрый эскиз-концепт структуры в векторно программе (пользую для этого Корел, т.к. он несравненно для черчения лучше заточен).
    Показали.
    Опять же в векторе (т.к. на порядок быстрее, нежели в ФШ) добавляю детализацию: фоны, картинки, текстовые рыбы, мелочи. Сохраняю как картинку и сверху абсолютами довёрстываю активные элементы - меню, кнопки, селекты, попапы, аккордеоны, слайдеры и пр., всё то, чем заказчик сможет поиграться. Сохраняю как html, отправляю линк.
    После правок начинаю верстать в чистую.
    Заметьте, вообще без Фотошопа до последней стадии, когда нужна всякая мелочь, т.к. считаю использование ФШ для макетирования сайтов рудиментом.
    Ответ написан
    5 комментариев
  • Есть ли какие то хорошие решения или практики для верстки адаптивного интернет-магазина, в том числе для мобильных устройств?

    @htmleater
    Ну вот к примеру, недавно делал под OpenCard:
    overtune.ru от 320 пикс до бесконечности
    Ответ написан
    Комментировать
  • Какой должен быть порядок следования @media queris при формате "Сначала десктоп"?

    @htmleater
    Простая логика: Насколько больше можно реализовать на =>1440px, нежели на 320?
    Следовательно, наворачиваем всё, что задумали на десктопе, а потом с помощью медиа прописываем поведение на более малых величинах.
    Поверьте, что кол-во кода стилей при таком подходе будет существенно отличаться от того, когда идут от противного.
    В прпинципе, достаточно примерно такого:
    media screen and (min-width: 320px) and (max-width: 479px) {}
    media screen and (min-width: 480px) and (max-width: 639px) {}
    media screen and (min-width: 640px) and (max-width: 767px) {}
    media screen and (min-width: 768px) and (max-width: 779px) {}
    media screen and (min-width: 800px) and (max-width: 1023px) {}
    media screen and (min-width: 1200px) and (max-width: 1681px) {}

    но я часто добавлю ещё несколько значений, для которых существуют общие значения.

    И лучше на этапе разработки подключать отдельный файл стилей для медиа
    Ответ написан
    3 комментария
  • Какое направление лучше выбрать: дизайн или front end?

    @htmleater
    Лет так десять-двенадцать назад впервые встретил серьёзное обсуждение "Должен ли дизайнер уметь рисовать?"
    Был потрясён самой постановкой вопроса.
    Во времена "совка" дизайнеров готовили только в двух учебных заведениях на всю страну с конкурсом при поступлении 20-25 чел/место. Брали только после окончания художественных училищ. И далее рисунок, живопись, композиция продолжали существовать в полном объёме, разве что к ним прибавлялись инженерные дисциплины. И после окончания уч. заведений выпускники получали дипломы с записью "Художник-..."
    В начале 2000-х пришли к тому, что дизайнерами стали называть тех, кто исполнял обязанности тех самых художников, только не имея специального образования.
    И теперь встречный вопрос: насколько вырос уровень профессии после того, как в неё пришли "специалисты", решившие, что у них есть вкус и способности, вместо 9-10 лет жёсткого обучения?
    Ответ написан
    Комментировать
  • Что такое Less и Sass?

    @htmleater
    Сам когда-то таким вопросом озаботился. Никаких преимуществ для пишущего стили, кроме головной боли в заднице, не обнаружил.
    За довольно долгое время выяснил одно "преимущество" - разработчику это понятней.
    Хотя смоделировать ситуацию, когда разработчику нужно вникать в мой стиль мне так и не удалось.
    Ответ написан
    2 комментария
  • Где и как устроиться UX-проектировщиком (фриланс) на Axure Pro и востребована ли область?

    @htmleater
    Однозначно не имеет перспектив при условии фриланс, имхо!

    Специалиста UI/UX привлекают, как правило, только для больших и серьёзных проектов и, практически, попасть с улицы в такой проект шансов нет.

    Смоделируем ситуацию:
    1. В некоей компании (не IT) решили, что им кровь из носу требуется программа/сервис/сайт/копия интернета.
    Возможные решения: а) официально заказать у студии; б) поручить сыну бухгалтерши или найти одного фрилансера, который залудит говнопродукт под ключ. Во втором случае это делается для экономии средств и места, а также средств в этой схеме для специалиста UI/UX нет.
    2. Некая компания, у которой в штате есть разработчик(и) решила сделать программу/сервис/сайт/копию интернета.
    Возможные решения: а) сдирается понравившийся дизайн; б) фрилансер рисует картинку. Место для специалиста UI/UX также не прослеживается.
    Про компании, которые разрабатывают несколько крупных проектов, и у которых, наверняка, уже есть в штате и аналитики, и дизайнеры, и кодеры, и базовики, и тестеры я вообще не говорю.

    Выход:
    1. Выучить HTML, CSS, JS, PHP + освоить графические программы или найти себе напарника-дизайнера и радовать случайных заказчиков на ниве фриланса.
    2. Основать веб-студию, найти и нанять специалистов, постоянно искать заказчиков, конкурируя с другими веб-студиями и отбиваясь от демпингующих фрилансеров.
    Ответ написан
  • Как сделать правильное меню?

    @htmleater
    Проще и надёжнее всего сделать это средствами flexbox + поиграться свойствами text-overflow.
    Хотя я совсем не уверен, что решение с обрезанием текстов будет правильным. Ну, к примеру, какой толк от меню будет, если юзер на экране увидит: {icon} Список... + {checkbox} показы... + В нача...?
    К тому же, если следовать логике, то в селекте сортировки также нужна иконка, иначе он не воспринимается самостоятельным пунктом меню.
    В качестве здоровой критики позволю себе сделать замечание: в вашей вёрстке нарушено одно из базовых правил построения интерфейса - отсутствие группировки в меню согласно весу и предназначению пунктов.
    Т.е. у вас есть три пункта, которые действительно необходимы для сравнения (Список, фильтр, Сортировка). Абсолютно непонятно каким образом к этой группе примкнул Делёж ссылками, да и наличие в строке меню ссылки на статью тоже не бесспорен и даже выключка вправо дела не спасает.
    Ответ написан
  • Как сейчас создают дизайн для приложений?

    @htmleater
    Вот я как раз из тех, кто дизайнер умеющий хорошо верстать и немного адаптировать под себя скрипты.
    Терпеть не могу показывать статичные эскизы-картинки с бантиками заказчику, а потом на пальцах показывать, как это будет работать, поэтому обычно делаю имитирующие работу html- прототипы, чаще всего это картинка с наложенными сверху дивами абсолют всяческих селектов, спойлеров, меню с линками на другие страницы и пр. Заказчик любит потыцкать по таким элементам, а мне не жалко - пусть поиграется.
    Поскольку при таком подходе тройная работа в Фотошопе меня категорически не устраивает, то картинки рисую в векторе, чаще всего в Кореле + Инскейп, ибо Люстра под веб заточена хуже.
    Ответ написан
    Комментировать
  • Используете готовые решения, или делаете все с нуля?

    @htmleater
    Ну для этого существует 100500 фреймворков и практически для каждого шаблоны. Самый, наверное, распространённый - Bootstrap.
    Пробовал разные, но, в конце концов, вернулся к тому, что создание с нуля мне ближе и контролируемость процесса несоизмеримо выше + отсутствие ненужного барахла
    Ответ написан
    2 комментария