Basic Principles of Responsive Design9

Responsive vs Adaptive

2

It might seem the same but it isn't. Both approaches

complement each other, so there is no right or wrong

way to do it. Let the content decide.

01

[Source/Images: Sandijs Ruluks/Froont]

The Flow

3

As screen sizes become smaller, content starts to take up more vertical space

and anything below will be pushed down, it's called the flow. That might be

tricky to grasp if you are used to design with pixels and points, but makes total

sense when you get used to it. 02

[Source/Images: Sandijs Ruluks/Froont]

The Flow

4

As screen sizes become smaller, content starts to take up more vertical space

and anything below will be pushed down, it's called the flow. That might be

tricky to grasp if you are used to design with pixels and points, but makes total

sense when you get used to it. 02

[Source/Images: Sandijs Ruluks/Froont]

Relative Units

5

The canvas can be a desktop, mobile screen or anything in

between. Pixel density can also vary, so we need units that

are flexible and work everywhere. That's where relative

units like percents come in handy.

03

[Source/Images: Sandijs Ruluks/Froont]

Relative Units

6

The canvas can be a desktop, mobile screen or anything in

between. Pixel density can also vary, so we need units that

are flexible and work everywhere. That's where relative

units like percents come in handy.

03Relative Units Static Units

[Source/Images: Sandijs Ruluks/Froont]

Breakpoints

7

Breakpoints allow the layout to change at predefined

points, i.e. having 3 columns on a desktop, but only 1

column on a mobile device. Usually where you put

one depends on the content.

04

[Source/Images: Sandijs Ruluks/Froont]

Breakpoints

8

Breakpoints allow the layout to change at predefined

points, i.e. having 3 columns on a desktop, but only 1

column on a mobile device. Usually where you put

one depends on the content.

042 Column 1 Column

[Source/Images: Sandijs Ruluks/Froont]

Min & Max Values

9

Sometimes it's great that content takes up the whole width of a screen, like on

a mobile device, but having the same content stretching to the whole width of

your TV screen often makes less sense. This is why Min/Max values help. 05[Source/Images: Sandijs Ruluks/Froont]

Min & Max Values

10

Sometimes it's great that content takes up the whole width of a screen, like on

a mobile device, but having the same content stretching to the whole width of

your TV screen often makes less sense. This is why Min/Max values help. 05[Source/Images: Sandijs Ruluks/Froont]

Nested Objects

11

Having a lot of elements depending on each other would be

difficult to control, therefore wrapping elements in a

container keeps it more understandable and tidy. This is

where static units like pixels can help.

06

[Source/Images: Sandijs Ruluks/Froont]

Mobile or Desktop First

12

Technically there isn't much of a difference if a project

is started from a smaller screen to a bigger (mobile

first) or vice versa (desktop first). Yet it adds extra

limitations and helps you make decisions if you start

with mobile first.

07

[Source/Images: Sandijs Ruluks/Froont]

Webfonts

13

Although they will look stunning, each web font will be downloaded and the

more you'll have, the longer it will take to load the page. System fonts on the

other hand are lightning fast.08[Source/Images: Sandijs Ruluks/Froont]

Bitmap vs Vector

14

Does your icon have lot of details and some fancy effects

applied? If yes, use a bitmap. If not, consider using a vector

image. For bitmaps use a jpg, png or a gif, for vectors the

best choice would be a SVG or an icon font.

09

[Source/Images: Sandijs Ruluks/Froont]

15

Thank You Questions Welcome