The era of virtual reality and augmented reality took a turn when Apple released the Apple Vision pro to public last month. We have been seeing a lot of people already using it and we believe that the best is yet to come. But as a web designer or developer we also need to think about how it changes the way websites were being made till now, since it breaks the barrier of predefined screen sizes, by giving users to virtually have any screen aspect ratio with just one pinch and drag.
In this post we will be discussing about this new paradigm shift which will change the way website / apps were being made till now and what to expect more in future. Since we all know till now most of the website were made for PC, Tablets and mobile where there were predefined sizes and breakpoints and all the responsive designs were made around it using pre-build libraries like bootstrap etc. But now since this screen barrier is removed, we need to change the way responsive websites are being made and shift to a true responsive strategy while making a website or an app.
Now there are scenarios which can still be covered while using the existing breakpoints but we will discuss more in detail about what it takes to make a true responsive website / app.
Flexible layouts – Layout is the most basic building block of a website and to make it true responsive we need to use some basic CSS properties which ensure that the layout is rendered properly in any screen size.
CSS Grid – CSS grid consists of a 2D layout and is used for creating responsive web designs allowing the user to define rows and columns in a grid format and place the content within these grid cells. This is more crucial when you are working with more complex layout having multiple rows and columns.
Flexbox – Flexbox on contrary to CSS grid is a one dimensional layout system and extends along only one axis either x axis or y axis. It is more useful when you are working with much simpler layouts and the child items are required to be placed in along a single axis. It allows the developer to seamlessly control the alignment, spacing and gaps making it very useful when making a responsive website.
Flexible units – Units are the units we use for different elements in the website, such as width, height of a box. There are several units to choose from such as rem,cm,px,inches,vh,vw. But broadly these units are classified in two different buckets
- Relative Units – Relative units are the units which are dependent on the screen size for example rem (Root Element Font Size). So these units depends of the screen size and are more useful for responsive designs.
- Absolute Units – Absolute units are the units which retain its value and does not change based on the screen size or parent container. These units are also useful when you need a specific size element to be displayed regardless of the size of screen.
Responsive Images – Some devices can show more pixel per inch than other and having a high resolution image of page costs a lot when it comes to performance and loading time of a website. For this problem then solution which modern web browsers provide is <picture> elements which chooses the correct image resolution depending on the device. Other than this when it comes to sizing an image in the viewport it’s always best to have width and height in relative units with a max-width / max-height property based on the need.
CSS position property – CSS position property is a very basic property which almost all the web designers / developers would have already used but it comes handy when making a responsive design and an element needs to be at a specific location. There is a absolute position property which will help designers and developer to easily position an element on the screen without worrying about the screen size on the other hand we also have relative property which helps developers to position an element with respect to the initial position of the element.
Device compatibility based media queries – Now since after the birth of VR headset, one assumption that developers cannot make is that every large screen is a desktop, so device compatibility based media queries are useful in order to check whether the device is compatible to have some properties and not and based on that we can set properties.
Some of the device compatibility based media queries are hover, pointer, any-hover and any-pointer, these checks the whether user’s device has a capability of hover or not.
Enhancing Responsive Typography – For making a typography responsive the easiest and most used way is giving a font-size in rem. But there are other techniques as well to achieve responsive typography using CSS calc() and Sass, we can use a linear equation definition and CSS calc() to make sure that typography smoothly scales when the user changes the screen size. Another way of making the typography responsive is to set the font-size in viewport units in this way the font sizes will automatically change based on the browser / viewport width and height.
In conclusion, the advent of the Apple Vision Pro signifies a paradigm shift in web design and development, urging the adoption of advanced responsive design techniques. By embracing flexible layouts, optimized images, adaptive CSS properties, and responsive typography, designers and developers can ensure their websites and applications offer seamless experiences across all devices. As we continue to navigate the future of digital design, staying informed and adaptable to technological innovations will be key to success in this ever-changing landscape.
Co-Founder Simplileap
Passionate Full Stack Developer with an unwavering enthusiasm for technology and a relentless drive for continuous learning with more than 10 years of experience in Web Development, SEO and Software Development. Committed to pushing boundaries, I thrive in dynamic environments where I can leverage my expertise in front-end and back-end development to create innovative solutions. With a strong foundation in various programming languages and frameworks, I am dedicated to staying updated with the latest industry trends and incorporating them into my work.
