Meta Refresh 2015

The web in your pocket

Scaling down for Mobile - Insight into design patterns for content based sites.

Submitted by Aseem Agarwal (@agaase19) on Jan 12, 2015

Section: Content Design – full talk Technical level: Intermediate Status: Cancelled


The phrase “scaling down” in the title tries to convey more than its literal meaning. It is the scaling down of the whole thought process to take a mobile first approach towards developing websites where content is the key focus.
In this talk we will discuss patterns and design considerations that one should take care of, when working on websites which have the business of showcasing content. Over time web designers have come up with innovative solutions for many problems related to visualisation of content on mobile. We will discuss those patterns analysing them in terms of basics of design to find out what works best in what context.


Why study patterns?. A statement from the book “Sketching User Experiences” by Bill Buxton says - “Time spent developing a technique provides the foundation for the creation of the art.”. In this case techniques are the many strategies designers and developers have already worked on while designing for the mobile ecosystem. Understanding what they have done will give us an insight of what works and what doesn’t so that we can ourself create a unique solution.

Specifically in this discussion we are looking at patterns where the challenge is to visualise content. There’s a common pattern with any system that has the basic job of visualising a lot of content and it hasn’t changed much with time. Three type of models are chosen and any interface has the challenge to visualise all these three.

  1. Representing the list of items.
  2. A categorization of the items where we have different groups of articles.
  3. The actual item itselft which is the eventual purpose.

A simple example of this pattern being used, is in publications which has a list of articles categorised on different themes. It needs to showcase the list of articles, the different themes (tech, science, sports etc) on which articles are grouped and the article itself.

Each model above is unique and present its own challenges especially for mobile. We’ll first discuss the significance itself of each model and then lot of real life examples that have tried to solve them.
For instance, categorization which also serves as navigation for the app, has lot of patterns.

  • The left nav flyout menu.
  • Top navigation or do nothing.
  • Full screen menu
  • Carousel+.

It is also important to measure and analyse each pattern on the yardsticks of good design. That will help us understand what problems is each pattern solving and as such their true purpose. Some of the points include but not limited to

  • The importance of whitespace and boundaries in design.
  • User attention span.
  • Utilising touch gestures effectively.
  • The case of design discovery.

Every designer is working in a unique context and set of constraints in which they are trying to represent their content model. Learning about these patterns will help him/her objectively analyse what all things he should take care of design wise, so that he can give the best fit solution.

Speaker bio

Iam a front end developer, designer at Genwi. At genwi we are developing hybrid apps (IOS, Android, HTML5) targeted towards content marketing world where design (written in HTML,CSS,JS) is decoupled from the actual code to run the apps. Visualising content is key focus in our apps and we take care of client requirements which are challenging both in terms of design and functionality.
Iam an avid blogger as well, reading and writing about technology, good design and any insights or experiences that I gain.



  • AA

    Aseem Agarwal


    Proposer 5 years ago (edited 5 years ago)

    Problem statement

    While designing content for mobile we miss the key point of not thinking about the use-case we are trying to implement and how it should be in sync with the behaviour of user on mobile.
    This talk discusses this problem and tries to change the thought process by discussing patterns and their usefulness in solving the real life use-cases in detail.


    1. The mobile usage scenario. Why it is important to take mobile seriously.
    2. Why it is important to study patterns?
    3. Analysing different parts of a content based website on these points
      1. The significance of each.
      2. The patterns used for each and the real life examples that are using them.
      3. The design principles that each pattern is solving or falling short at.


    1. People will be in a better position to use content design patterns for mobile.
    2. Understanding the problem, each pattern is trying to solve will help them develop their own new solutions.

Login to leave a comment