Responsive Web Design

The Importance of Responsive Web Design

Today, the number of mobile devices such as smart phones and tablets has increased and the mobile visitor rate of web pages has reached significant figures.

However, the vast majority of old-fashioned web pages that look good on large screens are not useful for mobile screens. Web pages prepared for computer screens will not be fully visible on small screens, and it will be very difficult to touch links and other objects.

In other words, if we are going to make a web page today, it must be compatible with the screens of mobile devices. There are many ways to develop mobile-friendly web pages. We can list the first ones that come to mind as follows.

• Using BootStrap or a similar JS-CSS library: It is a JavaScript and JQuery library that everyone can use, including ready-made classes and methods, which are mentioned in our next topics.
• Preparing different and responsive styles for different screens: It can be determined which styles will be valid on which screen widths.
• Preparing different versions of the site for different screens: For example, for the www.btdersleri.com site, interlinked subdomains with different designs but the same content can also be created at m.btdersleri.com.

Today, BootStrap is popularly used and makes our work significantly easier. ( You can review our Bootstrap tutorials .)

Here, let's talk about how we can ensure that different styles are valid on different screen sizes, which we mentioned in the second item.

Using % instead of px

Various units can be used when determining the width and height of html elements with CSS. Until recently, designs were made with only computer screens in mind and mostly the px unit was used.

But now it is preferable to use as little px as possible, instead specifying widths in %.

For example, when the width of an image is set to 200px, that image will occupy 200px on any screen.

However, if its width is set to 50%, it means that it will occupy 50 percent of the place it is currently in, and the place it will occupy will change according to the width of the screen.

While creating the page structure, we should definitely use div elements and even html5 tags (section, article, header...) instead of tables and specify their widths in %.

Once you've also made these elements appear with different widths and designs on different screens, you're done.

Applying Different Styles Based on Screen Resolution

By creating @media rules we can specify the maximum or minimum width of the screen for some styles to be applied.

In the structure shown above, there are various parameters that can come to the places where the mediaType and mediaFeature are written, but they are most often used similar to the examples below. If you need, you can search for other parameters on the internet.

In the example above, the elements with the advertisement class applied on the screens up to 600px in width are hidden.

In the example above, the element with the id box1 is provided to have a white background on screens wider than 800px and a gray background on smaller screens.

In this and similar ways, many different rules can be determined. Multiple rules can be created for the same element.

Let's examine the example below. It is ensured that 4 div elements with the boxImage class are placed differently on different screen sizes.

You can view the full working version of this example in the Examples section. You can test different widths of situations by shrinking and expanding the browser window.

Creating Different Style Sheets Based on Screen Width

With a usage like above, we can determine which style sheet will be used at which screen widths.

Sample:

* Responsive Images - See our next topic for images that shrink or expand according to the screen.

EXERCISES