Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am currently, working on the below layout and I am finding it difficult to maintain alignment and layout.

Below is the layout I want, in blue border.

enter image description here

share|improve this question
    
What do you mean by how? Are you referring to the technical methods for doing so, or are you asking how the layout should adjust at different breakpoints? –  JonW Dec 21 '12 at 14:35
    
@JonW Thank you for your attention, however, I want how the layout should adjust at different breakpoints? –  anilkumble789 Dec 21 '12 at 14:38
    
What are the main problems you have? The order of the boxes as the screen is at different sizes? What have you tried so far? –  kontur Dec 21 '12 at 14:47

1 Answer 1

up vote 7 down vote accepted

This is going to depend on what content is within each of those areas, and how big a priority you want to give those items. However a rule I use with Responsive Design is based on screen widths.

Therefore the first step is to determine which content elements take up the whole screen width. In your example there are two elements taking up the whole width (squares 1,2,3 are in one element, and 4,5,6 in the other). I have highlighted these below:

enter image description here

I would assume that these are all done using div elements. You have a global div containing everything, and then within that are other divs spanning 100% of the width of the screen.

You can also divide those divs up into additional elements. So in this example there is one full-screen one, and that is divided into two halfs (the top item, covering items 1,2 and 3) and the bottom container (items 4,5,6).

Because the top container is 100% of the screen width that is your first block, so you deal with the items within that first. That would mean you should stack items 1,2,3 ontop of eachother when you reach the smallest screensize.

The second div (4,5,6) you deal with next, and then stack those ontop of eachother accordingly.

So you end up with something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Now, depending on where your breakpoints are, you can deal with middle-ground items differently.

Items 2 and 3 are the same width so could fit on the same width together.

You also have the option of adjusting the width of items too, so just because items 4,5,6 are the same width on desktop that doesn't mean they need to be the same on tablet. That could give you the layout of:

mockup

download bmml source

You need to make sure you're working with the items that take up the full width of the scren, and then determine what to do with the items within that area first, then decide how to deal with the contents of those items.

share|improve this answer
    
Thank you John. I am convinced with the idea, I am going to try and make it the most of your advice. –  anilkumble789 Dec 21 '12 at 15:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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