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.

enter image description here

Would you please tell me the name of this layout type?

  • You..don't own a h-h-handheld?..
    – SaturnsEye
    Commented Jun 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 ;)
    – Wolf
    Commented Jun 18, 2014 at 13:40
  • But with a smartphone you can get the SE app! <3 :3
    – SaturnsEye
    Commented Jun 18, 2014 at 14:17

2 Answers 2


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:

enter image description here

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:

enter image description here

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:

enter image description here

And here in mobile view. Note that the top menu now has become "hidden" behind the hamburger:

enter image description here

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.
    – Wolf
    Commented Jun 18, 2014 at 10:13
  • 1
    Same 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.
    – benteh
    Commented Jun 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
    – Wolf
    Commented Jun 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"?
    – Wolf
    Commented Jun 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. Commented Jun 18, 2014 at 15:19
  • Great, so simple! What about reworking the answer: the point after EDIT meets the question ;)
    – Wolf
    Commented Jun 18, 2014 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.