Simulating Website Thumbnails using Iframes (medium.com)
almost 8 years ago from James Futhey, Product Design Consultant
almost 8 years ago from James Futhey, Product Design Consultant
Please keep in mind that the https://designcode.io/ website being pulled in as a thumbnail is an 11.1MB download. If you're doing this to simply avoid using an external service I would advise against this, as it's pretty user hostile.
Thanks! Yes, this is probably a terrible example for the demo, but this technique can and is used in many web applications utilizing user-generated content (for example, codepen).
My first thought after I finished reading was, that this is going to impact performance pretty badly. I find codepen in some cases has issues because of the iframed websites, especially if I am on a slow connection.
I would love if you mentioned the performance considerations in your post.
RIP bandwidth.
I'm sitting currently at a railstation and this codepen snippet took 6 Minutes to load. Please, don't ever use that on production-ready sites :( Nice idea tho ;)
I spent some time recently documenting the process we used for this technique. Hopefully this is useful to other designers as well. Feedback appreciated. Thanks!
Thanks for putting this together!
I've explored this approach in the past but abandoned it as it wasn't a good fit for the type of project I was working on. But it's a really cool technique for a case where there are limited numbers of "thumbnails". Especially for a site like Codepen with a very light footprint for each "Picked Pen".
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now