5

I'm building a responsive website on which I have a news section. Depending on the visitors screen size this section has either 2, 3 or 4 news items. For now, the cms (modx) always supplies 4 news items and if the user should have a small viewport I hide the extra news items with media queries.

This doesn't seem very efficient (it uses extra bandwidth for people with small screens). Also using the above approach I run into trouble with "newer posts", "older posts"-type navigation (because clicking "older posts" will always load 4 older posts, while some people may only need 2 or 3).

Is there a better, reliable way to do this? Is it possible to make the serving of news items more responsive? In other words: how do I prevent unnecessary content from being downloaded, based on screen size?

  • one of the disadvantages of responsive design versus separate sites is that the content is downloaded even if it is hidden with css - a way around this would be to inject certain items into the dom with js based on screen size but then it may break your site if people have their js disabled – Pete Mar 19 '13 at 09:35
  • You could look at using server side components: http://www.lukew.com/ff/entry.asp?1392 – Billy Moat Mar 19 '13 at 09:39
  • You need to solve it server side or via lazy-loading, please also direct your designers to this page: https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it – span Mar 19 '13 at 09:39

1 Answers1

3

One way would be to take the reverse route to what you're doing: generate the page with only 1 news item and then populate with more if necessary (instead of generating with 4 and then hiding them)

You can detect if the user's viewport allows for more stories with JS and then fetch them using ajax (with perhaps a 'loading more..' animation in the meantime).

This way mobile users don't get their bandwidth used up and it degrades to 1 news story for non-JS users as well (you could in addition provide non-JS users with large viewports with a "click for more" link)

Ella Ryan
  • 1,155
  • 10
  • 23
  • That makes sense. My media queries are in em's, do you know if jquery can detect viewport size in em's as well? Because then, this would be an excellent solution. –  Mar 19 '13 at 09:55
  • From looking around I see that that'll be difficult, so I guess this would work only if I do my media queries in px. –  Mar 19 '13 at 10:16
  • as @Ella Ryan mentioned, progressive enhancement would be a great and only solution to keep your responsive site user friendly. Fetching more news with ajax is fairly simple and will make a difference for those using handheld devices – jacek_podwysocki Jun 16 '13 at 17:18