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

Всем привет! Многие вебмастеры, которые решаются нарисовать дизайн для своего проекта самостоятельно, сталкиваются с проблемой, как подобрать цвета для сайта. Правильный подбор цветовой схемы — та еще головная боль. Это я понял по себе, когда чуть более углубился в теорию передачи эмоций через цвет. Но не все так плохо, ведь есть ряд классных инструментов для полуавтоматической подборки цветов для сайта, о которых я сегодня расскажу. Немного о важности правильной цветовой схемы Если вы активный пользователь Интернета, вам наверняка приходилось закрывать сайт с «вырвиглазными» цветовыми решениями в первые же минуты. На языке маркетологов и SEO-шников это называется высоким показателем отказа. Происходит это по ряду причин: В результате, сайт перестает приносить прибыль, если он коммерческий, люди туда просто не пойдут. Это приведет к снижению доверия к сайту в глазах поисковых систем и его пессимизации. Но как же правильно подобрать цвета для сайта? Вариантов несколько: Как подобрать цвета для сайта? Четыре сервиса и небольшой бонус Accessiblepalette.com — топовый, на мой взгляд, инструмент Для начала рекомендую посмотреть на https://accessiblepalette.com/. В работу в этом проекте можно взять несколько основных тонов, и на выходе получаем готовые цветовые схемы. Также на сайте есть несколько руководств по оптимальному подбору цветовых сочетаний. Colorscheme — второй по значимости инструмент для меня Отечественный проект https://colorscheme.ru я использую уже несколько лет. Тут всё просто: зашел, поставил какой-то цвет как основной, и выбирай схему. Проект позволяет подбирать как контрастные, так и мягкие цветовые сочетания, расставлять акценты. В общем, рекомендую. Materialpalette — подбираем цвета для сайта из готовых цветовых решений Интересный проект для подбора уже готовых цветовых схем из области Material Design, https://www.materialpalette.com/ При клике на один или два цветных блока у вас справа появится окошко с превью, а внизу — будет окошко с цветовой схемой: Colourcode — как подобрать цвета для сайта, если хочется монохромности Интересный проект https://www.toptal.com/designers/colourcode/monochrome-color-builder. Проект позволяет подобрать монохромные цветовые сочетания. Кому-то да понадобится. Небольшой бонус: колдунщик цветов Яндекса, если хочется узнать прикольное название цвета Когда-то колдунщик цветов был популярным инструментом, где можно было запросто подобрать цветовое сочетание и узнать название любимого цвета в качестве бонуса. По уровню полезности я не особо его рекомендую, но кому-то может зайти. Послесловие В этой небольшой статье я рассмотрел три способа, как подобрать цвета для сайта. Главное помнить, что нужно избегать контрастных сочетаний, а также в первую очередь думать об удобстве восприятия сайта пользователем, а не гнаться за модой. Тогда и пользователь ответит проекту взаимностью. С вами был webmaster_zotov, до новых встреч!

