How to Stress Test Your Website’s Content

Testings images and text lengths to ensure your site reacts appropriately

Pressure indicators
Image Source / Getty Images

When we design websites and plan out how the content of those sites will be displayed, we often do so with an ideal situation in mind. Headlines and text areas are imagined as having certain lengths, while the images that accompany that text are designed to display in dimensions that will allow them to work as intended in the overall design. Even if these elements are somewhat fluid as part of a responsive website build (which they should be), there will be a limit to how flexible they can be.

If you deploy a website on a CMS (content management system) and allow clients to manage that site and add new content over time, the limits that you have designed for will absolutely be put to the test. Trust in the fact that your clients will find ways to alter the website that you never dreamed they would do. If you have not accounted for situations well outside of the ideal ones you worked with in your design process, that site’s layout could be in serious jeopardy. This is why it is especially important that you stress test all website content and the aspects of the site's layout prior to launching that site. Here are some tips for how you can do this.

Testing Image Sizes

Without a doubt, the most common way that people break the layout of their website is by adding inappropriately sized images (this is also the way that they negatively impact a site's overall performance and cause slow download speeds).

This includes images that are too large, as well as ones that are too small to work as intended in your website.

Even if you use CSS to force the size of these images in your layout, images that are wildly out of scale with your original specs for the site will cause problems. If the dimensions of an image are incorrect, your CSS may force that image to display using the appropriate width and height, but the image itself and its aspect ratio may be distorted.

That will certainly have a negative effect on your site’s look as an image that is too small will be "blown up" and will lose quality. An image that is too big that is made smaller with CSS make look fine and retain its quality, but the file size could be unreasonable large for how it is being used.

When testing your website work, be sure to add in images that fall outside of your intended scope. Add in CSS and responsive image techniques that addresses these challenges by resizing the image according or, in the case of an incorrect aspect ratio, also considering using something like the CSS clip property to crop the image as needed.

Testing Other Media

In addition to images, also test other media like videos on your site and see how those elements will appear in your layout using different sizing and aspect ratio values. Once again, consider the responsive nature of your site and how it will work for different device and screen sizes.

Testing Text Headings

After images, the next website area that causes the most problems with live websites managed by non-web professionals is text headings. These are the (supposedly) short lines of text that will often start the content of a page or a section on that page.

The text above this paragraph that reads “Testing Text Headings” is an example of this.

If you have designed a site to accommodate a heading like this one:

“Testing Text Headings”

But your client uses the CMS to add an article with a heading like this:

“Testing Text Headings on a Variety of Webpages All with Different Sizes Requirements and User Needs”

Then your layout may not be able to cleanly accommodate all that extra text. Just like you should stress test your images and media by adding entries that fall well outside of the sizes you initially designed for, so should you do so with text headings to make sure that are flexible enough to effectively display even ultra-lengthy lines like the one above.

Testing Text Lengths

Staying on the subject of text, you will also want to test different text lengths for the main content on pages.

This includes text that is very, very long as well as text that is very, very short – which can actually be the issue that dooms many page layouts.

Because webpages, by nature, grow in size to accommodate the height of the text that they contain, pages with lots of text will typically just scale in height as needed. Unless you have restricted the height of page (which you should not do if you want your page to be flexible), then extra text should not pose a problem. Too little text is another issue – and it is one that many designers forget to test for in their design process.

Too little text can make a page look incomplete or even broken, so be sure to scale your page content down to see what happens in those instances and make the necessary adjustments to your site’s CSS to handle those situations.

Testing Page Zoom

People with vision problems may be using the Page Zoom feature of a web browser to increase the size of your webpage. If someone zooms in a significant amount, your layout could break down. This is one of the reasons why you may want to use EMs as the unit of measurement for your website font sizes as well as your media queries. Because EMs are a relative unit of measurement (based on the default text size of that browser), they are more conducive to fluid, flexible website layouts.

Test your website for page zoom and don’t just stop at one or two levels of zoom. Zoom your site up and down a variety of levels to ensure that your pages react as intended.

Don’t Forget About Download Speed and Performance

As you test for the layout implications of client decisions, do not forget to also pay attention to the impact that those decisions have on a site’s performance. The images and content that those clients will add could hamper a site’s download speed and seriously destroy the overall usability of site. Plan for the impact of these additions and do your part in the development process to minimize these effects.

If your website is being built with a performance budget, share this information with your clients and show them how to test a webpage for performance metrics.

Explain to them the importance of maintaining these established thresholds for page size and download speed and show them how the additions that they make can impact the site as a whole. Take the time to train them how to keep the site working and looking well. On the subject of training…

Client Training Is Essential

It is important to stress test your site’s images, text, and other page elements and to create styles that will account for extreme instances, but that is never a replacement for client training. Your work bulletproofing a site should be in addition to the time you spend training your clients how to effectively care for and manage their site. In the end, a well trained client who understands their responsibilities and the impact of the decisions that they make on a site will be invaluable to your efforts to keep that site working and looking its best.