Forem: Nimritee

23 Responsive And Lightweight CSS Frameworks

Nimritee — Tue, 27 Jul 2021 09:01:51 +0000

Using lightweight CSS frameworks to create responsive websites and web applications can significantly reduce delivery time. CSS frameworks have been around for a long time and are now widely used by front-end developers. These frameworks include code snippets that just need to be incorporated into the source code to create the entire layout. Since we target multiple screen sizes and resolutions, it is critical to perform a responsiveness test of websites and web apps to check how the CSS framework’s implementation performs over different browsers and operating systems.

Keeping these points in mind, below is a list of a few of the responsive and lightweight CSS frameworks which can be used to build top-notch user interfaces and enhance overall user experience.

Do you know, input-file-directory allows you to select an entire directory filled with files (and any sub-directories) from your computer.

Let’s begin with the lightweight CSS frameworks!

1. Bulma CSS

Bulma is a free, open-source framework based on Flexbox that comes up with ready-to-use front-end components and can easily be integrated to create beautiful and responsive web pages. It is one of the top lightweight CSS frameworks with the simplest grid system implementation, where adding and removing the columns can be done seamlessly.

With the help of Bulma, the implementation and the customization becomes easy. It is created using pure CSS and does not require JavaScript. It has more than 93K users and therefore has a large community.

According to a recent survey, there are 58,326 live and historical websites that are using Bulma. It’s most popularly used in the USA. The websites that are a part of the top 1M websites, out of which 0.17% of them use Bulma.

2. UIKIT

UIKIT is not only lightweight but also a modular front-end CSS framework used for creating lively and impactful web interfaces. It gives the developer an entire collection of HTML, CSS, and JS components that are easy to use, customizable, and flexible.

UIKIT has different pre-installed modules such as Accordion, Iconnav, Animations, etc., showing usage patterns, component options, and methods. UIKIT is a must-try if you need a new, well-maintained CSS framework with a slew of module options. It’s available in Less and Sass and contains a stylesheet to serve right-to-left languages.

3. Mini.css

Mini.css is cleaner’s lightweight CSS frameworks for creating websites that look beautiful on every device and load faster. It has a smaller size (under 10KB gzipped), along with the responsive grid and modern components that make sure all your users are satisfied and can access the website anytime, anywhere.

Mini.css bridges the gap between fully-featured frameworks and micro-frameworks. Mini.css contains many features in a small package, while it depends solely on CSS, meaning we do not have to worry about any difference from other JavaScript libraries that we might be using.

Mini.css is mobile-friendly and used to solve the problem with responsive grids, cards, and navigation that will entirely change the website’s layout on mobile to create a better content-centered experience. At the same time, the UI doesn’t get in the user’s way.

4. Skeleton

Skeleton is one of the ideal lightest CSS frameworks, which has only about 400 lines of code. Still, it manages the features of the grid, typography, forms, media queries, and many more. You can get started quickly with Skeleton with zero compiling or installation.

Skeleton’s successful result lies in taking the attributes from other CSS frameworks and providing a framework that helps make it very simple to use. The browser’s layout stays fluid by using the grid system, and it adjusts automatically to window size.

5. HiQ

HiQ (A high-IQ CSS framework) is a lightweight and customizable CSS framework developed using various custom CSS properties keeping in mind all the latest CSS best practices.

HiQ is created using PostCSS and comprises all the powerful new CSS features like custom properties. If we use the source version HiQ, we can benefit by using the custom selectors and mixins smooth styling. It allows easy use of themes just by dropping HiQ into our project, adjusting some CSS variables, and we’re good to go. HiQ manages the features like input, primary button, and other parts of HTML styling to focus on essential elements.

The HiQ framework will work across browsers that support custom properties.

6. Pure.css

Pure.css is one of the best lightweight CSS frameworks. All the modules are packed in at 3.7KB minified and gzipped, equipped with different features. Pure.css is developed keeping mobile devices in mind. If you plan only to use one subset of these modules, you will end up saving even more bytes.

Pure.css is built over Normalize.css, which gives layout and styling for native HTML elements and often uses UI components. It is a responsive grid framework, so elements look perfect on all screen sizes. By keeping minimal styles, Pure.css motivates you to write your own application styles on top of it. It’s crafted such that you can get out of your way and easily override styles.

Companies using Pure.css are Yahoo, LastPass, Flickr, CanYouSeeMe.org, etc.

Unlike other lightweight CSS frameworks, Pure’s design is unopinionated, minimal, and flat. You can add new CSS rules instead of overwriting existing rules. By incorporating a few lines of CSS, you can customize Pure.css to work with your website.

7. Milligram

Milligram is also one of the best lightweight CSS frameworks. It provides a nominal setup of styles for a fast and clean starting point. All sets of modules are packed in 2KB gzipped. It is specially created for better performance and higher efficiency with fewer properties to re-initialize resulting in cleaner code. It uses FlexBox, a grid system, and follows a mobile-first approach.

Milligram officially supports the latest versions of Chrome, Firefox, IE, Safari, and Opera.

8. Fictoan

Fictoan is an open-source, interactive, and responsive CSS framework that is modular and customizable. Fictoan makes use of easy and intuitive class names like .horizontal-center-this, .no-padding-left, and .center-on-mobile. They are simple to use and easy to recall. It’s similar to styling elements in a jigsaw puzzle by taking a .button and simply adding .bg-red, .shape-circular, and .no-shadow to get a red, round button without a shadow.

You can change layouts across devices with ultra-ease using Fictoan. Fictoan runs on SCSS, which means it needs to be transpiled into CSS before the browser can read it.

9. Spectre.css

Spectre.css is among the best lightweight CSS frameworks for the rapid and extensible development of websites. It is not only lightweight but also a responsive framework. All sets of modules are packed in 10kb gzipped. It is flexbox-based, gracefully designed, and has advanced elements and components.

The major benefits of Spectre.css are basic styling, formatting for typography and elements, flexbox-based responsive layout, and utilities; along with following the best coding practices and maintaining a consistent design language.

10. Wing

Wing is one of the most incredible, lightweight CSS frameworks created for minimalists. It is intuitive; therefore, we need to add the same in our project and everything is styled automatically. It is packed with many features, including styling for most elements, a grid, and few components, all in just 5KB. Wing has a modern style, and therefore it will give a quick start to your project.

11. Chota

Chota is a tiny super lightweight, simple to use, lightweight CSS framework where all sets of modules are packed in about 3Kb. It does not require any preprocessors, just add it within your project and start using it. It is very simple to extend due to CSS variables. It comes with plenty of components and utilities, like a magic 12 column grid. It has good semantics, can be switched easily to dark mode, and supports icons out-of-the-box as well. Similar to other lightweight CSS frameworks, remembering different class names is no longer necessary.

