If you’re a seasoned designer or developer you have probably created a dozen “standard layout” websites, with the most common layout containing a header, navigation, sidebar, main content, and footer.
This is absolutely fine, because people are used to this flow of elements and will naturally find what they are looking for very quickly; but let’s be honest – it can get pretty boring.
Sometimes its worth it to step into an unknown world and create a layout that doesn’t really follow the “standard” of todays web. You need to be brave. Actually – very brave, as your developer will probably want to shoot you for your so-called “crazy” layout.
But being brave makes heroes, and heroes create sites which stand out from the crowd. When done right, this will very likely attract attention from at least other developers and designers.
Let’s explore the non-traditional layout of Myspace.com, and have a look at how it was created.
Page Structure
The whole page utilizes the full width of your browser window and makes the video and large artist images shine. Most of the elements are positioned absolute or fixed, with the most important element .horizontalContent>div having overflow-x set to hidden.
.horizontalContent>div {
overflow-x: scroll;
overflow-y: hidden;
height: 100%;
padding-left: 170px;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
The footer is positioned right at the bottom of the page and .horizontalContent has its bottom offset 77 pixels, which is the height of the footer plus 1 pixel.
.horizontalContent {
position: absolute;
top: 0;
right: 0;
bottom: 77px;
left: 0;
}
#sidebar is positioned on top of all elements, thanks to the highest z-index value.
#sidebar {
z-index: 2;
width: 136px;
position: fixed;
left: 15px;
top: 15px;
}
If you are a more visual person, then have a look at the simplified version of the HTML page layout:
Video Container Structure
The main element of the homepage is the video loop. Surely this is something which captured your attention when you visited the site for the first time.
The 11-second long movie clip size is 900×900 pixels, and is compressed using the H.264 codec with a file size of 2.8MB.
The first frame of the video is also set as a background-image of the .filterContent. This will only show if the video file is (for some reason) not available.
Multiple media queries are changing the width of the .filterContent – this crops the video to different screen sizes. The margin-left of the #editorsPicks is also changing based on the browser size, always leaving a 2px gap between the video container and the artist items.
#editorsPicks contains a simple isotope layout. The isotope plugin aligns all items into a grid with a 1px gap between items. There is also infinite scrolling on this container, loading more and more items as you scroll to the end.
Check for a more visual example below:
Footer Drawer ‘Hover’ Effect
When you hover over the music controls in the footer you will see a container that animates into view. This is achieved by two events.
Firstly, JavaScript gives the body an additional class .queueOpen, and secondly, the CSS resets the bottom offset of #drawer from the initial -152px to 0.
The animation itself is achieved using CSS3 animations as you can see below:
.spaceway #drawer {
-moz-transition: bottom .5s;
-webkit-transition: bottom .5s;
-ms-transition: bottom .5s;
}
Here is a more visual positioning of the #drawer.
Artist Items ‘Hover’ Effect
Similar to the footer drawer animation, the artist description animates into view when you mouse over the items.
Because each artist description has different content, JavaScript needs to calculate the bottom offset for each item individually. CSS3 then animates color and bottom values for the visual ‘slide up’ effect.
element.style {
bottom: 108px;
}
.isotope>li>.mediaSquare>.isotopeSummary {
-webkit-transition: color .3s,bottom .3s;
-moz-transition: color .3s,bottom .3s;
transition: color .3s,bottom .3s;
}
As you can see, a mix of CSS3 animations and additional classes (or calculated dimensions) are the basic ingredients for most of todays cool effects on the web.
Conclusion
I’ll leave it up to you whether you think this layout works or not. It definitely stands out from the traditional style of websites, and the video loop spices things up even more.
I would personally like to see the layout working on a touch-enabled device such as an iPad, but nevertheless it’s a layout which was worth exploring.
What do you think about the layout of Myspace.com? Does it stand out from the crowd for you?
Do you have or know any interesting websites that you wish us to deconstruct next? Please share your opinions and links in the comments section below.