Всем привет! Какой он, этот CSS в 2023 году? Какие новые концепции, позволяющие сделать код более эффективным, появились? Эта статья является вольным переводом статьи Writing CSS In 2023: Is It Any Different Than A Few Years Ago? за авторством Geoff Graham. Статья будет полезна начинающим и продолжающим фронтенд-разработчикам. Вместо вступления CSS — одна из наиболее динамично развивающихся в веб-разработке отраслей, а CSS в 2023 году — мощный инструмент. За последние несколько лет были выпущены новые фичи, которые несомненно заслуживают, чтобы из рассмотреть. Часть из этих фич позволит сократить код и увеличить скорость загрузки сайта. Сразу скажу (уже от себя), что в статье рассмотрена лишь малая толика новых фич CSS, которые облегчают жизнь веб-разработчику, так что я выпущу еще несколько материалов. Контейнерные запросы — мощный инструмент CSS в 2023 году Контейнерные запросы — новый способ написания адаптивной верстки, который в какие-то моменты может дополнить обычные медиазапросы. Контейнерный запрос позволяет подогнать размер дочерних элементов контейнера под размер родительского элемента, а также определить точку изменения размера: Используя контейнерный запрос, мы получаем возможность изолировать вёрстку элемента внутри своего контейнера. Также уже нет необходимости подбора ширины вьюпорта, которая бы связывалась  с целевым измерением компонента пользовательского интерфейса в определенном контейнере или определенном контексте. Такой способ применяется для адаптивности отдельных UI компонентов, в разных Больше англоязычной информации по поводу контейнерных запросов: Группировка стилей в слои Группировка стилей в слои позволяет избавиться от использования некоторых библиотек и фреймворков (а это важно для современного CSS в 2023 году), когда речь идет о каскадности. Также слой становится более специфичным, чем селектор CSS. Подробнее можно прочесть в англоязычных материалах: :is(), :where() Такие функции-псевдоклассы позволяют более гибко управлять специфичностью. :is принимает несколько аргументов, и браузер применяет стиль к любому из аргументов, что позволяет избавиться от ненужного кода: вместо :where() — принимает несколько аргументов и применяет стиль к любому из них. В отличие от :is() — специфичность у :where() нулевая. У :is() она равна наиболее специфичному из селекторов-аргументов. :has() Данный псевдокласс хоть и является мощным инструментом, но по состоянию на середину 2023 года не поддерживается firefox: Этот псевдокласс позволяет проверить, есть ли внутри родительского класса какой-либо селектор. Новый синтаксис функции color() Сегодня, для того, чтобы записать прозрачность цвета в CSS, уже можно не указывать альфа-канал и синтаксис правила с буквой -а, можно сделать так: Чуть больше о новом синтаксисе функции color можно прочесть в следующих англоязычных материалах: Prefers-reduced-motion Правило prefers-reduced-motion позволяет дать пользователю возможность работать с сайтом, если в системе у него установлены настройки отключения анимации и высокой производительности: Подробнее о таких селекторах можно прочесть в англоязычных материалах: Цветовые палитры с помощью переменных CSS Интересная схема автора для работы с CSS цветами на больших проектах. Больше англоязычной информации об упрощении работы с цветовыми палитрами: CSS в 2023 году. Заключение Вот такой получился материал. Интересен он или нет — судить вам. Скажу сразу, я буду использовать эти фишки автора в своих проектах, так что в будущем планирую выпустить еще несколько статей на тему CSS. До новых встреч!

