Вёрстка

Простой пример адаптивной вёрстки

Полный пример на Codepen

Ниже распишу только ключевые моменты адаптивности

Начальные стили десктоп вёрстки при ширине 1200px

При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений

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

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

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

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

Работа дизайнера, верстальщика и фронт-энд-программиста

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

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

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

После того как рисунок закончен в дело вступает верстальщик. Сайт – это картинка в движении. Практически каждое изображение работает.

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

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

Я уже писал о популярных курсах по программированию для начинающих. Самое главное понять схему написания. Самих тегов не так много. Выучиться не так уж сложно.

Если вы ничего не понимая посмотрите на код сайта, то можете испугаться и ужаснуться, но в нем есть четкая система. Теги повторяются. Многие из них не случайный набор букв. Head, body, color. Всем знакомы эти слова.

Если бы сайт находился просто в папках, то добавление статей было бы очень трудоемким процессом. С ним бы справился только сам программист. Зачем ему на плечи такая сложность? Нужна панель управления.

Существуют разные системы. Некоторые пользуются готовыми CMS, такими как wordpress, joomla, Битрикс и так далее. Другие создают свой движок. Конечно, чтобы его написать и нужен программист. Не со всеми задачами может справиться верстальщик.

Когда заказчик или руководитель проекта хочет создать какую-то уникальную галерею с картинками или видео, калькулятор товаров или систему заказов, то для этого опять же вызывают программиста, который создал бы свой скрипт, написал программу. Профессия этого человека и называется фронт энд программист. То есть тот, «кто доведет дело до конца».

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

Наверное, любого здравомыслящего человека будет интересовать вопрос: какой вариант лучше? Ответить на этот вопрос очень сложно. Все зависит от рук мастера.

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

В конце концов все книги выглядят примерно одинаково, но это же не мешает читателям.

Необходимые навыки и качества

Специалист по верстке должен обладать следующими навыками:

• язык разметки HTML;
• знание PHP, MySQL;
• знание Adobe Illustrator, CorelDraw;
• оптимизация под поисковые системы;
• умение работать с CMS и ее API;
• знание основы AJAX, jQuery, JavaScript;
• семантическая верстка, умение располагать фрагменты кода на странице, правильное заполнение  SEO-тегов title, description,
• знание Firefox-плагинов CSS-процессоров.

Из обязательных личных качеств, которыми должен обладать специалист по верстке, работодатели выделяют следующие:

• высокая концентрация внимания;
• пунктуальность;
• целеустремленность;
• ответственность;
• инициативность;
• умение работать в команде;
• терпение (нередко приходится править проект до 10 раз);
• усидчивость;
• умение строго выполнять поставленную задачу;
• заинтересованность в конечном результате;
• стремление к саморазвитию;
• исполнительность;
• оперативность в работе;
• коммуникабельность.

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

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

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

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

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

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

Также важно работать, опираясь на современные тенденции. Настоящий мастер в области верстки всегда отслеживает новинки в сфере фронтенд-разработок. Это помогает пополнить интеллектуальный багаж, создать необычные и современные верстки, которые понравятся заказчикам.

Область просмотра (viewport)

Область просмотра (viewport) — основная часть браузера, где отображается контент.

Чтобы @media запросы корректно работали на мобильных устройствах необходимо добавить специальный мета тег

Мета тег отвечает за размер области просмотра и масштаб страницы на мобильных устройствах

Мета тег размещаем в HTML файле в секции

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

— область просмотра (viewport) будет равняться ширине мобильного устройства

— устанавливает масштаб страницы при первой загрузке

Этих свойств достаточно, чтобы @media запросы корректно работали на мобильных устройствах

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

— устанавливает максимально возможное значение масштабирования

— устанавливает минимально возможное значение масштабирования

— запрещает масштабирование

— исправляет отображение области просмотра (viewport) в браузере Safari на iOS

Основные подходы к верстке сайта

Предположим, что существуют два блока, стоящих рядом. Существует несколько основных подходов к вёрстке сайта:

• Фиксированная верстка. При изменении размера окна браузера блоки не поменяют свою ширину, а на мониторах с низким разрешением экрана появится полоса прокрутки;
• Резиновая верстка. В зависимости от размера окна браузера, блоки изменят свою ширину;
• Адаптивная верстка. Воплощается в жизнь благодаря различным скриптам и заточена под определённые разрешения (320, 768, 1024 и т.д.). Изменение размера происходит рывками после того, как определённый уровень достигнут;
• Отзывчивая верстка. Представляет собой слияние адаптивной и резиновой верстки. Является самой сложной с технической точки зрения, но в то же время самой эффективной;
• Версия сайта для мобильных устройств. Фактически является созданием другого сайта с другим дизайном, версткой и URL адресом.

Кроме подходов, существуют ещё и различные типы вёрстки.

Методы верстки сайта

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

