PDA

View Full Version : Designing a layout



Rafaelqm
24 Jan 2011, 3:24 AM
Hi, I'm designing and mounting a layout with Sencha Touch to a newspaper. To be used in a IPad. But, how to be perfect in a 2 views ( portrait and landscape)?
http://www.gcn.net.br/teste/layoutIpad.jpg
I made this, but on the landscape don't fit good.

Any Idea?

Thanks

AndreaCammarata
24 Jan 2011, 3:31 AM
Hi Rafaelqm.
I like your layout :)
Could you post a screenshot on how your iPad display the application in landscape view?

Rafaelqm
24 Jan 2011, 4:00 AM
http:///www.gcn.net.br/teste/layoutIpad_landscape.jpg
The width in the boxes I'm controlling with percents. But I'm figuring out if may have another way, using the components of Ext.js.

Thanks

mitchellsimoens
24 Jan 2011, 8:07 AM
Have you heard of CSS Columns?

W3 Spec - http://www.w3.org/TR/css3-multicol/
CSS3.info explanation - http://www.css3.info/preview/multi-column-layout/

Basically, if you use "-webkit-column-count: 4", no matter what width the screen, the browser will resize the elements in that row to be the same. If you want a column to take place of 2 columns, use "-webkit-column-span: 2;" on that element.

The other properties I use is "-webkit-column-gap" and "-webkit-column-rule". The gap is, well, the gap between columns. The rule is basically the border. I hardly use "-webkit-column-width". If you do, then the browser will decide how many columns it can fit so it's good if you want dynamic columns based on orientation. So if you want 3 columns in portrait but 4 in landscape, this would be used and not the "-webkit-column-count" property.

Rafaelqm
24 Jan 2011, 8:24 AM
Thanks Mitchell,
I'll read the links that you sent.

After that, If left any doubts I'll ask.

Regards

cavalleydude
31 May 2011, 1:25 PM
Did you use the CSS3 Multi Column layout ? I'm asking because I'm creating something similar for an internal company magazine and I had the same requirements/issues.

Although, after implementing multi-columns, I ran into poor performance (slow scrolling) and scrolling issues. See my forum issue at http://www.sencha.com/forum/showthread.php?135023-CSS3-Multi-Column-feature-with-scrollTo-function-does-not-appear-to-work&highlight=webkit-column-count

I'm curious how you solved your issue...

thanks,
scott

mitchellsimoens
31 May 2011, 1:27 PM
I never noticed to much of a performance hit for using the CSS3 column layout but the deal breaker for me was that each column HAS to be the same width. To me, huge design problem.

cavalleydude
31 May 2011, 1:43 PM
The performance was an issue when I had article longer than 3 pages... when 10-15 pages, it's really slow and choppy. A pain to scroll between pages. I'm not sure where the bottleneck is, is it Sencha Touch or is it the mobile browser.

Also, I think you can have have various column widths in different paragraph tags. So, certain content could be 4 columns while an image or other content is one column (even span across various columns). So, there is some flexibility.

Thanks for the feedback Mitchell.

miroamarillo
1 Jun 2011, 2:21 PM
Do to separate layouts that query in css depending the size of the screen. Hope it helps.

cavalleydude
1 Jun 2011, 2:43 PM
I actually fixed my issues, please see the link above to the other forum issue for details.

thanks