I have been thinking  some about how to design and program my website to make it look and work great on both desktop monitors and mobile devices. I’ve tried making a layout that would stretch and shrink, but at a certain point it started doing strange things.

I haven’t tried it yet, but I’m wanting to try using JavaScript to detect the viewable area and dynamically link different stylesheets accordingly. Or I could use the JavaScript to change a core ID or Class according to the screen size and the CSS would have different layouts, font sizes, etc. targeted to each. Of course there would be some common style elements to all sizes.

I need to make sure the site would still work and scale even if JavaScript were not available. I’ll have to see if I can use any kind of info from the browser agent. Failing all else, I’ll have to have a mobile and a desktop style sheet (perhaps the default container ID would be targeted in those default style sheets).

I was doing a search on layouts and such and a site I saw had multiple background images for different browser sizes. I think that is a great idea. I’ll probably have a default size (or default to no background image) and then use the JavaScript and/or CSS to pull in the correct sized background. Then mobile users will not have to download a big file for their little screen.

I ran across this site, called Responsive Layouts, Responsively Wireframed, that is giving me some ideas that I might use for my site’s layout. I’m thinking of putting the side navigation on the right instead of the traditional left. Then I can just float it right and float all the content blocks left. I’ll probably have to figure out how to make the content blocks a reasonable width, yet scale based on the screen size.

These are just some ideas. We’ll see what actually happens. The coding and basic layout should be fairly easy… …Making it pretty? We’ll see.