Содержание
Когда мы разрабатываем веб-сайты и планируем, как будет отображаться их содержимое, мы часто делаем это с идеальной ситуацией. Заголовки и текстовые области представляются имеющими определенную длину, тогда как изображения, сопровождающие этот текст, предназначены для отображения в размерах, которые позволят им работать так, как задумано в общем проекте. Даже если эти элементы несколько изменчивы в рамках гибкой сборки веб-сайта (которой они и должны быть), их гибкость будет ограничена.
Советы по стресс-тестированию вашего сайта
Если вы развернете веб-сайт в CMS (система управления контентом) и позволите клиентам управлять этим сайтом и добавлять новый контент с течением времени, предельные значения, для которых вы разработали, будут абсолютно проверены. Доверьтесь тому, что ваши клиенты найдут способы изменить веб-сайт, о котором вы никогда не мечтали. Если вы не учли ситуации, выходящие далеко за рамки идеальных ситуаций, с которыми вы работали в процессе проектирования, макет этого сайта может оказаться под серьезной угрозой. Вот почему особенно важно перед запуском этого сайта провести стресс-тестирование всего содержимого сайта и аспектов макета сайта. Вот несколько советов, как вы можете это сделать.
Размеры изображения
Без сомнения, самый распространенный способ, с помощью которого люди нарушают макет своего сайта, — это добавление изображений неподходящего размера (это также способ, которым они негативно влияют на общую производительность сайта и замедляют скорость загрузки). Это включает в себя изображения, которые являются слишком большими, а также те, которые слишком малы, чтобы работать так, как задумано на вашем сайте.
Даже если вы используете CSS для изменения размера этих изображений в макете, изображения, которые сильно не соответствуют исходным спецификациям для сайта, могут вызвать проблемы. Если размеры изображения неправильные, ваш CSS может заставить это изображение отображаться с использованием соответствующей ширины и высоты, но само изображение и его соотношение сторон могут быть искажены. Это, безусловно, негативно повлияет на внешний вид вашего сайта, так как слишком маленькое изображение будет «взорвано» и потеряет качество. Слишком большое изображение, уменьшенное с помощью CSS, прекрасно выглядит и сохраняет свое качество, но размер файла может быть неоправданно большим для его использования.
При тестировании работы вашего веб-сайта обязательно добавляйте изображения, которые выходят за рамки предполагаемой области. Добавьте в CSS и методы адаптивного изображения, которые решают эти проблемы, изменяя размер изображения в соответствии или, в случае неправильного соотношения сторон, также рассматривая возможность использования чего-то вроде свойства CSS clip для обрезки изображения по мере необходимости.
Другие СМИ
В дополнение к изображениям также протестируйте другие мультимедиа, например видео, на своем сайте и посмотрите, как эти элементы будут отображаться в макете, используя различные значения размеров и пропорций. Еще раз рассмотрим адаптивную природу вашего сайта и то, как он будет работать для разных устройств и размеров экрана.
Текстовые заголовки
После изображений следующая область веб-сайтов, которая вызывает большинство проблем с живыми веб-сайтами, управляемыми не-веб-профессионалами, это текстовые заголовки. Это (предположительно) короткие строки текста, которые часто начинают содержание страницы или раздела на этой странице. Текст над этим абзацем, который гласит «Проверка текстовых заголовков», является примером этого.
Если вы разработали сайт для размещения такого заголовка, как этот:
«Тестирование текстовых заголовков»
Но ваш клиент использует CMS, чтобы добавить статью с таким заголовком:
«Тестирование текстовых заголовков на различных веб-страницах с разными размерами и потребностями пользователей »
Тогда ваш макет может не вместить весь этот дополнительный текст. Точно так же, как вы должны подвергать стресс-тестированию свои изображения и мультимедиа, добавляя записи, которые выходят за рамки размеров, для которых вы изначально были предназначены, то же самое следует делать с текстовыми заголовками, чтобы убедиться, что они достаточно гибки, чтобы эффективно отображать даже очень длинные строки, такие как тот, что выше.
Длина текста
Вам также необходимо протестировать различную длину текста для основного содержимого на страницах. Это включает в себя текст, который очень, очень длинный, а также текст, который очень, очень короткий — что может быть проблемой, которая обрекает многие макеты страниц.
Поскольку веб-страницы по своей природе увеличиваются в размере, чтобы соответствовать высоте текста, который они содержат, страницы с большим количеством текста обычно просто масштабируются по мере необходимости. Если вы не ограничили высоту страницы (что не следует делать, если вы хотите, чтобы ваша страница была гибкой), дополнительный текст не должен создавать проблем. Слишком мало текста — это еще одна проблема, и многие дизайнеры забывают проверять ее в процессе проектирования.
Слишком маленький текст может сделать страницу неполной или даже сломанной, поэтому обязательно уменьшите содержание страницы, чтобы увидеть, что происходит в этих случаях, и внесите необходимые изменения в CSS вашего сайта, чтобы справиться с этими ситуациями.
Масштаб страницы
Люди с проблемами зрения могут использовать функцию Page Zoom веб-браузера для увеличения размера вашей веб-страницы. Если кто-то увеличит масштаб, ваш макет может сломаться. Это одна из причин, почему вы можете захотеть использовать EM в качестве единицы измерения для размеров шрифта вашего сайта, а также для ваших медиа-запросов. Поскольку EM являются относительной единицей измерения (на основе размера текста по умолчанию в этом браузере), они в большей степени способствуют гибкой и гибкой компоновке веб-сайтов.
Протестируйте свой веб-сайт для увеличения страницы и не останавливайтесь на одном или двух уровнях увеличения. Увеличьте и уменьшите масштаб вашего сайта, чтобы обеспечить правильную реакцию ваших страниц.
Скорость загрузки и производительность
Когда вы проверяете влияние решений клиента на макет, не забывайте также обращать внимание на влияние этих решений на производительность сайта. Изображения и контент, которые будут добавлены этими клиентами, могут снизить скорость загрузки сайта и серьезно подорвать его общее использование. Запланируйте влияние этих дополнений и внесите свой вклад в процесс разработки, чтобы минимизировать эти эффекты.
Если ваш веб-сайт создается с бюджетом производительности, поделитесь этой информацией со своими клиентами и покажите им, как проверить веб-страницу на показатели производительности. Объясните им важность поддержания этих установленных порогов для размера страницы и скорости загрузки и покажите им, как сделанные ими дополнения могут повлиять на сайт в целом. Потратьте время, чтобы обучить их тому, как поддерживать работоспособность и внешний вид сайта. На предмет обучения …
Обучение клиентов имеет важное значение
Важно провести стресс-тестирование изображений, текста и других элементов страницы вашего сайта и создать стили, которые будут учитывать экстремальные случаи, но никогда не заменят обучение клиентов. Ваша работа по пуленепробиваемости сайта должна быть в дополнение ко времени, которое вы тратите на обучение своих клиентов тому, как эффективно заботиться о своем сайте и управлять им. В конце концов, хорошо обученный клиент, который понимает свои обязанности и влияние решений, которые они принимают на сайте, будет иметь неоценимое значение для ваших усилий, направленных на то, чтобы этот сайт работал и выглядел наилучшим образом.
