[Solved] display webpage from another site responsively.

[belinea2010]

Hi

I have a basic knowledge of HTML and CSS but its not huge.

I have a html webpage on which I wish to link to and display pages from other sites. (news paper reports)

I have tried iframe with width and height set to 100% and yes it does work but I have a problem:

When viewing the linked page on my site it is not shrunk to fit my page, whether I view it on my laptop, pad or mobile phone – there are scroll bars added which i do not want.

is there a way to make the linked page shrink to fit the device that it is being viewed on?

nearly all the code suggestions on the net are for displaying video in an iframe and obviously I want to display the webpage that I link to

Thanks in advance

Belinea

[shaneisme]

Before we dig in, my first question is: why would you want to do this?

[belinea2010]

I am a DJ and I am building a site that pulls in tips and tricks from all over the net for other DJ’s to read… :)

[shaneisme]

Awesome! Why don’t you just link off to them?

For a really good way of doing it, check out what Chris does on the front page. If it’s an article off site, he writes up a blurb about what’s over there and then let the person navigate in the way they wish.

[belinea2010]

I’ve just been checking your suggestion out and I really like it but its not quite what I am trying to achieve?

To my eyes it kinda makes it look like a blog (not that this is a bad thing)..

[shaneisme]

Right, but forcing people into an iframe is a really bad practice.

I’ve been doing this a long time and would never suggest it. There’s a lot of research out there other than my own personal experience to back that up. If you read up on it, maybe you’ll find a different route.

To your original question, to get rid of the scrollbars, all you need to do is add scrolling="no" to the <iframe>. But one of the problems you’ll find is now you’ve got a bad situation since not all websites will look right at all resolutions inside an iframe… and of course scrolling is a no…

I think Smashing Magazine gave enough options that aren’t videos for you to get the gist: http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/

But still, it’s a lot of work for a bad idea, in my humble opinion.

[belinea2010]

hummmm thats good advice and as i am a relative newbie I think your advice takes precedent.

so would you suggest the way to go would be something like a

within a styled container. Inside the

would be a blurb about the page I’m linking to and somewhere within the container would be a clickable link that would take the user off to what ever I’m linking to?

[belinea2010]

ummmm thats good advice and as i am a relative newbie I think your advice takes precedent.

so would you suggest the way to go would be something like a

‘

‘ within a styled container.

Inside the ‘

‘ would be a blurb about the page I’m linking to and somewhere within the container would be a clickable link that would take the user off to what ever I’m linking to?

[shaneisme]

Sure, there’s a million ways to do it. Like you mentioned, Chris’ blog looks too “bloggy” for you… just make it clear what the person is about to click on.

It can be something like this:

I found this great website the other day, it has all sorts of resources…

Or, of course, something much more designed. Keep it simple and clear, the people will thank you for it :)

[belinea2010]

damit, sorry for the double posts I was trying to include the html markup for paragraphs but this site would not let me hence the disjointed posts

[belinea2010]

Hi Chrisburton

Thats of course a done thing but most of the sites have “share” buttons so I would have thought they do not mind their content being shared (with the correct credits being given to the publishing website and author)

or maybe I am wrong….

[belinea2010]

thanks for the google link Shane, it was using google that brought me to this forum in the first place :)

[belinea2010]

Hi Chris

I wasn’t really considering the traffic thing as that did not occur to me but its a good point.

[belinea2010]

I’m going to call it a night here (its 2am for me) and Im going to rethink my design taking all of your suggestions and advice into consideration.

Thanks everyone

[Author]

Posts