Some Basic Principles of Responsive Web Design

Now it’s time to pull up your socks. It’s around a month since Google announced its newalgorithmic update to give a boost to responsive or mobile friendly websites in searches. Itwas excellent news for the pioneers of responsive web design industry.

Just to help new fresher to this industry, we have curated few articles written by expertsaround the globe from this web design world.

Responsive Website Design is a great remedy to our multi-screen issue, but getting into itfrom the creator point of view is challenging. No set webpage dimensions, no millimeters,no actual limitations to struggle against. To design a website in pixels for desktop & mobileis the past now. Therefore, let's make clear some fundamental principles of responsive webstyle.

Adaptive vs Responsive web designIt might appear the similar but it isn't really. Both techniques complement each other, sothere is no perfect or inappropriate way to do it. Let the content pick.

FlowAs display dimensions become smaller sized, content begins to take up more vertical areaand whatever below will be pushed down, it's called flow. That might be confusing tounderstand if you are used to design and style with pixels, but can make complete sensewhen you get used to it.

Relative unitsThe screen can be of a desktop, mobile or any other device. Pixel density can also differ, so units are required that are adaptable and work in all places. That's where relative units like percents become useful. So creating something 50% width means it will always take half of the display screen.

BreakpointsBreakpoints enable the design to modify at defined points, i.e. having 3 columns on adesktop computer, but only 1 column on a mobile phone device. Most CSS attributes can bemodified from one breakpoint to the other. Generally, where you place one relies upon onthe content. If a phrase breaks, you might require adding a breakpoint. But use them withcare. It might go messy for you.

Vectors vs Bitmap imagesDoes your image have lots of details and some pretty effects applied? Then it is suggested to use a bitmap image. If you are not using any effect, then think about using a vector

picture. For bitmap image use format JPG, png or a GIF, for vectors the ideal selection wouldbe an SVG or font icon.

System fonts vs Web fontsAlthough web fonts will appears great. Keep in mind that every font will be downloaded andthe more you'll have, the more time it will take to load. System fonts are fast, except whenthe user doesn't have it locally, it will fall back to a standard font.

Thinking that we still left out anything important? Let us know in the comments.

Source: Rising World Technologies