Как сделать адаптивную css верстку новичку

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

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

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

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

Сразу хочу предупредить, что это будет не одна статья, а серия статьей, и это только вступительная часть.

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

Но есть рекомендации, которые сделают твою страницу максимально продаваемой – либо приносящей прибыль, если тебе так легче понять, о чем я.

Рекомендации к адаптивной верстке

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

Верстай сначала мобильную часть, а потом делай переход на десктоп

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

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

Правда в этом есть свои сложности, но если привыкнуть, то в этом есть много и преимуществ.

Относительные размеры очень важны, выдели как можно больше времени, чтобы разобраться

Я и сам привык использовать на все две вещи – px и %, но это было до определенного момента. Позже я начал использовать и другие – каждый по правде имеет свою цель. Очень крутой находкой для меня оказалось vw и vh. Особенно когда есть цель сделать адаптивный первый экран на лендинг странице. В общем рекомендация такая: vw, vh, rem, em, %, px – научись их использовать и жить будет проще.

Я даже могу посоветовать интересную книгу на эту тему «CSS для профи» Кита Гранта – мало того, что популярно объяснено, примеры и код прилагается к книге, то есть можно попробовать и даже поэкспериментировать.

Grid layout и FlexBox это будущее, которому пока нет аналогов

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

Если и пользовать табличную вёрстку, то использовать ее только в верстке Email писем.  Блочную верстку я использую иногда в своих проектах, если нужно добавить небольшой блок ну или накидать какую-то небольшую и маловажную страничку.

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

Но могу сказать уверенно, что даже так, блочная верстка может иметь больше кода чем Grid или Flexbox, но решать тебе.

Если твой выбор Flexbox и Grid верстка, то скажу так – ты не проиграл и не проиграешь. А все потому, что они дают возможность лучше и проще управлять блоками сайта, даже если нужно переместить его куда-то, где это можно было сделать лишь c помощью JavaScript. Ниже будет ссылочка, где я максимально подробно рассказываю про это.

Делай страницу максимально легкой

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

Много кода = больше вес страницы. Много css и html просто захламляют страницу. То есть уже на этапе разработки нужно думать, как можно сократить само количество. Потому от табличной верстки и отказались в прошлом – она генерировала ну капец сколько лишнего кода.

Некоторые вещи можно сделать без js. На этой теме я даже хотел как-то сделать целую рубрику. Сегодня css3 вместе с html5 позволяет во многих случаях обойтись без js кода. Тот же Grid Layout либо создание анимации. Все это можно сделать без JavaScript, с минимальным количеством css кода.

Не используй Base64 для картинок. Я думал, что это крутая тема одно время. Оно якобы сокращает количество запросов к файловой системе, что ускоряет сайт. Но как оказалось, появляется другая проблема. Время, потраченное браузером на разбор строки.

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

Один файл CSS на все стили, для этого пользуй scss, less препроцессоры. Да, я всегда советую выводить css только там, где он нужен, но даже так, с scss можно сделать несколько файлов и импортов в них и после компиляции scss получается один большой файл. Если же делать import внутри css и так объединять файлы, то в итоге это плохо скажется на загрузке сайта. Кроме того, препроцессоры имеют много интересных вещей, типа миксины, переменные и даже условные операторы.

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

Изучи основы SEO

Если ты продвигаешь сайт — это важно для тебя. Очевидно правильно? Если ты владелец сайта, и делаешь для себя крутую верстку, то тебе важно чтобы сайт был в топе. Верстка влияет на позиции в топе, точнее это один из факторов Количество тегов и подключенных картинок и файлов типа css, js, fonts, влияет на скорость загрузки сайта.

А вот правильно поставленные теги, то есть нужные теги в нужных местах, решают не то, чтобы все, но многое. H1, текст ближе к началу страницы, Title и мета теги, и т.д.

изучи основы seo

Используй HTML теги SECTION, HEADER, MAIN, ARTICLE. Конечно же, я пересчитал не все, но есть целая серия таких тегов, которые дают больше понимания что это за блок, как для верстальщиков, так и для поисковых систем.

То есть еще на начале индексации страницы, поисковик будет понимать, что это статья, или главная страница, либо просто какая-то секция с каким-то текстом.

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

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

Постоянно изучай JavaScript (JS)

Много крутых вещей делается на js. Не знаю таких сайтов, которые не используют JavaScript, разве что лет 10-15 назад в 2000-2005 году. Слайдеры, анимация, параллакс, Ajax запросы, это все JS. Много готового можно найти уже на просторах интернета, но чаще всего бывают случаи, когда хочется что-то особенное, и вот тут лучше уметь сделать самому.

И опять-таки, это все влияет на ваш средний чек.

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

Если обычное приложение, построенное на WordPress, будет каждый раз загружать страницу полностью, то SPA (single page application), загружает страницу кусочками, чем значительно ускоряет работу сайта.

Для меня всегда было загадкой, как поисковые системы видят такие сайты, но все оказалось проще чем я думал. В приложении можно использовать интересную фишку называется ssr (server-side rendering), и все. Пользователь имеет быстрый сайт, который работает почти мгновенно, а поисковая система достаточно оптимизированный код.

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

И с будущем я планирую создать целую серию уроков по разработке приложений на Angular – твоя поддержка только ускорит этот процесс, если тебе это интересно.

Не поленись немного научиться программировать на других языках программирования

Лишним не будет это точно. Я не скрываю, что я начинал с копирайтера, потом перешел в SEO, потом подумал, мол давай-ка я все-таки буду по специальности программистом, и вот когда это дело меня добило, я решил верстать.

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

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

Еще раз оговорюсь, что многие верстальщики иногда могут программировать больше даже чем Backend программист, особенно если ты все-таки перешел на React или Angular, а может все-таки ты пишешь свои какие-то модули.

Я помню, когда тема с JS Фреймворками еще не была такой кричащей, то в своей бывшей команде мы делали что-то на подобии с помощью Ajax. То есть с помощью JavaScript подтягивался практически весь HTML, что ускоряло приложение, правда такие страницы были практически не адаптированы под SEO продвижение, и все-же я говорил, что такое делать не страшно, если страница никак не продвигается и выводятся в первую очередь для пользователя.

Используй css и html валидатор для того чтобы убрать фатальные ошибки

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

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

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

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

  • Процентное соотношение – в первую очередь;
  • Media запросы – разные стили для разных экранов;
  • Табличная верстка – верстка для Email писем;
  • Блочная верстка – полезна даже в современной верстке;
  • Flexbox – эластичность и управляемость элементами;
  • Grid layout – скелет документа.

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

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

Не нужно быть кошем с шорами на морде, которые закрывают для тебя «Все лишнее», а ты мол как верстальщик никак не пытаешься развиваться, мол я знаю свое дело и мне ничего больше не нужно. Адавтивная верстка с css имеет разные стили, и лучше владеть ними максимально, чтобы делать сайты разной сложности одинаково профессионально. Как-только выучишь чет новое, ты заметишь, что это новое будет нужно тебе все чаще и чаще, а в остальном, я уверен, если ты со мной не согласен, это значит ты по-своему прав.

Оставьте комментарий