12. Turretcss

Turretcss is another lightweight CSS framework designed to make responsive, accessible, and scalable CSS development easy. It is utilized for the rapid development of responsive websites.

Here are the major advantages of Turretcss:

It is simple, clean, and modern CSS with no requirement of JavaScript.
It is responsive and has mobile-first block element styles, full viewport breakpoint coverage that makes responsive web interface development easier.
It has easy customization styles with selected simple theme variables and can customize the look of the elements with 100% control on the visual variables.

13. Tachyons

Tachyons is also considered the best lightweight CSS framework which is crafted for web designing. It is readable, loads faster, and creates a fully responsive interface with almost negligible CSS. It has a set of different small modules which you can use together or separately.

It follows the principle – uses what you need and omits the rest. It has several methods and workflows for optimization. It is even modular, accessible, performant, and reusable.

14. InvisCSS

InvisCSS is developed to create a good CSS library with minimal styling complications. By default, the styling is kept simple so that it’s easier to apply alteration and extend. It is not similar to the other CSS templates, where a programmer is exclusively needed to ‘opt-in’ by specifying classes all over the place.

InvisCSS uses few simple ‘opt-in’ classes, which are at the bottom of the HTML branch. InvisCSS is for real sites. It is built by keeping the Bootstrap audience in mind. Nonetheless, you will love the simplicity.

15. Spark

Spark is among the best lightweight CSS frameworks that is primarily used for developing responsive websites. It is built keeping the mobile-first approach in mind, thereby making it ideal for creating responsive web design using media queries to power a responsive grid. With the help of Spark, we can develop professional-looking pages in minutes.

It’s easy to use because of the intuitive class names and simple to customize with a non-intrusive approach. There are a few exceptions to some basic styling and resets; we only need to add Spark classes to the elements we require for our styling. The framework comes with pre-built different color themes that are interchangeable, consisting of shiny and flat styles. Currently, the primary colors used are silver as the default one, blue, green, purple, lime, and dragonfruit.

16. Tailwind CSS

Tailwind CSS is a utility-first framework; it can be used to build a website quickly for UI’s. It’s a utility-based CSS library that prioritizes practicality and speed above semantic and lean markup. We need to find out the use case of the project. Based on that, it’s straightforward to develop a website without writing your own style for it.

Tailwind does have a default theme, nor does it have any built-in UI components. It has a pre-built widgets menu that is used for developing websites.

Here are the major advantages of Tailwind CSS:

Site Unaffected By Individual Changes: If changes are made in any one of the elements, we need not worry about the other tangentially related elements.
Ease Of Use: Once we are familiar with the syntax, Tailwind is very easy to use. We also don’t need to move back and forth between the stylesheets and HTML.
Highly Customizable: Tailwind has enormous customization options.

17. Materialize CSS

Built-in 2014 by Google, Materialize CSS is the best lightweight CSS framework to design websites and Android web apps. Several Google products like YouTube, Gmail, Google Drive, and Google Docs are based on this framework.

Materialize comes with plenty of ready-to-use modules and classes, which eases the developer’s work. The framework uses a 12-column grid-based layout developed by Bootstrap, responsive animations and transitions, padding, and depth effects. A website can be created easily using its pre-built starter template.

Major Advantages of Materialize CSS are:

Material Design
Bootstrap Grid
Large selection of components
Easy customization
Compatible with Sass

18. Avalanche

Avalanche is regarded as one of the best lightweight CSS frameworks that create the foundation for a package-based CSS workflow. It is used to customize to meet your requirements for building websites. There are available packages to enable offset classes, fluid grid system, containers, vertical spacing.

19. Beauter

Beauter is an open-source lightweight CSS Framework. All module sets are packed within 6KB. Beauter provides a unique set of attractive elements and styles in pure vanilla CSS, making it easier to get started with smoother and quicker development. It is a cross-browser responsive framework and modifies most of the default styles to ensure the same behavior everywhere. Beauter is based on BOL, an experimental design methodology that makes Beauter easy to mix and match.

20. Vanilla Framework

Vanilla framework is a lightweight and Sass-based extensible CSS framework. It is designed to be utilized directly or by using themes to enhance or support its patterns. Vanilla includes a responsive CSS grid, basic HTML element styling, and a set of helpful core patterns and extensible utility classes. You can include the entire framework to access all styles or utilize it as per your project requirement. Vanilla is open source, which means you can contribute to it, upgrade it, and extend it. The entire source code is available on GitHub.

21. Vital

Vital is an open-source, lightweight CSS framework used for modern web applications. It is readable, no extra buried code, and scalable. Written mostly in em values, allowing for easy and consistent scaling. It is extremely lightweight and has a size of just 23 KB minified.

Vital is built-in CSS with zero JavaScript libraries or dependencies. Vital framework is developed with Sass for CSS and Slim for HTML and can be used for development. However, you can export pure CSS directly if you want to utilize Vital for production. You can use a CSS class to recreate any element from the components page. These classes can be partially automated if you use Slim; therefore, Sass/Slim users have a minor advantage.

22. Fluidity

Fluidity is a fully responsive CSS framework crafted for web designers who require an easy framework to express their ideas quickly. It is architectured using one of the best stylesheet language styluses. It now encompasses normalize.css, little typography, a grid system that can be used semantically or with in-line classes to create fluid-width and fixed-width designs. It is focused on developers who know css and want to use CSS3 features and write clean, reusable, and maintainable code.

23. Typebase.css

Typebase.css is a lightweight and customizable CSS framework and comes with two versions -Less and Sass. It can be easily changed and blended into modern web projects and offers all of the framework required for excellent typography without incorporating aesthetics.

Typebase.css is designed to be easily updated as projects expand and develop, and it works well with Normalize.css. Typebase.css supports a vertical rhythm across many different device screens, ensuring that text across columns and long copy does not become skewed.

Check it out- IndexedDB: Method stores data in an "indexed db", which allows client-side queries, encryption, and storage.

Responsiveness Test Of Websites Built Using Lightweight CSS Frameworks

Once you have successfully implemented the lightweight CSS framework in your websites, it is important to perform a responsiveness test of the same. You need to ensure that it renders content legibly across all device viewports and resolutions.

To perform responsive testing across different screen sizes, LT Browser – a developer-oriented tool, can be a go-to option. LT Browser comes with 50+ pre-installed device viewports for mobile, tablets, desktops, and laptops that let you create, analyze, & debug the mobile view of websites. Check the below video in order to get started with LT Browser:

You don’t even need to switch devices; with LT Browser’s smart frame, you can run the mobile web test on two different devices simultaneously.

LT Browser also has some other lucrative features like network throttling, performance reports, device synchronization, and mouse touch mode for experiencing real device touch behavior, etc.

Do you know? High Resolution Time provides the current time in sub-millisecond resolution. It is not subject to system clock skew or adjustments.

Wrapping Up!

And that’s a wrap for our responsive and lightweight CSS frameworks. Among these 23 frameworks, we can’t say which one is the best lightweight CSS framework. By selecting the right framework, you can handle the tedious and time-consuming styling and create full-fledged responsive websites and web pages. To perform efficient, responsive web design testing, check out our blog on Responsive Web Design Testing Checklist: All You Need to Know.

Got any questions about the lightweight CSS frameworks? Let us know in the comments box below.

Happy Testing!

15 Advanced CSS Techniques To Master In 2021

Nimritee — Thu, 27 May 2021 09:19:01 +0000

CSS is used to describe how HTML elements should be presented on the web page. CSS can not only provide colors, positions to the HTML elements, etc. but also create animations and amplify your web page. Developers and web designers are intrigued by ways to try out advanced CSS techniques and contribute to the advancement of what CSS can do. CSS is becoming more dominant and now provides many opportunities to create engaging and browser compatible websites.

This CSS tutorial of advanced techniques will look at some advanced CSS tricks and techniques that will help you master your modern web design and web development skills in 2021.

Let’s explore the top advanced CSS tricks and techniques.

1. Background Repeat

CSS background is one of the most advanced CSS techniques; however very rarely used by developers. Using multiple backgrounds is still not well known across all developers.

The background-repeat property sets how a background image will be repeated. It is used in conjunction with the background-image property. We can repeat the background image along the horizontal axis, vertical axis or not repeat it at all.

By default, a background-image is repeated both vertically and horizontally.

Syntax

background-repeat: value;

Property Values

CSS Example

body {
    background-image: url("images.png");
    background-repeat: repeat;
}

Code

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>background-repeat property</title>
    <link href="repeatCase.css" rel="stylesheet">
</head>
<body>
    <h2>background-repeat: repeat; </h2>
    <div id="repeat"></div>

    <h2>background-repeat: repeat-x;</h2>
    <div id="repeat-x"></div>

    <h2>background-repeat: repeat-y;</h2>
    <div id="repeat-y"></div>

    <h2>background-repeat: space;</h2>
    <div id="space"></div>

    <h2>background-repeat: round;</h2>
    <div id="round"></div>

    <h2>background-repeat: no-repeat;</h2>
    <div id="no-repeat"></div>

    <h2>background-repeat: initial;</h2>
    <div id=""></div>
</body>
</html>

Let’s evaluate the browser compatibility of the background-repeat property on different desktop and mobile browsers.

2. Masking

Let’s say you want to use an image but only want to show certain parts of it. You can achieve this using the mask-image property. CSS masking is an advanced CSS technique that allows you to define a mask shape applied to the image. Anything that appears outside the mask shape is cut out, and the rest is presented. It works pretty much the same as masking in Photoshop.

Anything that’s 100% black in the image mask will be displayed entirely, whereas anything that’s 100% transparent will be completely hidden, while anything in-between will be partially masked in the image.

Masking can be performed in two ways, Masking using gradients and Masking with images.

CSS Example – Linear Gradient Masking

#masked{
-webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 75%);
mask-image: linear-gradient(to bottom, transparent 5%, black 75%); 
}

The 1st part is the image’s original image, and the second part is a masked image with a linear-gradient.

CSS Example – Radial Gradient Masking

#masked{
-webkit-mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
mask-image: radial-gradient(ellipse 20% 90% at 27% 50%, black 40%, transparent 50%);
 }

In the below image, 1st part is the original image, and the second part is a masked image with radial-gradient.

CSS Example – Masking with Images

#masked{
-webkit-mask-image: url(https://images.png);
mask-image: url(https://images.png);
}

In the below example, a background image is used to mask an image in the selected camera cutout shape.

Let’s evaluate the browser compatibility of the mask-image property on different desktop and mobile browsers.

3. Zoom on Hover

Zoom on hover is an advanced CSS technique that is used to make web pages more attractive. The zoom-on-hover effect can be used in galleries, selling products where you need to enlarge the image to have a better view.

The CSS transform property is used for the enlargement of images with your selected scale amount.

Syntax

transform: scale [transition-duration] [transition-timing-function] [transition-delay];

CSS Example

img:hover {
   transform: scale(1.1);
}

In the above example, the image zooms in on hovering.

4. Scroll Snapping

CSS scroll-snap-type is an advanced CSS technique that allows the developer to create well-controlled scroll experiences. This property can be used in the gallery section of the web-page. Page scrolling in CSS is controlled by setting a scroll-snap-type property on a container element. The scroll-snap-type decides scrolling has to be done, i.e., either x or y.

Syntax

scroll-snap-type: [none | x | y] [mandatory | proximity];

The mandatory means the browser has to snap to a snap point whenever the user stops scrolling. The proximity is less strict. It allows the browser to a snap point if it seems appropriate.

CSS Example

.y-scrolling {
     scroll-snap-type: y mandatory;
 }

The above example shows scroll-snap-type along the Y-axis with mandatory value.

Code

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Scroll-snap-type</title>
        <link href="snap.css" rel="stylesheet">
    </head>
   <style>
     .y-scrolling {
      scroll-snap-type: y mandatory;
    }
  </style>
    <body>
        <div class="box y-scrolling">
            <div>Eat</div>
            <div>Sleep</div>
            <div>Code</div>
            <div>Repeat</div>
          </div>
    </body>
</html>

Let’s evaluate the browser compatibility of the scroll-snap-type property on different desktop and mobile browsers.

5. Shape Outside

Shape-outside is an advanced CSS technique that lets you change the shape of the items wrapped around it instead of being restricted to a rectangular box.

shape-outside property allows shaping the content to fit the image. The shape-outside property takes a basic shape and applies a shape function on the item. This property works only for floated elements.

Syntax

shape-outside: values;

CSS Example

<section class="shape-outside">
  <div class="shape-outside__circle">
  </div>
  <h2>Shape Outside CSS Property</h2>
  <p>
  Morbi tincidunt lectus non feugiat tristique. In blandit ornare odio sit amet cursus. In mollis dictum mollis. Suspendisse sed sagittis sem. Morbi euismod ligula id purus ornare, id gravida augue vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eu consectetur neque, a commodo arcu. Vivamus lorem ante, pulvinar eu cursus nec, congue ut tellus. Mauris sit amet risus auctor, dignissim ligula vel, commodo purus. Ut sapien nunc, dignissim eu diam quis, tempor scelerisque leo.
  </p>
</section>

body {
  display: flex;
}

.shape-outside {
  padding-right: 10px;
  width: 50%;
}

.shape-outside__circle {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color:     #DC143C;
  margin: 25px 25px 5px 0;
  float: left;
  shape-outside: circle();
}

Let’s evaluate the browser compatibility of the shape-outside property on different desktop and mobile browsers.

6. Variable Fonts

Variable fonts are the built-in latest upfront. It’s a single file that comprises every version of a font that a user will need to view the design. While there are only a few lists of variable fonts to work with, it is growing, and this is where we are going with type on the web.

To implement variable fonts, we must select a font that supports the feature and a browser that has implemented the font-variation-settings property.

Syntax

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
      url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

Code

h1>variable<span>fonts</span></h1>
$green: #ff0080;
$purple: #6e1f58;
$pink: #ff8c00;
body {
    background: #23074d;
    overflow: hidden;
}
@font-face {
    font-family: "Gingham Variable";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2")
            format("woff2"),
        url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff")
            format("woff");
    font-weight: 300 700;
    font-stretch: 1% 150%;
}
h1 {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    margin: 0;
    width: 100%;
    font-size: 18vw;
    font-family: "Gingham Variable", BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-stretch: 150%;
    color: $pink;
    white-space: nowrap;
    text-align: center;
    transition: font-weight 250ms ease-out, font-stretch 250ms ease-out;
    text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple,
        1px 1px 0 $purple, 1px 0px 0px $green, 0px 1px 0px $green, 2px 1px 0px $green,
        1px 2px 0px $green, 3px 2px 0px $green, 2px 3px 0px $green, 4px 3px 0px $green,
        3px 4px 0px $green, 5px 4px 0px $green, 3px 5px 0px $purple,
        6px 5px 0px $purple, -1px 2px 0 black, 0 3px 0 $purple, 1px 4px 0 $purple,
        2px 5px 0px $purple, 2px -1px 0 $purple, 3px 0 0 $purple, 4px 1px 0 $purple,
        5px 2px 0px $purple, 6px 3px 0 $purple, 7px 4px 0 $purple;

    span {

        font-weight: 300;
        font-stretch: 1%;
        transition: all 250ms ease-out;
    }
    &:hover {   
        font-weight: 300;
        font-stretch: 1%;

        span {
            font-weight: 700;
            font-stretch: 150%;

        }
    }
}

Let’s evaluate the browser compatibility of the variable fonts on different desktop and mobile browsers.

7. Initial Letter

Initial letter is an advanced CSS technique that selects the first letter of the paragraph and mentions the number of lines occupied by the letter. Usually it is used to grab attention used by print media and information sites, news sites, where the first letter of the paragraph is much larger or higher than the rest of the content.

The initial-letter CSS property spontaneously adjusts the number of lines needed to create the stylized drop and the font size.

The Initial-letter property uses the following values:

<number>: refers to the number of lines the letter uses not to accept negative values.
Normal: it is useful only if you want to reset the value if it could be inherited from the cascade and no scaling effect is applied to the initial letter.
<integer>: determines how many lines should sink when the letter size is preset. The values must be greater than zero, and if the value is not specified, the size value is duplicated, floored to the nearest positive whole number.

Syntax

initial-letter: normal | <number> | <integer>;

$body-fontsize: calc(80% + 0.35vw);
$cap-fallback: calc(1100% + 0.35vw);
.intro::first-letter {
    font-size: $cap-fallback;
    float: left;
    line-height: 1;
    margin-top: .2rem;
    margin-left: -.5rem;
    @supports (initial-letter: 7) or (-webkit-initial-letter: 7) {
        -webkit-initial-letter: 7;
        initial-letter: 7;      
        color: hsl(41, 68%, 51%);

        margin-left: unset;
    }
}
main,
header {
    margin: 0 auto;
    max-width: 68vw;
}

main {
    column-count: 2;
    column-gap: 3vw;
}

.excerpt {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 0 1.5rem;
}

h1 {
    font-size: 6.4rem;
    font-weight: 200;
    line-height: 1.1;
    margin: 0 0 .4rem;
    padding: 0;
}

p {
    margin: 0 0 1.5rem;
    padding: 0;
}

@import url('https://fonts.googleapis.com/css?family=Martel:200,600" rel="stylesheet');

body {
    font-family: 'Martel', serif;       
    font-size: $body-fontsize;
    font-weight: 200;
    line-height: 2;
    margin: 2rem auto;
    padding: 2rem;

    &:before {
        background: linear-gradient(90deg, hsl(105, 0%, 100%) 0%, hsl(45, 100%, 70%) 35%, hsl(45, 100%, 70%) 65%, hsl(105, 0%, 100%) 100%);
        text-transform: none;
    }
}

Let’s evaluate the browser compatibility of the initial-letter property on different desktop and mobile browsers.

8. Logical Properties and Values

Logical Properties and Values is an advanced CSS trick and technique that brings in logical properties and values that help in making it possible to manage the look through logical directions and dimension mappings. Logical properties and values use terms such as “block” and “inline” to express the direction in which they flow.

The Logical Properties and Values specification identifies mappings for physical values in their logical relations.

The inline dimension is defined along a text line and is written in the type of writing used. So, in any English file, the narrative is horizontal. From left to right, in an Arabic document, writing is also horizontal but from right to left. If we consider a Japanese file, the inline dimension is now vertical, and the writing mode runs vertically.

The block dimension relates to the sequence in which the blocks are seen on the page. In English and Arabic, they are executed vertically, while in any vertical writing mode, they are run horizontally.

Syntax

Block-size: values;
Inline-size: values;

Code

<div class="controls">
<select id="writingMode">
  <option value="horizontal-tb">horizontal-tb</option>
  <option value="vertical-lr">vertical-lr</option>
  <option value="vertical-rl">vertical-rl</option>
</select>
</div>

<div id="container">
<div class="box logical">
  The block-size is 100 pixels, and inline-size 200px.
</div>
<div class="box physical">
  The block height is 100 pixels,and width is  200px.
</div>
</div>
* { box-sizing: border-box; }

html {
  font: 1.2em Helvetica, sans-serif;
}

body {
  padding: 40px;
  background-color: #fff;
  color: rgb(108,91,123);
}

.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 0 2em 0
}

.controls select {
  font-size: .9em;
}

#container {
  writing-mode: horizontal-tb;
}
.box {
  border: 5px solid rgb(108,91,123);
  border-radius: 5px;
  padding: 10px;
  margin: 10px;
}

.logical {
  block-size: 100px;
  inline-size: 200px;
}
.physical {
  height: 100px;
  width: 200px;
}

Let’s evaluate the browser compatibility of the Logical properties on different desktop and mobile browsers.

9. CSS Subgrids

