I have a one-page site in which the users are scrolling down the site reading more info as they go. The first section is a kind of introduction section with a nice big background and a big title. Then we have News, Services and Clients sections etc.

In the News section I'm using masonry to create a responsive grid of boxes with new things that are happening with the company. So there are social media widgets, news releases, news about the company and clients etc.

These social media widgets become problematic with mobile touch screen devices. They actually double the size of my site (my site is about 900kb, the Twitter and Facebook widgets together add another 900kb regardless of how many tweets I load). Also, on a responsive one-page site these widgets are difficult to scroll over. Very often you accidentally start scrolling the widget when you'd actually want to scroll to the next section after the widget and you need to be careful where you place your finger when scrolling.

So, should I just hide them from mobile devices?

I'm using mobiledetect.php, so I would just write PHP more or less like this:

if (deviceType == computer){social media widgets and stuff;}

On the other hand many people seem to think that the point of responsive web design is not to show a mobile version of the site, and many users are frustrated with sites hiding stuff from mobile users.

Any thoughts what I should do?

2 Answers 2


I think that you can implement a solution like this:

enter image description here

If the user wants to see the tweets you can load them on demand. You are providing the same content in mobile and computer, that is the point of responsive web design.

  • Seems brilliant. This would also make it easy to track whether any mobile users actually click on either of those or not. How would I implement a solution like this? I'd need some kind of togglable thigny like getbootstrap.com/javascript/#collapse. Or maybe just use api.jquery.com/slidetoggle ..? How do I load fb/twitter -widget on demand?
    – Jonathan
    Commented Jan 6, 2014 at 13:40
  • I'd use a solution with slidetoggle and ajax loading. Commented Jan 8, 2014 at 0:11

We're still in the early days of responsive design, and I agree with you that hiding elements on different devices is a bad idea. It's kind of implementing when you really should implement where all options are available.

Some services, such as StackExchange sites, hides elements on mobile devices. The workaround has been to link to the full site, where the user gets the full site, but is forced to zoom content. It works, but it isn't a good user experience.

The best option is to implement all elements and features of the full site, but make use of asynchronous fetching of data. This will make the page fast to load, and when the slower social widgets have their data, it'll display too.

Scrolling inside widgets instead of the page can be solved by leaving a bigger margin to the left or right of the widget, which ever fits with your current design of the page. That way users can scroll inside the widget, and the page.

  • Nice. I adjusted there to be more space on all sides of the widget. Also making them shorter vertically, and adding more space between them. The problems here are that I also have other similar boxes and it would seem a bit silly if these two would be significantly narrower. Also you can't (as far as I know) adjust the height of these widgets with CSS using media queries, so they'd have to be very vertically short on all devices. But this is still good stuff. How would I go about loading the widgets after the page has loaded?
    – Jonathan
    Commented Jan 6, 2014 at 13:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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