Всем привет, друзья. Сегодня мы затронем очень важную тему - быстрая и правильная HTML верстка макетов. Углубимся в проблему, разберем все возможные способы ускорения верстки без потери в качестве на всех этапах. Данный вопрос интересует очень многих веб-разработчиков, интересовал и меня, когда я уже углублялся более серьезно в веб-разработку. Теперь, я с радостью поделюсь накопленными знаниями, хитростями и фишками скоростной верстки, чтобы вы, дорогие мои друзья, смогли заработать больше денег за единицу времени. Ведь именно скорость верстки влияет на то, какую колбасу вы будете кушать на завтрак. Обычно медленные веб-дизайнеры кушают на завтрак колбасу за 80 рублей из эмульсии шкурок, в то время, как более прозорливые и быстрые - хорошую докторскую за 900 рублей/кг. Конечно, есть много веб-дизайнеров, которые скажут - "Я выполняю работу вдумчиво и качественно, соответственно, медленно". Я не буду долго углубляться в психологический анализ, но это отговорки и самооправдание. Можно верстать очень быстро и качественно, это не картину маслом малевать.

Класснуть

Плюсануть

Запинить

Давайте проанализируем, какие этапы нам приходится выполнять в процессе верстки. Это позволит нам выявить основные проблемы и узкие места верстки, которые можно автоматизировать или ускорить. К слову сказать, ускорение HTML верстки, собственно и заключается в автоматизации (использование инструментов) и в ускорении (ваша скорость печати, предварительный анализ, сообразительность).

1. Анализ макетов и подготовка к верстке

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

1.1 Визуально разбейте макет на повторяющиеся части, определите сетку

Первое, что вам необходимо сделать - это открыть макет и проанализировать. Потратьте на это некоторое время, ознакомьтесь с повторяющимися частями макета . Например, если это Landing Page - повторяющиеся части - это секции, у которых, скорее всего, есть очень много одинаковых заголовков. Если это многостраничный сайт, то на всех страницах должна быть шапка и подвал. После визуального ознакомления с макетом (макетами), определите базовые переменные и параметры проекта, используя ваш препроцессор и подготовьте страницу с заготовками кода.

Вообще, очень важную роль в скорости работы играет использование CSS фреймворков. Не зависимо от того, стилизуете ли вы все элементы CSS фреймворка, например, Bootstrap или используете только сетку - вы ускоряетесь до скорости света при позиционировании элементов на странице и решении вопроса с адаптивностью сайта. Чаще всего, в наше нелегкое время, требуется именно адаптивная верстка. Если вы - веб-стдия, хотите выполнять проекты быстрее и порадовать ваших верстальщиков (если у вас такая система распределения обязанностей), научите веб-дизайнеров пользоваться сеткой. Недовольные возгласы о стандартизации веб-дизайна и ограничениях можно проигнорировать, мы не картины на Невском рисуем, а значит нужно использовать эффективные и быстрые инструменты для максимальной стандартизации. Не в ущерб качеству, конечно. Сетка будет не лишней точно и даст крепкую основу для верстки.

Если вы - самобытный верстальщик 80lvl и считаете, что сами сможете сделать сетку проекта лучше Bootstrap - разработайте вашу собственную сетку, протестируйте и подключите к вашему проекту. Проект без сетки - геморрой на долгие года, благоприятная и теплая среда для размножения HTML костылей в будущем.

1.2 Определите параметры проекта

Не зависимо от того, используете ли вы какой-либо CSS фреймворк, обязательно используйте CSS препроцессор. Это очень важно, так как позволит вам сэкономить время на написании CSS. Открывая любой свой выполненный проект я с ужасом наблюдаю, как много времени было потрачено на написание CSS, можно сказать, что 60-70% работы на этапе верстки - это написание CSS. И было бы логично данный этап автоматизировать. Я рекомендую использовать препроцессор Sass, но здесь вы можете выбрать любой препроцессор, который вам нравится. Если вам понравился Sass синтаксис, рекомендую ознакомиться с руководством Sass для самых маленьких , где я рассказываю о преимуществах использования препроцессора и привожу примеры, которые демонстрируют эффективность верстки с использованием Sass. Довольно трудно объяснить новичку преимущества использования препроцессора, но ребята, которые, как говорится, "уже хлебнули", понимают, на сколько это эффективный инструмент. Думаю, после выполения верстки 10-15 макетов к вам придет это понимание, а пока просто поверьте мне на слово - верстать с CSS препроцессором быстрее .

Создайте файл _typography.html , подключите к нему все необходимые стили и библиотеки. Это будет ваш базовый плацдарм с типовыми элементами. Исходя из данных открытого в графическом редакторе макета, определите такие параметры проекта, как:

