9 Basic Principles of a Responsive Web Design

As we continue further into an age of electronics and the internet is no longer for computers, it comes to a point where our websites need to create a good look on not only a desktop but other visual devices such as tablets and phones as well.

Responsive web design is the process of creating websites that can determine what type of device you are using and adjusting the displayed content to the best possible look for the device in use.

The basic theory of responsive web design is to design using percentages for measurements instead of exact amounts such as pixels, millimeters or inches.

Using Responsive over Adaptive design

The adaptive design was conceived when tablets and cell phones were first used to browse sites, and it allows a site to choose from different static formats, usually your standard site and a mobile version of the site. Some thought will create many versions of the same site using various size requirements – including perspective web design mockups.

Vertical Space

When designing using responsive design, your flow of vertical space changes depending on what type of device you are using. Text blocks can push additional content down to accommodate the new width of your site unlike the original concept of static design where the lower content may be overlapped or interrupted by a change in page width.

Measurements

By using percentages instead of actual pixel sizes, it gives the website the ability to adjust pages to the size of the device this is in use. A text block that is 50% of the width of the screen will always be 50% of the width of the device in use instead of a fixed width such as 800 pixels.

Breakpoints

You can set up your site using various amount of columns and then when the display changes you can use breakpoints to help show where the screen should be breaking up columns to display many columns or a single one depending on what device you are using.

Minimum and Maximum values

With the change in the size of your display, you can inform your layout to have a minimum size or a maximum size using pixels or measurements. This way certain parts of your page will only display at a certain size no matter what device is being used. Depending on what command is being used, the display in question will still be dynamic up to the specific size that is used.

Using Nesting

As with any dynamic display, things can get messy very quickly depending on what you are using for a display. If you have a batch of elements that need to be displayed in a particular set pattern, no matter what display being used, you can nest objects together to keep them organized no matter how they are being displayed.

Desktop or Mobile first

Sites still are constructed initially in one form or another and then possibly adjusted for additional display sizes. There is no real right or wrong way to start, so it is best to think if your audience first of all and what type of devices you think you are targeting. Don’t ruin your web design by not focusing on these aspects.

System Fonts or Web Fonts

Everyone likes a unique look to their site but it when it comes to loading times, it can be a pretty big choice if you want to use a web font or a system font. A system font is a font that is used by most systems and so is already loaded on devices. A web font can take some time to download which will slow down the display of your site.

Vectors or Bitmaps

When it comes to images, a responsive site can have complications. A low-resolution image can look terrible when you scale it up to fit onto a bigger screen. If you use a vector image, it will scale correctly, but some older browsers have limited support for vectors.