Adding an RSS feed to websites
Over the last month, a few of my clients have asked me to add an RSS feed to their website so that visitors would be able to “subscribe” and receive updates to their blog posts.
In order to do this, I had to learn a bit more about what RSS feeds are. RSS or Rich Site Summary is a format for delivering regularly updated web content (like blog posts) to people who want the new content delivered directly to them. In the past, people would often “bookmark” sites that they liked and would have to visit those sites frequently to see if any new content had been added. A site with an RSS feed allows visitors to sign up to have these updates delivered to an RSS Reader automatically whenever new content is posted. Another option allows visitors to subscribe to an RSS feed email option, which delivers the feed directly to an email account.
Adobe Browserlab
Screen shot of a current project, testing
how the page appears in Safari 5.0 OSX
I’m loving this online tool, Adobe Browserlab which provides real-time screenshots of web pages for online cross-browser testing.
An important step in website production involves testing to make sure the website is appearing properly in various browsers and operating systems. Ideally to do this, you would have both a Mac and PC loaded up with various versions of the most popular browsers (or use a program similar to Parallels) that would allow for this type of testing. However, sometimes this set-up isn’t possible and Adobe Browserlab provides a great way to quickly test webpages to see how they looks in different browsers.
While Adobe Browserlab doesn’t show you how the website is functioning (it only gives you screenshots), it’s a great tool for checking sites as you are building them.
CSS Image Sprites — Part 2
Adding CSS code to style image sprites
This is a continuation of my last post, CSS Image Sprites — Part 1. For my social media buttons, I used one image to create an “image sprite”, which is used make links to Facebook, Twitter and LinkedIn.
In order for this one image sprite to create the effect of three separate social media links with “active” and “hover” states, CSS styling needs to be added for each button. In this example, my image sprite will be divided up into six equal sections, each representing the correct position for the various button states. These positions are broken into either “top” or “bottom” and then “left”, “center” or “right”. Exact positioning may also be used as well.
This is a simple example of using an image sprite to create three buttons with “active” and “hover” states. In the latest site I am working on, a similar technique was used on the navigation bar to create six main buttons that use a “active”, “hover” and “current” state. Using this technique to create website links will help the page load faster because it uses fewer images.
Contact me