Kate Brighouse designed a Myspace Layout and I assembled all the image slices and html to make it work.

I included a Flash widget that I built to display Katherine’s tweets as well as a sign-up widget to allow people to sign-up for her mailing list.

Mark Caylor at Tourist designed a new marquee which I sliced up and generated the html for. I had already done most of the groundwork code for previous skins, so I simply needed to update a few things to make the current theme work.

Myspace Layouts are a lot easier to assemble these days. The limitations of the new profiles are actually a blessing to anyone who manages a range of artist profiles.

Using a design by Kate Brighouse, I assembled the new myspace layout for StooShe. It took a bit of trial and error to make sure the background and foreground elements all lined up, but it all came together fairly easily.

The online make-over I agreed to do for Plush included a new Myspace layout.

I referenced the website header and mailing list template to create a marquee that includes the band’s logo, photo and a menu to drive traffic to the website.

I added a custom html box to include the band’s discography – linking to retailers for the albums and the website for lyrics to each song.

I also created a small banner advertising the US Lounge Members’ Area, helping to drive sign-ups on the site.

Coinciding with all the reskinning activity on Biffy’s social networks, I got to work on a new Myspace layout.

As usual Kate Brighouse designed a psd and I got to work slicing it up and creating all the necessary html code.

The layout includes the Flash form I created that allows form data to be submitted using AS3, bypassing Myspace’s obscufication of external links.

The rest of the page is fairly standard with an expandable marquee to showcase the ‘Revolutions // Live at Wembley’ trailer.

As we continue to build the online estate of All The Young, it was time to spruce up the band’s myspace page.

Kate Brighouse designed the page before I got to work slicing the images and assembling all the necessary html to bring the profile to life.

I added the BandsInTown Myspace App to list tour dates. The gig guides on the band’s Facebook page and website are both powered by BandsInTown, so dates only need to be added once to display dates and ticket links on all three destinations.

Despite Hugh Laurie being such a recognised face around the world, he didn’t have some of the online presence that comes standard with any musician or band. So we got to work putting a myspace profile together to showcase ‘Let Them Talk’.

Kate Brighouse designed a beautiful myspace layout and I handled all the necessary image slicing and coding to create the custom layout. The intricacies of the design meant that design elements wouldn’t fit in the marquee. So all the header images are placed on the background, with transparent overlays making all the links active.

The profile includes a flash sign-up form, the free download widget as well as some standard myspace modules.

Following the unveiling of the artwork for This Modern Glitch, we went to work on reskinning The Wombats’ online profiles.

I upgraded the Wombats myspace page some time ago, so adding in new elements was much easier than it used to be. Kate Brighouse designed a page based on the album artwork, I sliced it up and put all the html together for the myspace profile.

It was decided that Pendulum’s concert at Wembley Arena would be made available to the world through a live stream. With only a few days notice I had to configure all the players and embed codes to display the stream.

Myspace came on board as official partners and New Stream Media provided the stream to be displayed in a Brightcove player. On a very swift learning curve, I had our Brightcove account configured to accept live streams and went about creating the embed codes.

The stream was hosted on the Myspace Music home page as well as Pendulum’s myspace profile and members’ area on their website.

I was also tasked with including a chat functionality and found that a simple Meebo Room made light work of a typically difficult addition.

There were also concerns about mobile visitors. Brightcove’s html5 player will work on iPhones but myspace’s restrictions block javascript so a traditional html flash embed code was the only solution. To get around the challenge I linked to an html5 player, allowing iPhone or iPad users to view the live show.

The combination of live video, customised brightcove players, chat functionality, mobile support and restrictive code within myspace made a number of separate tasks a lot more challenging. Despite all of that, the stream was a major success with fans tuning in around the world.

The new James Rhodes Myspace profile looks amazing thanks to Kate Brighouse converting the original website designs by Dave Brown. Tom Brown from Sine Wave Designs later added more elements to the background image.

It was quite tricky to make sure all the elements line up correctly. The Profile picture is part of the design and myspace automatically converts transparent pngs into jpegs for profile pictures. So I had to ensure that the profile picture would land in precisely the right place.

This myspace profile is also one of the first to use my new dynamic flash data capture form.

As an anti-phishing measure Myspace automatically re-writes any outgoing links. This would wreak havoc with our standard html data capture forms, and make it impossible to process any mailing list sign-ups.

After taking the time to study different methods of processing form data in ActionScript 3 I was able to build a working solution.

I created a dynamic swf that can be configured by flashvars in the embed code. The swf accepts a number of parameters to define how it looks and where to send the data.

Knowing how useful this tool would be for myself, I decided to make it really easy to configure. I set up a simple php form that creates the necessary embed code based on a few settings.

