A while back we made a list of animated gifs explaining the basic \nprinciples of responsive web design. The post was extremely popular. It \nturns we were not the only ones who find it difficult to explain what \nmakes the web responsive. Today we are releasing a video, explaining few\n of the principles with some real examples.
<\/p>\n\n\n\n
As screen sizes become smaller, content starts to take up more \nvertical space and anything below will be pushed down, it\u2019s called the \nflow. That might be tricky to grasp if you are used to design with \npixels and points, but makes total sense when you get used to it.
<\/p>\n\n\n\n
The canvas can be a desktop, mobile screen or anything in between.\n Pixel density can also vary, so we need units that are flexible and \nwork everywhere. That\u2019s where relative units like percents come in \nhandy. So making something 50% wide means it will always take half of \nthe screen (or viewport, which is the size of the opened browser \nwindow).
<\/p>\n\n\n\n
Breakpoints allow the layout to change at predefined points, i.e. \nhaving 3 columns on a desktop, but only 1 column on a mobile device. \nMost CSS properties can be changed from one breakpoint to another. \nUsually where you put one depends on the content. If a sentence breaks, \nyou might need to add a breakpoint. But use them with caution\u200a\u2014\u200ait can \nget messy quickly when it\u2019s difficult to understand what is influencing \nwhat.
<\/p>\n\n\n\n
Sometimes it\u2019s great that content takes up the whole width of a \nscreen, like on a mobile device, but having the same content stretching \nto the whole width of your TV screen often makes less sense. This is why\n Min\/Max values help. For example having width of 100% and Max width of \n1000px would mean that content will fill the screen, but don\u2019t go over \n1000px.<\/p>\n","protected":false},"excerpt":{"rendered":"
A while back we made a list of animated gifs explaining the basic principles of responsive web design. The post was extremely popular. It turns we were not the only ones who find it difficult to explain what makes the web responsive. Today we… <\/p>\n