Inspired by a few research and a certain trend we decided to give see-through website a first go and this weekend, we finally managed to group a few works and an archive links list on two pages: Electronest Websites Work Selection and Electronest’s Projects Archive; these page simply use an iframe objects to display other’s websites. Some of the many problem we usually faced when presenting our online portfolio, are:
1/ it’s bad to have a huge list of links – no one is going to ever click on each links; it’s better to keep track with reality and we reduced the quantity by focusing on just a few websites.
2/ visual concision – no images and not a list either, but a simple drown menu which stays in the corner. you’re two click away from any content at any given time.
3/ browsing efficiency – you don’t have to open in a new window, or to browse back to the page if you decided to see a bit more of the showcased websites.
4/ un-obstrusiveness – you can remove the navigation at any given time to explore further in an de-clustered window.
5/ the most interesting bit: you see the real thing.
This way still requires certainly a lot of improvements – but it is a very effective and straight to the point way to share a few things we liked to work on and it gives a good overview of our online work.
For a more complete picture of all our activities, we developed a prototype following the same principle of the see through website, but we expanded the list to a 88 elements list – our beta archive for the past 4 years, which is approximatively 22 projects per year.
The page is made of 2 main elements: an iframe and a navigation form. The navigation form is simply made of a select element where option’s values are giving the url of the listed elements. The javascript we are using on this page remains quite simple:
- in the form’s OnChange:
document.getElementById('where_to_go_next').src = this.options[this.selectedIndex].value;
- in the link to remove the iFrame and reload the selected page:
the_local_form = document.getElementById('author_list'); window.location=the_local_form.options[the_local_form.selectedIndex].value
value="http://..."), we can access it to define the new location of the window DOM element.