На чем писать сайт в 2022

Тренды веб-разработки в 2022 простыми словами

Самое важное — отказ от поддержки старых браузеров в 2021. Убили IE, поэтому разработчикам станет проще использовать классные технологии. Гриды (83%) и флексы (99%) захватили всё.

TypeScript есть в 70% вакансий для мидлов. Мнение — 2022 будет годом TypeScript.

Что новенького

Container Queries — переосмысление подхода к медиавыражениям. Если медиавыражение зависит от размера экрана, то Container Queries опирается на размер блока. Ждём.

Cascade layers. С ними мы можем лучше управлять всеми слоями отрисовки на сайте. Это самое большое изменение в CSS со времён флексов и гридов. Ещё чуть-чуть.

Color functions. Удобно при работе в связке с дизайнером или без UI Kit.

Псевдоэлемент :has. Позволяет менять CSS в зависимости от того, находится ли в элементе что-то. Маленькая, но очень приятная вещь. Уже почти.

Flexbox Gap. Отступы между колонками делаются не через margin, а промежутками с определенным расстоянием. Это уже не тренд, а стандарт.

Что ещё. Пришли object-fit и aspect-ratio. CSS Shapes дошли до реализации. Появились автораскладки в Фигме — следствие доминирования гридов. Из препроцессоров применяют в основном Sass, на всё остальное осторожно посматривают.

Инструменты регулярно меняются и в этом нет ничего плохого. Тройка браузеров не меняется.

Критерии качества вёрстки от Академии актуальны и в 2022 — сразу понятно, как проверить, хороший ли вы верстальщик. Обсудили всё с сообществом — в сообществе рады.

Что нужно уметь

Мнение Алексея Симоненко — не стоит гнаться за ростом технологий. Лучше учить то, что нужно сейчас на рынке. Академия составила карту компетенций разработчика на 2022 с разбивкой по рейдам. Если коротко, то вот то, что нужно знать джунам и мидлам.

Джуны: синтаксис и основы HTML, CSS и JS, семантика, доступность, флексы и гриды, работа со шрифтами, препроцессоры Sass и PostCSS, БЭМ, Bootstrap, React или Vue, вёрстка под React (JSX, CSS-in-JS).

Мидлы: всё, что у джунов + TypeScript, Next.js, Redux, Mobx, Unit-тесты, RestAPI, Angular (которого вообще нет в вакансиях для джунов), WebSockets, GraphQL, Vuex, Nuxt.js, CSS-in-JS, Webpack, CI/CD, Docker, Gulp, алгоритмы и структуры данных, знакомство с ООП, паттерны MVC.

jQuery и Less — только для легаси.

Что с работой

Разработчиков всем не хватает (даже джунов). Мидлы уезжают из-за пандемии, такое на 3-4 года. Компании из Москвы ищут в регионах удалёнщиков, поэтому там тоже растут зарплаты. 70% компаний требуют английский язык. Почти вся документация на английском — видимо, поэтому. Продуктовые компании пылесосят аутсорсеров на зарплату х2 (источник?). У не IT-компаний появились IT-отделы — тоже тренд. В 1С платят мало. Стоп, что?

Стартовые зарплаты джунов не растут два года, но им стоит смотреть не на стартовую зарплату, а на перспективу (потому что индексируют быстро). У мидлов зарплаты подросли — средняя по JS 115 тыс. Синьоры стали дороже — 180-230 тыс.

Комментарии чужих прогнозов короткой строкой

• Реакт будет расти. Конкурентов особо нет.
• Нужно учить Реакт, потому что у него самый большой рынок. Если все перейдут на Vue.js, то и мы потом тоже.
• Нейросети и No-code (тильда и вот это всё) никогда не заменят разработчиков целиком, потому что часто нужен разработчик, чтобы сделать хороший ноукод. Ноукод займёт нишу в сайтах, которыми и без того не хотят заниматься — одноразовые лендинги, маленькие интернет-магазины и сайты-визитки.
• ГОСТ для разработчиков вряд ли хорошая идея, потому что всё равно все постоянно переписывают чужой код с нуля на другом фреймворке. Но критерии качества — норм, если их правильно использовать.
• Доступностьвсё ещё важна. «Партизанская доступность» во время разработки обычно делается стандартными средствами — семантика, правильная расстановка атрибутов, alt-текст, не убираем outline, tab index. Продвинутая доступность — по требованию заказчика и за неё нужно доплачивать.
• Будет ли расти спрос на фронтендеров. Будет.
• Фокусировка на безопасностискорее всего случится, но вряд ли 2022 будет годом безопасности.
• Фреймворк Remix вроде всем понравился. Посмотрим, как пойдёт.
• Дизайн-системы — большой тренд.
• 43% считают, что CSS тяжело изучить(я согласен — прим. ред)

С чего мы это взяли

• Зарплаты разработчиков в первой половине 2021: квалификации и основные языки / Хабр
• The State of CSS 2021
• Какие навыки нужны фронтендеру, чтобы стать мидлом? Исследование HTML Academy
• Front end web development trends in 2022 — Futurice
• Front-End Developers in 2022: Skills to Know and Trends to Watch
• 2022 Web Dev predictions? – Wes Bos twitter
• Anyone brave enough to share an old tweet with a prediction for 2021?
• CSS in 2022 – Bram.us
• Stack Overflow Developer Survey 2021
• @angular/core vs react vs vue | npm trends

Это была расшифровка лайва HTML Academy про тренды. Полная версия на Ютубе, там про всё гораздо подробнее.

Как создать свой сайт за полчаса в 2023: детальное руководство без ерунды

Если ты сейчас смотришь на эти буквы, у тебя скорее всего возникла необходимость создать сайт. Во-первых – мои поздравления! Это означает, что ты делаешь что-то, о чем стоит знать миру. И под «миром» я конечно имею в виду полмира, потому что у остальных полмира пока еще нет интернет-подключения (лишний раз повод порадоваться, что у тебя – есть!).

Так или иначе, в данном пошаговом руководстве я расскажу обо всем, что нужно для создания сайта с нуля. Простым и понятным языком. Без знания кода естественно — я ж не садист какой. Иными словами – меньше чем через 30 минут у тебя будет свой собственный новенький сайт, готовый к употреблению. Я уже упоминал, что в процессе мы сэкономим почти 3000 руб? Так вот, да. В общем, что-то вроде этого:

Знаю, тебе не терпится приступить – и все-таки я советую вначале пройтись по нескольким важным моментам (это займет не более 5 минут, честное слово). Если совсем невмоготу и хочется НАЧАТЬ ПРЯМО СЕЙЧАС, просто проедь два раздела вниз или нажми сюда, чтобы промотать страницу к первому шагу руководства.

Несколько важных моментов

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

Еще одна и пожалуй главная причина в том, что любое доменное имя (то есть адрес сайта) стоит денег – а использование чьего-то поддомена, такого как moisayt.weebly.com, не очень мотивирует посетителей воспринимать сайт всерьез. Резюмируя: немного потратиться все равно придется, если хочешь, чтобы твое творение выглядело профессионально и вызывало уважение. Фокусируясь только на самом важном и используя промо-коды, в данном гиде мы постараемся сократить эту сумму до абсолютного минимума.

Во-вторых, если у тебя вдруг появился вопрос «а вы, собственно, чьих будете, чтобы рассказывать мне как жить?», ниже краткий ответ вперемежку с плохо скрытым хвастовством: меня зовут Андрей Шехирев, являюсь основателем Веб-академии Satori, то есть данного портала. Создаю сайты с 2007 года, как для собственных проектов, так и для чужих. Кроме того, имею статус Elite Author (чесслово, их там так называют) на платформе ThemeForest – самом большом международном рынке «запчастей» для сайтов. Только через ThemeForest мои разработки уже помогли более чем 2000 людям и организациям создать более функциональные и профессиональные вебсайты (и нет, здесь я не собираюсь их рекламировать).

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

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

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

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

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