1. Блочная верстка. Это основной метод в среде веб – разработчиков. В блочной верстке основа документа состоит из тега DIV. Большое преимущество этого метода в концепции семантической верстки.

Объясняем: в HTML существует множество тегов, и каждый предназначен для какой-то определенной цели. Например, тег NAV нужен для блока с навигацией, а тег ARTICLE отвечает за содержание новости.

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

2. Табличная верстка или пережиток прошлого. В 2000 была основным методом.

Преимущество табличной верстки в простоте исполнения. В свое время много ребят программистов учились создавать web-страницы с помощью этого метода.

Недостатки: огромная структура, большой кусок кода (а это влияет на скорость загрузки страницы) и сложность в обслуживании. Захотите поменять блоки местами, придется пострадать.

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

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

Исчезнет ли профессия в будущем

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

Еще одна проблема, с которой мы столкнемся в будущем, – появление программы, которая будет конвертировать макеты PSD в HTML. Но даже это не повод опускать руки. Вы можете начать с верстки. Немножко поработаете, пройдете обучение и станете программистом с зарплатой в несколько раз больше.

Имейте в виду, что знать только HTML и CSS невыгодно. Простую верстку можно сделать в конструкторе сайтов вроде Тильды без специалиста. Советую дополнительно освоить jQuery, если хотите быть востребованным.

Также я советую вам изучить дизайн. Так вам будет легче работать на себя, т. к. не придется искать фрилансера для разработки макетов. В Америке популярны дизайнеры-верстальщики. Они получают в разы больше. У нас тоже ищут таких специалистов. В объявлениях часто встречаются вакансии веб-дизайнера со знанием верстки.

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

Что должен знать и уметь верстальщик сайтов?

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

Знать язык разметки HTML и CSS, а также HTML-фреймворки. Самый популярный из них – Bootstrap. Его рекомендую осваивать в первую очередь.

Уметь верстать блоками (есть еще табличная верстка, но она устарела).

Верстальщик должен разбираться в языке программирования JavaScript

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

Знать, что такое кроссбраузерная верстка, адаптивная верстка

Умение верстать на уровне Pixel Perfect – это дополнительный плюс.

Знать, как выполнять основные операции в Photoshop и Figma. Разбираться, что такое слои, как вырезать картинки, фон и т.д.

Знание PHP будет плюсом.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Шаблон сайта</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
</body>
</html>

Сохраните файл. Все эти теги мы уже давно изучили и в пояснении они не нуждаются. Кодом выше мы создали основу HTML-страницы, теперь нужно разделить её на блоки — указать структуру документа, что за чем в нём будет идти.

Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:

2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер <body> вставьте следующий код):

<div id="content">
<!-- Шапка -->
	<div id="header">
	  <div id="menu">
	  </div>
	  <div id="logo">
	  </div>
	</div>
<!-- Конец шапки -->
<!-- Основной блок -->
	<div id="right">
	</div>
<!-- Конец основного блока -->
<!-- Левая панель -->
	<div id="left">
	<div>
<!-- Конец левой панели -->
<!-- Ноги сайта -->
	<div id="footer">
	</div>
<!-- Конец -->
</div>

В браузере страница будет по-прежнему пустой, но структуру документа уже можно понять, она готова.

Сколько зарабатывает верстальщик

В офисе вы будете стабильно получать зарплату вне зависимости от того, сколько сделали. По данным сайта trud.com, профессионалы в среднем получают 43 000 руб., а в Москве даже немножко больше – 53 000 руб.

Если такие зарплаты не устраивают, то есть выход. Например, можно податься на зарубежные сайты фриланса или стать программистом Java с доходом более 140 000 рублей в месяц.

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

Еще я выяснила, сколько получает хороший верстальщик на удаленке:

• корректировка одностраничника на Тильде – 1 500 руб.;
• скопировать сайт на 1С-Битрикс – 34 000 руб.;
• исправить небольшой баг на странице – 500 руб.;
• добавить кнопку “Купить” – 500 руб.;
• настроить оформление электронного письма – 2 170 руб.;
• правка верстки на WordPress – 2 000 руб.;
• верстка многостраничного сайта – 7 000 руб. и выше.

Увы, статистика ru.indeed.com говорит, что доход начинающего специалиста без портфолио колеблется в пределах 7 500 рублей. Но приблизительно за 3 года можно дорасти до специалиста с окладом 90 000 руб. в месяц.

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Адаптивная верстка сайта: что это такое

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

Многие сталкиваются с такой проблемой, когда заходишь на какой-либо ресурс с мобильного устройства дизайн и функционал сайта превращается в ужасно неудобный для использования. Если клиенту нужно заказать СЕО-продвижение сайтов, а он сталкивается с такой проблемой, естественно, он сразу захочет закрыть такой сайт и перейти на более удобную площадку. Всё это являет собой большую проблему, ведь посетители – это самый ценный ресурс, для которого и создается сам сайт.

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

