Thinking Outside the Box (Model)

Apr 5, 2012   //   by Prescott Titus   //   Blog Posts  //  1 Comment

If you look closely at any website, one thing that should pop out is the number of box-like objects. That’s because every element in a website is a box in some way. Layouts are achieved by maneuvering boxes and adding padding, borders, margins, or any combination thereof. Content inside the boxes is confined to that area, restricting the layout possibilities.

For example, in the box model, you cannot have text flow dynamically around an image like you would see in a printed magazine. This may soon become a thing of the past, however, with CSS Regions and other proposals designed to move beyond or at least remove some limitations of the classic box model.

CSS Regions (developed by Adobe) allows a developer to define regions and then make content flow dynamically around it. For example, you could have a large picture with text wrapping around it and when the window was resized the text would alter its flow to match. Another possibility as demonstrated in the video below (around 1:55:00) is a scrolling bar with text flowing around different image areas. You can also create shapes directly inside text, such as circles, hearts, and stars. The text, of course, will flow around this as the user interacts with the page. CSS Regions is not the only proposal that is looking to change how text flows around objects and columns. Others include multi-column layout, flexible box, and more. They each do different things, but it all boils down to enabling web designers to realize new layouts to maximize user interaction.

This next step in web design is exciting to us because it gives even more options for interactivity and uniqueness in design. Websites of the (near) future will be able to read like print magazines if so desired or have a completely unique design, all while allowing for users to interact with the site without missing out on important content. As a design company that strives to create interactive web applications, we are very excited about what these new functionalities will allow us to create. The possibilities seem endless, reminding us that it’s often a very good thing to think outside of the box. Are you looking forward to seeing more websites designed with these functionalities? What do you think they’ll be most useful for?


If you're interested, here are some links for further reading:

1 Comment

Leave a comment

You must be logged in to post a comment.