1. Базовый шрифт. Определяется для селектора body . Это размер и шрифт текста на текстовых макетах сайта, например, на странице "Статья" или размер и шрифт текста наиболее часто повторяющихся текстовых блоков на макете Landing Page. Если не смогли определить размер, так как, например, все элементы одностраничника разные, напишите font-size: 16px, это среднее значение по больнице. Отобразите базовую верстку в _typography.html;
2. В файле _vars.sass определите переменную акцентного цвета и остальных явных цветов макета. Здесь и далее я буду приводить в пример и менно Sass, но вы можете без труда спроецировать информацию на ваш препроцессор. Постарайтесь задавать интуитивно понятные названия переменным и комментировать переменные, чтобы в дальнейшем не запутаться;
3. Пройдитесь по всем страницам проекта и определите заголовки от h1 до h6 (Размеры, капс/некапс, шрифт, цвет). Сделав это заранее, вы сэкономите около 10 минут вашего времени или 1 часа, с учетом времени на прокрастинацию. Также определите инверс для заголовков и цвета текта. Добавьте родительский класс .dark-section ко всем заголовкам и тегам типографики p, blockquote, ol, ul , если в вашем макете есть секции "светлым по черному". Отобразите базовую верстку типографики в _typography.html;
4. Также было бы полезно сразу определить типографику вашего проекта. Для тега body определите такой параметр, как line-height , обычно это 1.4 - 1.7 без указания единиц измерения. Расстояние между строк базового текста должно быть ориентировочно такое-же, как на макете в графическом редакторе. Здесь очень важную роль играет ваш глазомер, он очень сильно влияет на скорость вашей работы. Вам не придется измерять линейкой всё и вся, если ваш глазомер работает как надо. Данный скилл, к сожалению, развивается только с опытом и я не могу представить себе упражнения лучше, чем верстка, сам рабочий процесс.
5. Определите кнопки. В вашем макете, наверняка есть кнопки. Определите параметры самой большой кнопки и используйте CSS модификатор для получения кнопок другого размера. Не определяйте заранее отношение элементов к "внешнему миру", такие как float , только внешний вид. Единственное, опытным путем было выявлено, что чаще всего кнопки наиболее универсальны по отношении к внешним элементам, если определены, как display: inline-block по-умолчанию. Отобразите базовую верстку кнопок в _typography.html;
6. На ваше усмотрение, определите другие специфичные конкретно для вашего проекта параметры и повторяющиеся блоки заранее. Если вам кажется, что можете что-то забыть - комментируйте.

1.3 Ускоряем экспорт данных из макета

Раньше было такое понятие, как "Нарезка изображений" или "Нарезка макета". Сейчас такое определение не совсем корректно и более подойдет Экспорт данных из макета . Экспорт данных заключается в экспорте изображений и определении параметров для CSS.

Если вы пользователь Photoshop, вы можете использовать плагины для определения CSS свойств, такие, как CSS Hat. Отличная альтернатива подобным плагинам и инструментам - развитый глазомер. Когда у вас будет достаточный опыт, вы естественным образом откажетесь от подобных инструментов. Обратите внимание, что копируя абсолютно все CSS свойства из CSS Hat, вы будете верстать несколько быстрее, но потеряете в качестве и возможностях кастомизации. Дело в том, что CSS Hat не всегда правильно определяет отношение элементов к другим. Там где нужен padding, он определяет margin, там где нужна резиновая ширина или значение в процентах, он определяет фиксированные значения. Поэтому развивайте глазомер и храните базовые параметры в переменных.

Для быстрого экспорта картинок достаточно пользоваться новым Adobe Photoshop или Adobe Experience Design. У первого достаточно кликнуть на слое правой кнопкой мыши и вырать пункт Quick Export As PNG. В Adobe XD процесс экспорта изображений также прост и даже есть возможность экспорта нарисованных иконок в формат SVG. На данном этапе не слишком заморачивайтесь оптимизацией изображений, так как это задача для таск-менеджера. Об этом чуть позже.

Что касается иконок:

1. Если это сложные иконки или иконки-изображения, которые предположительно должны меняться контент-менеджером через админку сайта - экспортируйте их как png и подключайте в тег img, как обычные картинки;
2. Если это "фиксированные" иконки, которые ни под каким предлогом не будут изменены на сайте и контент-менеджеру их менять незачем (например, иконки телефонов, почты, карты и т.д.), можете объединить их в спрайт и использовать через CSS, задавая одной картинке разные координаты background-position . Данную операцию можно автоматизировать с помощью Gulp плагина css-sprite . Хотя можете сделать сами, если иконок немного, просто разбив направляющими поле на матрицу из квадратов заданной ширины и высоты. К Gulp вернемся чуть позже и подробнее рассмотрим важность таск менеджера в быстрой верстке. Только предварительно убедитесь, что дизайнер не использовал какой-либо шрифтовой айконпак. Если это так то достаточно будет подключить соответствующий айконпак к проекту;
3. Если это одноцветные простые иконки, также убедитесь, что дизайнер не использовал шрифтовой айконпак. Если это так то подключите соответствующий айконпак к проекту. Чаще всего используется шрифтовой айконпак Font Awesome. Если иконки самобытные - переведите их в вектор и создайте свой шрифтовой айконпак. У нас есть урок на эту тему: Создание шрифтового Icon Pack с использованием сервиса Fontello .

