"Behind the Scenes"
|October 2015||The monthly newsletter by Felgall Pty Ltd|
Not Very Responsive Design
One popular concept for web page design at the moment is to make the pages responsive where the layout adapts to the viewport width that is available to display the content in. Dome web sites do this very well while other sites take a completely wrong approach and end up with their site not looking right at certain sizes.
One popular screen size for desktop computers is 1920 x 1080 which is the same resolution used by high definition television screens. I have found that most web pages displayed with the browser open full screen at this size either have lines of text way too long to read or the page only fills part of the width. I also find that I usually need something else open at the same time and so having the browser only fill a part of the screen is better on screens this size. The Windows operating system makes it really easy to have two programs share the screen giving each exactly half by holding down the Windows key and pressing the left or right arrow key to have the program use the corresponding half of the screen. This gives you 960 width for each program.
This width it seems is one that many pages that are not responsive do not quite handle and I end up with lots of pages with horizontal scrollbars for moving the width of the vertical scrollbar left and right so I can see the content that the web page author has hidden under the vertical scrollbar (that is they almost made the page narrow enough to fit this width but not quite).
What seems more peculiar is the huge number of web sites where I get the same layout as those with screens that are only 300 wide where the author has mistakenly set a breakpoint for their responsive design to switch to multiple columns when the viewport is just slightly wider but where that layout would easily work down to 600 or less before it would break and the shift to the single column layout it gives me is really necessary.
It seems that many people creating supposedly responsive design have no idea of how to set the breakpoints to match with their web design and are using arbitrary fixed widths (possibly based on the screen sizes of specific devices) rather than setting the break points at the widths where their actual design breaks (which is what needs to be done to make the design properly responsive).
From what I can see, more people are making this mistake and producing layouts that are not properly responsive but which the author thinks is responsive than there are pages where it is done right. It is in fact very easy to determine the appropriate breakpoints using a browser on a desktop and simply resizing the width of the browser from full screen width down to the width of the narrowest device your layout needs to support. All that needs to be done is to gradually make the browser narrower until the design breaks. The viewport width at that point is the width where the design then needs to change. You then repeat the process until you get to the narrowest width in order to determine any further breakpoint widths. It doesn't matter whether the author starts with the design for the narrowest width or starts with the widest one, they should still use the same process of gradually making the vieport narrower in order to find the correct breakpoints. This way they can display the layout for the larger displays as soon as the viewport is wide enough to handle it properly.
That many web page authors don't carry out this process of determining the appropriate break points is obvious in two ways. The first is that they are all using the same media queries with the same breakpoints even though those breakpoints are not the appropriate ones for their design and they all display an inappropriate layout when you have the browser set to fill half the width of a standard size computer monitor. Annoyingly there also isn't an easy fix that you can apply to these pages from within your browser unless your browser will allow you to apply your own CSS to individual pages and even then you'd have to actually do the author's job for them in rewriting their CSS to get their page to display properly at your desired browser width.
Perhaps we need to start advising authors that their web page layout is not responsive and is broken at our preferred width. You never know, a few of them might actaally listen and decide to fix their layout to be properly responsive once you tell them how to do it.
The following links will take you to all of the various pages that have been added to the site or undergone major changes in the last month.