Responsive layout #1

3 Responses

1. João Ramos

   I'm miserably failing at organizing these blocks of content into a proper magazine-like layout. It was my first approach to the Mobile-first strategy, with the hope that it would help me better fit my contents into a proper "index" front-page. Do you guys know any other magazine-like websites to get me inspired (e.g. Pitchfork, Design made in Germany)? Any feedback will help.

   over 1 year ago

2. Tomislav Glavaš

   I have some experience in trying to get such layouts to work, but I have concluded its not worth the trouble.

   Either you have a cms that lets you organise each vertical section / article in several templates, depending on the length of description text, title and the quality/format of the picture, or you have a lot fo visual mess. For example, that last image has text beside it that doesnt look good in high resolutions, and it could be worse if the text is shorter.

   My advice:
   1. use a grid (or even better, twitter Bootstrap)
   2. create several article templates of various height/importance
   3. fill each vertical section with a few of those
   4. iterate over each template with a dozen different articles until you get it having aproximately same height (might have to artificialy shorten article body text as an intro)
   5. create a responsive version resolution for each template
   6. go to step 4 again :)

   Also, I would put large font size for titles and around 15-16 px base font. :)

   1likes

   over 1 year ago

3. Tomislav Glavaš

   And a bit of shameless self promo:D
   I am working on a cms based on TwitterBootstrap and CakePHP that will be free and try to solve exactly that problem we are both having. :)

   over 1 year ago