Are resized browser windows a real-world use case?

Question

I'm working on the styling of a site that uses bootstrap 3. The front-end is not my strong suit, and my role is cleaning up small issues.

I develop my work on a desktop at full-width. We're using the bootstrap pre-defined viewports, and I use that in making a responsive design. Then I check the mobile performance and go from there. Then after that I look at tablet layouts, and it's typically fine. My method perhaps isn't best practice, but it's been working so far.

When I show the results of my work to the marketing client, they "test" various layouts by resizing the browser window they're using on the desktop. By doing this, the page elements are reshuffled by the browser, and can end up in odd places at arbitrary viewport widths.

The situation is that I can't re-create these broken layouts by selecting device parameters in mobile modes. It can only be done by opening the site in a full-size browser window, and then resizing it using the mouse to certain, arbitrary widths.

Marketing is thinking this means that the site truly isn't responsive, and we need to develop it so that the layout looks good at any arbitrary browser width, pixel by pixel. Testing resizing windows would be a break from our current development method.

As far as the site end-users, are resized browser windows really a real-world scenario? Is one of our end users going to get a broken layout because they have resized their browser window (not filling their monitor), or have an oddball resolution on their desktop system? Or need we only develop against pre-defined static sizes?

Answer 1

Users almost never resize a window while using your site. It is often possible for the resizing itself to cause problems. This is especially the case when you use JavaScript to calculate and set some sizes when the window loads. Some frameworks rely on that technique and it makes resized-on-the-fly window look pretty broken. When you are testing you can always require a refresh after any resizing to simulate a fresh page load.

Users do however use a staggering number of screen widths. You really do need to make your page look good at any arbitrary pixel width.

• There are dozens of common screen widths. Here is data from a site that tracks the top twenty. Still "other" accounts for nearly a quarter of users.

     Res      %
  360x640   22.04
  1366x768  12.1
  1920x1080  7.5
  375x667    4.88
  720x1280   2.99
  1440x900   2.94
  768x1024   2.62
  1280x800   2.46
  1600x900   2.42
  320x568    2.33
  1024x768   2.08
  414x736    1.98
  1280x1024  1.92
  320x534    1.87
  1536x864   1.78
  320x570    1.64
  480x800    1.34
  1280x720   1.26
  1680x1050  1.14
  412x732    1.14
  Other     21.58
  

• Users may not use a maximized browser window. That is especially common on very wide screens where the user has allotted the browser some arbirtrary portion of the screen to use.

• Even with a browser maximized, there may be scroll bars, window borders, or even browser sidebars (such as bookmarks or history) which take up width real estate. Your web page often won't have the full window width to work with. A large number of users are going to have tens of pixel less than full screen width.

  Here is a site that gathered the data as to how close to maximized users' browser windows are typically:

   full screen     %
  Totally         0.85
  Within 50px     1.06
  Within 100px    9.67
  Within 200px   61.18
  

Between the huge number of screen sizes and the large number of users that don't make the full screen width available to you, you need to support arbitrary pixel widths for your website.

There are good responsive techniques to make it work:

• Most sites choose a minimum supported width around 320px
• Most sites choose a maximum supported width (1200px is common) after which only the margins around the site expand and the site is centered in the page.
• Between the minimum and maximum one or two breakpoints are chosen where columns collapse and stack.
• Elements within columns are usually allowed to expand to the full width of the column.