CSS Subgrids means that in addition to the direct children of a grid container becoming a grid item, we will be able to create a grid on a grid item and have it use the column and row paths of the parent. This means, for example, that you could create a multiple-column grid for your page and use that to line up items nested in the markup.

Syntax

.grid 
{
    display: grid; grid-template-columns: 1fr 2fr 1fr 2fr; } 
.item { grid-column: 2 / 5; display: grid; grid-template-columns: subgrid; 
}

In the above CSS syntax, the parent element is set to display: grid, which means there is a four-column grid. The child item with a class of item is placed on the grid from column line 2 to column line 5, which means it occupies three tracks of the parent grid. By using the value subgrid in place of a tracklisting for grid-template-columns on the child item, we tell its grid to use the tracks from the parent. Therefore, any child of an item will use the sizing of column tracks as defined on the parent grid.

Code

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
  </div>
</div>

body {
  margin: 40px;
}

    .wrapper {
        display: grid;
    grid-gap: 10px;
        grid-template-columns: repeat(4, 1fr ) ;
    grid-template-rows: repeat(3, auto);
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .box .box {
        background-color: #ccc;
        color: #444;
    }

    .a {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .b {
        grid-column: 3 / 5;
        grid-row: 1;
    }

    .c {
        grid-column: 1 / 3;
        grid-row: 2 /4;
    }

    .d{
        grid-column: 3 / 5;
        grid-row: 2 /4;
        display: subgrid;
    }

    .e {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .f {
        grid-column: 1;
        grid-row: 2;
    }

    .g {
        grid-column: 2;
        grid-row: 2;
    }

Let’s evaluate the browser compatibility of CSS Subgrids on different desktop and mobile browsers.

10. Responsive CSS Grids

While taking care of our responsive web design, we need to ensure that our grid is responsive. Responsive CSS grid is an advanced CSS trick and technique that offers different ways of creating a customizable grid irrespective of the device. Most reliable thing is that the CSS grid operates with equal or unequal column sizes.

Code

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr); 
  grid-auto-columns: calc((100vh - 3em) / 4);
  grid-auto-flow: column;
  grid-gap: 1em;
  height: 100vh;
}

.grid-item:nth-child(3n) {
  background-color: green;
}

.grid-item:nth-child(3n + 2) {
  background-color: yellow;
}

After making your CSS grid responsive, you can leverage LT Browser to test the responsiveness of your CSS grid to make sure it is responsive across various viewports. With LT Browser you can test the responsiveness of the CSS grid across 50+ pre-installed devices like mobiles, tablets, desktops, and laptops.

11. Vertically Align with Flexbox

There are very few techniques available to vertically center elements in CSS. It has been a pain point for many developers. Vertically aligned with Flexbox is an advanced CSS trick and technique by which developers can align effortlessly with the align-items, align-self, and justify-content properties.

Code

<div class="align-vertically">
  Demonstrating Vertically Align CSS Property!
</div>

.align-vertically {
  background:black;
  color: #eff542;
  display: flex;
  align-items: center;
  height: 200px;
}

Let’s evaluate the browser compatibility of the vertically-align property on different desktop and mobile browsers.

12. SVG

As SVGs are supported by all new browsers and scales across all resolutions, it’s recommended not to incorporate PNGs images for icons and logos.

SVGs mean Scalable Vector Graphics, an XML-based image format for vector graphics on the web. SVG supports all browsers, except IE9 and earlier versions, and older Android devices (V3). Using SVGs is an advanced CSS trick and technique that offers benefits over PNGs images like higher resolution, faster speed, and better animation quality.

Syntax

.element
  background-image: url(/images/image.svg);
}

Code

<img src="https://cdn.lambdatest.com/assets_black_theme/images/logo.svg" alt="LambdaTest" width="400" height="112">

Let’s evaluate the browser compatibility of SVG on different desktop and mobile browsers.

13. Smart Quotes in HTML/CSS

Smart quotes is an advanced CSS technique that aids in modern web design by increasing readability and delivering a great user experience.

Code

<q>Smart quotes is the new trend in 2021!</q>

q {
    quotes: "“" "”";
    font-size: 2rem;
}

Do you know? A DOM range represents a contiguous range of content in a Document, DocumentFragment or Attr. This interface is used to manipulate the content between two positions, specify the positions' characters and the length of the range to be affected by the manipulation.

14. Comma-Separated Lists

Comma-separated lists is an advanced CSS trick and technique to represent the data in bullet point format which helps to display the content in an organized way. Nowadays it is used by many developers.

The CSS code shown below will add commas on every item of an unordered list, excluding the last one. It can be done by using :not(:last-child) to ensure that a comma will not be applied to the last element.

Syntax

ul > li:not(:last-child)::after 
{
 content: ",";
}

Code

<ul>
  <li>Lambda Test</li>
  <li>CSS Tricks</li>
  <li>in 2021</li>
</ul>

body{ 
  font-family: Nurito;
  font-size:22px;
}

ul > li:not(:last-child)::after {
  content: ",";
}

Do you know, feature policy is a mechanism for controlling access to features and APIs. This specification is deprecated and has been replaced by Permissions Policy and Document Policy.

15. Feature Query to Test Browser Support

CSS has even created a method to test for its browser support of CSS features with Feature Queries. A Feature Query is an advanced CSS trick and technique that usually acts the same way as a Media Query, except for a few things like instead of asking the browser something related to the device being used to view the site. A Feature Query questions the browser if it supports a particular CSS feature or not. Thereby making it easier to use new features in a better, increasingly enhanced way.

Let’s evaluate the browser compatibility for CSS feature queries on different desktop and mobile browsers.

LambdaTest enables you to check CSS across browsers seamlessly over desktop and mobile by performing cross browser compatibility testing.

In the below screenshots, we will implement different CSS properties over the Netlify platform and try to access them on different browsers.

Google Chrome(non-compatible)

Firefox (Compatible)

Check this out: Check this out: Encrypted Media Extensions - Easy to integrate into any application, the EncryptedMediaExtenstions API is used to control the playback of content which is subject to a DRM scheme. It’s a way to protect your media from piracy and protects the copyright holders.

Wrapping Up!

And that’s a wrap for our CSS tutorial of advanced techniques. It’s awesome to play around CSS and learn new advanced tricks and techniques, and I hope these advanced CSS tricks and techniques will certainly help you create mind-blowing websites. Liked the techniques and tricks or want another to share; feel free to share them with us in the comment section below.

How To Auto Adjust Your Font Size With CSS font-size-adjust?

Nimritee — Mon, 05 Oct 2020 11:23:23 +0000