2. Скорость печати

После того, как вы подготовили все материалы, экспортировали картинки, сделали шрифтовой Icon Pack проекта, подготовили все иконки, настроили проект, можно приступать к верстке. Думаю, очевидно, что если вы хорошо знаете теги и CSS свойства, узким местом в скорости может быть только скорость набора символов на клавиатуре в процессе HTML верстки и написания CSS свойств. Для прокачки данного скилла более, чем достаточно освоить какой-либо метод быстрого набора символов на клавиатуре. Методов много и эта информация легко гуглится. Занимайтесь, практикуйтесь и все получится. Здесь также немаловажную роль играет практика именно верстки.

Мне как-то написал начинающий веб-разработчик, который сетовал на то, что его мечты о легком заработке не оправдались и за верстку макета Landing Page на биржах фриланса ему предлагают 2000 руб. Он отправил мне примерный макет. Я спросил, сколько бы он взял за этот макет денег, на что бедолага ответил мне - 10-12 т.р. Если бы мне предлагали на верстку LP за 2000, когда у меня была небольшая пригоршня опыта, как у этого парня, я искренне был бы рад таким возможностям. Конечно, сейчас верстка в моем исполнении стоит несколько дороже этой цифры, но если бы я брал такие проекты за 2т.р, с текущей скорость работы я без проблем поднимал бы 4-5 т.р в день без потери в качестве, работая по 7 часов в день. Не густо, но уже не плохо. Вообще, признаюсь вам, друзья, меня подбешивают нытики, у которых все плохо, у таких всегда будет куча отговорок и бублик в кармане. Поэтому оставим эту историю и двигаемся дальше к нашей цели верстать быстро и качественно.

3. Используйте Emmet и/или Jade

Я люблю Emmet. Благодаря этой полезной штуке, моя работа в 10 раз быстрее, чем без нее. Без лишних слов, просто посмотрите урок:

Класснуть

Плюсануть

Запинить

Также, вы можете использовать Jade или любой другой HTML препроцессор. Штука тоже удобная и классная, но для моих задач хватает Emmet с головой. Вангую много недовольных поклонников Jade, но несмотря на все преимущества и фишки, include для меня не многим проще вставки шапки Ctrl+V, а репит миксина не легче того-же Ctrl+Shift+D. Теоритически, если подумать, изменив шаблон миксина, можно не заморачиваться с переверсткой однотипных накопированных элементов, но таких ошибок я не допускаю, да и крупные проекты не по моей части, поэтому, надобности в ускорении подобных моментов нет. Пробуйте, друзья, экспериментируйте, может вам понравится такой инструмент:-)

4. Используйте ваши наработки

Используйте Github Gist для сохранения ваших наработок, кусов кода, блоков и даже целых секций. Всего того, что вам может оперативно пригодиться в процессе верстки. У нас есть урок по настройке Github Gist в редакторе Sublime Text для быстрого доступа и поиска нужного гиста: урок на YouTube с таймкодом на подключении Gist и отдельный урок по Gist .

5. Используйте таск-менеджер

Использование таск менеджера, например, Gulp - важнейший элемент быстрой работы над версткой. С помощью таск-менеджера вы сможете автоматизировать такие моменты, как: создание рабочего веб-сервера с автообновлением страницы при сохранении в редакторе кода; удобное использование препроцессоров; автоматизация рутиных задач, таких, как оптимизация изображений, сжатие CSS, JS, если нужно, то и HTML и многие другие задачи.

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

6. Изучайте jQuery

Если бы данное руководство было написано для Front-End разработчиков, все сводилось бы к изучению JavaScript и его фреймворков, таких, как Angular. Но я не силен во Front-End, как и в программировании в целом, моя стихия - веб-дизайн, поэтому пусть настоящий глубокий фронтенд остается на закуску акулам прграммирования. Чаще в процессе верстки приходится решать несколько другие задачи. А именно: анимация каких-либо блоков, настройка сортинга в таблицах, создание табов и аккордеонов, подключение библиотек, определения фоллбека для SVG файлов, определение параметров документа для несложных операций и прочие мелкие скриптовые работы. Для этих целей нет лучше библиотеки, чем любимой всеми верстальщиками jQuery. Она проста, элегантна и обрасла огромным количеством плагинов, которые решают практически все необходимые задачи маленьких и средних проектов.

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

