Intrinsic web design is the hottest buzzword in the field which is witnessing a major change since the evolution of responsive design. The emergence of smart devices forced professionals to find a convenient way to make websites render perfectly on all devices. Web design services Vancouver or Vizag are flooded with requests for creating responsive interfaces. The web design industry came into existence when browsers became capable of displaying images. It has evolved with time as new technology and techniques like Flash and CSS were introduced. With this new concept, web design moves into a completely new era. In this article, we are presenting a brief introduction to this new theory.
What Is Intrinsic Web Design?
The term responsive web design (RWD) was first used by an independent professional, Ethan Marcotte. He defined it as a combination of fluid grids, flexible images, and media queries. However, designers today are able to do much more. They can carry out vertical or horizontal resizing of images without affecting the aspect ratio. They can create not only flexible columns but also flexible rows. This has become possible because of layout methods such as CSS Grid and Flexbox which are built in CSS. This flexibility to use traditional techniques with modern tools is called intrinsic web design. It allows professionals to design the best possible way to display content without bloating the code and improves their efficiency. Jen Simmons, a Designer Advocate at Mozilla and an award-winning podcast producer introduced the term in her presentation at “An Event Apart” at Seattle in April 2018.
What Are The Basic Principles of Intrinsic Web Design?
Many people think that intrinsic web design is just another fancy term coined by an intellectual. However, there are reasons which led Jen Simmons to think that there was a need to use a new term for the practice. The following basic principles of this new approach as defined by the noted designer will be helpful in understanding how its different from RWD:
1. Using Flexible As Well As Fixed Images
Responsive design uses flexible images which size themselves according to the size of their container. The new design approach involves the use of flexible as well as fixed images according to the context of the project. Moreover, the object-fit property of CSS lets designers resize the vertical as well as horizontal dimensions of an image to fit its container.
2. Creating Truly Two-dimensional Layouts
CSS Grid lets designers create flexible columns and rows enabling them to fashion truly two-dimensional layouts. The ability to define height as well as width is one of the key principles of the new design approach.
3. Different Stages of Squishiness
The CSS Grid Layout Module provides designers with a grid-based layout system. It consists of rows and columns so that pages can be designed without using any floats or positioning. This has opened up possibilities about how a layout can respond to the context of a page. There can be four squishiness stages namely-fixed, fr units (fluid), minimax (min, max) –i.e fluid until fixed, and auto meaning a return to flow. According to the new approach, all these options can be combined in various ways to dictate the manner in which page elements interact with each other.
4. Flexibility To Expand And Contract The Content
There are several options to expand or contract the content of a page like a squish and grow for fluid images or overlap which slides one element over the other. These options allow a more content-driven approach to web design.
5. Using Media Queries Only If Required
Designers can use CSS Media Queries only if they are required otherwise they can use other options.
6. Using Nested Contexts
This approach allows professionals to use nested contexts- flow, flexbox (formatting context), grid (formatting context), and multicolumn (formatting context).
Conclusion
Intrinsic web design signifies the beginning of a new phase in the domain and professionals must acquaint themselves with the new approach. They must explore it to find new innovative ideas that can be used to create better layouts.
