قالب وردپرس درنا توس
Home / Tips and Tricks / What is “responsive design” and how do you use it? – CloudSavvy IT

What is “responsive design” and how do you use it? – CloudSavvy IT



Responsive web design on modern electronics
Shutterstock / Lukas Kurka

Responsive design is the idea to make your website look good in all resolutions ̵

1; not just on desktops and mobiles. With a responsive website, your desktop and mobile website are the same page and window size scale.

What is responsive design?

Responsive design allows your website to resize to fit all screens. Instead of designing a specific layout or designing a separate mobile and desktop location, your website should scale to fit all devices. In the real world, people will use your site in all sorts of different ways; There are small phones, large phones, tablets, tablets in landscape mode, netbooks, laptops and 5K iMacs.

Take a look at the howtogeek.com website. On the desktop, it has a title with a logo, main categories, social media buttons, and finally a hamburger menu with extended categories. The article boxes are placed in a grid that is scaled with screen size but only ever takes up about 1000 pixels (because scaling up too much would look strange). Overall, there is a lot of space to work with, so the website looks best here.

The How-To Geek website

Shrink the screen slightly to the size of the tablet, and there is not as much space. The text is broken differently, the images are scaled down or cropped and the main categories disappear.

The article boxes retain the layout but at the expense of having extra lines of text. However, the front page article is more important and will maintain its aspect ratio and scale down without cropping.

The article boxes maintain the layout

And on really small devices, you can not really afford to have all those buttons in the menu, and there is not enough space to place the item boxes next to each other, so the menu collapses into a hamburger menu and the item boxes are listed in a column. This column always covers the entire width of the device (minus 20 pixels on each padding page).

The menu collapses into a hamburger menu and the article boxes are displayed in a column on smaller units

You can test this yourself to see how your site scales. Open the Chrome Developer Tools by right-clicking anywhere and selecting “Inspect”. Press the mobile device button in the upper right corner of the box that appears and select “Responsive” as the device type:

See how your site scales by right-clicking anywhere, selecting

You can grab the handles on the edge of your website to adjust the size, or you can enter manual pixel values. You can also preview what it will look like on popular mobile resolutions (but you should still test on a real device).

How does responsive design work?

Before making a responsive design, you need to fix a bug with mobile pages and the viewing area. Without this meta tag in the HTML header, your mobile page may zoom out and not be displayed correctly. This may already be set, as it is a fairly common headboard, but if it is not, go ahead and add it:

The main way to make websites responsive is with the magic display: flex property, otherwise known as flexbox. Flexbox works by adjusting the size of objects in a container to scale with a changed window size. You start by creating a container and setting it to display: flex:

.container {
   display: flex;
}

And then set flex parameters for all children:

.child {
  flex: 1;
}

This will allow the children to expand and take up as much space as the container allows. For example, if you had two children, each takes 50% of the space:

Flexbox works by adjusting the size of objects (children) in a container to scale with a changed window size

If you set up the other child instead flex: 2it would take twice as much space as the other (a total of 66%).

When the screen shrinks, the children shrink with it. However, they will reach a point where they can not shrink less than the size of the content, but you can make them wrap to another line (just like text) with flex-wrap on the container.

.container {
  flex-wrap: wrap;
}

When the screen shrinks, the children shrink with it and can wrap themselves

Now you will never come across your website content off-screen or so encrypted that it is unreadable.

Another piece of CSS technology behind responsive design is media issues. Media issues are like CSS If statements that allow you to check a value before using any CSS. You can use this to dynamically design components based on the width of the browser. For example, if you had a top menu bar that you wanted to hide on your phone and replace with a hamburger menu, you could hide it with a @media question:

.topmenu {
  display: block
}

@media screen and (max-width: 600px) {
  .topmenu {
    display: none;
  }
}

600px is just an arbitrary value used to define the boundaries of most mobile devices, but you can have many breakpoints that change the styling. You can use these in combination with flexbox to change the flex properties based on the size of the device; for example, a common use is to make horizontal lists vertical and center-aligned, for easier readability on the mobile.

There is much more with responsive design than we can cover here, so if you want to learn more about CSS behind it, you can read this fantastic guide to flexbox from CSS Tricks, or read W3School’s documentation for media issues.

How do I make my website responsive?

If you do not want to spend time redoing your site with flexbox in mind, there are many responsive website templates that you can use as a base, including many for free. Many templates that you can use with managed hosting providers (GoDaddy, SquareSpace, Wix, etc.) will respond instantly. Underscores is a good free start template for WordPress.

If you want to code it yourself but do not want to do it All by hand, there are many third-party libraries to work with flexbox. The most popular of these is Bootstrap, which adds easy-to-use classes for working with flexboxes (along with many other useful UI elements). With Bootstrap you specify containers with row class and then enter column size with classes like col-md-6, and CSS is managed for you. For example, the following code will arrange each one div in a row with three on the desktop and add a breakpoint for the media question to make it a full-width column on your mobile:

//content
//content
//content

Sizes are measured by 12, so col-md-4 sets div to 33% width on average size ("md") and col-sm-12 sets it to 100% width on small devices ("sm").

Bootstrap also has lots of themes and templates to get you started. It is designed to get you off the ground very quickly and to get rid of the time spent panning HTML and CSS (hence the name).


Source link