Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

Who is Greg Wood?

Wallswaps

gregwood
HTTP://WALLSWAPS.COM
AUTHOR: GREG WOOD & ERSKINE DESIGN
DATE LAUNCHED: 10 FEB 2008
TECHNOLOGIES USED: HTML,
CSS & JAVASCRIPT

WALLSWAPS IS A mini marketing project by the lovely people at Erskine Design. “The concept is
that folks from around the world send us their stuff (stuff being anything from stamps to polystyrene
aeroplanes), and in return we’ll send them some of our cute little Erskine pin badges and document
their sendings on our ‘wall’.
The site we built around the concept was a visual representation of a cork wall, onto which we
would pin all the entries we received, coupling each with a charming little message and link to the
sender’s website.
So far we’ve received around 30 packages of stuff from loads of different countries, and our wall is
continually growing; it’s now big enough to have a good time exploring.”


DESIGN TIP

BEING IMAGINATIVE WITH CSS POSITIONING SIMPLICITY ITSELF
The ‘real-life’ corkboard background instantly conveys the purpose of the website to
its visitors.
“Everyone’s raving about CSS3 at the moment and what they can now do in certain browsers, as if it’s finally freeing us as designers to start doing more creative things. However I don’t think we’ve yet fully exploited some of the earliest CSS2 techniques to their capacity. Take positioning for example. Using positioning we can create pretty much any layout imaginable, and the implementation of an intelligent, well thought-out navigation system will make things easy for visitors. WallSwaps does exactly this. The whole site is basically one massive unordered
list, much larger than your browser window. It’s positioned relatively, and each list item within the list (each containing the stuff from one sender) is positioned absolutely. This absolute positioning is essential to obtain the pixel perfection required for this unorthodox layout; floats wouldn’t do at all.
This creates a large canvas that visitors can scroll around at their leisure, and we’ve included a navigation list with anchors so they can jump to wherever they like. For users with JavaScript we’ve made things slicker; adding overflow:hidden on the body element to eliminate scrollbars, and using some jQuery plug-ins to make the scrolling and anchor links seamless.”

×