9 basic principles of responsive web design
12
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
-
Upload
capital-numbers-infotech-pvt-ltd -
Category
Mobile
-
view
274 -
download
0
Transcript of 9 basic principles of responsive web design
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
Responsive web design is a great solution
for devices of various screen size
Responsive vs. Adaptive web design
It might seem the same but it isn't. Both approaches complement each other
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
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
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.
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.
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.
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.
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.
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.