Приветствую на страницах блога вебмастера, дорогой читатель! В этой статье я хочу изложить свой ответ на вопрос «как создать задание на разработку сайта», чтобы предприниматель мог достичь полного взаимопонимания с разработчиком и не получить кучу проблем впоследствии. Надеюсь, статья поможет предпринимателю чуть больше ориентироваться в мире разработки. Что такое задание на разработку сайта Техническое задание на разработку сайта — документ, в котором сформулированы требования заказчика к будущему проекту, написанные понятным для технаря языком. Стоит отметить, что составление ТЗ само по себе сложный процесс, требующий внимания и аккуратности от ОБЕИХ сторон, исполнителя и заказчика. Четкое понимание требований к будущему проекту и их фиксация экономит время и нервы предпринимателя и разработчика. Как составить задание на разработку сайта Часто предприниматели думают, что лучше всего — отдать составление задания на разработку сайта исполнителю. Но моя практика показывает, что лучше когда над ТЗ работают одновременно исполнитель и заказчик. Заказчику лучше видна бизнес-сторона проекта, ожидания от работы, технарю — видна техническая сторона, как специалисту. Кроме того, заказчику в итоге будет проще понять, на что будут тратиться его деньги, и за какой срок будет реализован проект, а также проверить компетентность исполнителя. Обязательные пункты ТЗ для сайта Общая информация о предстоящем проекте В этом разделе необходимо описать функционал будущего сайта. Буквально, во всех подробностях, т.к. это сэкономит много времени на этапе приёмки работы. Заказчику необходимо рассказать ожидания от сайта, познакомить исполнителя с потенциальной целевой аудиторией, продукцией компании, поделиться идеями. Можно показать примеры сайтов, которые являются образцовыми для заказчика. Часто заказчик пренебрегает описательной частью, а потом на этапе приемки начинаются споры и «доведение проекта до ума». Технические требования к сайту Как будет работать проект? Будет ли он установлен на CMS WordPress, Opencart и т.п.? А может это будет самописный проект? Как будет работать база данных? Какие требования к хостингу? Такие вопросы лучше обсудить с разработчиком заранее, чтобы не было недопонимания. Все используемые на проекте движки и библиотеки обсуждаются между заказчиком и разработчиком. Это же касается и требований к работе сайта на различных браузерах. Структура сайта Фраза «сделай красиво» для программиста не работает, вебмастеру важно четкое понимание, сколько страниц будет на сайте, какие формы, модальные окна, меню и т.п. элементы планируются к размещению. Крайне желательно создать текстовый прототип сайта, с описанием всех страниц, а также пути пользователя по сайту. Контент Раздел создается по желанию, но лучше прописать, кто будет отвечать за контент. Не все вебмастеры являются талантливыми копирайтерами. Кроме того, при разработке сайта графический контент (изображения товаров) должен идти от заказчика, и об этом тоже стоит упомянуть в ТЗ. Дизайн-проект Дизайн-проект сайта — важный и сложный для описания раздел. Часто ни заказчик, ни вебмастер не имеют понятия о сочетании цветов, об их влиянии на психологию человека, о сетках, UI и других нюансах создания интересного посетителям проекта. Поэтому важно привлечь к созданию дизайн-проекта специалиста. 6 потенциальных ошибок при составлении задания на разработку сайта 1. Слишком расплывчатая формулировка Что такое «красивый сайт»? А что такое «быстрая работа»? Понятие быстрой работы и красоты у каждого своё, поэтому старайтесь избегать таких терминов при составлении ТЗ. Вместо этого лучше использовать точные термины, например: 2. Изобилие сложных терминов Часто встречается у заказчиков, которые уже что-то смыслят в интернет-маркетинге и пытаются блеснуть познаниями в ТЗ. Вебмастер может быть отличным программистом, но не понимать ROI, ROMI, CTR, показатель отказов и другие сложные термины. Это работа интернет-маркетолога или SEO оптимизатора. Поэтому рекомендуется либо: 3. Заказчик стремится блеснуть познаниями в области разработки Такое бывает, когда предприниматель время от времени смотрит Youtube каналы о разработке и слышит новые для него термины вроде ES6, SPA, React и проч., горя желанием их применить. При этом такие современные решения могут быть избыточными, и это надо обсуждать с разработчиком. Обилие нововведений и применение самых современных технологий порой приводит к сложному в поддержке коду. 4. Недостаточно точно сформулированные требования к сайту Забыли указать CMS, на которой хотите видеть будущий сайт? Забыли указать расширение и размеры изображений на сайте? Забыли указать тип СУБД? Будьте готовы как минимум к уточняющим вопросам от разработчика. 5. Непонятные сценарии использования сайта Под сценарием использования сайта я подразумеваю описание пути посетителя по нему. Что делает визитер на сайте? Нажмет CTA кнопку, перейдет по ссылкам на посадочную страницу? Или может вы хотите, чтобы посетитель совершил заказ, прочитав УТП на первом экране сайта? Это лучше заранее обговорить с разработчиком. 6. Не записаны юридические моменты, связанные с работой проекта Такая проблема характерна для интернет-магазинов, где требуется организовать работу платежной системы на сайте. У тех же Robokassa или Paymaster есть собственные наборы требований к структуре и информации сайта буквально начиная с главной страницы. Поэтому лучше заранее обговорить все подобные моменты с вебмастером, чтобы потом не пришлось в спешке создавать дополнительные страницы с контактной информацией. А что со сроками? Раздел, который не относится напрямую к техническому заданию, но крайне важен к оформлению в виде доп.соглашения сторон. В разделе желательно прописать план работ и планируемые сроки реализации проекта, а также ответственность сторон, порядок работы с конфиденциальной клиентской информацией и прочие моменты. Вместо послесловия Нельзя просто так взять и составить ТЗ на разработку сайта. Это результат кропотливой совместной работы заказчика и исполнителя, которая позитивно отразится на дальнейшем сотрудничестве.

