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:
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.
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.
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.