“Adaptive Sites Design. Part 1.”
Recommendations for adaptive design development:
Flexible grid-based layout is fundamental for adaptive design. For example, in Framework ZURB Foundation, Bootstrap - display is divided by grid into 12 columns, and depending on display resolution layout adapts in proportion to 6, …, 1 column on width (mobile devices).
While developing adaptive layouts it is necessary to consider the following set of resolutions, so-called check points:
320px; 768px; 960(>1024)px - an optimum set
320px; 480px; 640px; 768px; 960px( >1024px).
Navigation structure is of paramount importance for different display resolutions. The most widespread of them are:
1) Drop-down menu An additional button is added for low resolution displays. The main menu is hidden. Disclosure/Concealment of the list is carried out by the principle of “Accordion” after pressing the button. Similar principle is applied in Bootstrap.
Image 1 - Desktop menu
Image 2 - Mobile menu
2) Side menu / Navigation bar The main menu is hidden for low resolution displays. Mobile menu is located outside the viewing pane. There is an additional "Menu" button for mobile devices, which displays or hides mobile menu when you press it. Mobile menu is displayed as a sliding sidebar. The sidebar can either slide over main content, or move man content block. Similar principle is applied in ZURB Foundation.
Image 3 - Mobile menu
Image 4 - Mobile menu
3) Pop-up menu
To see the examples of pop-up menu, please, follow the link
Image 5 - Desktop menu
Image 6 - Mobile menu
In the majority of cases designing presupposes control elements stylization (select, checkbox, radio), but it is recommended to use standard control for mobile devices. For ‘select’ in particular.
Image 7 - Select (desktop version)
Image 8 - Select (mobile version)
Read the second part of the article describing the basic features of web sites layout.