Как создать личный сайт врача? С какими трудностями пришлось столкнуться? Что реализовал, что в проекте? Обо всем этом в первой записи новой рубрики «Портфолио». Предыстория Несколько месяцев назад ко мне обратился замечательный человек, талантливый врач, Антон Евгеньевич Ротов. И попросил модернизировать его сайт, т.к. старый был спроектирован аж в 2013 году, создавался «на коленке» и уже переставал отвечать современным требованиям. Сначала я взял сайт на техническую поддержку, но потом было принято совместное с заказчиком решение переписать всё с нуля и поставить современную систему управления контентом. Результат — вот здесь. Дизайн Дизайн личного сайта врача — дело непростое. Анализ конкурентов и трендов в области медицинских сайтов дал пищу для размышлений. В итоге за пару недель я прорисовал сайт в бирюзовой цветовой гамме. Иконки на главной странице — заказные, если интересно, скажу, кто мне их рисовал. Дизайн был разработан с учетом требований адаптивности для мобильных устройств. Также была разработана версия сайта для слабовидящих, в соответствии с ГОСТом. Технологии При проектировании сайта я сразу принял решение создавать его на любимом WordPress, т.к. сайт контентный, предполагает размещение статей медицинской тематики. И важно было сделать это размещение легким и быстрым. Список примененных технологий: Интересные решения для личного сайта врача Личный сайт врача — это не только медицинские статьи, но и CRM-система, система записи на прием, а также обязательная версия для слабовидящих согласно требований ГОСТ. Кроме того, современные требования того же Google диктуют ряд особых условий для публикаций, размещенных на медицинских сайтах. Например, надо обязательно подтверждать экспертность автора как минимум на странице с информацией о нем. Указать опубликованные статьи, регалии и проч. Всё это (кроме системы записи на прием, взятой с предыдущего сайта и доработанной) я успешно реализовал: С какими трудностями пришлось столкнуться При создании личного сайта врача мне пришлось столкнуться с рядом проблем. Перенос ссылочной массы. Старый сайт уже был трастовый с наработанной ссылочной массой. Но был сделан достаточно некачественно, в результате чего пришлось аккуратно переносить ссылки на новый сайт, одновременно с контентом статей. Перенос всех комментариев пациентов со старого сайта на WordPress. Было долго, трудно, но результат стоил усилий. Наработки по переносу комментариев в WordPress я изложил здесь. Интеграция и доработка кастомной системы записи на прием в WordPress. Программист, создававший старую версию сайта, оставил много мусора в коде, в результате — пришлось попотеть. Но система успешно работает и радует посетителей. Сколько стоит личный сайт для врача и сколько создается по времени? Срок создания личного сайта врача (без учета решения проблем, описанных выше): Таким образом, сайт был готов к использованию приблизительно за 3 недели. Стоимость всех работ составила 25000 рублей. Вместо послесловия Это реально интересный проект, который я готов развивать и далее. Впереди — доработка CRM и внедрение еще ряда новых идей.

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

Всем привет! Как сделать кнопку в CSS? Точнее не так, как сделать КАЧЕСТВЕННУЮ кнопку в CSS? Которая бы смотрелась одинаково хорошо во всех браузерах? В этой статье (являющейся переводом статьи Ахмада Шадида) я постараюсь ответить на этот вопрос. Для чего нужны кнопки <button> на сайте Прежде чем начать стилизовать кнопку неплохо бы понять для себя ее предназначение. Итак, согласно спецификации от MDN, кнопка является кликабельным элементом, который может быть использован в формах или любом другом месте документа. При установке кнопки <button> для организации интерактивности на сайте следует учитывать, что она не работает без действий, назначенных через JavaScript. А это, в свою очередь, влечет некоторые проблемы для устаревших браузеров. Кнопки или ссылки? У вебмастеров можно встретить разный подход к использованию кнопок и ссылок для организации интерактивности на сайте. Но семантически правильно — использовать кнопки, а не ссылки. Ссылка — элемент, семантически предназначенный для перевода пользователя на другую страницу. Кнопка — элемент, предназначенный для нажатия на неё. А еще кнопки чуть проще стилизовать. По сравнению с гиперссылками, кнопка обладает рядом дополнительных возможностей: В HTML формах использование кнопки вообще является обязательным. Но расмотрим подробнее стилизацию кнопок в CSS. Как сделать кнопку в CSS? Делаем кнопку универсальной для всех браузеров и систем Задаем основную стилизацию Основная стилизация кнопки подразумевает задание: Задаем стили для focus и hover эффектов Focus — эффект, возникающий, например, при переключении по элементам на сайте с помощью клавиши Tab.Hover — эффект, возникающий при наведении курсора мыши на кнопку. Поведение кнопки у обоих эффектов задается псевдоселекторами :focus и :hover соответственно. При работе с псевдоселекторами :hover лучше помещать ПЕРЕД :focus, во избежание переопределения стилей. Задаем стиль для отключенной кнопки Задание стиля для отключенной кнопки (с атрибутом disabled) лучше также предусмотреть заранее. Продвинутые технологии Как сделать кнопку с иконкой в CSS Кнопки с иконками достаточно популярны на сайтах. Чтобы сделать кнопку в CSS с иконкой, нам понадобится: Код кнопки с иконкой Рассмотрим подробнее конструкцию: Пример стилизации такой кнопки с иконкой: Как сделать кнопку с текстом только для читалок экрана Если кнопка выполнена с элементом <span> и если необходимо отобразить текст у кнопки только на читалках экрана, можно применить для этого такой класс: Как сделать кнопку с несколькими строками Порой бывают ситуации, когда необходимо вписать достаточно большой текст в кнопку. В этом случае можно поставить туда два тега <span> и спрятать какой-либо из них от читалок экрана: Как сделать кнопку с градиентом Чтобы сделать кнопку с градиентом, нужно записать в CSS примерно следующее Заключение В этой небольшой статье я постарался дать ответ на вопрос «как сделать кнопку в CSS». Я специально не стал включать сюда некоторые дополнительные пункты из статьи-оригинала, чтобы не утомлять читателей дополнительным контентом. С вами был webmaster_zotov, до новых встреч!

