3

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?

  • "we need to develop it so that the layout looks good at any arbitrary browser width" - well, it should at least look OK. But you are saying that it is the act of "resizing the window" that is the problem, not the "arbitrary browser width" per se? If it is just the resizing that is the problem (and user stats show that a relatively small number of users actively resize their browser) then you could perhaps trigger a JS refresh as an immediate workaround? – MrWhite Jul 13 '18 at 12:32
  • @MrWhite what I am saying is that the act of resizing is the problem. What is happening is that the stakeholders are loading the site, shrinking their browser window to force a responsive/mobile layout, and then expanding the window back into a desktop resolution. After returning to desktop resolution from tablet or mobile, some elements in the layout look bad (items offset, text not wrapping correctly) and we are being asked to fix that. I am trying to argue that this is not a real-world use case. – user4994 Jul 13 '18 at 17:34
5

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.