Designer’s Guide to CrossBrowserTesting

This guide is for designers and creative members of a team who partake in browser testing. Designers have an especially unique role in the testing process, as they are the ones that have control over the final feel, no matter what device that it’s rendered on. Designers have work to be done even before the first mockup or PSD is finalized and exported.

How Designers Can Be Cross Browser Compatible:

Understanding the Grid Concept

The grid concept is fundamental to a responsive, cross-browser compatible website. Think of a web page in terms of boxes. Boxes can be of varying width and height, and hold certain weights and depths called padding, margins, and borders.

Thinking of a webpage in terms of a few smaller boxes inside one large box helps us visualize how this:

Can become this, on a much smaller mobile device:

Responsive design isn’t magic, and it isn’t something special that only some websites need. All web design needs to be responsive, and it needs to be planned responsively. Thinking about how elements are going to feel on a mobile device versus desktop is crucial in the planning and design phase and must not wait for strictly the development phase. Many designers use the mobile first design approach; this entails actually designing first for a smaller hand held device and then scaling your work up to a desktop display.

We didn’t go over many technical topics here, but you can read more about responsive CSS here:

Using responsive images

Images play a crucial role in modern online storytelling, and their importance in cross browser compatibility is often overlooked. First, there is a performance issue at hand when dealing with images; more than half of the entire internets bandwidth are images. Secondly, there is a display issue, designers must choose whether images will scale with device width, hold steady across a multitude of different size screens, or tailor the image to fit specific screen sizes.

Having images scale simply with the size of the device is the easiest way to keep your design cross-browser compatible. If a photo is 50% of a 1000px wide screen, it would be 500px. On a smaller device of 600px width, the photo would be 300px. This helps keep photos proportional without providing new images or code for each display size. This responsiveness starts to break down when displays get really tiny, such as an iPhone, but that is what media queries are for. J

Tailoring images for specific size requires more work but gives you an exactness that is sometimes lost with a truly responsive photo. Wouldn’t it be great if the image “zoomed” in on your focal point as a device got smaller? Well, you can! This is especially helpful for “hero” or background images like this:

Using responsive fonts

Fonts and typography are another aspect to consider when designing a cross-browser compatible website. There are 4 main methods of sizing fonts in a browser: pixels, ems, percentages, and rem.

Pixel: The most exact measurement. Setting a font’s size in pixels will keep it at that exact pixel size across all devices.

Ems: an em is based off the size of the font as defined in the CSS Rule font-size. So if the default font size was 12px, 2em would equal 24px.

Percentages: percentage applied to the base font-size of a browser or CSS declaration.

Rems: stands for “root em”. This measurement unit is new, and not recommended to be truly cross-browser compatible.

How Designers Can Use CBT

Automated Screenshot Testing

To get a quick still-shot view of what a design looks like across multiple devices that your customers are using, designers can use the Automated Screenshots in CrossBrowserTesting. This handy feature allows for you to take screenshots on up to 50 different devices, and view them on one web page.

This is great for quick exploratory testing, as it allows you to filter by device, browser, or resolution. Not only do our automated screenshots have a Windowed version, they will also show Full-page and Chromeless version of your website. When we launch a new webpage at CrossBrowserTesting.com we’ll start with these quick steps to ensure our new piece of content is cross-browser compatible:

• Open up https://app.crossbrowsertesting.com/screenshots/ and select the browsers your visitors most commonly use. To help identify which browsers are most popular, we have put together this dynamic resource, and also have a saved browser list called “Popular Browsers”.
• Enter in the URL you would like to test. In this case, we’ll be testing our “Features” page.
• Click Run Test
• After a few moments, all of your screenshots should be rendered on one page.
• Filter by device, like all Android devices.

• Continue to filter through and note the biggest differences on your “problem” devices.

With automated screenshots, it’s easy to spot the differences in box models, and things like responsive images with only a glance.You’ll be able to get to the next stages of your testing and deployment quicker and with more confidence.

If your development or QA team primarily uses CrossBrowserTesting, you can have them easily share screenshots across many devices quickly with the click of a button. In the Screenshots interface, have them share the public URL in the main navigation.

Live Testing

CrossBrowserTesting’s Live Testing and debugging feature is perfect for any designer that wants to quickly tweak the code of a web page on any configuration from their own browser. You’ll have access to your favorite developer and design tools in each virtual/real browser or devices, making debugging each different config a breeze.

With access to developer tools in all the major browsers, making those pesky changes to your most used browsers is simple. Make the changes in the browser while inspecting, maybe it was a float causing an issue in IE or a font looks too thick in Safari, and then send over the CSS to your development team. JavaScript debugging can also be done from CrossBrowserTesting.

Live Testing also allows for manipulation of User Agents and Geolocation. If your site uses account based marketing, or just uses GPS location to display different content, you can easily test these parameters across all of our devices.