Всем привет! В работе вебмастера случается всякое, и недавно мне пришлось переносить комментарии на проект WordPress с самописного проекта. Задача, прямо скажу, нетривиальная. О способах решения проблемы я и хочу рассказать в очередной статье. Как перенести комментарии, пошагово Сам по себе процесс добавления комментариев на страницу или в запись WordPress не особо сложный. Чтобы добавить комментарии в WordPress: Проверьте установку флажка «разрешить комментарии», если вы хотите добавить их на страницу В новых версиях WordPress, оснащенных редактором Gutenberg, флажок расположен сбоку: Проверьте установку функции comments_template(); в шаблоне страницы Функция comments_template() по умолчанию подгружает форму комментариев, расположенную в файле comments.php, на вашу страницу. Можно поставить в качестве аргумента ссылку на свой файл с шаблоном комментариев. В итоге, базовое подключение шаблона комментариев в коде страницы вашего сайта будет выглядеть так: Экспорт комментариев с самописного проекта При переносе данных со стороннего сайта на WordPress процесс добавления комментариев (если они есть и если перенос их заранее согласован с заказчиком) — уже более трудоемкая задача. Можно конечно вносить их вручную, но это же не наш метод! Есть несколько более интересных способов решения задачи. Как перенести комментарии на страницу WordPress с помощью плагина В любой, более-менее нормальной CMS комментарии заносятся в базу данных, что позволяет выгрузить дамп таблицы с комментариями через любую систему управления MySQL сервером, например phpmyadmin: При экспорте данных я рекомендую выбирать формат CSV, т.к. именно он проще всего для дальнейшего редактирования и работы с плагинами. Затем можно добавить комментарии на страницу WordPress с помощью плагина WordPress Comments Import/Export, позволяющего экспортировать данные из CSV файла. Перенос комментариев в WordPress с помощью правки SQL базы данных Если перенос комментариев на проект WordPress с помощью плагина по какой-то причине вас не устраивает, можно пойти другим путем и редактировать таблицу с комментариями напрямую. Для этого понадобится административный доступ к хостингу и установленный phpmyadmin для более удобной работы. Сперва вам надо будет зайти в базу данных вашего сайта на WordPress и найти таблицу wp_comments: Таблица wp_comments состоит из следующих столбцов: Второй шаг — добавление комментариев. К сожалению, удобство phpmyadmin при работе с большим количеством данных оставляет желать лучшего, поэтому я составил текст запроса на массовое добавление комментариев для удобства: Последнюю часть в скобках можно размножить неограниченное количество раз и скопировать данные из вашего CSV файла. Третий шаг — добавление комментариев в таблицу wp_comments. Для этого нужно открыть вкладку SQL в phpmyadmin (разумеется, выбрав таблицу wp_comments во вкладке слева) Затем введите запрос с комментариями в поле и нажмите кнопку «Вперед». Если в синтаксисе запроса не было ошибок, комментарии будут интегрированы в таблицу. Вот так можно добавить комментарии на страницу WordPress при переносе с другого сайта. С вами был webmaster_zotov, до новых встреч!

