Как сделать одинаковое отображение сайта на всех устройствах
Обновлено: 07.07.2024
Вам нужно попробовать создать сайт на конструкторе. На Tobiz, где я делала, адаптивная версия уже включается в стоимость тарифа. Не пришлось обращаться к программистам. Мне, например, сложно во всем разобраться, а тут вроде и проще. То есть человек будет заходить с телефона или планшета на ваш сайт и под размер экрана будет подстраиваться сайт.
Адаптивный дизайн - это одинаковое отображение сайта на любом устройстве и в любом браузере. Для создания адаптивного дизайна используются средства языка css. Например, страница обычного сайта будет выглядить на смартфоне уменьшенной копией, а с адаптивным дизайном изображения и текст перестраиваются так, чтобы их можно было прочитать без увеличения экрана. Пути. Читать далее
Ваш веб-сайт уже оптимизирован под мобильные устройства? Если еще нет — это не конец света. Современные браузеры содержат такие нововведения, как пинч-зум и автоматическая регулировка размера шрифта.
1. Установите правильные атрибуты полей форм
Если вы используете на сайте поля ввода для имени пользователя или адреса, выключайте autocorrect и включайте autocapitalize :
Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “ Erwan ”, на что-то вроде “ Erevan ”.
Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “ Ken burns ” станет “ Ken Burns ”):
Подумайте обо всех подводных камнях, с которыми пользователь может столкнуться на вашем сайте.
И не уходя далеко от темы. Если ваш сайт запрашивает email у пользователя — используйте поле email , чтобы посетителю не приходилось вводить символ @ с клавиатуры мобильного устройства:
2. Задайте подходящую для мобильных устройств ширину
Откройте ваш сайт в браузере вашего компьютера и уменьшайте ширину окна программы до тех пор, пока не сможете что-либо прочитать в нем.
Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head :
В следующий раз, когда ваш сайт будет открыт на мобильном устройстве, будет автоматически установлена указанная вами ширина. Посетителю сайта не придется пользоваться зумом:
Эта картинка демонстрирует лишнее место справа:
А эта картинка показывает правильно установленное значение ширины.
Если же ваш сайт построен на основе резиновой верстки и работает со всеми размерами экрана, ваша задача становится еще проще. Нужно экспериментировать с шириной, при которой вид сайта на мобильном устройстве становится приятным и читабельным, и установить это значение в теге meta .
3. Установите ширину картинок в 100%
Теперь, когда ваш сайт имеет определенную ширину, некоторые изображения станут очень широкими. Этого не случалось ранее, потому как разрешения десктопных мониторов довольно широки и большинство картинок помещаются по ширине:
Чтобы этого избежать, установите значение максимальной ширины ваших изображений в 100%. Таким образом, изображения будут автоматически менять размер в случаях, когда они окажутся слишком велики для экрана мобильного устройства. Добавьте код, приведенный ниже, в CSS -стили вашего сайта:
Если вы используете изображения в качестве фона не с помощью тега img , просто установите CSS свойство background-size в значение contain . Это заставит фоновую картинку менять размер, когда разрешения экрана будет недостаточно для её отображения в масштабе 100%:
Если вы переживаете, что изображение станет менее четким, то вы зря волнуетесь. На современных мобильных устройствах такого не произойдет.
Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta . Если это не так — пользователь не сможет пользоваться зумом:
4. Установите ширину полей ввода в 100%
После того, как ширина изображений установлена через свойство max-width , сделайте похожий трюк с полями input . Просто добавьте в файл CSS – файл вашего сайта:
При просмотре сайта с мобильного устройства этот параметр не даст полям input выйти за пределы экрана.
5. Будьте бдительны когда используете Disable для кнопок подтверждения отправки форм
Чтобы избежать многочисленных нажатий на кнопку подтверждения отправки формы, стоит делать submit неактивным после первого клика по ней.
В отличие от настольных устройств мобильные часто теряют связь с сетью. Если вы делаете кнопку не активной, пользователь не сможет нажать ее повторно. И в этой ситуации имейте в виду, что причиной подобной ситуации может стать не только потеря сети.
И если вы все-таки решили деактивировать кнопку submit — делайте это на несколько секунд.
6. В длинных строках используйте word-wrap
Избегайте этой ситуации с помощью свойства word-wrap . Так будет выполнен перенос, когда строка достигнет края экрана. Пользователь увидит все необходимое без использования прокрутки:
7. Будьте осторожны, используя пробелы
Обычной практикой при отображении длинных строк является использование пробелов через каждые пять знаков. Так пользователю будет удобнее запоминать их для ввода в другое приложение.
Однако умный пользователь не будет делать этого вручную. Он воспользуется буфером обмена. Однако в случае с пробелами ему придется их удалить. Насколько удобно и быстро удалять пробелы на мобильном устройстве?
Дабы избежать подобных ситуаций, вместо пробелов между группами символов используйте отступы:
8. Преимущества медиа-запросов
Вы можете создать пользовательские стили, которые будут работать только при просмотре сайта с мобильных устройств (или же отображаться в маленьком окне браузера), а на настольном компьютере сработает обычный вариант веб-страницы. Используйте для этого целевые стили внутри медиа-запросов как в примере ниже:
Теперь вы знаете еще один трюк, который поможет вашему сайту выглядеть лучше на мобильном устройстве.
9. Избегайте fixed позиционирования
Если заголовок или сайдбар вашего сайта позиционирован фиксировано, CSS свойство position установлено в значение fixed . Будьте внимательны.
Когда вы делаете разметку подобным образом, ваш заголовок будет увеличиваться вместе со страницей и, возможно, займет все пространство экрана:
Самое простое решение — не использовать фиксированные позиции элементов для отображения на мобильных устройствах.
Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:
10. Используйте стандартные шрифты
Применение пользовательских шрифтов придает сайту вид профессионально выполненного продукта, но пользователям приходится подгружать файлы со шрифтами. Выполняется это перед тем, как сайт отобразится на устройстве.
Как правило, объем подобных файлов достаточно велик. На мобильном устройстве этот процесс может занять большое количество времени. В это время на экране мы видим незаполненное пространство вместо текста:
В случае использования Google Font Loader для загрузки шрифтов вы сможете отобразить текст с помощью стандартного шрифта, пока грузится пользовательский. Затем вы генерируете страницу заново, и отображается нужный вам шрифт.
Для этого нужно написать два варианта CSS -правил. Один вариант для использования шрифта по умолчанию, а другой — для применения скачанного шрифта.
Это будет наилучшим вариантом. Пользователь читает текст пока шрифты грузятся, и наслаждается красотой по окончанию их загрузки. Вот код:
Обратите внимание, что селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader’ом , но только после того, как шрифт загружен.
Заключение
Эти десять небольших трюков помогут вам преобразить уже существующий сайт. Они избавят ваших посетителей от многих мучений при пользовании вашей страницей. Не откладывайте в долгий ящик, начните применять их прямо сейчас.
SEO
Кроссбраузерность — одна из важнейших характеристик сайта, которая подразумевает под собой одинаковое корректное отображение и работу ресурса в разных браузерах (Google Chrome, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах), а также их версиях. Вопрос кроссбраузерности лучше решать на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, читайте в данной статье.
Почему верстка сайта может по-разному отображаться и работать в разных браузерах
Причина этой проблемы — отличия в исходном коде браузеров. Особенно это касается старых версий — т.к. они не поддерживают много современных CSS технологий.
Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.
Почему кроссбраузерность сайта так важна
Представьте вы зашли на сайт, а он весь кривой и половина его функционала не работает — вы останетесь на нем или закроете? В общем если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования — отсюда вы просто, на просто теряете посетителей (а это ваши деньги), которые будут уходить с него, не просмотрев и одной страницы. А из этого вытекает еще пару SEO проблем, которые тянут сайт в низ: увеличится показатель отказов (довольно весомый поведенческий фактор ранжирования сайтов) и падают конверсии.
При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:
- сохранить структуру;
- не допустить развала верстки;
- избежать наложения текста на текст, изображения;
- сохранить читабельность информации.
Главное, чтобы клиенту было удобно читать, просматривать изображения и совершать действия на сайте с того браузера, которым он привык пользоваться.
Как протестировать сайт на кроссбраузерность
- Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, например Safary (речь о свежем), можно установить только на macOS.
- Попросить знакомых, чтобы зашли на сайт со своих девайсов.
- Использование специальных онлайн-сервисов (о них ниже) или ПО (например Blisk ). Этот способ прост, надежен и самое главное быстрый.
Сервисы проверки кроссбраузерности
Перечислю самые популярные.
CrossBrowserTesting
Сервис платный (первые 7 дней или 60 минут бесплатно), в нем более чем 2050 реальных настольных и мобильных браузеров. И так же четыре режима тестирования:
Browserling
Бесплатно только тестирование в устаревших IE на устаревших платформах.
Sauce Labs
Триал у него довольно ограниченный, а вот при оформлении платной подписки станет доступна автоматическая проверка. Здесь есть около 700 комбинаций браузеров, разрешений и устройств.
Litmus
Откройте для себя лучший способ разрабатывать, кодировать и проверять свои идеи в более чем 100 приложениях и устройствах. Пользоваться бесплатно можно только первые 3 дня.
Browsershots
Онлайн сервис, где есть возможность сохранять скриншоты сайта, который проверяется на кроссбраузерность, со многих браузеров и их сборок (более 200 штук), в числе которых устаревшие и малопопулярные. В последнее время часто не работает.
В бесплатной версии ваш запрос становится в очередь, и скриншоты начнут подгружаться на сервер поочередно после высвобождения сайтов. Данная процедура может занять от 10 минут до 2-3 часов.
Browserstack
Платный и мощный инструмент который проверяет сайты на кроссбраузерность в режиме реального времени, в более чем 2000 браузеров и устройств. Есть бесплатный пробный период.
Программное обеспечение для тестирования кроссбраузерности
MultiBrowser
Настоящие веб-браузеры с песочницей, а также набор для тестирования адаптивного дизайна, мобильных устройств, iPhone и iPad Simulator, которые можно запускать в автономном режиме в среде вашего рабочего стола!
Демо версия работает 14 дней.
Как добиться кроссбраузерности сайта
Вариант 1. Вендорные префиксы
Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:
- нестандартно и прописано для определенного браузера;
- это эксперимент, который еще дорабатывается;
- реализует частичный функционал.
- -moz- применяется в Firefox;
- -ms- применяется в IE и Edge;
- -webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
- -o- применяется в старых версиях Opera (на платформе Presto).
Пример обычного CSS кода:
И этот же CSS код с вендорными префиксами:
Есть онлайн веб сервис для расстановки вендорных префиксов для лучшей кроссбраузерности: Автопрефиксер . Его рекомендуют к использованию Google и используют в Twitter и Taobao.
Вариант 2. CSS хаки
Хаки — это части кода, которые может понять только какой-то конкретный браузер. К примеру, ваш сайт правильно отображается в трех браузерах, а в остальных есть проблемы с корректностью интерпретации данных, то эту проблему можно решить, отдельно прописав соответствующие хаки для каждого браузера, в котором страницы отображаются неверно.
Примеры хаков можно посмотреть на habr .
Вариант 3. Универсальные элементы
Самые популярные браузеры среди пользователей Рунета
По данным Яндекс.Радар более 70% пользователей Рунета предпочитают с ПК заходить с брузеров: Google Chrome и Яндекс.Браузер.
Что касается браузеров на мобильных устройствах, то здесь история похожая, только можно еще добавить Safari.
В общем если занимаетесь версткой, то нужно как минимум ориентироваться на Google Chrome, Яндекс.Браузер (он по моему на той же платформе что и хром) и Safari. В идеале на все где количество пользователей более 1%.
Сейчас в нашу жизнь вошло столько устройств, которые позволяют свободно бороздить интернет, что уже не отвечают веениям времени еще недавно преобладающие методы верстки сайтов. Так-как сейчас все больше как маленьких экранов мобильных смартфонов, так и больших экранов десктопов. Я как-то об этом не задумывался и как обычно делал свои сайты под экраны 1024px. Но посмотрев разрешение экранов посещающих мои сайты в яндекс метрике, был удевлен что 1024px уже не актуален и разнообразие разрешений просто огромное. А трафик с маленьких экранов мобильных устройств состовляет почти 20%. Вот скриншот из яндекс метрики одного из моих сайтов, о котором пойдет речь далее.
Разрешения экранов
Основные разрешения экранов, посещающие сайт, статистика за месяц
Получается что на каких-то устройствах сайт отображается очень мелко, на каких-то с горизонтальной прокруткой, а на больших экранах с пустыми полями по бокам и сайт выглядит очень маленьким. Так-же и гугл оповестил что "ваш сайт не оптимизирован для мобильных устройств". Ниже пример как сайт выглядил до оптимизации на разных разрешениях от мобильников 240*320px, до 1920*1200px.
Скриншот сайта на разных экранах
Скрин сайта на разрешении дисплеев 320px 800px 1280px 1920px
Приступив к оптимизации я первым делом добавил мета тег в body сайта. Сервис гугл для проверки оптимизации сказал что "сайт оптимизирован". Но на самом деле это не так. Данный тег заставляет сайт отображаться пиксель в пиксель, то-есть в зависимости от фактического разрешения экрана, определяет область просмотра. Так например на 320*480px будет отображаться только кусочек сайта, а на больших экранах пустые области.
Для отображения сайта пиксель в пиксель
Ниже код, который заставляет отображать сайт пиксель в пиксель на всех устройствах. И если у маленького экрана разрешение к примеру 6дюймов и 1280*800, то сайт будет малюсенький. А если экран 320*480px, то на экране отобразится кусочек сайта этих размеров. В данном примере значение 1:1, то-есть рано 1.0. Можно ставить свои значения и увеличивать или уменьшать сайт. К примеру на андроид и apple область просмотра сайтов 960-1024px, это значит что сайты с такой шириной будут отображаться на весь экран и без прокрутки, и это не зависит от фактического разрешения экрана, сайт просто масштабируется под размер экрана, Но если добавить этот тег То сайт начнет отображаться в соответствии с аппаратными пикселями, и если разрешение маленькое, то сайт будет слишком крупным и появится прокрутка, а если разрешение большое, то сайт будет маленьким. По-этому один этот viewport ничего не решает, он просто отображает сайт в соответствии с аппаратными пикселями, и отменяет настройки браузеров, что не правильно так-как у браузеров могут буть свои настройки.
Верстка сайта под разные экраны
То-есть я сделал резиновую верстку сайту, и подкорректировал указав некоторые css правила для отдельных разрешений экрана. В итоге сайт стал выглядеть вот так.
Скриншоты сайта е ветерок ру
Скриншоты в размерах 320px 640px 800px 1024px 1280px 1920px
Надеюсь что вам стало понятно как сделать. Думаю как сделать основную резиновую верстку вы и так знаете. Я к примеру все размеры указал в процентах (%) вместо пикселей (px). И указал дополнительно стили под различные разрешения экранов. Но этот сайт я пока не адаптировал под разные экраны, на момент написания этой статьи размеры сайта указаны 995px и все размеры в px.
Читайте также: