Add to Flipboard Magazine.
A lifestream is a simple website that compiles your online activity in real time and displays it in chronological order. These days all the cool kids have personal lifestream sites, so let’s take a look at creating our own website that pulls in a range of RSS feeds through SimplePie and displays them together in a cool design.
View a demo
The majority of tech or web folks will be involved with a range of social websites, such as StumbleUpon, Digg, Last.FM and Twitter, not to mention their own blogs and website feeds.
The personal lifestream makes use of the RSS feeds available from all of these services and combines them to create a novelty site that allows anyone to follow their latest online activity.
Here’s an example of the site we’ll be creating, it’s a simple one page design with subtle texture in the background. The main heading is main up of a name, and individual entries are automatically added to the stack whenever a new activity is conducted. Each post has a time and date stamp, as well as the title or message relating to the entry. Finally each entry has a link to the source of the entry, whether it’s a Delicious bookmark or other social profile.
Producing the Visual Concept
Start work by opening up Adobe Photoshop, the first job will be fleshing out the visual concept of the site. Create a document at 1280×1024 pixels and 72dpi in the RGB color mode.
Fill the background with a light grey, then go to Filter > Noise > Add Noise. Enter a small amount such as 1.4% to give a very subtle textured effect.
Open up a concrete or metal texture and place it onto the document. Desaturate the design and blend out the edges using a Layer Mask and rough Photoshop Brushes.
Type out your name in your favourite font, here I’ve used the Rockwell typeface and adjusted the tracking to give really tight wording. The slab-serif font really helps emphasise the robust and heavy theme we’re aiming for with the texture.
Align the text to the center of the document, use guides to highlight the main content area. Change the blending mode of the text to Soft Light and duplicate to bring the texture of the background through into the text for a real roughed up style.
Lay out the panels that hold each lifestream entry with semi-transparent backgrounds.
Mock up the textual content in Photoshop, flesh out the ideas for the size and colours of each element, giving prominence to the more important elements.
Continue fleshing out the visuals for each lifestream entry, tweak the sizes and colours for each element until you’re happy with the layout and appearance.
The visual concept can then be finished off with some generic content, take a step back and review the design.
Coding up the Design into XHTML/CSS
Once the design is ready to go, export all the images ready for inclusion in the code. Draw a selection around the large background texture and Save for Web with suitable compression to balance between image quality and file size.
Being a simple design, only a few image elements are required, a selection of the repeating background texture, small swatches of black and white transparency and the main heading will all need saving. The title and colour swatches in particular will require the PNG-24 file type to allow for their transparency properties to be maintained.
The original SimplePie package can be downloaded from SimplePie.org, but also check out the fantastic screencast from CSS-Tricks – Adding RSS Content with SimplePie. Chris Coyier talks us through the details of adding the SimplePie code as well as offering a prebuilt example that can be downloaded.
With reference to the layout of the concept, write out the HTML structure of the page. Choose the most natural elements to represent the page objects, for example the collection of lifestream entries would be well suited to being created as a HTML list, while the titles of each would be H2 tags after the main page title is set in a H1.
Set up a separate CSS file with a simple reset to remove the browser defaults from each element. Begin styling up the site with font style and colours. The background textures can be added as a repeating image to the BODY, and as a static image attached to an additional DIV named page-wrap.
The H1 tag can then be styled using the CSS image replacement technique so that the title image is displayed in its place.
So far we have the page background and main title styled, as well as the content centred on the page in a container. Next, let’s continue styling up the lifestream list and content.
Add CSS styling to the list items and subsequent elements to bring them into line with the original concept. Take measurements from the concept and use them in the code along with rules such as float and margin to recreate the visual effects through the browser.
The font styling can also be added to give the text the grey appearance in place of the default blue link colour.
We’re getting there! Now the coded site is beginning to look like the visual concept, the text is in place and styled correctly. Next let’s look at the code used to finish up the source text.
Now the XHTML and CSS is in place, we can strip out that dummy content in order for SimplePie to automatically bring in the lifestream entries.
Adding the SimplePie Functionality
With the main SimplePie code in place, the individual snippets can be added to the content to output specific elements. Surrounding the LIs is a foreach statement that tells the site to ‘do the following for each of the list items’. Therefore adding a new list item per RSS entry.
Information such as the time, title and permalink are all added to their specific places in the code.
The finished site can them be uploaded and tested, all the feeds entered in the array will be rendered in time order, each one displaying entry time, the title and date of the activity as well as the favicon of the source website.
This makes the personal lifestream complete, simply set it free to self-update whenever you bookmark a link, share a tweet or listen to a new song!
View a demo