OUR Blog
Lead UX/UI designer
Evan Konenko
Lead UX/UI designer
DESIGN
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.

WHAT CLIENTS SAY ABOUT STEELKIWI
SIMILAR POSTS
Jun 21 2017
Everything you have to know about the new App Store Design.
Jun 01 2017
In this article you will find tips & tricks for a Right-to-left (RTL) website development.
Apr 18 2017
Find inspiration looking at the best homepage design examples we've selected.