Хотя некоторые из нас, возможно, не задумываются об установке последней версии веб-браузера на свой компьютер, не у всех есть такая роскошь.
Различные факторы могут привести к тому, что человеку придется пользоваться Интернетом с помощью устаревшего инструмента просмотра.
Таким образом, веб-разработчикам приходится создавать сайты, которые не только одинаковы во всех браузерах (от Chrome до Firefox и Safari), но и в более старых версиях.
Старший фронтенд-разработчик IMPACT Тим Остхаймер объяснил, как это выглядит на практике и почему это важно.
Почему вам нужна оптимизация для старых браузеров
Джон: Должны ли веб-сайты быть отзывчивыми и поддерживать старые браузеры?
Tim: Да, это необходимая часть работы веб-разработчика. Кроссбраузерная поддержка и оперативность необходимы в современную эпоху, потому что вы не всегда точно знаете, как пользователь будет получать доступ к вашему веб-сайту.
Большинство пользователей, включая меня, верны одному браузеру - обычно Google Chrome, но некоторые нет.
Между различными браузерами существуют различия, и важно убедиться, что ваш сайт правильно работает во всех из них или, по крайней мере, в тех, которые используются большей частью вашего трафика.
Стоит ли оптимизировать?
Оптимизация веб-сайта для некоторых из самых старых браузеров не всегда целесообразна.
Часто это может привести к ограничениям возможностей вашего веб-сайта, что может иметь прямое влияние на производительность вашего веб-сайта и, следовательно, на большинство ваших пользователей.
Это также может занять много времени. Стоит ли тратить много усилий на 0,01% вашего трафика? Может быть! Ответ не однозначен, поскольку обычно речь идет о балансе ваших усилий.
Даже если лишь небольшая часть трафика вашего сайта использует устаревший браузер, вы не хотите лишать их возможности использовать ваш сайт по назначению.
Некоторые из этих пользователей могут быть ценными потенциальными клиентами, а плохо оптимизированный веб-сайт может их разочаровать или заставить потерять веру в качество ваших услуг.
Частые посетители веб-сайта, скорее всего, будут использовать несколько устройств, например настольный компьютер, когда они дома, и ноутбук или телефон, когда они путешествуют или на работе.
Важно, чтобы впечатления были последовательными и казались знакомыми, даже если веб-сайт выглядит немного по-другому.
Кто использует старые браузеры?
Вы можете предположить, что использование браузера - это общий показатель, который можно найти в Интернете.
Отчасти это верно, но в некоторых отраслях, которые полагаются на определенные устройства или старые операционные системы, из этих старых браузеров может исходить больше трафика, чем вы ожидаете.
Первое, что вам следует сделать, это просмотреть аналитику трафика вашего веб-сайта и определить, какие браузеры используются наиболее и наименее часто. Это сразу поможет вам определить, на чем сосредоточить усилия по кроссбраузерной оптимизации.
Если вы планируете редизайн веб-сайта, это следует сделать на ранних стадиях проекта, чтобы все участники понимали, какие браузеры он должен поддерживать, а также какие ограничения следует учитывать.
Большинство современных браузеров поддерживают современные функции, а некоторые старые браузеры тоже поддерживают современные функции. Однако старые браузеры имеют ряд поддерживаемых возможностей, и для их правильной работы может потребоваться обходной путь или вариант, специфичный для браузера, если это вообще возможно.
Вы можете быть удивлены, узнав, что в таком браузере, как Microsoft Edge, отсутствуют некоторые функции, которые есть в Chrome и Firefox с 2010 года, поэтому следует либо избегать некоторых функций, либо необходимо реализовать запасное решение, чтобы гарантировать, что веб-сайт будет функциональный.
Сравнение браузеров
Джон: Можете ли вы привести пример возможности или функции, которая есть у одного браузера и нет у другого?
Tim: В большинстве ситуаций поддержка браузера конкретно связана с CSS (каскадными таблицами стилей), которые определяют внешний вид элементов на веб-странице. Однако поддержка браузера также может влиять на другие формы кода или разметки.
При использовании CSS одним из примеров является способ отображения фоновых изображений на веб-сайте.
Background-size - это часто используемый атрибут CSS, который позволяет разработчикам масштабировать фоновое изображение, чтобы оно покрыло всю область его ограничивающего прямоугольника.
Этой функции нет в Internet Explorer 8, последней версии Internet Explorer, которую можно использовать в Windows XP.
Я знаю, о чем вы думаете: «Никто до сих пор не использует Windows XP». Мне бы хотелось, чтобы это было так, и за последние несколько лет ситуация определенно стала лучше, но некоторые пользователи все еще застряли в прошлом.
Иногда компании полагаются на устаревшее программное обеспечение, если от него зависит весь их процесс. Пересоздание программного обеспечения для современных устройств может быть слишком дорогим, отнимающим слишком много времени или слишком разрушительным, чтобы его рассматривать.
Что-то вроде размера фона не может привести к тому, что веб-сайт станет непригодным для использования, но это определенно повлияет на его внешний вид.
Кроме того, отсутствие поддержки этой функции может привести к тому, что содержимое веб-сайта станет неразборчивым.
Например, что, если белый текст обычно отображается на темном фоне, но из-за отсутствия поддержки фонового эффекта вместо этого текст отображается на светлом фоне. Этот пользователь может вообще не увидеть этот текст, что приведет к ухудшению его работы и упущению возможностей для вашего бизнеса.
Чтобы избежать подобной ситуации, необходим обходной путь, гарантирующий, что веб-сайт будет выглядеть одинаково в браузерах, которые не поддерживают эту важную функцию.
Он не обязательно должен выглядеть одинаково - он просто должен быть функциональным. Ничего страшного, если есть небольшие различия, если веб-сайт по-прежнему можно использовать и эффективно выполняет свою задачу.
Возможно, решение состоит в том, чтобы использовать повторяющуюся текстуру в качестве фонового изображения вместо точно размещенного изображения. Или, возможно, решение состоит в том, чтобы использовать Javascript для позиционирования изображения аналогичным образом.
Метод зависит от того, что поддерживает браузер и насколько важна эта функция.
Другой пример - оптимизация для сенсорных устройств. Поскольку на сенсорных устройствах нет мыши, эффекты наведения отсутствуют. Но что, если основная навигация на вашем веб-сайте использует эффект наведения для отображения раскрывающихся списков?
Это не связано с браузером - это связано с устройством. Это пример важной функции, которая требует тестирования и решения, если это необходимо, чтобы обеспечить функциональность вашего веб-сайта для всех пользователей.
Какие браузеры должны поддерживаться
Джон: Как вы определяете, какие браузеры поддерживать?
Tim: Это всегда будет зависеть от аналитики посетителей каждого веб-сайта. Не существует конкретного правила или предложения по поддержке браузера, все сводится к тому, стоят ли усилия окупаемости.
В IMPACT мы больше не создаем наши веб-сайты таким образом, чтобы они полностью поддерживались такими старыми браузерами, как Internet Explorer 8, если только это не необходимо целевой аудитории.
Хотя, когда я впервые присоединился к этой компании семь лет назад, я был уверен, что мы делаем это. В большинстве ситуаций объем трафика просто не стоит времени, затраченного на его поддержку.
Поскольку большинство наших веб-сайтов созданы на базе HubSpot, мы обычно оптимизируем сайты на основе собственного списка поддерживаемых браузеров.
На самом деле мы оптимизировали Internet Explorer 9 до тех пор, пока HubSpot не выпустил обновление, которое начало вызывать проблемы с ним.
Но это не значит, что мы не можем оптимизировать наши сайты для старых браузеров - это просто усложняет задачу.
Чтобы развиваться, мы должны в конечном итоге оставить Internet Explorer позади.
Тестирование поддержки браузера
Джон: Как лучше всего определить или протестировать поддержку браузера?
Tim: Лично я, если есть какая-то функция, в которой я не уверен, я ищу ее в разделе «Могу ли я использовать». Для упрощения тестирования мы используем BrowserStack для просмотра наших веб-сайтов в различных средах.
Хороший веб-разработчик знает, на что обращать внимание, но чтобы этому научиться, нужны время и опыт.
Я лично знаком с поддержкой большинства функций браузерами и могу заранее избежать необходимости реализации обходных решений, просто создавая веб-сайты наиболее широко поддерживаемым способом.
Следует иметь в виду, что существует множество способов создания веб-сайтов, и хотя современные методы браузера обычно являются более быстрыми, они не всегда являются правильными, если вы хотите, чтобы что-то работало для всех пользователей.
Как правило, лучше создать веб-сайт с учетом кроссбраузерной поддержки, а не пытаться реализовать это позже.
Вы не хотите создавать целый веб-сайт только для того, чтобы обнаружить, что он полностью не работает в Internet Explorer.
Что еще влияет на внешний вид сайта?
Джон: Существуют ли другие распространенные ситуации или условия, которые могут повлиять на внешний вид веб-сайта?
Tim:Одним из наиболее распространенных являетсясетевые брандмауэры.
Хотя большинство компаний работают с более новыми технологиями, чем устройства под управлением Windows XP, во многих из них установлены очень строгие сетевые брандмауэры.
Это зависит от того, как настроен брандмауэр, поэтому сложно проверить, как может выглядеть ваш веб-сайт, и вам, возможно, придется просто предсказать проблемы, которые это может вызвать.
Например, пользователи с таким подключением могут не иметь доступа к определенным веб-сайтам - могут быть определенные домены, которые заблокированы. Это могут быть сторонние сервисы или скрипты, используемые для отслеживания, или встроенные плагины.
Если вы используете службу, которая встраивает собственный шрифт на ваш сайт, некоторые брандмауэры могут заблокировать этот файл, если он не размещен в том же домене, что и ваш сайт.
Если нужный шрифт не загружается, эти пользователи могут вместо этого видеть весь ваш текст как Times New Roman.
Лучшим решением здесь было бы либо встроить шрифт так, чтобы он подходил для этих сред, либо выбрать лучший запасной шрифт, чтобы ваш сайт выглядел так же, как ваш собственный, даже если это не тот шрифт, который вам нужен. хотел.
Помните, оно не обязательно должно выглядеть одинаково - оно просто должно быть функциональным. Или, в данном случае, он не обязательно должен выглядеть одинаково - он просто должен выглядеть прилично.
Google Chrome на вершине кучи
Джон: Вы лично видите проблему в том, что один браузер, Chrome, занимает такую большую долю рынка (около 60%)?
Тим: Лично нет. Для веб-разработчиков большинство пользователей предпочитают Google Chrome, поскольку это означает, что большинство пользователей будут использовать один браузер, поддерживающий современные функции.
Это также означает, что я могу создать веб-сайт и в первую очередь провести тестирование в Google Chrome и знать, как он будет выглядеть для большинства пользователей. Основная проблема заключается в том, что у Google слишком много власти, но совершенно очевидно, какое влияние Google оказывает на мир, и его веб-браузер - лишь небольшой аспект этого влияния.
Однако популярность среди пользователей нескольких браузеров – это тоже хорошо, поскольку каждый из них будет постоянно способствовать развитию браузерных технологий и постоянно побуждать друг друга к улучшению.
Например, Firefox является лидером в обеспечении лучшей конфиденциальности и обработки конфиденциальных данных, тогда как Google сосредоточен на продвижении технического аспекта и среды разработки с открытым исходным кодом, чтобы предоставить людям инструменты, необходимые им для активной работы и сотрудничества..
Браузеры стремятся к конфиденциальности
Джон: Раз уж мы заговорили о браузерах, сетевых брандмауэрах и безопасности. За последний год вышло новое обновление Firefox, также вышло новое обновление Edge Chromium, и Google объявил, что Chrome будет откажитесь от сторонних файлов cookie
Как, по вашему мнению, это стремление к конфиденциальности влияет на маркетинг и веб-разработку?
Тим: Мы сейчас в самом разгаре. В этом нет ничего нового, мы просто находимся на том этапе, когда все начинает реализовываться. Вопрос конфиденциальности данных определенно никуда не денется, но и паниковать тоже не из-за чего.
Функции, анонсированные и добавленные здесь, хороши для всего мира, и маркетинг не сильно изменится.
Эти функции в первую очередь влияют на методы отслеживания, которые основаны на сторонних файлах cookie, но большинство этих служб готовы к этому изменению, уже адаптировались к нему или активно ищут альтернативные решения.
Если вы непосредственно не занимаетесь разработкой подобных сервисов, обычному веб-разработчику не нужно беспокоиться об этих изменениях.
Функции веб-сайта, которые не зависят от сторонних служб отслеживания, не будут затронуты, и именно это браузеры поощряют при внесении таких изменений.
Кроме того, что-то вроде плагина браузера или внутреннего брандмауэра, скорее всего, в любом случае заблокирует подобные службы, поэтому лучше на них не полагаться.