Ударим здавым смыслом по мифам о сайтостроений!

Миф номер раз: для создания сайта нужно уметь писать код. Конечно нужно. ЕСЛИ НА ДВОРЕ 1994! А серьезнее – технические решения проделали немалый путь со всемен юности Интернета, и большинство вещей давно автоматизировано. В том числе написание кода, да. Тебе нужно только выбрать самые подходящие инструменты и знать о нескольких важных вещах (в чем, собственно, и есть суть данного руководства).

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

Миф номер три: на создание сайта нужно потратить вагон и тележку времени. Ну, кстати, иногда и приходится – особенно если начинаешь с нуля. Тем не менее, если подходить к вопросу с умом и фокусироваться только на самом важном, можно сваять собственный сайт менее чем за полчаса. Так что давай приступим, наконец!

Шаг 1 из 4: Зарегистрируй домен и хостинг

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

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

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

Из всех хостингов, с которыми мне довелось работать за последние годы, наиболее положительное впечатление оставил Reg.ru (в настоящий момент сам пользуюсь их услугами для онлайн-проектов с многотысячной ежедневной аудиторией). Этот провайдер присутствует на рынке более 12 лет; на данный момент является одновременно и крупнейшим хостингом, и крупнейшим регистратором доменных имен в России+СНГ.

Приобретая эти услуги у Reg.ru, можно пойти друмя разными путями: начать с регистрации домена и добавить хостинг со скидкой, либо начать с оформления хостинга и получить в подарок домен. Так вот самое интересное в том, что по итогам получившиеся корзины с абсолютно одинаковыми заказами будут иметь разные цены! Скорее всего это результат разнообразных одновременно действующих систем скидок и подарков в Reg.ru. Сумма выходит небольшая (я подсчитал), но, как говорит свинка Дося, если нет разницы — зачем платить больше?

Здесь я подробно опишу только тот путь, который обеспечивает наиболее низкую сумму, естественно. Как бонус в конце процесса мы в добавок используем промо-код для получения еще большей скидки. Поехали!

Заходим на страницу поиска доменов Reg.ru (для удобства сделал здоровенную кнопку), воттакую:

Там всё просто: вводишь искомое слово (латиницей для всех расширений кроме .рф ) и смотришь, свободно ли имя. Наиболее презентабельно будет выглядить расширение страны ( .ru если ты делаешь сайт для России, .kz если для Казахстана и тд) – однако, как можешь убедиться, незанятых имен там меньше, чем в новых доменных зонах, таких как .su , .online или .ru.com . Так что выбор за тобой – главное, чтобы название было несложным в написании и легко прочитывалось.

Учитывай — если вписывать имя вместе с расширением, например «satoristudio.ru», и оно окажется незанятым, система автоматически добавит его в корзину – кнопка в конце строки с этим доменом станет серой и поменяется на «выбран». Если захочешь убрать его из корзины, нажми на эту кнопку один раз. Вот как все это выглядит:

Когда домен мечты найден, жмем на большую зеленую кнопку «Зарегистрировать» в правом нижнем углу – и мы попадаем на страницу настройки домена. Здесь оставь включенным автопродление (если не продлить домен вовремя, его сможет выкупить любой желающий, и твой сайт исчезнет с лица интернета) и поставь обе галки в разделе «Бесплатно хостинг на 2 месяца и SSL-сертификат» — первая даст тебе скидку на хостинг и бесплатную почту (тоже пригодится в будущем), а вторая – бесплатный SSL-сертификат.

Отметив галку «Почта и хостинг», ты увидишь список тарифных планов с довольно рандомными названиями, отсортированных по цене. Самый первый план (Host-Lite) не рекомендую, ибо он совсем уж слаб и не поддерживает даже самые популярные системы управления сайтами, такие как WordPress – а вот Host-A для наших текущих нужд вполне подойдет. Если твой сайт разрастётся в будущем, ты сможешь легко перейти на более навороченный план в любой момент.

Что касается SSL, то это особенно важно в настоящее время, потому что все интернет-броузеры уже начали или скоро начнут показывать значок «небезопасно» в адресной строке напротив любого сайта без сертификата SSL, то есть без защиты передачи данных. Сайт с действующим SSL, наоборот, получает успокаивающий зеленый замо́к с надписью «безопасно», что дает ему как минимум +900 к доверию пользователей и +200 к репутации среди поисковых систем.

В сумме вот как должна выглядеть страница настроек домена и дополнительных опций после всех упомянутых манипуляций:

Здесь всё, жмём «Продолжить» и едем дальше! А дальше увидишь форму информации об администраторе домена – да, это нудно, но её нужно заполнить актуальными данными, потому что это позволит закрепить домен за тобой (пока ты за него платишь, конечно). Так что закатываем рукава, заполняем форму и жмём большую зеленую кнопку.

Небольшой лайфхак – в самом низу форму будет галочка «сохранить профиль», убедись, что она активна, и введи в соотв. поле название профиля (например свое имя) – это сэкономит тебе время уже через несколько минут.

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

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

Что касается панели управления, особо большой разницы между ними, в принципе, нет (если вдруг интересно подробнее, можно почитать на английском скажем здесь, но выбору это сильно не поможет). Так что возьму на себя инициативу и предложу выбрать cPanel – во-первых, она всё-таки самая популярная в мире, с большим отрывом; во-вторых, сам ей пользуюсь почти для всех сайтов, которые создаю.

Выбрав нужные опции, нажимаем на зелёную кнопку «Я принимаю условия ля ля ля» и попадаем на ещё одну страницу с дополнительными функциями (обещаю, они скоро закончатся!), где снова отметим, что хотим бесплатный SSL-сертификат для нашего домена – если честно, не знаю зачем они спрашивают про это ещё раз, но галку поставить всё же нужно. Остальные вещи на этой странице нам сейчас не нужны, так что жмём на «Продолжить».

..и попадаем на еще одну страницу с формой личной информации под названием «Настройка новой услуги». Вот где пригодится наш сохранённый ранее профиль — если покупаешь домен от своего имени, выбери профиль в правом верхнем углу, и все поля заполнятся автоматически. Жмём, как обычно, на большую зелёную кнопку, и попадаем (наконец-то) на страницу корзины покупок.

Йес! Мы на финишной прямой. Как видишь, мы уже сэкономили 588 руб на хостинге за счет покупки одновременно с доменом, а также бесплатно получили SSL-сертификат (который, между прочим, отдельно стоит 2242 руб в год).

Но зачем останавливаться на достигнутом? Видишь справа маленькую синюю надпись «У вас есть промокод?» — как говорят в Одессе, я вас умоляю, конечно их у нас есть! Радостно жмём на надпись, видим новое окно с пустым полем, куда смело вводим следующий код и нажимаем «Применить»:

ACTHOSTING

Бум! Еще минус 144 рубля. Мелочь, а приятно. Вот ТЕПЕРЬ можно нажимать на «Перейти к оплате» и со спокойным сердцем оформлять покупку. Уверен, с этим ты разберёшься и без меня.

Давайте подсчитаем: мы только что сэкономили 588 + 2242 + 144 = 2974 руб (а это, между прочим, 67% от полной цены) и получили у топового провайдера всё необходимое для проживания нового сайта. Скоро тебе на почту еще придет бесплатный ваучер на 3000 руб для рекламы в Google AdWords – дополнительная плюшка, её в калькуляциях учитывать не буду. А знаешь что ещё? Все остальные шаги данного руководства не будут стоить тебе ни копейки.

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

