• Сколько вариантов дизайна сайта вы делаете?

    nikitanaz
    @nikitanaz
    UX Lead and DesignOps @EPAM
    Один.
    Рассказываю почему — прежде, чем нарисовать что-то в фотошопе, надо выяснить много всего, пройти несколько этапов, а именно:
    1. Аналитика — что за фирма, узнать чем живёт, как продаёт, что продаёт и пр.;
    2. Прототипирование — хоть на салфетке, но накидать примерную структуру будущего сайта. В идеале интерактивный прототип, если есть сложные формы и под подпись с утверждением;
    3. Только сейчас поднимаем тему о цветах и прочей лабуде — показываем примеры, разговариваем много и долго о будущем оформлении, выясняем чем руководствуется человек и как ему помочь в выборе;
    4. Рисуем концепт — мы уже не летаем в облаках, а рисуем обговоренный макет (трачу на это не более 7-8 часов);
    5. Вносим поправки и дорабатываем детали главной страницы (20+ часов на это закладываю);
    6. Рисуем внутренние (20+ часов).

    Не надо гадать что понравится, выясните что нужно. Говорите, обсуждайте, зачем эти игры в напёрстки?
    Доступно донёс?)
    Ответ написан
    Комментировать
  • Как создать вот такой текст именно как здесь?

    Immortal_pony
    @Immortal_pony Куратор тега JavaScript
    Комментировать
  • Как прeодолеть зону комфорта, стать фрилансером не обанкротившись?

    kumaxim
    @kumaxim
    Web-программист
    Для начал ответь сам себе на вопрос "А чем тебе неудобна текущая золотая клетка"? Можешь не писать здесь, но определись для себя.

    Далее нужно осознать, что фриланс - это подвид бизнеса. Есть книжка Р.Киосаки "Квадрант денежного потока". Там всех людей, работающих в экономике разделяют на 4 части:
    1. Р - наемные работники
    2. П - предприниматели
    3. Б - бизнес
    4. И - инвесторы

    Фриланс - это сегмент П. Ты работаешь один, возможно зарабатываешь больше чем работая по найму, но вот ты заболел, продуло тебя где-то, температура 38.5.... Сомневаюсь что ты из стали сделан и сможешь в таком состоянии писать код.
    Сегмент П очень хорошо охарактеризовал г-н Залогин из Локус Медиа. Он сказал примерно так: "Вы человек-велосипед - пока крутите педали - едите, как только перестали - упали"

    Переходя к твоему вопросу о выходе из зоны комфорта.
    Первое что рекомендую перед началом своего бизнеса - оплати все долги. Закрой ипотеку, погаси автокредит, все потребительские заемы и т.д. В случае если ты провалишься(первый блин, обычно, комом) по крайней мере ты со своей семьей не под мостом окажешься.
    Второе - содержание семьи. Никакие твои заработки не должны влиять на твою жену/ребенка. Твои родные, как минимум, должны иметь крышу над головой + еду на столе. Посчитай сколько ты платишь за комуналку + еду. Далее умножаешь эту сумму на 24 месяца. Это финансовая подушка твоей семьи.
    Третье - планирование. Бизнес без бизнес-плана - это не более чем хобби. С 16 лет стремился зарабатывать в сети. Продавал ссылки на sape.ru в 2008-2009, работал с трафиком в 2010-2012, продавал китайские безделушки с 2013-2014... Сейчас ушел в разработку одного SaaS-решения. Первые пару месяцев оптимизм из ушей хлещет, думаешь "Да все будет, да это фигня, преодалею...." Но вот начинаются черные полосы: ТИЦ сайта в планируемый апдейт не вырос до нужного значения, твой сайт на 9 месте в выдаче, вместо требуемой тебе 3-4 позиции, товар из Китая на таможне завис.... Да я могу до бесконечности перечислять проблемы, которые возникали у меня... А время - деньги: тебе нужно платить аренду, зарплату, рекламу, кредиты и т.д. Не платишь - начинается ругань, из Максима Александровича я сразу превращаюсь в мошенника, кидалу, сволочь... эх, во общем суть ты понял. Думай на 2 шага вперед, вот что я хочу сказать
    Четверное - не делай бизнес с полного нуля. Перт Осипов(проект Бизнес Молодость) в каком-то из видео говорил, что мы не ценим самое ценное что у нас есть, мы воспринимаем это как должное, когда для других людей это может быть сравни бриллианту среди кучи стекляшек. Вы не первый день работайте в ИТ по какой-то специализации, так ведите эту специализацию и дальше. Занимайтесь своим любимым делом.
    Пятое - не пытайтесь все делать сами. Когда я запустил свой самый первый интернет-магазин по Китайским безделушкам я все делал сам: рисовал дизайн, верстал его, настраивал рекламу, обзванивал клиентов, носил товар на почту.... В общем занимался вообще всем! Причем за всей этой рутиной я не видел, что мой сайт работает не эффективно, я упускаю из виду 20% горячих клиентов, 10% моих бандеролей исчезают в глубинах Почты России... Вы как первое лицо компании должны знать все процессы своего предприятия, иначе Вы не сможете им управлять, но Вам не нужно все процессы делать самому. Отдайте часть на аутсорс или делегируйте наемному сотруднику.
    Шестое - я на этом очень сильно обжегся около 3-х лет назад.... Ставьте своим сотрудникам четко достижимые KPI(ключевые показатели эффективности). Например, есть у меня форма заказ обратного звонка на сайте. Человек пишет туда своего Имя и номер телефона, после чего эти данные попадают в CRM. Для менеджеров, которые у меня обрабатывают вызовы клиентов один из KPI звучит так: перезвонить клиенту в течении 15 минут после поступления от него заявки, если она поступила в рабочее время. Причем все KPI Вы должны сформулировать максимально точно и подробно. Я сам с KPI работаю так: есть у человека базовый оклад и базовый набор KPI, которые ему необходимо выполнять. Если он их выполняет - получает оклад, выполняет лучше - получает оклад + премию. Причем оклад у меня сам небольшой, около 6 т.р., но нижняя з/п у меня примерно в 2,5 раза выше.

    Первые 4 пункта - это как мягко выйти, вторые два - как не свалиться.

    В целом о бизнесе в РФ могу сказать что его делать относительно легко. Достаточно просто делать что-то хорошо и по человечески относится к своим клиентам. Примерно за 1 год Вы нарабатываете определенную базу контактов(поставщики/партнеры/клиенты), которые Вас знают и доверяют Вам. А далее главное все это не растерять.

    Вам могут все Ваши родные/коллеги/друзья говорить "Да ты что, сейчас санкции, налоги, коррупция..." Поверьте, все это херня! Под прессом можно работать и зарабатывать, причем когда его снимут - Вы получите взрывной рост. А все эти отговорки про санкции, коррупцию, высокие налоги... Да просто у кого-то очко играет!
    Ответ написан
    14 комментариев
  • Почему использование !important крайне не желательно?

    Symphony
    @Symphony Куратор тега CSS
    Аналог из жизни, после экзамена:
    ----- проходные места (первые пять) -----
    • 1 место: Вася (90 баллов из 100 )
    • 2 место: Катя (85 баллов из 100)
    • 3 место: Сережа (25 баллов из 100) - !important - сын депутата
    • 4 место: Лена (80 баллов из 100)
    • 5 место: Андрей (75 баллов из 100)

    ----- не проходные места -----
    • 6 место: Женя (70 баллов из 100)
    • 7 место: Лера (65 баллов из 100)
    • 8 место: Гриша (60 баллов из 100)

    ...
    Ответ написан
    1 комментарий
  • Адаптивная верстка, как можно решить данную проблему?

    arizona
    @arizona
    а что я, собственно, здесь делаю?...
    Можно при изменении размеров экрана при достижении определенной величины фиксировать viewport
    if (screen.width <= 480) {
     document.getElementById("viewport").setAttribute("content", "width=480; initial-scale=0.5");
    }
    Ответ написан
    5 комментариев
  • Правильно ли переносить пиксельные размеры из фотошопа в вёрстку?

    Kirilchuk
    @Kirilchuk
    Вперед и вверх
    Если это psd, то ведь там все в свойствах каждого элемента можно посмотреть. Например: шрифт, размер шрифта, междусимвольный и междустрочный интервалы. Если просмотр невозможен, то необходимо либо редактировать psd (а заодно дизайнеру руки ломать), либо подгонять на глаз. Но это уже не будет perfect pixel версткой.
    Ответ написан
    Комментировать
  • Как правильно позиционировать input в форме обратной связи?

    L0k1
    @L0k1
    вот и растет поколение собирателей из конструкторов, совершенно не знающее азов

    ну дай этим инпутам display: inline-block, в чем трабла-то?
    Ответ написан
  • Что такое Less и Sass?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Лень двигатель прогресса. Хороший пример - принцип DRY - Don't repeat yourself. Я весьма подозреваю что вы стараетесь соблюдать этот принцип когда делаете макеты или чем вы там занимаетесь. Так же я весьма уверен что вы хотя бы пытались чуть автоматизировать рутину своей повседневной работы. Так же у вас могли быть ситуации когда вы переиспользовали какие-то элементы. Мало ли.

    Так вот... CSS это тупая таблица стилей. Селектор и стили, ничего сверх умного тут придумать нельзя. Лет 5-10 назад было довольно модно держать один мегажирный CSS файл на 10К+ строк и радоваться жизни внося все больше изменений и т.д. Соответственно даже если вы соблюдаете всякие правила модульной верстки и все такое, у вас возникает несколько проблем:
    • организация стилей, то есть держать все в одном файле не удобно особенно когда проект длится годами
    • Дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты которые можно реюзать. Так же у вас может появиться масса однообразных селекторов отличающихся лишь немного. При модульных подходах вложенности редко имеет место быть но все же имеет. Но не будем забывать что большинство фигачит селекторы просто так. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
    • Привязка размеров и параметров к другим стилям, например у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Да, в css3 появился calc для этого но это было относительно недавно и только с недавних пор можно почти без опаски использовать эту штуку.
    • Таблицы стилей, как и HTML ориентированы на удобный разбор этого добра машиной, но не человеком. Человек же существо ленивое и как-то вот лень лишний раз скобку поставить или точку с запятой. Просто лень.


    Есть так же хорошее правило, или идея если хотите.... Если код можно сгенерить - его лучше сгенерить. То есть для решения всех выше перечисленных проблем придумали препроцессоры. Они как бы были и раньше всех этих scss/less/stylus но как-то не решали всех проблем и т.д. Что в итоге было предложено (перечисляю в том же порядке что и в списке выше).

    • У CSS есть такая штука как @ import. Но не очень круто импортировать сотню стилей в продакшене. Стоит сделать так что бы все стили были склеены при сборке проекта. Эта идея в итоге развилась и если разработчик использует это дело правильно, можно зайти в любой файл со стилями и увидеть список всего от чего зависят эти стили. Какие стили подключаются и т.д. Причем один файл с зависимостями может быть подключен в нескольких файлах а препроцессор сам разберется как и куда все вставлять сгенерив максимально оптимизированный по структуре файл. А разработчик получил четкую структуру файлов и возможность быстро найти где что и от чего зависит.
    • С селекторами проблему предложили решить наиболее логичным вариантом. Если у нас есть вложенные селекторы, то имеет смысл определять их внутри блока этого селектора. Это существенно упрощает поддержку стилей. Так же для управления снипитами и прочим добавили миксины - эдакие параметризованные или нет функции которые выплевывают шматок CSS. До появления штук вроде autoprefixer это был единственный способ писать поддерживаемые стили, использовать плюшки CSS3 и вообще новые плюшки и не сойти с ума от префиксов. Префиксы это только пример, там могут быть самые разные штуки позволяющие грамотно производить реюз стилей
    • Проблему зависимостей значений стилей друг от друга решили... собственно самым очевидным способом - переменные. Это удобно, легко поддерживать и в умелых руках это мощный инструмент. Нужно поменять базовые цвета - не нужно лазить по 100500 блоков и править значения руками, можно поправить переменные и все будет хорошо.
    • Насколько я помню SCSS/LESS не стремились решить эту проблему. Какие-то решения образовывались сами собой с течением времени. В плане минимализма и выразительности пожалуй сейчас самая крутая штука это stylus.


    Что в итоге произошло. В один прекрасный момент какие-то там рубисты придумали SCSS (они вообще не любят все что не в стиле ruby в плане минимализма и выразительности). Затем чуваки подумали и сказали, SCSS это круто но почему-то они используют синтаксис знакомый именно Ruby разработчикам а не обычные для CSS конструкции. В итоге реализовали LESS, причем его уже реализовали на javascript, что с наличием node.js позволило это все добро еще на одной платформе собирать. А так как под эту платформу и так плодили препроцессоры оно удачно вписалось.

    Далее уже шли какие-то модификации дальнейшие, вроде того же Stylus, где синтаксис упростили просто до нельзя.

    Личное мнение. На сегодняшний день я не вижу смысла использовать чистый CSS хоть на малых хоть на больших проектах. Вот вообще никакого.
    Ответ написан
    3 комментария
  • Используете готовые решения, или делаете все с нуля?

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

    L0k1
    @L0k1
    input::-webkit-input-placeholder:after{
       content: '*';
       color: red;
    }


    в чем проблема собственно?
    Ответ написан
    6 комментариев
  • Как сделать input на всю оставшуюся ширину?

    e_s_l
    @e_s_l
    Full-stack web developer
    codepen.io/anon/pen/ZYpbEO

    fieldset span {
      display: table;
      width: 100%;
    }
    fieldset label,
    fieldset input {
      display: table-cell;
    }
    fieldset label {
      width: 1%;
      white-space: nowrap;
      padding-right: 10px;
    }
    fieldset input {
      width: 99%;
    }
    Ответ написан
    5 комментариев
  • Как бы вы сверстали такой текст?

    sarhov
    @sarhov
    sarhov.com
    может для табличных данных все таки стоит использовать таблицы ?

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

    @eee
    Это происходит из-за того, что фон подстраивается под ширину браузера при width: 100%. Укажите min-width: 960px для блоков с фоном.
    Ответ написан
    1 комментарий