Partner Article

What is Responsive Design

Today, almost every person is using internet to accomplish different tasks. This has given rise to internet browsing to a great extent. Earlier only desktops were available for browsing and so, there was restriction on the screen size and resolutions of the screen.

During these times, designing websites has standards defined for layouts, image qualities etc. if you see current trends, everyone has got Smartphone or tab with internet connectivity and new devices are emerging with varied screen sizes and resolutions. So websites designed for desktops fail to fit these screens.

Two to three years back, there was a trend to design different websites for mobile devices matching to specifications. However, with introduction of number of devices like tab, kindle, Blackberry, iPhone it is difficult to cope up. It is basically impractical to design separate websites for separate devices. What’s the solution? Responsive Design is the solution to this problem. In simple words it means that before launching the website, device screen parameters are queried and then the website is rendered accordingly.

Responsive web design uses CSS media queries for rendering different layouts on devices with different screen size and resolution. It is relatively new concept where flexible layouts are used while creating a website design. The mechanism of creating responsive design is complex one but once done, your website will look equally nice on all screen sizes. It is however, not just a way of adjusting things on different sizes but a whole new paradigm for designing websites.

Different screen parameters –

With new devices coming in market everyday with varied display features underline the need of responsive design even more. Parameters such as screen size, resolution, orientation, shape make the situation more complex. Some devices are perfect square where are few are rectangular shape. Normally all devices switch their orientation from landscape to portrait when required. In such cases, single design can’t address all variations unless it has following responsive features.

Layout Flexibility – Layouts are the prime elements in any design. They act as containers and accommodate images, videos, texts and other page elements. These layouts must be flexible and appear as per the device’s needs. If layout is not flexible enough then images or other content might break it when the website is viewed on smaller screen sizes. Layout types are categories on the basis of the width definition, and four types of layouts are -

• Fixed-width – As the name suggests, these layouts are defined with fixed width measured in pixels. This is the common type of layout which most designer use to design website themes. Designs created on fixed width layouts do not alter as per variations in the device screen size, in a way they are rigid. As a designer, you have to guess the best suitable width for most of the users and make choices. This means that if you choose width=900px, then it might look perfect on square monitor but at the same time may leave lots of spaces on both sides when opened on laptop screen which is rectangle. The main disadvantage of fixed-with layout is your page content might not be readable on all types of screens.
• Liquid or fluid – This type of layouts will change their width according to the device. While creating these layouts, width is not defined. As an effect, they occupy whole screen no matter how big or small it is. If necessary, width can be assigned in percentage and not pixels. This ensures what percent portion is to be occupied by columns. When screen size changes, all contents within the layout are adjusted to the new width. Text content and background image spread or shrink to fit the size however, images of fixed width might cause problems. Horizontal scrollbar (which depicts worst design) may appear on the screen. Next paragraph will provide solution to fixed-width-image problem.

Benefits of Liquid or Fluid Layouts -

1. As a designer, if you are working on liquid layouts then it makes your and users life simpler. You don’t need to worry or test your design on each resolution and size separately. Design will completely visible on 1024x768 size or 800x600 size. You allow your users to select their preferred device and your design will adapt to their choices. Your website will look nice and fit on increased range of sizes.
2. Adjustable widths can improve readability to great extent. User has freedom to decide readable size as readability can be affected due to age, disability or device constraint. The nightmare of horizontal design can be totally avoided using fluid layouts. For handheld devices, you might require to create separate stylesheet. We will discuss about this in detail in coming articles.

• Elastic Layouts – This type of layout primarily deals with the text size. In CSS files you might have seen sizes defined as 20em or 2em where em is the measure related to font size. Lets take an examples

CSS definition .element {

font-size: 20px;

}

Then 1em = 20px;

We can safely say that em is unit refers to the font size in points or pixels.

The main advantage of using em as unit for page content is that the design widths now depends on the number of characters. When you increase the font size, the overall layout also gets wider to accommodate number of bigger characters and vice versa. On many websites, there is provision to change the text size to small, normal or bigger as per the readability requirements of users. Here when user changes text sizes, the images and other elements than text stay the same. They do not change their sizes, like while zooming the page all elements on the page are zoomed in or out. Normally (Ctrl + +) and (Ctrl + - ) key combination is used to increase and decrease font size respectively.

Here we saw the basics of responsive design and types of layouts used while designing websites. We also mentioned their effects. In next article, we will look at hybrid layouts and more details about above three layouts.

If you steel need more information on responsive web development do get in touch with us. We are a web development company in India, and our team of web shop development specialists provides comprehensive ecommerce services to our clients all across the globe.

This was posted in Bdaily's Members' News section by Helios Solutions .