1570 E. Edinger, Suite 1, Santa Ana, CA 92705

Ways To Maintain A Hierarchy Through The Choreography Of Content

Responsive website design is often plagued by the problem of hierarchical arrangement of content, as the various elements on the screen need to be resized, and given a new flow structure altogether. Designer Trent Walton was the first person to draw attention to this fact in his post ‘Content Choreography’, where he discussed the loss in visual hierarchy when the position of columns are changed, and they are placed one above the other.


While there are techniques that can be used to solve this problem partially, the solution requires conscious thought and planning for structuring the blocks of content in the HTML. Designers need to find out the proper way in which rearrange their content blocks from single to multiple columns.


What Is Content Choreography All About?


With progressive minimization of the screen size of the device, there is a progressive reduction of the number of columns from four to one. The easiest alternative to which designers resort to solve this problem of space is to pile to columns in a stack by placing one on top of the other.


When the layout has been minimized to a single column by virtue of this practice, the overall view is restricted, as constraints are imposed on the layout by the source order of content blocks in HTML. The columns are displayed according to their placement in the HTML coding, as the one that is positioned on top is displayed first, while others go below.


However, this means that information contained in columns that have been strategically placed to attract the attention of the onlooker in a system having multiple grid structures, might get misplaced and appear at the bottom of the page with an alteration in their positioning. Moreover, designers make accidental placement errors of columns, and often position the ones with the side bars above the ones containing important content and information. Such mistakes can have major effects on the conversion rates of a website, and have an overall negative impact on the sales figures.


Ideally, designers should pay special attention to visual hierarchy, and maintain it by appropriately placing content in different columns whose positions would naturally be interchanged with the reduction in the number of columns. Designers would also like to have greater control over the display, one which goes beyond the HTML source. This increased amount of control is known as “content choreography”. Trent uses the term “choreography” as a metaphor to refer to the desire of designers to orchestrate and maneuver the content blocks as the basic layout changes.


Current practices of responsive website designing do not facilitate this task of orchestration. According to the present trends, since columns are stacked on top of each other, it naturally entails that the content of columns will appear in their sequential order.


The problem actually has two separate tenets that need to be considered:


  • Source Order: In layouts with a single column, the content will be displayed in a sequence which is similar to the HTML structure. However, designers should not confuse the fact that the perfect source order for one particular layout is well-suited for another.


  • Intermixing Content: Rather than dropping entire columns one above the other, it is better to intelligently mix the content from different columns into the layout of a single column.


While there are specific techniques that can be used to solve the first problem, the second issue can be tackled by thinking creatively.


Solving The Problem Of Source Order


The problem of the source order will be solved in the near future with a new configuration of CSS specifications. It depends on the requirements of the browser that the designer wishes to support, and the methods which will be adopted for that purpose.


In the future, we will find three specifications for the purpose:


  • Flexbox

  • Grid Layouts

  • Regions


In the present scenario, the last two specifications are not supported by any browser other than Internet Explorer 10, which can offer support to grid layouts and regions with a vendor prefix of -ms.


On the other hand, Flexbox enjoys much support. In cases where the designers do not particularly mind intermixing the new and old syntaxes, then flexbox can be used.


Designers need to remember that Internet Explorers below 10, and Opera Mini does not support this However, the Flexi polyfill can be added to garner the support of Internet Explorer(IE). CSS can be used to place the content in a format that is different from the source code.


To conclude, it can be said that designers still need to wait for some time for some time before the perfect solution can be found to the problem of HTML source code.


Solving The Problem Of Intermixing Content


There is no technical solution to this particular problem. The only creative solution to this problem, as of now, is to use fewer HTML containers for the presentation of content.


Let us delve into the problem a little more:


CSS Models That Can Be Used For Visual Formatting


There are CSS models that can be used for the purpose of visual formatting, like positioned elements, floated elements and normal document flow. In all of these models, the elements are located in a position that is relevant to the main containing element.


It is possible to create an impression that the various elements are not interconnected with their containers, although their connectivity is inherent. For instance, an element placed in a particular column can be floated with a negative margin, so that it might actually appear to belong to a different column, without changing the orientation of the elements in the second. This is possible even when the fixed and positioned elements in the second column are rooted in the HTML source code. This is a creative way of rearranging elements within the boundaries of a particular container.


We Need To Do Away With Containers


Previously, web designers would transfer adjacent elements to a particular part by assimilating the different elements in an HTML container, and marking them with CSS selectors like #container and #wrapper.


For designers, it will be more profitable to opt for CSS visual containers, rather than HTML containers.


While majority of the websites still follow the practice of dropping columns one above the other, there are a few that have adopted virtual CSS containers, like The Next Web, Time’s Magazine, Enoch’sFish and Chips’ etc.


Although these trends in responsive website design are relatively new, the faster they are adopted, the better are the chances of improving a site’s functionality, as users and visitors will have better access to the information that is relevant to their intent.

Share with friends   
Sudeep Banerjee

Written by

Sudeep Banerjee is the Founder & President of B3NET Inc., the leading Orange County Web Development firm, since 1999 in California. He is a forward thinking leader with expertise in Digital Marketing, Web Design and Mobile Application Development and Amazon Sales Consulting. He is an author, speaker and a consultant with 28 years of experience. He loves to play Basketball and Golf.