: What is the name of this GUI layout 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

@Bryan765

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 :)

Vote Up Vote Down

@Rivera951

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.

Vote Up Vote Down