Responsive Web design has recently become a very hot topic in the digital business community.
It is an important one, to be sure, but many people are still unsure about what responsive Web design does exactly and how.
This article will explain it in the simplest way possible. There is some code that needs to be addressed, but the goal is to make this extremely easy to follow.
Definition Responsive Web design enables websites to adapt to the different screen sizes of various devices such as personal computers, tablets and smartphones simultaneously. Thanks to the explosive growth and variety of mobile devices, responsive Web design has become a very important trend.
There is a big difference between the screen sizes of a desktop computer and a smartphone, and users will experience significant difficulties if your website displays the same layout for each device. There will be lots of zooming and panning required to view the content on a smaller smartphone screen (Figure 1), which detracts from the user experience.
Execution So, how to create a responsive website? A responsive website can be created by using several CSS steps. For those who are not familiar with CSS, it is a computer language used to describe the look and format of a website's elements such as text, images, buttons, etc.
There are three important CSS steps to make a responsive website. The first step is to detect a device's screen size, or more popularly known as the media query. Below is a CSS media query example:
The first line is to detect a computer screen that is equal or bigger than 769 pixels, and the second line is to detect a smartphone screen that is equal or smaller than 768 pixels. The second step is the flexible grid layout. This means that the grids can adjust their width and position based on a device's screen width.
Below is a CSS example for flexible grid layout:
The code above shows different CSS styles for small screens and big screens. The CSS style for small screens will make the blocks stack vertically. That style is defined between @media only screen and (max-device-width:768px) bracket.
The CSS style for big screens will make the blocks stack horizontally. That style is defined between @media only screen and (min-width:769px) bracket.
In Figure 2, for example, the vertical layout on a smartphone screen will make a website's content almost as big as the layout on a computer screen.
Image-ination The third step of responsive Web design is flexible image or media. In this step, maximum width of an image or media will be the same as its container width.
If the container width is set to be equal to a device's screen width, the image or media width will be the same as the device's screen width. If the container width is set to be 50 percent of the device's screen width, the image or media width will be 50 percent of the device's screen width, and so on (see Figure 3).
Below is the CSS code to make a flexible image or media:
And that's pretty much it - easy, right? But do keep in mind that these codes are simple ones so that the responsive Web design concept could be easily understood. Big websites will have lots of CSS codes inside, and this will make things somewhat more complicated.
The good news, however, is that the concept behind responsive design will always remain the same - no matter how much code your website has.
About the Author:Robby Leonardi is a multidisciplinary designer based in New York City. He does illustration, graphic design, animation and front-end development for major media companies.
As the Editor-in-Chief of Website Magazine and President of Website Services, Peter has established himself as a prominent figure in the digital marketing industry. With a wealth of experience and knowledge, Peter has been a driving force in shaping the landscape of digital marketing. His leadership in creating innovative and targeted marketing campaigns has helped numerous businesses achieve their revenue growth goals. Under his direction, Website Magazine has become a trusted source of information and insights for digital marketers worldwide. As President of Website Services, Peter oversees a team of talented professionals who specialize in SEO/SEM, email marketing, social media, and digital advertising. Through his hands-on approach, he ensures that his team delivers exceptional results to their clients. With a passion for digital marketing, Peter is committed to staying up-to-date with the latest industry trends and technologies, making him a sought-after thought leader in the field.