Всем привет! Как увеличить скорость загрузки сайта? Сегодня этот вопрос волнует многих вебмастеров, ведь в последнее время поисковые системы пессимизируют в выдаче медленные проекты. В этой статье я изложу свое видение оптимизации скорости загрузки и приведу 7 наиболее эффективных методов ее увеличения. Готовы? Поехали… Как анализировать скорость загрузки сайта Скорость загрузки сайта — комплексный показатель. Как правило, на него влияют следующие факторы: Проверка скорости загрузки сайта осуществляется с помощью сторонних сервисов, например Google Pagespeed Insights. Работа на этом сервисе проста: вы вводите нужный URL в форму, нажимаете кнопку и получаете оценку скорости работы сайта и список рекомендаций по ее увеличению. Хочу отметить, что «зеленая зона» по скорости сайта (от 80% оптимизированности) — это показатель, к которому нужно стремиться, но на который не нужно полагаться как на панацею. Увеличить скорость загрузки сата, но при этом иметь кучу бесполезных статей или неоптимизированную перелинковку….ну такое себе решение. Но мы отвлеклись, а я обещал рассказать вам про 7 способов, как увеличить скорость загрузки сайта. Способ 1. Оптимизировать изображения Сайту нужны изображения. Это факт. Но качественный графический контент одновременно является мощнейшим фактором, влияющим на скорость загрузки. Обычно Google Pagespeed сам говорит нам об этом: Коротко, рекомендации по работе с изображениями для увеличения скорости загрузки сайта: Оптимизировать размер изображений можно через сервисы https://kraken.io или tinypng.com Способ 2. Увеличить скорость загрузки сайта через хостера Скорость загрузки сайта может определяться и возможностями площадки, на которой он размещен. Проверенные хостеры предлагают своим пользователям неплохой набор ресурсов для размещения сайтов. Коротко, рекомендации по выбору хостинга для увеличения скорости загрузки сайта: Способ 3. Оптимизировать СSS файлы Если HTML — сердце вашего сайта, то CSS — то, что дает этому сайту путевку в жизнь. И как правило, объем CSS файлов для любого мало-мальски нормального проекта получается приличным, в несколько десятков килобайт минимум. А если сайт использует сторонние плагины и фреймворки типа Bootstrap — количество трафика и время загрузки возрастают значительно. Рекомендации по работе с CSS файлами для увеличения скорости загрузки сайта: Способ 4. Оптимизировать загрузку скриптов JavaScript — мощное средство, без которого немыслима работа современного сайта. Оптимизация JavaScript на сайте — мощный стимул для ускорения его работы. Рекомендации по работе с JavaScript для улучшения скорости загрузки: Кроме этого, важно проверять нагрузку на сайт от плагинов аналитики и интерактивных карт. Это действительно важно: Если сервисы значительно снижают скорость загрузки, а не использовать их — не вариант, то рекомендую попробовать интегрировать их единым блоком кода через Google Tag Manager. Способ 5. Проверить сторонние плагины (актуально и для сайтов на WordPress) А вы когда-то проверяли, какой объем скриптов загружает ваш любимый плагин для WorPress? Недавно я работал с одним клиентским проектом и ужаснулся: Проблема в том, что далеко не все авторы плагинов заботятся об оптимизации кода своих творений. Попадаются и неминифицированные CSS файлы, и подгрузка мощных фреймворков (это при учете уже загруженного bootstrap на вашем сайте). Оптимизировать работу плагинов — кропотливая работа, но она определенно даст свой результат. Способ 6. Оптимизировать структуру HTML страницы Под оптимизацией структуры HTML страницы я понимаю: Способ 7. Шрифты. Маленький лайфхак Рендеринг шрифтов еще до загрузки семейства важен для юзабилити вашего сайта, ведь пользователю лень дожидаться загрузки всех графических эффектов, ему важно решить свою проблему. Поэтому лучше использовать современные технологии, а именно предварительный рендеринг шрифтов. Свойство для такого рендеринга — font-display: swap. Оно позволяет подгружать так называемый fallback-шрифт (шрифт по умолчанию для браузера) до подгрузки семейства. Применение свойства font-display: swap позволяет увеличить скорость загрузки сайта еще на несколько пунктов. Заключение В этой статье мы рассмотрели 7 основных способов, позволяющих ускорить загрузку сайта. Они помогут стать чуть популярнее в глазах поисковиков и заслужить благодарность пользователей. С вами был webmaster_zotov, до новых встреч!

