Thoughts from the UK

Responsive Web Design

This is a second pass at the desire to make my pages render in the way that I want on all devices. My design cannot be simpler, all I wanted was a .css that rendered on a Smartphone with a menu and text that was 100% screen width and for both Tablet and dektop I wanted the right-hand-side to use the maximum of space and to dynamically adjust to the rght of a fixed 200px menu on the left of the screen.

My original design, with a single break-point, had the effect to rendering strangely on an iPad in portrait mode. The right content displayed below the 200px left menu.

However, experimenting with 2 breakpoints I still seem to get a situation where the % width "fights" with the fixed left menu for certain screen widths. both 75-80% at above 800px and 65% over 500px and below 800px seem to cause strange wrapping. 500px for the Mobile Phone respoluton seems to be determined by Googles Mobile Friendly test, as if I set this to 400px the phone menu is still 200px in the result of the test.

I may need 3 or more breakpoints. I still need to do more work on this, at least the pages on seem to render on an iPad in portrait better than the .ca site.

3 Breakpoints

It seems that between 850 and 900px 65% width is too wide. A third breakpoint with a width of 550px seems to look better.

4th Breakpoint

Now the rendering on an iPhone 4, in landscape mode, wraps badly. This time for resolutions of 700 to 800px a width of 300px seems to work. However, this all illustrates the difficulties in designing for multiple screen sizes over a range of Internet capable devices.


Observed Searches and Visits:

These are some of the searches that I have recorded that found this page: