Sorry for asking such a question, I've to confess I do not own a hand-held device, but I wish to discuss about layout options for desktop application I develop.
Would you please tell me the name of this layout type?
3
-
You..don't own a h-h-handheld?..– SaturnsEyeJun 18, 2014 at 13:11
-
Yes I like to be unreachable from time to time (with a good reason) ...and I'm sure: owning one would be much more distractive than SO ;)– WolfJun 18, 2014 at 13:40
-
But with a smartphone you can get the SE app! <3 :3– SaturnsEyeJun 18, 2014 at 14:17
Add a comment
|
2 Answers
Seems to me simply a responsive design menu: when a site is shrunk to mobile size, the usually top menu (global) "migrates" so as to be on top of the mobile site.
You can test this by taking a site, and shrink the browser window (this is not really good enough for development, but it will give you an idea. For dev, there are tools that will help you resize correctly).
Edit: Here is a simple visualisation on how responsive design works:
The objects are rearranged. What seems to become more and more common is actually to take an "ordinary" top menu and compress it into a clickable symbol, what is popularly know as the "hamburger:
I will also recommend you start looking at responsive design through frameworks such as bootstrap. They have done most of the heavy lifting for you.
Here is an example of responsive design; this from Bootstraps site. Full width:
And here in mobile view. Note that the top menu now has become "hidden" behind the hamburger:
These days, websites are built what is called "mobile first". It means that the frameworks and backend layout are first designed for mobile devices. A great majority of the surfers in the world use mobile phones. Do something userfriendly on a tiny scale, doing it large is no problem.
-
After trying with browser shrink (interesting experience, indeed) and rethinking: this is not the answer I'm searching for. We have to display real data in these boxes.– WolfJun 18, 2014 at 10:13
-
1Same principle applies: the content of the boxes are irrelevant. And you can shrink different sites, and they will have more or less functional responsive structure. This site for example are hopeless in this respect.– bentehJun 18, 2014 at 15:20
-
Thanks, I understand that asking for one single layout probably underestimates the real problem. But for now I had a communication problem, which seems to be solved by Zacharia's answer– WolfJun 18, 2014 at 15:30
This is known as a responsive design Twitter Bootstrap have a ton of tools to help with web, you can view their site to see a responsive system in use.
This would help you design a responsive desktop website that would be able to roll out to a mobile device or tablet.
This can be emulated via Chrome > Inspect Elements > Emulation > Emulate.
If you wish to do this without the use of a premade framework, media queries for css (cascading style sheets) would be your best way to do this.
There are a few good tutorials online that could help you.
Responsive design with css3 media queries
EDIT: The Layout in the image would be a "Stack Layout".
Hope it helps :)
-
This helps too, but this isn't the name of the specific layout. Is it simply vertical "flow layout"?– WolfJun 18, 2014 at 15:18
-
If you are referring to it being just the layout you have shown then it would be known as a stack layout. Jun 18, 2014 at 15:19
-
Great, so simple! What about reworking the answer: the point after EDIT meets the question ;)– WolfJun 18, 2014 at 15:26