Как проверить кроссбраузерность сайта? Вопрос актуален не только для новичков в мире веб-разработки, но и для заказчиков, желающих убедиться в качестве принимаемого сайта. В этой статье рассмотрены онлайн- и офлайн способы проверки кроссбраузерности, а также обсуждается проблема такой проверки для разработчиков, у которых нет устройств Apple (а таких много). Что такое кроссбраузерность Для начала определимся с терминами: Кроссбраузерность — работа сайта без сбоев в вёрстке, функционировании и юзабилити в популярных браузерах, под управлением ОС Unix, Windows, Apple. Популярные браузеры — браузеры, традиционно входящие в ТОП пользовательских предпочтений: Я специально не вношу в список менее популярные браузеры типа Vivaldi, Brave, Yandex браузер. Эти браузеры работают на движке Webkit, и если сайт корректно отображается в Google Chrome, он будет корректно отображаться и в указанных браузерах. В конечном итоге, кроссбраузерность нужна для создания положительного впечатления от работы сайта у посетителей и, как следствие, для увеличения количества целевых действий на сайте и поднятия позиций в Google и Яндекс. Как добиться кроссбраузерности По сути, достижение кроссбраузерности сводится к написанию т.н. браузерных (вендорных) префиксов в CSS коде сайта для каждого из нужных элементов. Например, так выглядит кроссбраузерный код для написания кнопки с префиксом для браузера Firefox: Префиксы пишутся как вручную, так и автоматизировано, с помощью сборщиков типа Gulp. Для браузеров типа Internet Explorer (старее IE11), пишутся дополнительные полифиллы (специальные блоки кода на языке JavaScript). Кроме того, разработчики применяют CSS-хаки, рецепты которых размещены на популярных интернет-форумах. ТОП сервисов для проверки кроссбраузерности сайта онлайн Онлайн-сервисы для проверки кроссбраузерности уже давно вошли в жизнь веб-разработчика, но на мой взгляд, полагаться на них полностью не стоит. Несмотря на описанные выше недостатки, онлайн-сервисы для проверки кроссбраузерности — отличные инструменты, и я составил свой ТОП-5. При составлении рейтинга я ориентировался на удобство для пользователя, лайв-тестирование без предварительной регистрации, а также на скорость работы сервиса. 1. Screenfly Сервис, дающий на лету проверить, как будет выглядеть сайт при работе на устройствах с разным разрешением экрана. Поместил его на первое место не за функционал, а за скорость работы. Плюсы: Минусы: 2. Browsershots Сервис, который проверяет сайт на нескольких браузерах и создает скриншоты для каждой итерации проверки. Плюсы: Минусы: 3. Browserstack Сервис для тестирования как сайтов, так и мобильных приложений. Плюсы: Минусы: 4. Browserling Дает протестировать сайт под управлением Windows и Android. При тестировании открывает нечто вроде виртуальной машины в браузере, (3 минуты в бесплатной версии), где можно проводить разные действия с сайтом. Плюсы: Минусы: 5. IE NetRenderer Сервис, проверяющий работу в браузерах Internet Explorer, в том числе и на устаревших. Подойдет для тех, кому важно обеспечить работу именно на Internet Explorer, потому что других браузеров для тестирования на этом сервисе НЕТ. Плюсы: Минусы: Как проверить кроссбраузерность на ПК? Проверить кроссбраузерность сайта можно не только на онлайн-сервисах. Часто бывает достаточно установить на свой ПК три браузера: Каждый из этих браузеров использует свой популярный движок, и работоспособность проекта на трех указанных выше браузерах означает работоспособность на 90% устройств в Сети. Для проверки работоспособности на ОС Unix (если вы работаете на Windows) используются технологии виртуализации Windows, либо сторонние программы типа VirtualBox. Плюсы такого подхода: Минусы: Как проверить сайт на Safari, работая на Windows А вот тут вебмастерам, работающим на Windows, не повезло. Ни один онлайн инструмент для тестирования пока еще не может на 100% отследить баги, которые возникают в браузере Safari, на iOs или macOS. А версия браузера Safari для Windows перестала поддерживаться еще в прошлом десятилетии. К счастью, Apple открыла исходный код одной из версий своей ОС, и это дает определенные надежды на появление адекватных инструментов…но в будущем. Итак, проверить работоспособность сайта на устройствах от Apple, работая в Windows, можно несколькими способами: Заключение В этой статье я постарался ответить на вопрос, почему кроссбраузерность сайта так важна и какие существуют инструменты для тестирования. Онлайн-сервисы решают проблему тестирования быстро, пусть и не бесплатно. Но офлайн-тестирование на ПК через инструменты разработчика дает больше информации, хоть и требует больше навыков в общении с ПК. С вами был webmaster_zotov, до новых встреч!