Designing in pixels for Desktop and Mobile is a thing of past. No fixed page size, no millimetres or inches, no physical constraints to fight against. Let's clarify some basic principles of responsive web design here to embrace the fluid web, instead of fighting it.

1. 9 basic principles of responsive web design
Designing in pixels for Desktop and Mobile is a thing of past. No fixed page size, no millimetres or
inches, no physical constraints to fight against. Let's clarify some basic principles of responsive
web design here to embrace the fluid web, instead of fighting it.
Responsive websites respond to their environment
“Day by day, the number of devices, platforms, and browsers
that need to work with your site grows. Responsive web design
represents a fundamental shift in how we’ll build websites for
the decade to come.”
- Jeffrey Veen

2. Responsive web design is a great solution
for devices of various screen size

3. Responsive vs. Adaptive web design
It might seem the same but it isn't. Both approaches complement each other

4. The Flow
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

5. Relative units
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. So making something 50% wide means it will always take half of
the screen

6. Breakpoints
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. Most CSS
properties can be changed from one breakpoint to another.

7. Max and Min values
Sometimes it's great that content takes up 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.

8. Nested objects
Having a lot of elements depending on each other would be difficult to
control, therefore wrapping elements in a container keeps it way more
understandable, clean and tidy. This is where static units like pixels help.
They are useful for content that you don't want to scale, like logos & buttons.

9. Mobile or Desktop first
Technically there isn't much 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.

10. Webfonts vs System fonts
Although webfonts look stunning, remember that each will be downloaded &
will take longer to load the page. System fonts on the other hand are
lightning fast, but if the user doesn't have it locally, it will fall back to a
default font.

11. Bitmap images vs Vectors
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.

12. Write to us at:
info@capitalnumbers.com
www.capitalnumbers.com
or