Меня зовут Андрей.
Некоторое время назад мне нужен был сайт, соответственно, нужно было придумать макет и я обратился к "специалистам", но никто не смог нарисовать тот макет, который понравился бы мне... Тогда я принял решение и обучился веб дизайну. Да, сначала было интересно, но позанимавшись около года этим делом понял, что мне это не интересно и некоторые из моих макетов, которые передавались дальше в вёрстку я не узнавал.
Тогда я начал обучаться html-вёрстке сайтов и... это меня затянуло: если сначала это было просто хобби, то дальше я хотел узнавать всё больше и больше. Но чем больше я узнавал, тем сильнее я понимал как мало я знаю и сколько всего ещё хочу узнать. Поэтому я постоянно продолжаю совершенствоваться в этом деле и понимаю, что нет предела совершенству!
Верстаю и простые лендинги, и сложные сайты типа магазинов, корпоративных сайтов, порталов, но берусь только за интересные для меня проекты. То есть если предложенный проект мне верстать будет неинтересно, то вряд ли я за него возьмусь. Насколько интересные макеты вы мне можете предложить?
Внезапно исчезать в неизвестном направлении и прекращать выходить на связь, если сроки горят, а работа по какой-то причине еле движется, в мои правила не входит.
Называя срок выполнения работы, я всегда закладываю некоторый запас по времени на случай возникновения ситуации, делающей невозможной выполнение работы к предполагаемой мною дате. Тем не менее, от ошибок никто не застрахован. Если пойму, что ошибся с оценкой сроков, либо не рассчитал свои возможности по каким-то иным параметрам, не стану тянуть до последнего момента и сразу сообщу вам об этом.
Любой шаблон можно сверстать множеством разных способов.
Я выбираю такой способ, который на мой взгляд, будет наиболее оптимальным для решения конкретной задачи.
Предпочитаю писать все с нуля под каждый конкретный проект, либо использовать свои собственные наработки. Фреймворки по типу Bootstrap не применяю ввиду того, что не вижу ровным счетом никакой необходимости в этом.
Проверяю корректность отображения шаблона в последних версиях следующих браузеров (Windows):
Internet Explorer оговаривается отдельно, поскольку даже создатели IE не считают его браузером.
- Google Chrome
К сожалению на ОС, отличных от Windows и Android, вживую проверить возможности обычно нет.
В общем случае, ориентируюсь на последние версии обозревателей. В устаревших версиях работоспособность не проверяю , если изначально не было оговорено иное.
Я не стремлюсь использовать на практике самые новые технологии вскоре после их выхода. Потому, как правило, выпущенные в последние лет пять браузеры поддерживают используемые мною методы работы и из отсутствия поддержки старых браузеров не следует, что страница будет нечитаема. Вероятны некоторые неточности в оформлении. Как минимум, возможность прочесть информацию и перейти по ссылкам, с максимальной долей вероятности, остается.
HTML-код является "правильным" с точки зрения W3C по стандарту xHTML 1.0 Strict, либо HTML5.
Максимально возможное использование каскадных таблиц стилей в реализации элементов дизайна.
Активное использование наследования, дочерних и соседних селекторов, а также псевдоэлементов и, как следствие, отсутствие большого количества мусора в виде лишних классов и снижение в HTML-коде количества разметки, вводимой только для создания элементов оформления.
Предпочитаю обходиться минимумом классов. Любимые многими методологии по типу БЭМ использую достаточно редко и лишь там, где это действительно имеет практический смысл с моей точки зрения. В большинстве случаев, с которыми я сталкиваюсь, применение этой методологии (в полной мере) практического смысла лишено и лишь приводит к замусориванию исходного кода страницы.
Так называемая "верстка слоями", "верстка div-ами". Компактность HTML кода. Минимально возможное количество разметки для достижения нужного результата. А, соответственно, несколько большая скорость загрузки страниц, простота понимания разметки для программиста при адаптации под CMS ну и, в конце концов, лучшее отношение поисковых систем к сайту.
Адаптивная верстка - тип верстки, при которой один и тот же сайт на экранах разной ширины может выглядеть совершенно по-разному, обеспечивая пользователю наиболее удобный вариант просмотра на его устройстве. Без разницы, что это - широкоформатный монитор, или мобильный телефон.
Есть возможность верстать и адаптивные шаблоны, если таковое требование содержится в техническом задании.
В этом случае вам необходимо предоставить мне PSD макеты , в которых будет отрисовано оформление сайта в нескольких вариантах - от мобильного телефона до десктопа.
Однако, можно обойтись и одним макетом десктопной версии . В этом случая я сделаю адаптивы на свое усмотрение, но вы должны учитывать, что моё видение адаптива и ваше могут не совпасть .
Неломаемость - это возможность изменения количества текста и/или иного содержимого блока там, где это нужно как в большую, так и в меньшую сторону без негативных последствий в виде выхода контента за пределы отведенного для него блока.
Иногда в случае отключения картинок в браузере получается ерунда, например, в виде белого текста на белом фоне, который прочесть без дополнительных действий в виде его выделения проблематично. Я стараюсь учитывать такие моменты при верстке.
Иногда применяю так называемые "спрайты" — изображения, где несколько мелких картинок объединены в одну большую для сокращения количества запросов к серверу и, соответственно, ускорения загрузки страницы, а также устранения некоторых косяков отображения при наличии определенного типа эффектов наведения.
В идеале, если к макету будут приложены все используемые в нем иконки в формате SVG. Обязательно изначально отрисованные в векторном редакторе, а не растр, "обернутый" в SVG. В особенности, это актуально для адаптивных сайтов - в этом случае можно обеспечить более четкую картинку на экранах с повышенной плотностью пикселей (например, на ретина дисплеях) и практически все современные мобильники.
Ищу необходимый баланс между "весом" изображения и качеством его отображения для растровых
изображений.
Векторные SVG также будут максимально очищены от мусора в коде изображений, который генерируют
графические редакторы.
Для "оживления" сайта в виде различных слайдеров, всплывающих окон, аккордеонов напдобие этого и т.д. и т.п. использую либо чистый JavaScript, либо осуществляю поиск необходимых скриптов среди готовых решений jQuery, их установку и настройку.
Возможно подключение нестандартных шрифтов. Если шрифт платный, важно, чтобы он был вами легально приобретен. В противном случае, настоятельно рекомендую осуществить замену на любой из бесплатных, допустим, с сервиса Google Fonts.
Тестирую верстку посредством сервиса PageSpeed Insights, оценивающего скорость загрузки сайта. Максимальных баллов не обещаю, но стараюсь вывести в зеленую зону, либо как можно ближе к ней.
В случае, если вы обнаружите какие-то ошибки в моей верстке, пишите, они будут исправлены в случае наличия технической возможнности. Если таковой возможности нет, будет предложен какой-то альтернативный вариант решения проблемы.
Для оценки объёма работ, мне нужен макет в формате любой графической программы (Photoshop, Figma и др.), на котором будет отражено, как должен выглядеть будущий сайт.
Все сайты в настоящее время желательно делать адаптивными, поэтому в идеале я выделяю как минимум три варианта дизайна под различные ширины:
Но это моё условное деление, поэтому строгой привязки к этим диапазонам нет.
Я понимаю, что не каждый из вас (касается обычных людей) готов заплатить дизайнеру дополнительно к десктопу ещё и за дополнительные версии (обычно дизайнеры берут за адаптивные версии +50% к стоимости десктопного дизайна), поэтому в случае отсутствия планшетной и мобильной версий, я адаптирую исходный макет самостоятельно под мЕньшие размеры. Однако, сразу предупреждаю, что моё видение адаптивных версий и ваше может отличаться, поэтому, если вы не предоставили мне планшетную и мобильную версии и вас не устроило моё видение, то правки оплачиваются дополнительно к оговоренной ранее цене.
В техническом задании (ТЗ) необходимо подробно описать функционал будущего сайта.
К примеру:
Если ТЗ отсутствует, ничего страшного, после ознакомления с макетом я сам уточню у вас некоторые моменты. Многие вещи для меня вполне очевидны и обычно не нуждаются в дополнительном описании.
Тем не менее, в случае отсутствия технического задания следует учесть, что если вы не заявите какое-либо требование к результату до начала работы, никаких претензий в связи с его неисполнением после выполнения работы я принимать не буду вследствие того, что не был о нем уведомлен до начала работы, потому наличие подробного технического задания, все-таки, желательно. Я, конечно же, не брошу вас и переделаю в соответствии с вашими пожеланиями, но это уже будет за дополнительную плату, сверх оговоренной ранее.
Это всё прикладывать необязательно, но желательно, поскольку это и мне и вам сэкономит кучу времени, которое я могу потратить на поиск тех или иных вещей.
Для оценки объёма работ, мне нужен макет в формате любой графической программы (Photoshop, Figma и др.), на котором будет отражено, как должен выглядеть будущий сайт.
Все сайты в настоящее время желательно делать адаптивными, поэтому в идеале я выделяю как минимум три варианта дизайна под различные ширины:
Но это моё условное деление, поэтому строгой привязки к этим диапазонам нет.
Я понимаю, что не каждый из вас (касается обычных людей) готов заплатить дизайнеру дополнительно к десктопу ещё и за дополнительные версии (обычно дизайнеры берут за адаптивные версии +50% к стоимости десктопного дизайна), поэтому в случае отсутствия планшетной и мобильной версий, я адаптирую исходный макет самостоятельно под мЕньшие размеры. Однако, сразу предупреждаю, что моё видение адаптивных версий и ваше может отличаться, поэтому, если вы не предоставили мне планшетную и мобильную версии и вас не устроило моё видение, то правки оплачиваются дополнительно к оговоренной ранее цене.
В техническом задании (ТЗ) необходимо подробно описать функционал будущего сайта.
К примеру:
Если ТЗ отсутствует, ничего страшного, после ознакомления с макетом я сам уточню у вас некоторые моменты. Многие вещи для меня вполне очевидны и обычно не нуждаются в дополнительном описании.
Тем не менее, в случае отсутствия технического задания следует учесть, что если вы не заявите какое-либо требование к результату до начала работы, никаких претензий в связи с его неисполнением после выполнения работы я принимать не буду вследствие того, что не был о нем уведомлен до начала работы, потому наличие подробного технического задания, все-таки, желательно. Я, конечно же, не брошу вас и переделаю в соответствии с вашими пожеланиями, но это уже будет за дополнительную плату, сверх оговоренной ранее.
Это всё прикладывать необязательно, но желательно, поскольку это и мне и вам сэкономит кучу времени, которое я могу потратить на поиск тех или иных вещей.