The main css for my webstes. While my design is not perfect it seens to work for me.
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 Google's 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 .me.uk 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.
Links
- An attempt at explaining my Responsive Web Design - an analysis of my rdw.css file.
- Designing and running a website
- Designing for Multiple Devices
- A page is still using the old rdw.css - I now have a CSS file that is rwd.css (so is Topics page at
the time of writing this)
See tag below left menu.
External Sources