Разминка окончена? Тогда приступаем ко второй части нашего руководства:

Шаг 2 из 4: Установи движок для сайта

Итак, мы зарегистрировали домен и хостинг, то есть «место жительства» для нашего сайта. Теперь можем приступать к самому сайту – а для этого нам понадобится CMS, или система управления сайтом (Content Management System).

Она будет служить «центром управления полётов», позволяя создавать структуру сайта, наполнять её содержимым, добавлять функции (например, как навигация или форма контаков) и изменять внешний вид (дизайн) сайта. И всё это – без единой строчки кода с твоей стороны, как мы и обещали в самом начале.

Какую CMS выбрать для своего первого сайта? За 10 с чем-то лет онлайн-проектов я вывел для себя простое правило:

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

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

Что это значит для нас? А что мы, для нас выбор очевиден – конечно же WordPress (или сокращенно WP). На Вордпрессе работает треть всех сайтов в мире и более 40% всех сайтов рунета. Мало того, что сама CMS полностью бесплатна – для нее существуют тысячи бесплатных расширений и визуальных шаблонов, а также огромное сообщество пользователей и масса руководств россыпью по всему интернету.

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

Окей, давай к делу: зайди в панель управления хостингом, которую мы получили в первом шаге – для этого воспользуйся прямой ссылкой из полученного от Reg.ru имейла. Либо зайди в свой личный кабинет на Reg.ru, нажми на свое имя в верхнем правом углу экрана, выбери «мой хостинг и услуги» в выпадающем меню, нажми на название хостинг-пакета в таблице, а дальше кликни на большую зелёную кнопку «панель управления хостингом». Ну или лучше добавь адрес панели себе в закладки, всё-таки.

В панели хостинга проедь до самого низа и найди раздел “Softaculous Apps Installer” – а там нажми на пункт с надписью «WordPress» и иконкой в виде «W», такой же как глаз пожирающего мир пакмана на картинке выше.

На странице установщика нажми синюю кнопку «Install Now”, что приведет тебя на страницу настроек, которая выглядит, в заполненном виде, примерно вот так:

Давай вместе пройдемся по тем настройкам, которые нужно использовать, там есть пара важных моментов:

• В первом разделе выбери «https» среди протоколов (это и есть SSL, который мы приобретали ранее – перед тем, как приступать к данным шагам, пройдись по SSL-инструкции, которую тебе выслали на почту после регистрации хостинга).
• Не удивляйся, если установщик начнет ругаться на тебя по-английски после выбора «https»-опции: когда выберешь свой правильный домен в следующем поле, желтое сообщение пропадёт.
• Дальше, в разделе «Site Settings» можешь заполнить имя сайта и описание, но это не обязательно на данном этапе – всегда сможешь поменять оба поля в настройках самого Вордпресса.
• Теперь самая важная часть: введи имя пользователя, пароль и имейл для администратора сайта (то есть себя). И ради всего святого, не оставляй логин “admin” и не ставь пароль “12345” !! Когда запишешь свой пароль, поищи его в этом списке – если найдешь, сразу же смени на что-то более креативное. Если буксуешь, попробуй, например, этот способ от авторов броузера Firefox.
• Проверь, чтобы в поле «Admin Email» был указан твой актуальный почтовый ящик – также можешь сразу промотать до самого низа и указать его же в поле «Отправить детали установки» под синей кнопкой.
• Кроме вышеперечисленного нам осталось поставить только несколько галок: разверни раздел дополнительных настроек, нажав на “Advanced Options”, и пометь все 4, что там есть (см. фото выше). Эти настройки заставят WordPress и все его компоненты автоматически обновляться, что важно для поддержания безопасности сайта – а также избавят тебя от получения имейлов каждый раз, когда это происходит.

Всё, теперь перепроверь все поля и можешь жать на «Установка». Если увидишь красное сообщение про то, что какие-либо файлы уже существуют – отметь галку, чтобы «переписать все файлы и продолжать», и снова нажми на «Установка».

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

Кроме того, установщик выдаст тебе два адреса: домашнюю страницу сайта (например, https://satoristudio.ru ) и ссылку на панель управления WordPress – она всегда будет иметь дополнение «wp-admin» (например, https://satoristudio.ru/wp-admin ).

Мы, в принципе, закончили с трудоёмкой частью. Остальные два шага будут посвящены краткому введению в WordPress – в первую очередь, полезным разделам панели управления и некоторым настройкам, которые стоит поменять сразу:

Шаг 3 из 4: Настрой Вордпресс

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

Самыми часто посещаемыми пунктами административного меню WP можно назвать Записи и Страницы, а также Комментарии, где можно модерировать обсуждения (если решишь использовать этот функционал).

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

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

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

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

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

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

Настройки → Чтение: не самое удачное по смыслу название, но всё же очень полезная секция — здесь ты сможешь выбрать, что показывается на главной (домашней) странице твоего сайта – просто страница или страница записей. Е

сли остановишься на опции «статическая страница», тебе также будет предложено выбрать, какую из существующих страниц превратить в страницу записей (то есть раздел с блогом/новостями); ну или ты всегда можешь пойти в раздел Страницы, создать новую пустую страницу (назвать её «Блог» или «Новости», например), вернуться сюдя и объявить её как страницу записей – чаще всего именно так и делают на Вордпрессе.

Настройки → Обсуждение: этот раздел целиком посвящен комментариям и содержит миллион флажков, из которых самым важным является третий по счёту: «Разрешить оставлять комментарии на новые статьи». Если хочешь, чтобы посетители могли комментировать твои записи, поставь там галку. Кстати, сразу можешь убедиться, что первые два флажка пусты – ничего кроме спама в наши дни ты через эти функции не получишь.

Далее, раз уж оставлять комментарии мы разрешаем, советую также активировать опцию «Разрешить древовидные комментарии» — это позволит посетителям отвечать на комментарии друг друга, что приведет к более оживленной дискусии (но и модерировать всё это безобразие придётся активнее, конечно).

Очень рекомендую также поставить галку «Комментарий должен быть одобрен вручную» — в противном случае все спам-комментарии (а их будет много) будут автоматически появляться на сайте, и придётся потом вылавливать их пост-фактум (зачем тебе это?). Ну и, наконец, проверь, чтобы две настройки в подразделе «Отправить мне письмо, когда», соответствуют твоим предпочтениям.

Настройки → Постоянные ссылки: это последняя секция, где мы сразу можем кое-что поменять. Здесь просто выбери «Название записи» если оно еще не выбрано и сохрани изменения – это скажет системе автоматически создавать наиболее читабельные адреса записей и страниц ( satoristudio.ru/stranica вместо satoristudio.ru/?p=23528 ).

Вот и всё! Ничего сложного в Вордпрессе нет, как и обещал (не обещал? Значит, наверное, громко думал про себя). Теперь вполне можно начать добавлять содержимое, но есть еще один шаг, который вроде как факультативный, но вообще-то обязательный:

Шаг 4 из 4: Добавь тему и плагины

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

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

Или вот, например, бесцеремонная самореклама: раз уж мы заговорили о бесплатных WP-темах, ты можешь попробовать и нашу универсальную тему Bento (как можешь заметить, мы здесь в Satori фанатеем от Японии, да).

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

Мы сделали для Bento подробную онлайн-документацию (на английском языке) и предоставляем бесплатную техподдержку (на любом языке) через почту и на официальных форумах.

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

Так вот, что касается плагинов, то их тоже существует тьма тьмущая, как бесплатных так и платных, и с помощью них ты сможешь без особого труда добавить к своему сайту практически любую дополнительную функцию, которую только можно представить – от всплывающих окон и контактных форм до форумов и социальных сетей. И нет, плагины мы не строим, так что не жди затычки про «Суши» или «Камикадзе»!

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

• Akismet для автоматического отфильтровывания спама в комментариях. Эта детка сэкономит тебе столько часов жизни (модерирования), что ты захочешь сделать татуировку «Akismet» готическими буквами у себя на спине. Этот плагин, кстати, использует разные шаманские примочки вроде машинного обучения, так что велика вероятность, что со временем он адаптируется к твоим посетителям и будет всё лучше и лучше отлавливать спам.
• All in One SEO для поисковой оптимизации. Это, пожалуй, один из лучших WP-плагинов для заполнения мета-данных страниц, таких как заголовок и описание, отображаемые в результатах поиска Яндекс и Гугл. Яндекс и Гугл любят такое внимание к деталям, очень.
• Google Analytics Dashboard для настройки статистики посещений. Для этого плагина понадобится учётная запись в Google-Аналитике, которая тебе, как обладателю сайта, в любом случае нужна в обязательном порядке.
• Contact Form 7 для создания форм обратной связи. Если хочешь, чтобы при каждом новом сообщении тебе приходил имейл, нужно будет также установить плагин-почтальон WP Mail SMTP (для его настройки тебе пригодятся вот эти сведения от Reg.ru).

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

Полезные советы (Необязательный шаг)

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

Совет №1: Как сделать сайт непривлекательным — для взлома. Именно в такой формулировке – потому что взломать можно любой сайт, если очень захотеть, но ты можешь принять ряд несложных мер, которые сильно уменьшат это «захотеть» и максимально затруднят дело любому, кто захочет попытаться нанести твоему детищу вред. Как учат заморских бойскаутов – для спасения от медведя необязательно бегать быстрее всех, нужно бегать быстрее самых медленных друзей.

Первая и самая простая рекомендация здесь (которой всё равно почему-то не следует 99% сайтовладельцев): не используй в качестве имени пользователя к WordPress-панели стандартное «admin» — иначе злоумышленникам останется только подобрать твой пароль, что сильно облегчит им задачу. Просто используй любое другое слово.

Кстати про пароль. Я уже говорил об этом в шаге про установку Вордпресса, но скажу еще раз: используй сильный пароль, с буквами-цифрами-знаками или состоящий из нескольких редких слов. Уже одно это повысит сложность взлома твоего сайта раз в 10, если не в 100.

Для дополнительной безопасности очень рекомендую также установить плагин для двухступенчатой аутентикации – если человеческим языком, то это расширение, которое будет при входе в админ-панель WP спрашивать у тебя вместе с логином-паролем ещё и уникальный, меняющийся раз в полминуты код, который будешь видеть только ты на своём смартфоне. Такая штука сделает несанкционированное проникновение на твой сайт ещё раз в 100-1000 более сложным.

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

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

Совет №2: Как делать резервные копии сайта. Вряд ли кто хочет заниматься этим каждый день вручную; а если возникает непредвиденная ситуация, вебмастер резко становится готов отдать всё что угодно за работающий бекап, поверь моему горькому опыту.

Здесь всё еще проще, чем с безопасностью: достаточно установить плагин вроде UpdraftPlus, который будет сам делать резервные копии всего сайта и сохранять их где пожелаешь (даже на облачном хранилище вроде Google Drive, что, кстати, очень удобно).

Могу сразу сказать, что сам никогда не пользовался платной версией UpdraftPlus Pro – базовая версия содержит всё, что нужно. Так что про Pro сказать ничего не могу, да и не нужно, думаю.

Закругляемся / Вопросы-ответы

Бам! Мы только что научились создавать сайты с нуля, сэкономили почти 3000 руб. в процессе, и может даже интересно провели время.. Хоть чуть-чуть? Можеть быть? Ну ладно, главное что сделали сайт!

Если это руководство показалось тебе полезным, не раздумывая делись им в соцсетях (ладно, твит тоже сойдёт) и может даже расскажи своим друзьям-новичкам, которые ещё не умеют создавать собственные сайты. Во дилетанты!

..Ты еще здесь? Я даже немного удивлён (и польщён), если честно. Не знаю.. ну например — чуть ниже есть еще секция с комментариями, там можешь задать любой вопрос по поводу сайтостроения мне и другим читателям данного пособия. А, и если у тебя появятся предложения по поводу улучшения данного руководства или критика – оставь их при себе! Шучу, конечно же тоже делись всем наболевшим, не зря я у себя в Вордпресс ставил галку в «разрешить комментарии».

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

Создание сайта в 2023 году: полный гайд с примерами

Наталия Супрунюк Редакция «Текстерры»

Обновила: Дарья Ракова

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

Оглавление:
Оглавление:

0. Постановка задачи

Сначала нужно разобраться, зачем нужен сайт. От этого будет зависеть его тип: если вы планируете, что сайт будет посвящен одной услуге/продукту, то стоит выбрать формат лендинга, если планируете рассказывать о разных продуктах и услугах, то нужен многостраничный сайт (кстати, у нас вы можете заказать разработку сайта — прим. отдела продаж TexTerra).

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

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

Продвинем ваш бизнес

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

1. Формирование УТП

Неважно, какой сайт вы делаете, первое, что нужно при подготовке, – найти свою особенность. Это не значит, что у вас должны быть уникальные картинки и 80 % + по «Адвего» (сервис проверки уникальности текста).

Уникальность в 2023 году – это необычная черта бизнеса, которая отличает его от остальных. Акцентируйте на этом внимание, иначе рискуете затеряться в информационном шуме.

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

Из УТП понятно, что уникального в бизнесе и чем он будет полезен клиенту

Еще один пример того, как уникальность помогает в продажах – SMM-продвижение тренажеров для реабилитации. Из-за специфики этой тематики конкуренты просто боятся заходить в соцсети, так как считают: «Раз здесь сложно достучаться до тех, кто принимает решение о покупке, зачем тратить время и нервы?» И это большая ошибка!

Сайт для реабилитационных тренажеров

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

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

Переписка с пользователем о реабилитационных тренажерах

Материалы, которые помогут найти и сформулировать особенность бизнеса:

• 19 вариантов отстройки от конкурентов для продуктов «как у всех» + еще 1 бонус;
• Как составить уникальное торговое предложение: исследование, работающие формулы и проверка УТП.

2. Подготовительные работы

Подготовка – самая важная часть разработки сайта. Даже опытные специалисты не сделают «Сайт Мечты», пока не составят четкое ТЗ, что возможно только после проведения всех подготовительных работ в полном объеме.

Анализ ниши и конкурентов

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

Вот на что нужно обратить внимание при конкурентном анализе:

• Как устроены сайты конкурентов – какая у них структура, дизайн, какие детали;
• Насколько качественен сайт с точки зрения пользователя, удобно ли ему на нем;
• Какое у сайта УТП.

Также стоит обратить внимание на то, как клиенты ведут соцсети, а если есть рассылка, то и на нее.

Статьи, которые помогут провести грамотный анализ и не совершить ошибок:

• 5 причин, почему нельзя копировать сайт конкурента, и что делать, если сильно хочется;
• Анализ цен конкурентов: поэтапный план для чайников;
• Как анализировать конкурентов правильно: 4 основных направления.

SWOT-анализ бизнеса

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

Если по-русски, то это ССВУ-анализ: анализ Сильных сторон, Слабых сторон, Возможностей и Угроз продукта

К примеру, дружественные консультанты в магазине – это офлайн-УТП, которое будет побуждать клиентов пользоваться вашими услугами вне интернета. Каким будет УТП для тех, кто пользуется вашими услугами в интернете? Решайте сами, анализируя конкурентов. Это может быть мгновенная доставка «до двери», предоставление десятков тестеров / семплов по первому щелчку и т. д.

Как я изучала рынок, чтобы открыть парикмахерскую – универсальные шаги

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

Вы проанализировали конкурентов и нашли веб-УТП? Поздравляем, теперь это нужно красиво оформить. Продумайте посыл и миссию сайта.

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

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

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

Структура сайта может быть разной:

• линейной – подразумевает цепочкообразный порядок и равнозначность страниц;
• линейной с разветвлением – построена аналогичным предыдущей структуре образом, но здесь в каждом звене есть дополнительные подразделы;
• блочной – в ней все страницы являются равнозначными;
• иерархической – в ней каждая последующая веб-страница – это «родственник» предыдущей (поэтому иногда ее называют древовидной).

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

Покупка хостинга и домена

Хостинг – услуга размещения информации на сервере, «домик» сайта. Домен – имя сайта, которое отображается в адресной строке.

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

Разобраться, что выбрать, помогут наши материалы:

• Хостинг: как выбрать и на какие технические возможности обратить внимание;
• Как выбрать доменное имя, если в 2022 году уже все занято.

3. Выбор стратегии продвижения + ключевые слова

Сформировали стратегию сайта и его карту? Можно собирать ключевые слова из сервисов WordStat и KeySo для дерева запросов. Необязательно сразу делать «большое дерево». Иногда, при работе с ключами вы будете замечать, что какие-то запросы неинтересны ЦА. При этом «деревянная» структура обязательна: не нужно продвигать на одной странице доставку суши в Москве и в Новосибирске.

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

Такие схемы удобно делать в виде интеллект-карт (mind maps)

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

Практическое руководство по подбору поисковых фраз

4. Выбор CMS

CMS (система управления контентом) – одна из важнейших вещей в сайтостроении. Верно подобранная «админка» поможет реализовать все задумки, быстро масштабироваться и работать без критических багов. Для текста идеально подойдет WordPress, хорошо будет работать Tilda. Магазинам лучше присматриваться к «Битриксу» и Shoptet.

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

• Какую CMS лучше выбрать для интернет-магазина;
• Какую CMS выбрать: руководство по выбору «движка» для сайта;
• Как сделать сайт на WordPress – очень полезный, полный гайд;
• У вас еще нет сайта? В этой статье сделаем сайт на Joomla! за час.

5. Подготовительная работа с Google и «Яндексом»

После того, как вы приобрели веб-адрес, нашли хостинг, продумали УТП и структуру сайта, можно переходить к подготовительной работе в поисковиках.

Создайте профили в «Google Бизнес» и «Яндекс.Бизнес». Это поможет клиентам находить вас, задавать вам вопросы, а вам – отвечать на них, видеть статистику и привлекать покупателей.

Добавьте предприятие на Google Maps и «Яндекс.Карты» (также не помешает Bing). Чем больше сервисов уже индексирует вас, тем лучше. У вас может еще не быть сайта, но страничка на карте обязательна! Иначе как люди узнают, что вы работаете рядом с ними?

Добавляйтесь на карты и стимулируйте отзывы на них, чтобы быть в топе

Если у вас интернет-магазин, можете добавить товары на Яндекс.Маркет. Платить придется, но только за покупки – просмотры карточек бесплатны.

Товары в Яндекс.Маркет добавляются с помощью YML-файла – об этом мы писали в статье «YML-файл для Яндекс.Маркета: что это, зачем и как его сделать».

6. Работа с ядром и структурой сайта

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

Создание семантического ядра

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

Если нужно жестко экономить, собирать семантическое ядро придется самостоятельно. В этом помогут наши материалы:

• Что такое семантическое ядро и как его составлять;
• Составление семантического ядра: 5 типичных ошибок
• Главная проблема семантики, которая мешает поисковому продвижению;
• Как вывести сайт в топ при помощи скрытой семантики (LSI).

В высокочастотных запросах нереальная конкуренция, и, если сфера уже сформирована, там точно есть «мастодонты», до которых еще нужно расти / вливать огромные средства в рекламу.

Запросы «средней частоты» универсальны – по ним довольно часто переходят, хотя конкуренция еще не такая большая.

Для нишевых сайтов подойдут низкочастотные запросы.

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

Удаление «мусорных» запросов

Мусорные запросы – те, которые идут по вашей теме, но при этом не соответствуют тематике сайта. Используйте отсев по стоп-словам, специфической лексике, географии и путем проверки орфографии.

Такие запросы можно удалять без сожалений

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

Минимизация слов с высокими Keyword Difficulties

Keyword Difficulty – индекс, который показывает, насколько сложно будет обогнать конкурентов в поисковике Google. Всего оценки группируются по 3 большим блокам:

• 80 % – уровень джедая. Если возьмете поисковые слова с такой сложностью, готовьтесь к вливанию огромных сумм (зависящих от сферы деятельности). Новичкам без чемоданов денег лучше сюда и не заходить.
• 60–80 % – Квентин Тарантино в мире ключевиков. Да, вам не придется применять суперсилы, чтобы оказаться здесь в первых строках выдачи, но посоревноваться придется знатно.
• 60 % – на изи. Такие ключи имеют регулярный трафик, хорошо ранжируются, но здесь нет бешеной конкуренции. Идеальный выбор для новеньких.

7. Линкбилдинг-стратегия

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

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

Краткое руководство по линкбилдингу:

1. Создайте контент, достойный ссылок на него и цитирования.
2. Покажите его веб-сайтам, которым он мог бы быть интересен, чтобы они его процитировали или сослались на этот контент.
3. Добавляйтесь на сайты, где вы сами можете опубликовать ссылку: бизнес-каталоги, блоги (раздел «Комментарии»), форумы, соцсети.
4. Обменивайтесь ссылками с ресурсами, которые подходят вам по тематике.

Еще о грамотном продвижении ссылками:

• Эффект бабочки – как продвигать компанию на форумах и в отзовиках
• Фильтр «Пингвин»: как не попасть под ограничения, и что делать, если его уже наложили

8. Дизайн сайта

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

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

Трехмерность

Кажется, этот тренд выработал стабильные «качели»: объемность возвращается раз в 2-3 года, после чего исчезает в угоду 2D и снова возвращается. В 2023 году в тренде реалистичные 3D-элементы (главное, чтобы они были без эффекта «зловещей долины» (когда из-за мелких несоответствий реальности, но общего пугающего сходства с нею у человека возникает чувство неприязни и страха от изображения).

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

Святослав Грошев

Арт-директор TexTerra

Объемность

Пользователи MacOS Big Sur уже успели заценить «объемные иконки». Этот тренд постепенно заходит и в веб-дизайн, так что следует ожидать объемности и подумать, не внедрить ли ее у себя.

Слои, плавающие элементы

За несколько лет скролл-эффекты пользователям поднадоели. Современный юзер хочет видеть максимальную легкость.

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

Отличный пример такой «легкости» – сайт дизайн-студии LEVELLEN. Работа с пустым пространством дала ему нужную воздушность.

Студия делает стильные дизайны, поэтому и сайт у нее стильный и «легкий»

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

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

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

Так какие детали использовать можно?

Действительно важную (!) информацию: характеристики продукта, условия его приобретения. Текст должен быть четко структурирован – тут требуется работа со стилями текста, акцентными шрифтами, размерами. Графические элементы должны делать акцент на свойствах продукта или дополнять текстовую информацию.

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

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

Святослав Грошев

Арт-директор TexTerra

Микс графики и фото

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

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

Микс графики и фото выглядит свежо

Этот прием также использует языковая школа LEXXIS. Благодаря этому сайт смотрится более «живым» и современным.

А здесь такой микс выглядит ярко и смело

Мы в работе часто миксуем фото и графику, чтобы разнообразить визуал.

Можно просто поставить квадратное фото, и получится скучная статичная композиция. А можно это фото закруглить, добавить тень, создав эффект полета, геометрические формы – это добавит динамики. И вот уже из скучного шаблонного решения мы получаем уникальную работу.

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

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

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Векторная графика

Нужно подстраиваться под поведение аудитории, а она сегодня заходит на сайты со смартфонов. Но как это сделать, если один сидит с «тапка» с диагональю 3,5 дюйма, у второго – iPhone 13 Pro Max, а третий меняет телефоны на Android, как перчатки? Только через векторную графику! У нее нет привязки к пикселям, она легко масштабируется и адаптируется к любой диагонали, от умных часов до 4К-телевизора.

Именно так мы и сделали при создании сайта доставки «Имеретинская лавка». Основные элементы выполнены в КИвекторе, поэтому легко масштабируются для просмотра с любого девайса.

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

Цифры, данные и исследования

Если хотите взрастить любовь к своему бизнесу у пользователей, делитесь с ними цифрами, учите интересному. Продумайте, как правильно подать всю эту информацию.

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

Цифры, статистика, исследования, инфографика и сертификаты вызывают доверие

Еще один пример – сайт для производителя напольных покрытий «КоронаПласт». В центре внимания – полезные факты о компании, сертификаты, именитые партнеры и подтверждения надежности.

Посетители сайта могут скачать pdf-файлы с каталогом и инструкциями по монтажу – это тоже про полезность

Темные цвета

Темный фон смотрится элегантно и не «выжигает глаз», как темный текст на белоснежном фоне. Более того, такие темы способствуют экономии энергии и увеличивают срок службы OLED-экранов.

Именно таким мы сделали сайт для видеостудии «Видеозаяц.РФ». Он умело сочетает темную тему, векторную графику и работу со слоями.

Темные цвета особенно хорошо выглядят в премиум-сегменте, в digital- и игровой сферах

При выборе цветов для интерфейса отталкивайтесь не только от трендов, но и от самого бренда, сервиса и продукта. Темная «тема» хороша далеко не для всех, но никто не запрещает «играться» с оттенками серого 😉

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

В рамках проекта «ВидеоЗаяц» мы решили немного отклониться от негласных правил и разработать дизайн под конкретный запрос – отстроиться от конкурентов и показать премиальность продукта. С помощью выбранных цветов мы подчеркнули, что компания работает на рынке motion-анимации и других сложных механик.

Александра Паршина

ex-заместитель руководителя отдела дизайна TexTerra

Еще несколько трендов в дизайне, которые были актуальны в прошлом 2022 и остаются актуальны в 2023:

• Минимализм и максимум воздуха;
• «Легкие» шрифты с засечками:
• Симметричная верстка – баланс между текстом и изображением на сайте;
• Неоновые оттенки;
• Фотографии реальных людей вместо стоковых изображений;
• Градиенты и размытия;
• Интерактивные элементы в интерфейсах.

1. Акцентная типографика

1. Яркие цвета

1. Коллажи

Святослав Грошев

Арт-директор TexTerra

9. Базовая SEO-оптимизация сайта

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

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

1. Нет ничего, работающего на Flash. Он устарел. Точка.
2. Семантическое ядро собрано конкретно под продвигаемые страницы, а структура сайта полностью ему соответствует.
3. У сайта корректная HTML-карта – страница, где расположены ссылки на полезные разделы сайта.
4. Прописаны meta-данные сайта.
5. Дубли и неуникальные Title и Description отсутствуют.
6. Настроен https-протокол. Если у сайта есть зеркала с www, они «склеены» с основной версией.
7. «Зеркала» на других доменах отсутствуют или склеены с основным сайтом через Redirect 301. В противном случае ждите санкций и блокировки всех сайтов.
8. Зомби-страницы удалены, а дубли склеены через Redirect. Это нужно, чтобы сконцентрировать продвижение на конкретной странице, а не распылять его на 10 разных.
9. Прорисован дизайн + придуманы тексты для страниц 3xx, 4xx, 5xx и для отсутствующих фото товаров в интернет-магазинах. Сбои в работе встречаются у всех, так поднимите же настроение клиентов проработкой таких мелочей.

Страница 404: самые креативные, смешные и лаконичные варианты

1. Файлы сжаты и почти не занимают места. Все они открыты для индексации.
2. На портале присутствуют Sitemap и Robots.txt, которые регулярно обновляются.
3. «Хлебные крошки» – навигационные цепочки, показывающие путь пользователя – настроены.
4. Критические ошибки HTML-кода по стандарту W3C отсутствуют.
5. Сайт уже есть в «Яндексе» и Google. Не помешают также Rambler и Bing. Смотрите на регион ресурса и подбирайте актуальные поисковики для работы.
6. Проработаны URL, где все слова прописаны латиницей. К примеру, если вы ссылаетесь на раздел с MacBook 2020, то URL должен выглядеть как pc / laptops / apple, а не pc / laptops / -3n4oi#4t. Конечно, там нет запрещенных или спам-слов по типу gun, sex, violence. Это нужно делать с любыми товарами в интернет-магазинах.
7. Работа в разных браузерах и системах настроена. Есть 3 варианта работы на «смартах»: мобильная версия (отдельная версия сайта), адаптивная верстка (когда сайт подстраивается под экран устройства, основываясь на user agent) и динамическая верстка (масштабируемый, «резиновый сайт»). Выберите ту, которая больше всего подходит вам (мобильную версию, так как это целый отдельный сайт, может быть дольше и дороже делать).
8. Отзывы. Разместите под каждым товаром раздел отзывов. Также добавляйтесь в «Google Бизнес» и «Яндекс.Бизнес», чтобы люди могли постить про вас отзывы. Реальные отзывы – дополнительный повод доверять компании.

Если это интернет-магазин с карточками товаров, отзывы должны быть всегда.

Во-первых, их можно использовать для SEO. Например, сделав Н2-заголовком и подставлением туда информации из H1. Пример: страница «Акустика FENDER CD-60 DREAD V3 DS BLK WN» – «Мой отзыв о товаре Акустика FENDER CD-60 DREAD V3 DS BLK WN». Это позволит продвинуть запрос со словом «отзыв».

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

Если на сайте больше 1 тыс. товаров, очевидно, что на какие-то товары отзывов не будет. В таких карточках стоит написать что-нибудь в духе «Ищем героя, который сделает 1 шаг в оценке товара».

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

Кстати, отзывы размечайте с помощью микроразметки Schema.org.

Павел Антипов

ex-project-менеджер TexTerra

Пример оформления карточки товара – отзывы внизу

В видео ниже рассказали о самых частых ошибках в продвижении сайта. Многие из них связаны с SEO:

10. Скорость работы и загрузки сайта

Чем выше скорость работы, тем меньше людей будет «бесить» долгая загрузка. Это означает то, что они дольше будут сидеть на сайте. В 2023 году стремиться нужно к следующим показателям:

• отрисовка самого крупного контента (LCP) – менее 2,5 сек с начала загрузки страницы;
• задержка после первого ввода (FID) – менее 100 мс;
• совокупное смещение макета (CLS) – менее 0,1.

Для ускорения сайта делается следующее.

1. Минимум редиректов.
2. Сжатая графика, видео и аудио. Держите файлы как в формате WEBP, так и в классических, но сжатых.
3. Подключенные AMP-страницы в Google и турбо-страницы в «Яндексе».
4. Включенный кэш. Если сервер будет кешировать данные юзера, при следующих посещениях сайт не будет загружаться «с нуля», что ускорит время загрузки.
5. Уменьшенное количество запросов к серверу до минимально допустимого значения. Объедините мелкие графические элементы, файлы JavaScript и другую «мелочь», чья прогрузка занимает много времени.

11. Работа с контентом

Приступаем к самому волнующему моменту – наполнению сайта информацией.

1. Проанализируйте контент-стратегию конкурентов. Найдите пробелы, которые они не перекрыли. Сравните эту стратегию со своей. Придумайте стратегию, которая закроет сразу несколько пробелов (скорее всего, какие-то мысли об этом у вас появятся еще на этапе анализа конкурентов).
2. Заведите блог. Так вы решите сразу две важных задачи: формирование имиджа эксперта и проработку всех возможных ключей в своей теме, не «мусоря» на основной части сайта. При этом узкая и сложная специализация бизнеса не приговор, а скорее дополнительный плюс.

Это доказывает блог на сайте по производству и продаже арболитовых блоков «Русский Арболит». Если даже они нашли, чем заинтересовать читателей в своем блоге, это сможете и вы.

Даже на сложную тему можно написать интересные статьи

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

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

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

С контентом тоже вышла интересная история: мы отрабатывали преимущественно ВЧ-запросы, но «с хвостами». То есть, не просто «чем утеплить дом», а «чем утеплить дом из арболита», не просто «как рассчитать количество строительных материалов», а «как рассчитать количество строительных материалов для дома из арболита». Конечно, мы писали исчерпывающие лонгриды по теме основного запроса, делая поправку на арболит.

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

Дарья Завьялова

выпускающий редактор TexTerra

1. Подстраивайтесь под голосовые запросы. Забудьте о «Москва кофе купить молотый». Сегодня время «Окей Гугл, где купить молотый кофе на Таганке?».
2. Максимально структурируйте текст. H1, H2 и т. д. обязательны. «1 абзац = 1 мысль». Добавьте в текст таблицы и списки, где это возможно. Так вы увеличите свои шансы попасть в сниппет выдачи (нулевой запрос).
3. Заполните все meta-данные, alt и title в картинках и видео.
4. Сделайте четкий контент-план. Необязательно, чтобы он был готов на год вперед: бывает так, что актуальное сегодня, уже никому не нужно завтра. Но на какой-то период он должен быть – пусть на неделю или месяц. При этом контент должен выходить регулярно и следовать одной цели – продвижению и продажам.
5. Делайте уникальные тексты. Показатель уникальности полностью зависит от сферы и задач. В некоторых случаях (юридические, медицинские тесты) допустимо и 60-70 %, а где-то нужно хотя бы 80-85 %.
6. Пишите тексты понятным человеческим языком. Конструкции из 2007 «окна москва недорого двери купить» забудьте, как страшный сон.
7. Добавьте на сайт политику конфиденциальности. Это нужно, если вы собираете данные пользователей. Если вы их собираете, а политику конфиденциальности не разместили, можете получить штраф.
8. Убедитесь, что контент быть доступен как в webm-формате, так и в классических форматах по типу jpeg, mp4, aac и т. д.
9. Не привязывайте текст ко времени. Иначе система «свяжет» текст с этим временным промежутком. В долгосрочной перспективе этот материал просто не будет выводиться в начале поиска. Исключения – новости, аналитика и другие вещи, которые актуальны лишь на определенный промежуток времени.

Как в 2 раза увеличить посещаемость вашего блога – работаем с оптимизацией текста

1. Ссылайтесь только на проверенные источники. Поисковые машины уже научились отличать fake news и понижают позиции тем, кто использует их как источники.
2. Убедитесь, что контактные данные актуальны, одинаковы и доступны на всех страницах сайта.
3. Убедитесь, что стили шрифтов, абзацев, междустрочные интервалы, цвета и навигация одинаковы на всех страницах.
4. Проверьте, что CSS, HTML и все сценарии оптимизированы и работают без багов.
5. Проверьте, что фавикон присутствует и отображается корректно.

Фавикон – значок вашего сайта на вкладке

12. Проверка на санкции поисковиков

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

Самые частые причины «фильтрации»:

1. неуникальный контент;
2. вирусы на сайте;
3. внешние ссылки с сайтов с низким доверием, fake news и порталов под «фильтрами»;
4. переоптимизация ключевыми словами;
5. бессистемный линкбилдинг (переспам ссылками);
6. накрутка поведенческих показателей;
7. слишком агрессивная реклама;
8. аффилиаты (в лучшем случае, поисковик выберет из «сети» 1 сайт, а все остальные заблокирует);
9. разные серые технологии по типу фишинга, клоакинга и т. д.

Это только вершина айсберга, который с каждым годом только растет. Самые актуальные списки того, за что сайт может попасть под фильтр, можно найти у самого «Яндекса» и Google.

13. Работа с локальностью

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

1. оптимизируются страницы в «Google Бизнес» и «Яндекс Бизнес»;
2. корректно настраиваются регионы в «Яндекс.Вебмастер» и Google Search Console;
3. правильно прорабатывается микроразметка в разделе «Контакты»;
4. компания добавляется в «Яндекс.Карты», Google Maps, 2ГИС и другие сервисы с картами;
5. с сайта убираются аффилиаты (или у них в контактах другой адрес и телефон);
6. сайт добавляется в тематические справочники: поисковики до сих пор индексируют подобные сайты. Чем больше порталов говорят о вас – тем лучше.

14. Проверка Usability

Предпоследний шаг. Вот что важно на этом этапе:

1. Навигация и сам сайт интуитивно понятны.
2. Карта кликов полностью готова. Все, что мешает, убрано.
3. Кроссбраузерность дополнительно проверена.
4. Все формы работают, письма благодарности написаны и «задевают» ЦА.
5. Все UI-тексты корректны («buy», а не «bye»).
6. Дополнительно проверены линки, перелинки, блоки навигации.
7. Отсутствуют назойливые поп-апы и пуши (как на сайтах с нелегальными онлайн-кинотеатрами).
8. Есть линки на основные social media, кнопки «Поделиться» для всех востребованных соцсетей.
9. В чат-боты загружены все основные вопросы, они понимают «человеческую речь», регулярно обновляются. Есть команды, переключающие сразу на техподдержку.
10. Основные метрики сайта в норме: LCP, FID и CLS.
11. Подключены метрики, отслеживающие посетителей: AOV (средний чек), LCV (жизненная ценность клиента), CPA (цена за целевое действие), CAC (стоимость приобретения клиента), ROI / ROMI (показатели окупаемости кампаний), конверсии, отказы, доля рекламных расходов, метрики аналитики соцсетей и рассылок, ключевые слова, приводящие клиентов.

15. Аналитика

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

1. PageSpeed Insights (отслеживание скорости загрузки сайта);
2. Google Search Console (общая аналитика сайта);
3. Google Analytics (общая аналитика сайта);
4. панель разработчика в Chrome (вкладка Lighthouse, для исправления ошибок);
5. «Яндекс.Вебмастер» (исправление ошибок с точки зрения SEO);
6. «Яндекс.Метрика» (общая аналитика сайта);
7. PR-CY (экспресс-анализ сайта);
8. Ahrefs (анализ обратных ссылок);
9. Popsters (аналитика соцсетей);
10. MozBar (тулбар для анализа ключевых SEO-параметров на открытых страницах);
11. Similarweb (поиск и анализ конкурентов);
12. UsabilityHub (тестирование сайта реальными посетителями).

Ваша заявка принята.
Мы свяжемся с вами в ближайшее время.

Что еще проверить

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

1. Доменное имя и базовые данные (скелет сайта, ключи, дубли, meta-данные, перелинки и т. д.).
2. Весь текст, от карточек товара и блога до UI-текстов.
3. Мобильную версию. Сайт должен работать как на старом Android-смартфоне, так и на последнем iPad.
4. Коннект к соцсетям и ссылочную массу с них на свой сайт.
5. Наличие на сайте раздела отзывов, под каждым товаром / услугой должны быть свои отзывы. Также проверьте, что сайт подключен к «Google Бизнесу» / «Яндекс.Бизнесу» – и что там тоже можно оставить отзыв.
6. Готовый контент для сайта.

Удачи в продвижении сайта!

Как заказать хороший сайт: пошаговое руководство для чайников

На чем писать сайт в 2022

Тренды веб-разработки 2022
Обзор главных тенденций

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

1. Бессерверная архитектура

• BaaS (бэкенд как услуга) — приложения, у которых большая доля серверной части хранится в облаке. Стандартный функционал в такой модели обычно предоставляется в виде SDK или API-шлюзов, а все нужные действия выполняются в облаке. При этом ответственность за обслуживание ПО и инфраструктуры лежит на поставщике BaaS-решения.
• FaaS (функционал как услуга) — сторонняя платформа для разработки, запуска и управления функциональностью, которая запускает части своего кода, ориентируясь на триггеры событий (нужный функционал, вызываемый по запросу). Подход особенно хорош для реализации микросервисов.

Бессерверная и микросервисная архитектура — разница?

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

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

У бессерверной архитектуры есть свои плюсы:

быстрое развертывание приложений, поскольку не нужно заботиться об архитектуре и инфраструктуре — просто пиши себе код;

Технический директор

Про безопасность — всё неоднозначно. Если на этот «бессервер», который обслуживает 1000 клиентов, натравят DDoS-атаку ради того, чтобы замедлить одного из них, — страдать будут и оставшиеся 999, не связанные с целью такой атаки.

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

2. Контейнеры

Из-за растущей популярности бессерверных приложений контейнеры тоже актуальны: Gartner прогнозирует, что к 2022 году более 75% организаций по всему миру будут использовать контейнерные приложения (сейчас таких всего 30%).

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

3. SSG — генераторы статических сайтов

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

Генераторы статических сайтов (SSG) работают иначе. Они создают статичные HTML-страницы на основе шаблона или компонентов, а для контента используют отдельный источник.

• упрощенный стек технологий для обслуживания статических страниц;
• лучшая производительность — страницы сгенерированы заранее;
• безопасность — минимизация динамического контента из-за предварительного рендеринга равна большей устойчивости к атакам.

Технический директор

Из минусов — как минимум, очень большая ограниченность таких сайтов, потому что нельзя просто вывести пользователю «его» контент. И нельзя что-то быстро поменять на таком сайте. Если на обычном сайте есть настройка, влияющая на весь сайт (телефон в шапке, например), ты просто меняешь что-то — и оно обновляется сразу везде. Для SSG — надо полностью перегенерировать сайт при таких простейших изменениях.

Генераторы статических сайтов (SSG) реализуются через фреймворки — например, Next. js, Nuxt. js, Gridsome или Gatsby. К слову, Figma основана как раз на Gatsby.

4. Headless CMS

Традиционные системы управления контентом (CMS) используют структуру для управления контентом, которая объединяет в себе и интерфейс (фронтенд), и серверную часть (бэкенд). Контент при этом связывается с конкретной технологией и архитектурой внутри этой CMS. Но такой монолитный подход в современных веб-средах оказывается неповоротливым.

Headless CMS решают эту проблему: они предоставляют только серверную часть (бэкенд) для управления контентом через API. За счёт этого можно использовать один бэкенд сразу для управления контентом нескольких продуктов: сразу нескольких сайтов или сайта плюс приложения. Это же даёт возможность автоматизировать распространение контента по всем нужным каналам одновременно. Ключевая задача таких CMS — хранить и доставлять контент, а то, как он будет выглядеть для пользователя, уже зависит от действий разработчика.

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

• нет адаптации для российского рынка (в существующих движках не предусмотрены модули для интеграций с нужными российскими сервисами — их придётся писать вручную);
• сложность — нужен достаточный уровень профессионализма разработчика;
• оправданы только на крупных проектах, где изначально предполагается набор разных интерфейсов взаимодействия с пользователем.

Headless CMS с открытым исходным кодом — такую сложнее настраивать, зато возможности для конфигурации и обслуживания шире;

Headless CMS по типу SaaS (Software as a Service, софт как услуга) — более простой в настройке и безопасный вариант, но менее интересный с точки зрения конфигураций.

В топе популярных Headless CMS с открытым исходным кодом — Ghost, Strapi и Netlify CMS. Блоги Tinder, DuoLingo, Mozilla и DuckDuck сделаны с использованием Ghost. IBM, Walmart, NASA и Societe Generale выбрали для себя Strapi.

5. Разработка с JAMstack

Всё большая популярность JAMstack — логичное следствие уже упомянутых трендов на бессерверную архитектуру, использование генераторов статических сайтов и Headless CMS. Термин JAMstack ввели основатели Netlify Мэтт Бийлманн и Крис Бах ещё в 2015 году — решение, как видите, не очень-то новое. Но всё более популярным становится только сейчас.

JAMstack — это аббревиатура от трех понятий: JavaScript, API и Markup (разметка). Собственно, из этих элементов он и состоит:

Три кита JAMstack (источник)

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

Суть подхода вот в чём:

фронтенд отделяется от бэкенда и баз данных и разворачивается через CDN (Content Delivery Network, сеть доставки контента) — за счет этого сайты и приложения работают быстрее;

все нужные экраны предварительно отрисовываются в процессе сборки в виде оптимизированных статических страниц с HTML, CSS и JavaScript (в противоположность им есть динамические, которые реагируют на каждое действие пользователя) — создание каждой новой страницы происходит только при изменении кода или содержимого, а не под каждый запрос пользователя;

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

Чем JAMstack лучше, чем классический подход к разработке (источник)

Где-то уже слышали такое? Похоже на серверный рендеринг, ага? Да, но нет. При использовании подхода JAMstack код отправляется куда-нибудь на GitHub, а все возможные элементы превращаются в заранее отрендеренную статическую разметку, файлы с которой хранятся в CDN. Когда пользователь делает запрос, то браузер обращается не на сервер, а в CDN. А с помощью JavaScript и запросов к API на статическую страницу «накидывается» нужный для проекта динамический контент и персонализация. И получается, что все операции для отображения итоговой страницы под запрос пользователя проводятся уже не на сервере, а на клиенте (в браузере), да ещё и прямо во время билда (сборки) — больше не нужно ничего генерировать ни на сервере, ни на клиенте.

Если объяснять принцип работы JAMstack ещё проще, то контент создаётся через Headless CMS, код — через фреймворк, а чтобы увязать первое со вторым, используется генератор статических сайтов.

Выходит, что большая часть логики веб-приложения делегируется на клиентскую сторону, а весь сложный функционал, обычно требующий времени, ресурсов и знаний для его создания, реализуется через сторонние API (да это же упомянутая микросервисная архитектура!). А раз так, можно не слишком париться о логике серверной части. Бонусом идёт снижение задержки ответа от сервера и снижение нагрузки на него, что равно большей производительности SaaS-приложений и сайтов (Nike и Mozilla, вроде как, уже применяют этот подход).

Тренд на JAMstack обещает открыть большие перспективы для разработки сайтов и приложений, ведь это решение объединяет в себе лучшие инструменты и технологии, вроде React, Webpack, React-router и GraphQL. Этим решение привлекает разработчиков: можно использовать те технологии, что нравятся больше.

Звучит всё это — сказочно круто. Но критики подхода говорят, что «JAM-стэк взял все худшее от статических сайтов, ограничив возможности, и от обычных динамических страниц, взяв оттуда сложность разработки». Не нравится ни связь с GraphQL-запросами, ни работа с фреймворком Gatsby (внутри него много зависимостей, которые со временем могут привести к проблемам при неизбежных обновлениях JS).

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