Archive for 'Methods'
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.
I decided to use the Google Feedburner service to add RSS feed capabilities to my client’s sites. Installing ‘Feedburner’ was easy, and the following button and subscription form was created:
By clicking the button to the right, visitors are able to receive updates through an RSS feeder like Google Reader, Bloglines or Newsgator.
By filling in this field, visitors are able to receive updates as emails.
Of course, by adding additional styling with CSS and adjusting the code slightly, these buttons/forms can be designed to look less generic and reflect the style of your site. See my sidebar on the left to see how my RSS feed buttons look. Feel free to subscribe to my feed — I’d love to hear your thoughts and comments.
There is a helpful video “How to Use Feedburner for Supercharging Your RSS Capabilities” that was created by Gideon Shalwick of becomeablogger.com that gives more information about installing Feedburner onto websites.
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.
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.