Responsive Web Design Development: Fundamentals
MOWEEX - digital software Agency
We are an international digital software agency and develop individual software solutions.
Nowadays, after the spread of mobile devices and tablets to almost everyone in the world. Meanwhile, people spend hours engaging with digital platforms on their smartphones. The design of responsive websites that appear on these devices properly is necessary, and instead of designing a copy of a website for each device. Think of designing a separate website for each and every device! How much is the time required to develop a separate website for each device?
Is it not an idea requiring incredible resources! We know it takes a lot of time and effort, and from here the idea of responsive web design emerged.
As technicians, it is sophisticated and important to know what responsive web design is? Why are designers moving forward to use responsive design?
What is Responsive Design?
Responsive design is to adapt your content to different screen sizes and to ensure content consistency across devices (desktop computers, laptops, tablets, mobiles, smart TVs, fridges, and cars).
Let’s take a brief look from the beginning of the 1990s when the web was first going viral.
Historic website layouts
Whether it was 520, 760, or 1024 pixels, choosing one specific width to design for was called fixed-width design, which would be a fixed size in pixels.
2. Liquid layouts:
Instead of using fixed widths for your layouts, you could make a flexible layout using percentages for your content. These designs work better than a fixed-width layout that only looks right at one specific size.
These two approaches tended to result in a website that looked its best on the screen of the person designing the site! But while a liquid layout will look good across a wide range of widths, it will begin to worsen especially on wide and narrow screens. On a widescreen, the layout looks stretched. On a narrow screen, the layout looks squashed.?
So, what we need is a flexible layout that fits all device sizes and needs without a stretched look or the screen looking squashed.
In the 21 century, the designers of the web had a really huge problem. The Web is getting bigger and bigger. So do monitors. However, new screens arrived that was smaller than any desktop device. With the arrival of mobile phones with fully-featured web browsers, designers faced a dilemma. How could they ensure their designs? Would it look good on a desktop computer and a mobile phone?
“Web design is responsive design. Responsive web design is a web design, done right.” — Andy Clarke, creative director, product & website designer
Ethan Marcotte defined three criteria for Responsive Design in 2010:
Elements occupy the same percentage of space, however large or small the screen becomes. It means you choose where pixels should appear and define a layout size so the elements will scale up or down in a fixed way.
2. Fluid media
This technique is like setting the max-width property to 100%. It enables an image to scale down to fit in a flexibly-sized column, rather than overflow it.
??3. ? Media queries
These are filters you use to detect the device’s dimensions and make your design appear appropriately.
Media queries are initiated with the @media keyword (a CSS at-rule) and can be used for a variety of use cases.
In this example, the background color is set to grey. But if the page is printed, the background color should be white.?
body {
??color: black;
??background-color: grey;
}
@media print {
??body {
????background-color: white;
??}
}
You can use the @media at-rule in your stylesheet like that, or you can make a separate stylesheet and use the media attribute on a link element:
<link rel="stylesheet" href="core.css"
<link rel="stylesheet" href="print.css" media="print">
If you want to apply different styles depending on the browser window (landscape or portrait)
There's a media feature called orientation you can use:
@media (orientation: landscape) {
???// landscape mode.
}
@media (orientation: portrait) {
???// portrait mode.
}
If a site were responsive, its layout and content would look good on any device.
For responsive design, one of the most useful media features contains the dimensions of the browser viewport.
To apply styles when the browser window is wider than a certain width, use min-width.
领英推荐
@media (min-width: 500px) {
??// CSS for viewports wider than 500 pixels.
}
To apply styles when the browser window is narrower than a certain width, use max-width.
@media (max-width: 500px) {
??// CSS for viewports narrower than 500 pixels.
}
You can also apply more than one condition. Use the word and combine your media queries:
@media (min-width: 500) and (max-width: 900) {
??// CSS for viewports wider than 500px and narrower than 900px.
}
The points at which a media query is introduced, and the layout changed, are known as breakpoints.
How to choose breakpoints?
Don't define breakpoints based on device classes. Instead, the content itself should determine how the layout adjusts to its container.
Pick major breakpoints by starting small, then working up
Design the content to fit on a small screen size first, then expand the screen until a breakpoint becomes necessary. It allows you to optimize breakpoints based on content and maintain the least number of breakpoints possible.
A common approach when using Media Queries is to create a simple single-column layout for narrow-screen devices (e.g., mobile devices), then check for larger screens and implement a multiple-column layout when you know that you have enough screen width to handle it. It is often described as a mobile-first design.
You can read more about breakpoints for standard devices on CSS-tricks.
Improving compatibility with older browsers
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It does not affect modern browsers.
@media only screen and (color) { ... }
Syntax improvements in Level 4
The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example, width or height, less verbose. Level 4 adds a range of context for writing such queries. For example, using the max- functionality for width, we might write the following:
@media (max-width: 30em) { ... }
In Media Queries Level 4 this can be written as:
@media (width <= 30em) { ... }
Using min- and max- we might test for a width between two values like so:
@media (min-width: 30em) and (max-width: 50em) { ... }
This would convert to the Level 4 syntax as:
@media (30em <= width <= 50em ) { ... }
Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with and, not, and or.
Negating a feature with not
Using not() around a media feature negates that feature in the query. For example, not(hover) would match if the device had no hover capability:
@media (not(hover)) { ... }
Freelancer, fond of web design
2 年Great material, also read this article https://gapsystudio.com/blog/what-is-responsive-web-design/. This material is great for beginners as it outlines the basic principle of how responsive design works and what it does.