Many developers use multiple font families and font size to have a better representation of a web page. For example, a developer might use the Bold Comic Sans font for titles and Roboto font for the body. However, this might make your website look cluttered, as many browsers do not support all the fonts. CSS font-size-adjust property can avoid such a situation by making the font size to auto-adjust.

CSS font-size-adjust accepts several units of measurement within which font sizes are displayed, including pixels, em, rem, keywords, and viewport units. It may be applied to CSS Classes and IDs, still on elements themselves. Therefore, it may be used as a great hack to stop a significant decrease within the font size just if your first font choice does not load.

However, before understanding the CSS font-size-adjust property, let us quickly have a look at the CSS font-size property.

CSS font-size Property

CSS font-size property indicates a glyphs’ desired height based on the font. For the scalable font, the scalable factor is applied to calculate the font-size. However, for a non-scalable font, the absolute unit of the font-size is matched with the set size of the font.

Syntax:

absolute-number: This value refers to the computed font sizes.
relative-size: It has the value relative to the font-size computed and font-size table.
length-percentage: Specifies that the font size is absolute.

Do you know by using the FileAPI, you can manipulate file objects both client-side and programmatically. You can even programmatically select them and access the data.

CSS font-size-adjust Property

CSS font-size-adjust property provides the developers with honest management of the font size by allowing them to modify the font size of a part when the primarily selected font-type is not available.

In such situations, a font fallback takes place, and the browser uses the second specified font. This might result in a big issue if there is a difference between the aspect ratio of the initial and present font used. In such circumstances, where we need to take care of the look and maintain the text’s readability, the CSS font-size-adjust property can be used.

The font-size-adjust CSS property states that the font size of the element needs to be modified on the basis of the height of lowercase letters instead of the peak of uppercase letters.

Syntax:

| font-size-adjust | none | < number > |

none: Specifies that the font’s x-height is not preserved
number: This value refers to the aspect number of the first used font, and then the rest available fonts will be scaled according to the following formula: c = (a/a’) s

where:

| c | adjusted font size to use |
| a | aspect value as specified by the font-size-adjust property |
| a’ | aspect value of actual font |
| s | font size value |

Example

If 15px Roboto (with an aspect value of 0.50) was unavailable and the next given font had an aspect value of 0.40, the font size of the substitute font used would be, 15*(0.50/0.40) = 18.75px

How CSS font-size-adjust Works?

Here is a demonstration of how the font-size-adjust works, making font size auto-adjust. Below is an example that compares two different font types having different aspect ratios. The x-heights of the lower case letters of the two fonts can be modified to match the x-height of the other font.

In the above image, the text on the left-hand side has been applied with a font named Comic Sans, which has an aspect value of 0.53. In contrast, the text on the right-hand side has been used with the Calibri font, which has an aspect value of 0.47. This results in an exceedingly small-looking text. On the underside line, a font-size-adjust of 0.53 has been applied because of which the font-size on the underside hand now has its font-size modified according to the aspect ratio specified.

[Source – W3]

The value of the CSS font-size-adjust property influences the used value of the ‘font-size’ but does not affect it’s enumerated value. It has its effects on the dimensions of relative units supported by font metrics like ex and ch of the fonts available primarily but does not damage the scale of em units.

As the numeric values of line-height check with the calculated size of font-size, the CSS font-size-adjust property does not modify the used value of line-height; rather, it auto-adjusts the font size.

In CSS, authors often specify the ‘line-height’ as a multiple of the font-size. Since the CSS font-size-adjust property affects the used value of font-size, authors should make sure to set the line height when CSS font-size-adjust is used.

Note: Setting the line height too tightly may end up in overlapping lines of text during this situation.

Example

index.html

<!doctype html>
<head>
<title>font-size-adjust Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<p>Font Without adjustment.</p>
<p class="adjust">Font With adjustment.</p>
<hr>
<p>Previewed on {Browser}.</p>
</body>
</html>

style.css

p {
   font: 20px Verdana, Helvetica, sans-serif;
}
.adjust {
   font-size-adjust: 0.78;
  }

Browser Compatibility

Let’s talk about CSS supports in browsers. Currently, only Firefox supports CSS font-size-adjust property by default. Ranging from version 43 to 30, Chrome and Opera also support this property behind the “Experimental Web Platform Features” flag that can be enabled in chrome://flags. Edge and Safari don’t support the CSS font-size-adjust property at all.

The CSS font-size-adjust property was initially introduced in CSS2, but later removed in CSS2.1, then again re-introduced in CSS3.

Given below is a table that lists major browsers along with the versions that support this feature:

Source

You might also like: Browser Compatibility Guide To CSS Writing Modes

Do you know? FileReaderSync is a web library that enables reading from the filesystem in Web Workers and ServiceWorkers, while ensuring consistency.

Checking font-size Across Browsers

With LambdaTest, you can check font-size across browsers seamlessly over desktop and mobile by performing cross browser compatibility testing. In the below screenshots, we will implement the font-size-adjust property over the Netlify platform and try to access it on different browsers.

Login to LambdaTest dashboard. You can register for free here.
Select Real Time Testing and optimize your desired configurations.

Previewing CSS font-size-adjust over a non-compatible and a compatible browser.

Google Chrome (non-compatible)

Firefox (compatible)

With the help of the real time testing feature available on the LambdaTest platform, this is how you can perform cross browser testing and verify its compatibility with CSS font-size-adjust. There’s a lot more than you can do to ensure CSS compatibility across browsers.

Check this out: Gamepad API- This module is a JavaScript API for the browser and Node.js that provides input data from USB gamepad devices in a JavaScript-friendly form. It is crossplatform, supporting Linux, Windows, OS X, and all browsers.

Wrap-up!

Now you would possibly have an idea about what the CSS font-size-adjust property does, why it’s essential, and the way to figure out the aspect value of various fonts.

Because CSS font-size-adjust degrades gracefully in older browsers, you’ll be able to move and begin using it today to boost the legibility of text in production websites. However, it does have severe limitations of being supported by just some browsers, as you have now seen by performing cross-browser compatibility testing. During these situations, you should choose fonts of virtually the identical ratio to forestall size difference. This guide to cross browser testing on older browsers might also help.

We hope you found this article informative. If you have any questions, feel free to chime in the comment section below. If you enjoyed this article, please share it on social channels – to help others find it. That’s all for now.

Happy Testing!!!

10 Responsive Web Design Challenges And Their Solution

Nimritee — Thu, 16 Jul 2020 13:21:17 +0000

Even though your website works perfectly on a desktop, doesn’t mean it’ll render perfectly on mobile or tablets as well. With the plethora of devices available, you’re bound to miss out a few crucial ones, and hurt your users’ experience. Optimising your website for every single device seems like a daunting task, but what if i told you that you don’t have to do it!

