The main difference between adaptive design and mobile version of the site is adaptation to devices with different display resolutions (TVs, racetracks displays, smartphones and tablets, etc.), including those to come up in the future. Page development from a minimal display resolution (mobile devices) to a maximum one (desktop), loading elements to a web-page with JavaScript is considered to be the most optimal variant. Thus, excess data is not loaded on pages for mobile devices, which optimizes the load speed. Read Practical advice on designing websites mobile devices.

Recommendations for adaptive design development:

1. Framework

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

2. Check points

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

3. Navigation

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.

Desktop menu
Image 1 - Desktop menu


Mobile 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.

Mobile menu
Image 3 - Mobile menu


Mobile menu
Image 4 - Mobile menu

3) Pop-up menu

To see the examples of pop-up menu, please, follow the link

Desktop menu
Image 5 - Desktop menu
Mobile menu
Image 6 - Mobile menu

4.Control elements

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.

Select (desktop version)
Image 7 - Select (desktop version)
Select (mobile version)
Image 8 - Select (mobile version)

Read the second part of the article describing the basic features of web sites layout.