Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
13th August 2009

Build the BBC homepage

The BBC’s brilliant homepage redesign has created quite a stir in the web community

Build the BBC homepage

The BBC’s brilliant homepage redesign has created quite a stir in the web community. Now See how it was done!

The BBC’s homepage is a stunning example of first-class Web 2.0 design. As well as presenting an elegant look and feel, it allows users to customise their experience in a genuinely useful way. You can change the content to reflect your interests, the layout to suit your behaviour online and even the colour scheme to please your taste.
It looks complicated, but it’s actually quite easy to do. In this tutorial, we’ll show you exactly how to re-create the BBC’s homepage, using XML feeds from the BBC to provide content. Like the BBC, we will use the jQuery library and its many plug-ins to build a rich interface that allows users to customise the content. We’ll use cookies to remember the settings and layout so that when you return, everything’s where you left it. By the end of this tutorial you’ll know exactly how one of the most talked-about redesigns was done – and have a BBC-style homepage of your very own. Download the project assets here

01 Site definition

Build the BBC homepage
Define a new site in Dreamweaver with PHP MySQL enabled – this site requires PHP so the computer/server you build it on must have it available. Copy across the files from the starting_files directory on the CD to your home directory. Open the index.php and the CSS>styles.css files.

02 BBC feeds

Build the BBC homepage

We will use XML feeds from the BBC website to add content, added as draggable divs, with rollover images and links at the top and text feeds underneath. We need to create two XSLT documents to format these. Select File>New>XSLT (fragment) and save as ‘image_feeds.xsl’.

03 Image feeds

Build the BBC homepage

Select Attach a remote file on the internet, and enter the URL of the BBC News’s XML file: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml. In Design view, follow rss>channel>item and drag ‘link’, ‘title’ and ‘thumbnail’ onto the canvas from the bindings pane.

04 Repeating images

Build the BBC homepage

We want to display multiple images in our panel, so we need to add an XSLT repeat region. In Design view, highlight all of the fields you just dragged onto the page. Then under the XSLT tab, select Repeat Region. Under Select node to repeat under, select item and click OK.

05 List of images

Build the BBC homepage

We need to format this data as a list of images. In Code view, enter ul tags outside of the xsl:for-each loop, and inside, add <li> tags with <img> and <a> tags inside them. Set the attributes of these to the values from the XML feed – see Helper Files>image_feeds_step_5.xsl on the CD.

06 First three images

Build the BBC homepage

In Code view, click inside <xsl:for-each select=”rss>channel>item”>, and select XSLT>Conditional Region. In the Property Inspector, select the lightning bolt and then Build filter. Click the plus button and enter position() in the where field, <= as the operator and three as the value.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Pingback: Build a Brilliant Homepage – Full Tutorial | Choose Daily

    • http://desmondliang.com Desmond Liang

      Very cool and useful tutorial. Thanks a lot.

    • http://visiopower.com Mtechnik

      Did anyone come to success on getting this to work?

    • http://soon ChicoOfSweden

      Thanks for a challanging experiment idea. Lovely website.
      Good that the original creator got the credit too. But without Mark Billen I would not have seen this.

      Thanks a million.

    • DTP

      Could not get this to work properly! populated with to many errors!
      Notice: Undefined index: sport in C:\wamp\www\includes\feed_output.php on line 5

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 172

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 187

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 208

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 215

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 298

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 306

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 298

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 306

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 388

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on

    • Misato Maekawa

      NO DREAMWEAVER, NO LIFE.

    • DTP

      Got it working but without images. Any please help!!!!!

    • http://www.caterhamcomputing.com Tim Lomas

      Interesting idea.

      I’ve found that IE8 causes a few funnies unless you run in compatibility mode … so a slight rejig to use the latest versions of jQuery & jQuery UI is required.

      … that said, the premise still works a treat and the rework is educational in itself :)

      Excellent tutorial.

    • http://www.newviewit.com Website Design

      Nice tutorial and BBC did a fantastic job with the redesign! Keep up the good work!

    • http://www.leansoftware.net richard

      The download seems to be invalid – gives me message saying zip is empty:(

    • http://thechriscoleman.com/ Chris

      Very good work! Looks like a challenge for sure. I think I’ll give it a shot; looks like a lot can be learned from this!!

    • http://www.bassmedia.net Manchester web design

      The BBC site is great and think the site will show the first leaps in adopting new ways in the future on web design, web technology and website useability.

    • Richard Griffin

      http://www.courtesycouriers.co.uk/index.php

      having an issue with the following:

      MM_XSLTransform error.
      Transformation Error.
      variable ‘limit’ not found in file includes/text_feeds.xsl

      <!DOCTYPE xsl:stylesheet [

      ]>

      Please help as i want to use your template.

    • Patrick Burgess

      @Richard

      The issue is within your text_feeds.xsl page.

      There is an error in the code. Where it reads:

      display:none

      You need to remove the $ from the $limit variable. So it reads:

      display:none

      This fixed the error on mine. Good luck

    • Patrick Burgess

      PS

      Great walkthrough, thanks guys.

    • Patrick Burgess

      @ Richard
      Hmmmm comments page doesnt seem to want to display code. Basically just remove the $ sign so that it just says “position() > limit”

    • http://www.black-box-designs.co.uk Jon Moore

      I too had everything working except the images… As I hadn’t used feeds or transformation it took quite a while to work out what was wrong…. In the end I found it….

      image_feeds.xsl

      Line 13

      Add a ‘/’ after http://search.yahoo.com/mrss so the line reads…

      Apparently it’s the reference to Yahoo that enables the media:thumbnail part of to work…

      Hope this helps

      J

    • http://www.black-box-designs.co.uk Jon Moore

      Ooops! Where’s my code gone? Lets try again… The line should read…

      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform&quot; xmlns:media="http://search.yahoo.com/mrss/"&gt;

    • Alloy

      please I need a template for this tutorial.I really want to customize it for my project

    • H. McCreight

      To get started with this , have a look at the JQuery site , at http://www.jquery.com. Then look for the Sortable plugin. This has a a whole set of pre-written components that you need to download, as well as core JQuery and the example. The key one is Widgets, and after you set up all the JQuery code and JQuery CSS links, then your skeleton HTML “portlet” file will
      come alive as the “portlet” s are styled and drag/drop and sorting events
      kick in. Then you can add more exotic content and even add in ASP.NET controls inside the content to extend it.

    • toni

      Hi Guys

      indeed very interesting tutorial but I do not seem to be able to get the colours to change as well as the pictures from the various feeds to appear.

      Did anybody managed to get it fully working??

      Thank you in advance

      Toni

    • http://removeblmenudrag/drop sozin

      Hi… How to xreate removebl menu drag/drop(Sport,News,weather), so can relocate the menu in diffretnt lpace

    • http://seabrook-associates.com Manchester Website Design

      Totally forgot about this version, it seems really dated now!