All you need to do is make sure that your website has responsive web design, i.e your content adjusts to different devices automatically, and you’re good to go. But, it is easier said than done, even while making your website responsive, you’re bound to face certain challenges on the way.

In this article on responsive web design, I’ll explore the challenges faced with responsive web design to ease out the process for you. Also, I’ll also explain how to transition to responsive web design and why you should go for it? So, hold on to your seats, coz you’re in for a ride!

What Is Responsive Web Design?

Responsive Web Design is the design approach where you make sure that the web pages automatically adjust to the different view ports they are being accessed on. In simpler terms, it means making web pages that look great on all devices.

While making your website responsive, you have to ensure that all the elements automatically scale in accordance with the screen size and resolution. This makes sure that all the different users accessing your website using different devices gets a seamless user experience.

Why Should You Go for Responsive Web Design?

The purpose of Responsive Web Design is to deliver a smooth viewing and interactive user experience across all devices. Even Google recommends Responsive Web Design for creating mobile-optimized websites to enhance user experience of mobile users. With more than 50% of the web traffic coming from mobile devices, it’d be unwise not to care about these audiences.

It’s vital for your website to opt for responsive web design, as it opens a lot of doors which will help you to ultimately provide a better user experience to your users. Without further ado, the reasons are:

Provides a Seamless User Experience

This one is a no brainer! Responsive websites help in providing a seamless user experience. With non-responsive websites, it can get tricky to view content on other devices like mobile phones or tablets, as images might not align with the borders, texts might get jumbled up, ultimately making it difficult for the user to access the content.

With such a poor experience, do you think that any user might ever come back to your website? Answer is simple, they’d never!

So, to make sure that you don’t lose your users, it’s quintessential to perform responsive test online to check mobile view of website on various devices, to ensure responsive web design.

Adapt Easily To Any Screen Size

Having a great website ready for all different mobile view of website and is adaptable to any screen size provides many advantages.

With responsive web design, you’re way ahead of your competition, as it automatically makes sure that your web content renders on any device, be it an iPad, Android devices, Tablets, etc. Your website can adjust automatically to suit different types of screens.

Do you know Web Notifications can be created to alert users of your website from outside the web page. That is, as long as they are accessing it through a device that has Web access (such as a smartphone).

Lower Cost And Website Maintenance

Earlier businesses preferred creating two versions of a single website. One specially designed for Mobile phone users and other the one for the Desktop. Building two separate versions of a single website and then maintaining them can be pretty expensive.

Some people still continue with this practice, but with the exponentially growing mobile users, creating and maintaining two versions of a single website is too hectic and time-consuming.

The best solution to overcome this problem is to make your website responsive for all devices so that the content automatically adjusts itself depending on the screen size. And not to mention the rich user experience for both mobile and desktop users which will help you in gaining more traffic.

Building a website with responsive web design means that you don’t have to maintain two different versions and take care of their maintenance. The cost will be pocket friendly and maintaining one website instead of two will give you some breathing space and also frees up some time for you so that you can think of tasks that matter more.

A Responsive Website Improves Your SEO Efforts

Responsive websites have a higher ranking in the search engine. Search engines take in various factors when it comes to the search rankings, taking several factors into account such as dwell time, bounce rate extra. If your website is not optimized for mobile view, your user might not stay in your website for long, affecting dwell time, bounce rate etc.

By ensuring responsive web design, a user might spend more time on your website, ultimately giving a significant boost to your Serp rankings.

Check this out: Online/offline status- This module provides access to the user's online and offline status. You can use this module with navigator.onLine which returns the on/off status of the network connection

Challenges In Responsive Web Design And Their Fixes

As I mentioned earlier, there are quite a few challenges you might face while ensuring responsive web design. Some of the major challenges you might face for responsive web design are:

Handling Navigation

A navigation menu acts as a map of the website, providing directions throughout the web page. Responsive navigation should scale in proportion to the relative screen size, but it should not have a discrete structure. If you change the structure of your navigation for each device, people will be very puzzled and irritated if they access our website from different devices.

Fix: The main aim here should be to make the Navigation Menu more intuitive and self-explanatory for small screen devices also. Information architecture and exploration of the website’s data could support you in making a good navigation decision. In addition, doing responsive testing online on multiple devices will help you derive meaningful results for much-improved accessibility of your site.

Desktop View vs Mobile View

Let’s take an example of a website that has been developed with a padding of 200px. The user might view the website appropriately in the desktop version, but when the same website is viewed through his mobile phone, it’ll look shabby and disoriented. This is a major problem that the user faces for responsive web design and should be certainly keep in mind while checking mobile view of website. You can see the example in the picture below:

Fix: The above problem can be fixed by ensuring that your website has responsive web design. The best solution for the above example could be using “Percentage” instead of “Pixels”.

The “Percentage” option will display the content based on the size and resolution of the screen. If the size of the screen is small, the content of the screen should get adapted automatically according to the screen size and shrink the content size. Unlike the pixels, it will only display the fixed amount of spacing as commanded while developing.

Above image is the updated mobile view of website after using percentage instead of pixels.

Browser Compatibility

While developing a website with responsive web design, you should keep in mind that it should work uniformly cross-platform i.e. the behaviour of the website should not be changed if viewed on different browsers.

Responsive Design includes the use of CSS3 Media Queries, which is supported by almost all modern browsers and it reactively determines the screen size of a device and then renders the content appropriately on the screen layout. With a set of media queries, you will be able to display different layouts on different devices.

Some old browsers like Internet Explorer 8, do not support media queries. You can ensure that your efforts don’t get affected due to lack of browser support by performing browser compatibility testing.

Fix: While developing, JavaScript can be used to make changes in the page layout as it can adjust the size as per the browser window.The initial layout can be maintained by using Polyfill. It encourages the developer to implement technology that the browser is expected to provide primarily and natively.

Another way out is to accurately use a conditional IE stylesheet with elementary styling.

Slow Loading

Everyone knows the importance of the website speed,you could be exploring one of the most stunning websites ever, but if it takes too long to properly load, what are you likely going to promptly do? We bet you had no hesitation in leaving and going elsewhere.

Many times, responsive sites are the primary reason for slow loading of web pages as they weigh a lot. As it not only attracts traffic from desktops but even from mobile devices, the experience of the user might suffer .

Fix: The finest solution to this issue is conditional loading, which calls for loading of only those page elements what the end users need. Instead of flooding the website with pictures, text, video, documents, downloads etc, you can ensure the fast loading of those elements that are of most importance to let the users know what you are supplying to them.

Since more and more people surf the internet through their mobiles rather than desktops, conditional loading stands the best way to eradicate your responsive site’s loading stress.

Displaying Data on Small Screens

