5

I've tried to find more info on this particular UI pattern Google+ exposes, and I'm sure I've seen it before, but still, I haven't been able to find references to it.

If you go to the Circles section of Google Plus, you will see, besides the circles, a set of "cards" that represent your friends. You can see that all rows are consistent and that if you resize the browser, the cards will rearrange to maximize the use of the space, making the rest fall down to form new dynamic rows.

enter image description here

What is that UI pattern called?

  • What exactly are you referring to, the resizing rows or the drag and drop functionality? – Ben Brocka Feb 7 '12 at 17:12
7

Your questions seems a bit misleading for me. Is your question about:

  1. how the google+ circles layout is called? - there is no UX/UI pattern for this, Google+ introduced the new Circles concept

  2. "You can see that all rows are consistent and that if you resize the browser, the cards will rearrange to maximize the use of the space, making the rest fall down to form new dynamic rows." - the answer for this is responsive or fluid layout

Here's an article about Fixed, Responsive or Fluid layouts

4

I've heard it called a fluid or flexible layout.

-3

the technology you are referring to is called responsive web design. It is the process of using the same html for any screen size and use @media-queries in order to change the size or style of html elements through css.

  • 1
    The Circles UI doesn't use responsive web design, it just uses a flexible layout based on inline elements that reflow and a table. – Rahul Feb 7 '12 at 10:44
  • Fluid and Responsive – Roger Attrill Feb 7 '12 at 18:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.