As a senior project, I set out to embed my various websites into one page. It was something that I hadn’t seen before (not the way that I envisioned it) and I asked my professor if it was even possible. Since it was a Portfolio class and I was required to build a website displaying all of my work in five weeks, he gave a little direction but dissuaded me from pursuing it given the amount of work I had before me. But I was intrigued by the idea of displaying scaled versions of my sites on one page and thus began my research. The old portfolio site that I hand wrote in HTML is long gone, but I am still using the scaling technique on this site to display my work.

Embedding a Scaled Website

Please keep in mind that your height and width will vary according to your websites attributes. Also you can increase or decrease the percentage of reduction by changing the scale (0-1.0 — currently at 0.5 or 50%)

So you’ll notice that it is a fully functioning website scaled to fit within the page. I thought it was a cool concept. It does however have its pitfalls. I would suggest rigorous testing on multiple sizes, devices, and browsers to be sure you are achieving the desired effect and it may not work on older portable devices. The latest phones are able to display one or two websites without much problem, but older phones or many scaled webpages will usually crash the browser.

Desktops or laptops and the tablets that I have tested it on seem to have no problem. I would guess that some phones just don’t have the processing power needed.

Another drawback is the page load time. Since the user is downloading and processing multiple website at the same time, full page load could take a little while. But it’s a neat effect. Play with the code and see what you can come up with.