Simple way to design Responsive Website

Responsive web design is a methodology where the application's UI automatically fit with the view port or the device screen with the same code. There are several types of device like large desktop, medium desktop, tablet, phablet, mobile, TV and what not. I came across many issues and challenges to create responsive nature of a web application which really run well in across devices. 

Website design can be divided into two categories - 

• Adaptive Design
  • Adaptive design is a older methodology to build the web application. In such scenario, it uses static layout based on different break points, which will respond only when it gets loaded. Adaptive layout detects the screen size of the device and load the appropriate layout for it. If you are changing the device or resizing the window, you need to refresh the page to get proper content. 

• Responsive Design
  • Responsive design is new and very common methodology for web application. It is very fluid and adapts to size of the screen, irrespective of target device. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the site to adapt to different screens.

Using meta Tag

The following meta tag tell browser how to adjust the content.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Background image Set

Setting up background image of an Single page application like Angular / react could be a challenge, if you need to different background image on user navigation. For that you need to add the background image in body tag or the parent div tag to refect the changes.

To set up background color of a component, you could use the following code in Angular application.

Try not to use pixels in CSS 

Pixels are very straight forward to tell browser about irrespective of screen size. Lets give you an example - A pixel of a font size is actually a pixel of a screen. (same pixel will differ from high resolution to mid & low resolution screen). So when you are setting up pixels, things come to your mind is it a normal or retina or what else.

Let's try out 'em' or 'rem'. CSS3 came with rem which is a relative size to the root html element and is supported by 98% of the browsers. So the cool part about this is people can have their default browser setting set to something else, then the defined 16px's, and we will just scale for them.

To calculate the pixels to rem we have to understand that the default font size for an HTML document is 16 pixels.

So, 1rem = 16px, and 2rem = 32px.

Also you could use 'vw' and 'vh' for font-size, those are also can scale based on view port.

Grid Structure - Positioning multiple horizontal div

Grid Structure defines, how the screen can be divided into multiple parts. Like Bootstrap divide the total width of a screen into 12 unit. It has xs, sm, md, xl break point to leverage its grid classes. 

That is the very basic and most generic way to create your responsive design. But in few cases you don't want to break the div structure, or the UI looks alike across all kind of devices. Then you can use fkex CSS. like -

Like above all the text Apple, Ball, Cat will show horizontally. Another way to do this using Grid layout. CSS Grid Layout allows for the straightforward creation of flexible grids. If we consider the earlier floated example, rather than creating our columns with percentages, we could use grid layout and the fr unit, which represents a portion of the available space in the container.

CSS media queries for responsiveness

Sometime, you need to make a rigorous changes to application layout to support certain screen size. Media queries are become more useful in such cases.

I believe you have already came to know what media query is, how to use it. One tricks I want to share, in Angular application, how the easy way to use media query.

Open your style.scss file in your Angular project and add the following lines 

@import '~bootstrap/scss/bootstrap';

// Small device style

@import "~bootstrap/scss/functions";

@import "~bootstrap/scss/variables";

@import '~bootstrap/scss/mixins/breakpoints';

@include media-breakpoint-down(xs) {

// your css code for small device

}

To view your page under different break point - 

Open DevTools and then turn on Device Mode. This opens in responsive mode by default. Also to verify your media queries, you can follow the Show media query to display your breakpoint.

Please share your challenges as well, so that we can put more effort to find out generic solutions.

happy Coding!

- LazyPanda