Adaptive Sites Design. Part 1.
OUR Blog
Project manager
Evan Konenko
Project manager
Jan 14 2016

Adaptive Sites Design. Part 1.

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

Picture 1 - Desktop menu

Mobile menu

Picture 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

Picture 3 - Mobile menu

Mobile menu

Picture 4 - Mobile menu

3) Pop-up menu

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

Desktop menu

Picture 5 - Desktop menu

Mobile menu

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

Picture 7 - Select (desktop version)

Select (mobile version)

Picture 8 - Select (mobile version)

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

Oct 19 2016
This article highlights basic methods which will help you in layout and creation of adaptive emails.
Jul 18 2016
Step-by-step instructions for creating a design for project.
May 03 2016
Design research should be conducted during the very first stage in developing a new product so that insights can be applied when planning and establishing product requirements. Design research starts with primary task resolution and ends with making a working prototype.