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
Top Related