"With the rise of applications making their way to the web it’s become useful to utilize the entire viewport for full screen interfaces."

CJ Gammon, Adobe

A Web of Every Shape and Size

A Web of Every Shape and Size With the huge variety of screens that support the web today it can be challenging to ensure your content looks great on every device. It’s easy to imagine the issue of developing content for an increasingly complex array of screens becoming more difficult as new hardware appears. Fortunately, the platform of the web continues to evolve, making it easier to adapt to these changes.

Mobile devices introduced the need to view content produced for large monitors on smaller screens. Media queries were added to CSS as a way to adjust layout based on the device. This can involve using the device’s width to hide or reveal content, adjusting the complexity of the layout. With the rise of applications making their way to the web, it’s become useful to utilize the entire viewport for full screen interfaces.

New layout abilities are empowering how people build web applications across screens. Viewport units allow you to use fractions of the viewport to size elements within your page. This enables views and UI elements that maintain the same aspect ratio across screens. Flex-box is a new feature that allows application layouts that morph easily to different sizes.

With newer devices appearing, some with circular displays, we can imagine that the web may be viewed on screens of different shapes. The CSS Shapes and Exclusions specifications allow wrapping content inside defined shapes. Because it’s in CSS, media queries can be used to add or remove shape definitions to content.

Headsets introduce new potential ways of viewing web content. Virtual Reality devices like the Oculus Rift combined with 3D content produced in WebGL could be used to make immersive virtual experiences. There are already libraries out there allowing for the display of content in a way that is suitable for these devices, but in the future this functionality could be built into the web itself.

The web is an amazing resource that continues to deliver new ways of sharing and communicating. As web-enabled devices continue to adapt to the world around us, the web itself needs to continue to change in order to simplify the process making content that works on every screen.

About the Author: CJ Gammon is a Creative Technologist at Adobe whose goal is to showcase the creative potential of the web and inspire the community through innovative applications and experiences.