I am trying to write examples of how a truly resolution independent website would be written if you only had to worry about modern, standards-compliant browsers.
My list of issues with this demo:
- I hate those spacer divs at the beginning. Is there a way to align the first row of divs (CSS table cells) to the right?
- There are double borders on all of the inner gridlines. I haven’t found a good way to remove those.
- When you expand the browser window past a certain point (I have a 1920×1080 display and it is just before full screen) the grid stops expanding. Not sure why. Not a huge issue, but one that bugs me.
- This doesn’t work in IE. I didn’t expect it to work in < IE8, but I was disappointed to see that IE9 does not support the media queries fully yet. Hopefully this will be fixed before final release.
- I am not sure my usage of HTML5 tags is the way they were intended, especially the header and time tags. If anyone can point me to something that corrects my usage, I would appreciate it.
In my theme redesign, I used media queries to make it scalable from a desktop widescreen to an iPhone.