Responsive website Feature
1) Media queries:-
A media query allows us to target not only certain device classes but to actually inspect the physical characteristics of the device rendering our work, Ethan explains. Media queries thus allow developers to use condition checks to alter web designs based on the properties of the user's device.Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport.
Media queries is a feature of CSS 3 allowing content rendering to adapt to different conditions such as screen resolution. It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design. check think width and height of the viewport ,deviceo rientation (is the tablet/phone in landscape or portrait mode?)resolution
Media queries Syntax :-
@media not|only mediatype and (expressions) {
CSS-Code;
}
Media Queries Advantages:-
Media queries serve only the most important content for smaller resolutions such as iPhones, thus eliminating clutter.
Higher chances that the website will lead to more conversions (better selling of products or services)
If a significant portion of your audience are using mobile devices, a responsive website makes sense.
Media Queries Disadvantages:-
Responsive websites take longer to code and are more expensive.
Before investing in this option I recommend checking the analytics. If most of the visitors are using 1024px resolutions and up, an responsive solution wouldn’t make sense.
The requirement is to always build first the Mobile version than customize it for larger resolutions.
Older browsers don’t support CSS3 media queries but there is a Javascript fallback.
Most of fixed websites show up reasonable well on smaller devices.
Some non-tech clients wouldn’t understand why their website doesn’t shows on the phone the same like on desktop.
2) Fluid grids:-
When flexible grids are created using CSS, the columns automatically rearrange themselves to fit the size of the screen or browser window, whether the user is on a 21-inch desktop computer, a 13-inch laptop, a 9.7-inch tablet or a 5.5-inch mobile phone. This enables designers to maintain a consistent look and feel across multiple devices. Plus, it saves everyone time and money by allowing designers to update one version of the website versus are built using columns that are considered fluid columns. When the screen size is changed, the widths of these columns will adjust proportionally to its parent container.The advantage of fluid grid is that you can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
A fluid grid layout provides a visual way to create different layouts corresponding to devices on which the website is displayed. For example, your website is going to be viewed on desktops, tablets, and mobile phones. You can use fluid grid layouts to specify layouts for each of these devices.Fixed layout, also known as static layout, is an outline with fixed width, measured in pixels. As the name suggests, the layout is programmed to be fixed. So no matter what the screen size or resolution, the width of the elements will remain the same. In other words, the viewing experience of the users will remain the same across all device types be it computer, laptop, smartphone, or tablet.
3) Flexible visuals:-
At its most basic, a visual system establishes standards for each of the following: logo, typography, color, imagery, layouts, and formats. Marcotte refers here to using code that prevents rich media files from exceeding the dimensions of their containers, as well as viewports. As the flexible container resizes itself, the explains, so does the visual within it. Given that there are over 8.48Billion unique devices in existence today, this Functionality allow teams to create timeless designs capable of adapting to any device, regardless of its size or shape.Flexible branding is the term given to a visual identity that allows the logo to be adaptable sometimes changing font, colour, pattern and scale whilst retaining the essence of the brand's the tone of voice and visual style.
Flexible Visual Systems is the design manual for contemporary visual identities. It teaches you a variety of approaches on how to design flexible systems, adjustable to any aesthetic or project in need of an identifiable visual language.
visit this link to extra information