Инструменты верстальщика

Чаще верстальщик работает только с кодом. Хотя многие советуют верстальщику освоить графические редакторы — Photoshop и другие, это не принципиально. В качественных проектах графика изготавливается дизайнерами и передаётся в готовом для интеграции виде верстальщикам, которым остаётся её разместить в нужных местах.

То же касается и прототипов. Хорошо, когда верстальщик может сам покрутить схему в инструменте прототипирования и заглянуть внутрь графики через Photoshop, но серьёзные студии строго разделяют обязанности сотрудников.

Наиболее релевантное ПО для верстальщика — редакторы кода, такие как:

• Notepad++ (наименее предпочтительный вариант, хотя и временами использующийся).
• SublimeText.
• Webstorm — пожалуй, лучший из существующих.

Верстать может любой дурак?

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

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

Для верстки не требуется столько умственных способностей, как для программирования — это так. Но есть много других особенностей, которые необходимы.

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

Начать верстать — это просто. Но хорошо подумайте, надо ли оно вам. Работа верстальщика не относится к интересным. Такая работа требует большой дотошности и усидчивости. Часто такая деятельность не благодарна ни по деньгам, ни по отношению со стороны окружающих. Так что заставить себя работать в этой сфере, не бросить, а научиться делать действительно качественно — вот в чем сложность.

Просто скриншот с ноутбука верстальщика:

Лично мне верстка подходит, потому что я придирчива к мелочам и усидчива. Я люблю делать интересные сложные проекты по верстке, которые нуждаются в особом подходе. Мне приятно наблюдать, как графический макет становится сайтом. Но верстать однотипные макеты или макеты, сделанные через одно место — это ужасно!

Выбрать верстку в качестве основной профессии не есть лучшим решением для большинства людей. Уверена, что кому-то даже проще заниматься тем же программированием. Да и не обязательно влезать в то дело, которое не по душе. Я удивлена, что так многие нынче желают пролезть в IT и, как следствие, начинают верстать, ведь занятие это не из веселых.

В общем, меня занесло немного не в ту сторону. Просто многие задаются вопросом «Что такое верстка сайтов?», как раз в размышлениях заняться ею. Надеюсь, что у меня получилось объяснить нюансы профессии верстальщика, и что вы не будете зря тратить свое время на обучение, если вам такое не близко.

Валидная вёрстка

Валидность вёрстки — широкое понятие, означающее соответствие кода стандарту W3C и корректное отображение сайта на пользовательских устройствах.

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

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

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

Как минимум, в HTML-коде элементы должны содержаться в соответствующих разделах.

Должен быть прописан <!Doctype html>, теги:

• <html>;
• <head>;
• <body>

Гайд для веб-дизайнеров по подготовке макетов для быстрой верстки

В принципе, многое описано в статье «Как стать крутым веб-дизайнером», но здесь я приведу основные пункты именно по подготовке макетов к верстке и правильной организации работы, которые, соответственно, ускорят работу в целом:

1. Не увеличивайте фотографию больше ее оригинального размера — в верстке такое фото будет некачественным;
2. Не масштабируйте графику непропорционально — такой дефект версткой точно не исправить ;-);
3. Не применяйте режимы наложения слоев, отличные от обычного (Normal) — в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе;
4. Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения — только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится;
5. Не масштабируйте фотографию до конвертации в смарт объект — верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте;
6. Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект — не забывайте: «Каждый раз, загружая изображение для сайта и скругляя его вручную в фотошопе, где-то в мире плачет один котенок…»;
7. Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки;
8. В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер — предусмотрите возможнсть качественной конвертации или экспорта иконок в SVG;
9. Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке;
10. Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки;
11. Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но я рекомендую использовать систему сеток Bootstrap. Ширину контента можно кастомиировать от оригинальной ширины Bootstrap сетки, для этого можно использовать плагины для создания сеток в случае, если вы пользователь Photoshop;

Профессия: верстальщик сайтов

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

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

Верстальщик – это специалист в области web-разработки. Его главная задача перенос макета (нарисованного дизайнером) из картинки в HTML формат. Т.е превратить картинку в код.

Верстальщик обладает знанием HTML, CSS, а также полноценным языком программирования JavaScript

Последнее не столь важно, ведь многие начинают работать в сфере web-разработки только с первыми двумя навыками, а JS учат попутно

Что в итоге

Результат вёрстки — макет книги: электронный образ будущего печатного издания, полностью подготовленного для печати. Как правило, это PDF-файл. Перед типографией макет обязательно вычитывает корректор, проверяя правку, оглавление, подписи под иллюстрациями, правильность переносов, отсутствие висячих строк — техническую грамотность сверстанного макета.  Кроме макета книги необходим ещё и макет обложки.

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