The following myspace profiles all use the form system and demonstrate how customizable the embed code is:
Cee Lo Green
Muse
Pendulum
James Rhodes
Foals
Biffy Clyro
Fenech-Soler
Katherine Jenkins

Another major benefit of using this system is that all our myspace profiles are now based on the same template. So any changes or enhancements to the code can be rolled out across our artist site by updating just one file.

The latest Myspace conversion is for the mega-star that is Cee Lo Green! The great design by Kate Brighouse was fairly easy to implement. It includes all the usual tricks I do with sliced images, facebook and twitter sharing buttons and a dynamic flash twitter widget.

The latest myspace upgrade I’ve done is for Pendulum. As usual Kate Brighouse did the design and I put the code together.

We have now developed a structure and set of code for modules that can be restyled for each page we upgrade.

The pendulum page includes social network links, embedded videos with sharing options, a store module and a dynamic Flash twitter feed.

Part of re-branding Fenech-Soler’s online presence included a new myspace layout.

Kate designed another stylish page and I set about making it a reality. the page includes the new expandable marquee, which allowed me to embed the latest music video. The new modular system has become a real blessing to work with. I needed to do a few tricks to embed a twitter feed and a soundcloud player but overall it was an easy page to create.

http://www.myspace.com/marinaandthediamonds

The next artist due for a Myspace layout upgrade is the amazing Marina & the Diamonds. The layout and branding needed to promote the new video and forthcoming single for Shampain. Big Active Design Agency provided a banner and background image that I needed to adapt the images and make sure the header aligns properly.

This design also included the easy to use ‘show more’ functionality in the marquee (top banner). I embedded a large version of the video in the expanded part of the banner. This function is a great addition by the myspace team.

http://www.myspace.com/muse

The label-wide upgrade of Myspace pages I need to coordinate is quite intimidating when it comes to bands like Muse. Fortunately the job didn’t have too much room for error.

As usual, I worked with Kate Brighouse’s design insights to recreate the old layout within the new myspace limitations.

A lot of standard formatting code gets striped out by myspace, so there was a lot of painfully slow tweaking and testing involved to make things line up.

I was also asked to make the twitter feed look better. I built a custom flash widget to display tweets. I also had to work around twitter’s api call limit – Muse would obviously have a lot of visitors executing the script. So I wrote a php script that checks when an api call was last made and refreshes the feed if enough time has passed. If not, the widget uses a cached version of the feed instead.

I have started making share buttons a standard on our embedded videos or content. So all the videos have custom share buttons that will post the YouTube video to Facebook or Twitter.

http://www.myspace.com/thewombatsuk

The Wombats were the first band that needed a myspace overhaul since the new modular layout system was introduced. The page is fairly basic and based on designs by Doug Mercy.

Myspace layouts were always a huge challenge but did allow for a lot of creativity. The new system is much more banner/module based and pretty much dependent on design work so I can’t take much credit. That said, I look forward to finding creative ways to do things within these limitations.

Cee Lo Green is a high priority act for Warner Bros. Records. As the voice of Gnarls Barkley he is already a huge star, his solo album will further elevate his status.

His online presence needed a complete re-branding. Using no more than one photo and a logo, Kate Brighouse got to work on the designs.

The Myspace page is a fairly standard layout, with a video and share links in the header. Individual content boxes are always a challenge for cross-browser myspace hacks, but a combination of tricks got the job done.

Having been provided with only a header image and a banner, I needed to do quite a bit of work to re-skin Marina’s Myspace page to promote her new single, ‘Oh No!’

The header image was cropped, so I had to extend the images for a decent view on larger monitors. The header image also needed to integrate with the Myspace content, so I created a new background image and made the two fit together. The menu needed transparent overlays and the banner was placed in an easily editable div.

To increase views of the new music video for ‘Oh No!’ I decided to embed it in the header and include sharing options for Facebook and Twitter.

The John McKeown myspace page is an ever-changing project. The site has been created with various CSS modifications. The page header changes depending on the marketing strategy. It is used to stream videos, promote releases or photos. The header can include regular HTML and images or Adobe Flash animations.

I designed the Beatroute Records myspace page to mirror the label’s official website. I had to write custom CSS and HTML to update the page and include all the new elements of the design.

The myspace page for South African pop-star Jessika. The layout is based on the artwork of her debut album.

Photographs of Jessika by Matt Raven.
Album artwork by Jaco van der Walt.

A myspace layout using the artwork for Sugardrive’s greatest hits album, “In a place (that takes a little getting used to)”. The page header includes an animated flash banner.

Album artwork originally by Jaco van der Walt.

The Musketeer Records myspace page is a basic layout using images of the artists on the label.