Since there is a huge amount of data displayed in tables. Which usually have a huge number of rows and columns. It becomes a very tough and boring job to show them on small screens and be responsive in nature as their dimensions need to change as per the size of the screen. And it becomes even tougher to deal with tables which are complex, crowded, and elaborated.

Fix: The best way to handle data display problems on small screens is to opt for responsive tables.

Instead of using the grid layout for responsive web design, you can switch to create a smaller table without horizontal using the scrolling feature. Create a smaller version or a view of the table, provide users with a glimpse of it and give a link to the full version.

Display only key elements, while the drop-down menu provides a way into all the contents of the table. Use the rainbow tables where colors would replace the columns.

Hide & Show Elements In A Responsive Layout

While developing a responsive website, CSS can be used to hide and show appropriate elements on the page. Using CSS properties it can interact with screen sizes and adjust the contents for a rich user interface.

Fix: Media Queries in CSS3 are used to ensure responsive web design. A media query is segregated into two parts. One part is the media feature that describes the characteristics of the device like screen ratio where the contents needs to be displayed.

You need to perform responsive testing online to assure that the content adapts itself according to the size of the screen in which the content is viewed. “Only” keyword is used in the media query so that the content responsively reacts according to the size of the screen and then adjusts the content according to the minimum and maximum width of the screen respectively.

Example:

/* Check if the screen size is at least 600px */
 @media only screen and (min-width: 600px) {
    .lg {
                display: block;
          }
     }

     /* check if the screen size is at least 400px */
     @media only screen and (min-width: 400px) {
     .md {
                display: block;
          }
      }

     /* check if the screen size is at least 100px */
     @media only screen and (min-width: 100px) {
     .sm {
                display: block;
         }
        }

How To Make Images And Icons Responsive?

Responsive images and icons will automatically adjust and adapt to fit the size of the screen no matter what device you are using, whether it be a mobile phone, a tablet, or any laptop. This thing is of the utmost importance for a better user experience and will help you in gaining more web traffic.

Fix: If you want the images to scale properly upwards as well as downwards on responsiveness, the CSS width property should be set to 100% and height to auto:

<img src="nature.jpg" alt="Nature" class="responsive">
Example
.responsive {
  width: 100%;
  height: auto;

Dismissing Touch

Even though the whole idea is to provide an optimal experience for mobile devices. At times developers might end up forgetting or abusing touch. Also a lot of times the scroll can be a bit messy and can hamper overall user experience.

Fix: Make sure that all the buttons, sliders and even navigational are big enough and are easily accessible by users. To provide a better scroll experience, you can use smooth scroll feature to ensure a smooth navigation of the page. Also, scroll snap can be used to make sure that the scroll always snaps on the right positions.

Transitioning Into Responsive Web Design

For site owners who already have a website and want to make it responsive. You need to take care of the following things to ensure responsive web design:

Choose A Framework

The first step is to choose an appropriate framework while switching to responsive web design. Instead of starting from scratch, you can opt for a framework like Bootstrap or Foundation as it will be beneficial in modifications and up-gradation of the existing website’s code.

Converting The Code

Before converting the code make a list of all the components which are held responsible in Responsive web design like:

Add Break-points which will trigger CSS Styles
Add meta tags where the width of the device, width=device-width, initial-scale=1, and maximum-scale=1.

Instead of taking the whole website’s code to take one page, modify it and repeat the process for the next page. The more components you identify for migration, the easier it will be to convert your code.

Perform Responsive Test Online

After successfully making your website responsive, you need to perform responsive test online on multiple devices like Mobile Phones, Tablets, Laptops, Desktops to ensure the responsive web design and that content and images are adapting themselves as per the screen size in which they are being viewed on.

You can also perform responsive test online on different mobile view of the website, covering all the major viewports and screen resolution. The more you test, the better the user experience will be at the end. If you have embedded videos on your website, remember to check their responsiveness too. At the end, you can even check for the responsiveness of how your website responds when we take the print out of a certain page.

How Can LT Browser Help In Responsive Web Design?

LT Browser is a responsive testing tool to help developers and designers to perform live mobile view debugging. You can use it as a regular browser and perform test 25+ devices, and perform thorough responsive testing. In case you don’t find your favourite devices on the browser, you can even create custom devices and save it for future use.

Using LT Browser, you can directly compare two different mobile views with the side-by-side mobile view of website. As you scroll your website on the first device, the second one mimics it as well making it easier for you to test over different devices.

You can perform responsive test online on your locally or privately hosted website and test them on all the available and custom devices. Also, with the built in debugging tools, you can easily validate any quick fixes to debug your website.

But that’s not all, you can even share any bugs with your team on a single click on your favorite project management tool.

Some Key Points to Remember For Responsive Web Design

Now that you know about the major challenges with ensuring responsive web design, I’d like to highlight a few major points to get the most out of you efforts:

Preparation is the Key

Having a blueprint of your tasks and good preparation is the key to the successful design. A better preparation would yield a better responsive website.

As your website will be visited on different devices, you should have a clear vision in mind of how you want to structure your content for each of these devices and how it should look. For small screen devices, you should prioritize the content which should be displayed.

Starting from Scratch

If you have already developed the desktop design and now you’re thinking from a mobile perspective for the first time, then you need to start the preparation from scratch.

Instead of recycling the design from your old desktop website and modifying the code which will be a tedious job and may take a longer time as you need to understand the whole architecture first and then do the modifications.

Use Responsive Web Design Tools

Plenty of resources like Bootstrap, Wirefy, Invision, UXPin, etc are available online to help you in making a website with responsive web design.

Test, Test, and Test Again

Responsive Testing is a really important aspect of making your website responsive and you certainly shouldn’t miss out on this one. Performing responsive testing online helps ensure that your website is responsive across all the devices tested. Any issue can be found before it hampres user experience

Whether you’re developing a responsive website or not, but early and repetitive user testing is essential for any successful design and functioning.

Nowadays, most of the smartphones are touch screens, and testing of the behaviour for touch on regular screens is a challenging task and requires excessive testing. So get started with your favourite responsive testing tool and ensure a seamless experience for your users.

Do you know? Navigation Timing API enables access to timing information related to navigation and elements that appear dynamically in the user's view, or when the document is loaded.

All In All

As the number of mobile keeps growing, so should our effort to give them an optimal user experience. Responsive web design plays a huge role in ensuring that your users get seamless user experience regardless of the device being used.

In this article on responsive web design, I explored the various reasons you should go for it, also focusing on the challenges you might face on the way and how to fix them. Making your website responsive should be a high priority and you should certainly not miss out on it.

I hope you found this article informative. Feel free to ask any doubts or share your views in the comment section down below. We’d appreciate it if you could help this article reach a wider audience by sharing it with your peers! That’s all for now.😄