Frame/NoFrame, responsiveness and screens from Mobile to big TV

[tglomb]

Hello,
for my investigations regarding a project I like to collect some opinions, remarks, hints, no go's, ect.
Maybe it is also of general interest..
Nowadays we must face with different form factors of a screen. So I want my NT site viewable on smartphones (~4 inch) -you know, there will be users- but for sure on tablets (~8 to 12 inch), Notebooks (~14 to 17 inch) and ordinary PC Monitors ( up to 30 Inch and more).
I know there's a mobile switch in NT. But AFAIK this has nothing todo with real "responsive layouts". Am I wrong ?
1. Is it possible to have a web project working well on so many screen sizes ?
2. Can I use Frames ? Do Frames behave well on small Screens (mobile, tablet) ?
3. Am I in general independent of the different pixel resolutions, I mean ordinary vs. Retina displays ?
What do you think..
Regards, Thomas

[Bruce]

Don't use frames. Just don't.

There are some CSS media queries based stuff, but not a whole lot. Mostly in the main page layout with the left and right columns being dropped as the screen gets smaller.

For the really small sizes (4") you need to consider a different approach completely (ie mobile mode) but from 7" and up you can pretty much just use desktop mode. CSS does a reasonably good job with layout and of course you can more media queries if you like.

Cheers
Bruce

[Nick]

>I know there's a mobile switch in NT. But AFAIK this has nothing todo with real "responsive layouts". Am I wrong ?

Responsive design is a welknown topic in the website-developers world and it can keep a site readable on
a much smaller screen. I should say a screen with a much lower resolution.
I have a Nexus 7 with HD resolution on 7" and it can show more than the old iPAD tablet that has a much bigger screen.

High resolution on smaller screens is a hot topic (HD tablets with phone function) and while it resolves
the "can it fit on the screen" problem it creates another problem.
The UI is touch. Now you have to touch the buttons and the standard inline buttons are pretty impossible to touch on a 7" HD screen.
Even the menu is pretty difficult to handle.
So... you van trap the browser and use a different CSS to resize the buttons (all buttons) but before you know they
will not fit on the screen anymore...
 
That is just one issue, there is more.
Screen resizing as it works on desktop (with the mouse) doesn't work (yet) in touch.
Scrollbars, droplists, all very difficult or impossible to operate. The X on the right high corner of the
window will not work or very difficult.

I think this is a problem that we're all facing and I'm afraid there is not a simple solution.
The first thing we need is more touchscreen support. That could come from Javascript/Jquery and I guess
this is a hot topic for Bruce as well.
What you can do now is focus a bit more on vertical than horizontal.
I mean on desktop we're making wide browses but for mobile we can better show the columns like this:

Desktop:
John Jones   1200 Clarionstreet   12345 Pompany Beach   info@whatever.com

Mobile:
John Jones...200 Clarionstreet
...................12345 Pompany Beach
................... info@whatever.com

And now you have extra space for bigger inline buttons.

(forget the dots)

Nick

[tglomb]

Hi Bruce and Nick, thnx so far.
I'll drop the frames path and I'll keep "fingers" in mind.