jQuery не просто так был вынесен в отдельный пункт. Чаще всего узким местом верстки по времени являются многочасовые затупы над скриптами проекта и чем лучше вы разбираетесь в jQuery, тем быстрее выполняете проекты без изнурительного поиска решений на Stack Overflow.

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

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

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

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;

Сразу отвечу на самые ожидаемые и каверзные вопросы по верстке:

1. Adobe Muse и подобные инструменты? - да, можно использовать и это будет быстро. Если только ваш проект не крупнее односложного одностраничника, который не нуждается в развитии, продвижении и системе управления.

2. Как быть с Perfect Pixel? - я искренне уверен, что Responsive Design и Perfect Pixel понятия разные и даже не совместимые. Я, как веб-дизайнер, конечно, обладаю некоторыми чертами перфекциониста, но если идея хороша, она будет блистать и в Responsive верстке, если идея, простите за выражение, говно, то хоть сколько ее не полируй и подгоняй по пикселам, она так и останется неработающим высером. Поэтому включите ваш дар убеждения, запаситесь аргументами и проведите беседу с вашим клиентом относительно бесполезности такого излишнего перфекционизма.

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

4. Где кончается грань верстки и начинается Front-End , это разве не одно и то же? - все просто, если стоит задача разработать сложный интерактивный интерфейс какого-либо сервиса или веб-приложения, где нужна тесная работа с базой данных - это Front-End. Такие уникальные проекты выходят за рамки области компетенции и бюджета одного фрилансера, чаще всего подобные задачи ставятся команде разработчиков и подходы к таким проектам совершенно другие.

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

Определение верстки сайтов

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

Если говорить простым языком, то это процесс создания веб-страниц с помощью специальных языков, которые как раз для этого и предназначены. Для этого дела используется HTML, CSS и JavaScript. Последний является одним из языков программирования и позволяет писать веб-сценарии, в первые два позволяют полностью сформировать страницы будущего сайта, разместив на них нужное содержание и оформив его должным образом. На самом деле, ничего сложного в этом нет, как думают некоторые.

HTML – это язык разметки гипертекста.

С его помощью формируется сама структура, каркас сайта. Соответственно, без HTML верстка просто невозможна!

Далее нам нужно разобраться с тем, что представляет собой второй язык – CSS. Расшифровывается эта аббревиатура так – cascade style sheets. То есть, каскадные таблицы стилей. Если вы новичок, то едва ли что-то сейчас поняли. Но давайте попробуем объяснить простыми словами. CSS – это все, что связано с оформлением страницы.

Например, в HTML мы можем создать абзацы, таблицы, блоки, да и все, что захотим. Но все это будет выглядеть очень невзрачно. Для оформления каркаса и создания по-настоящему красивого шаблона нам нужен CSS. Итак, вопрос: “Что такое верстка сайта?”, я надеюсь, у вас отпал. По крайней мере, вам стало понятней.

Ну а что такое JavaScript? “Почему вы о нем ничего не рассказываете?”, — справедливо спросите вы. Как уже говорилось ранее, это язык программирования и он очень активно применяется в верстке. Наверняка вы не раз бывали на сайтах, где при определенных действиях происходят определенные вещи. Например, при клике на меню вылазит дополнительный блок, наведение на элемент меняет его внешний вид или при переключении кнопок меняется содержимое, показываемое в каком-то контейнере. Все это очень полезные вещи, но реализовать их на чистом HTML и CSS невозможно.

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

Суть верстки

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

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

Как создается сайт?

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

Некоторые могут делать это прямо в блокноте, но это, пожалуй, очень трудный и неудобный вариант. Лучше использовать специальные программы. Их достаточно много. Например, Notepad++, SublimeText, DreamVeawer и другие. Подробно мы их рассматривать не будем, но функционал этих программ позволяет значительно ускорить процесс написания кода даже для начинающего. В некоторых редакторах есть подсветка тегов, стилей, что очень удобно.

Рис1. Верстка сайта в Notepad++

Макет имеем, программа есть. Можно приступать к работе.

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

Какие бывают виды верстки?

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

Как именно? Во-первых, есть фиксированная верстка. Это когда размеры сайта жестко прописываются в стилях (как правило, в пикселах). Таким образом, при изменении размеров окна, страница никак не меняется, ее размеры остаются прежними. Это означает, что на маленьких экранах появится полоса прокрутки, а на больших все может смотреться мелко. Это основной минус фиксированных размеров. Из плюсов можно отметить простоту такого способа. Техника фиксированной верстки намного проще других.

Рис. 2. Горизонтальный скролл при уменьшении окна – явный признак фиксированных размеров

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

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

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

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

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

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