How to integrate RSS into a web site, nowadays

RSS isn’t going away, I hope. It places established and brand-new publishers on an equal playing field. If someone subscribes to me and Mashable, for instance, we both appear on their reading list. As bloggers, we should think about how to support RSS and gain more subscribers in the process.

It’s not easy. Current RSS clients – with one notable exception – are not giving publishers the tools they need.

For instance, I’d like you to subscribe to this blog’s RSS feed. How can I help you do that?

If I link to this RSS file, here’s what you see:

This site's RSS feed viewed in Google Chrome
This site’s RSS feed viewed in Google Chrome

If I send you to Feedburner, you can choose to subscribe via Google Reader (a sign that Feedburner is not being updated), some broken image, or My Yahoo. The Feedburner subscription landing page, in most cases, adds no value for the user.

FeedBurner's subscription landing page
FeedBurner’s subscription landing page

(Hang in there – there’s an answer at the end of this post, promise.)

Three of the top web-based readers are Feedly, Digg Reader, and AOL Reader. (Feedly is likely the top.)

From what I can see, there is no way to provide you with a Subscribe via Digg Reader or Subscribe via AOL Reader link. How is either reader supposed to create an ecosystem without providing tools for publishers? 

Alas, Feedly saves the day! I can give you this link:

Subscribe via Feedly

Whether or not you have a Feedly account, the link provides you with a description of the feed and the latest articles. If you click Add to My Feedly, Feedly asks you to login or register, and then helps you subscribe to this blog. This integrated experience serves publishers and consumers alike.

Feedly's subscription landing page
Feedly’s subscription landing page

Why don’t Feedly’s competitors provide such a smooth subscription experience?

I’m creating a new WordPress theme for this site that will include a Subscribe via RSS button. It will feature two options – Subscribe via Feedly or Other.  I hope to add Feedly’s competitors, once they provide the most basic of features for web publishers, a Subscribe button.

End Note:

Feedly’s integrated experience reminds me of It’s the Little Things from 52 Weeks of UX. Feedly seems to recognize that every interaction matters. You see it in other areas, too. Feedly is the only service of the three to show the number of readers for a feed, a helpful stat for publishers.

In fairness, I should note that AOL Reader has an API, but it is geared toward third-party app developers.

Oh, hey, subscribe to this site via Feedly or follow me on Twitter!

Update: Feedly even offers a tool that helps you make the subscription link pretty.

Can design be taught?

I was never the kid who could draw. My few attempts at arts and crafts were unmitigated disasters.

Throughout my career, I have had the privilege to work with designers. They can make a functional interface a joy to use by adding personality and meaning. I would bet that they could draw when they were kids.

When I worked on user interfaces for projects, I focused on usability, validating assumptions through user research. Even with a perfectly functional interface, I reached a point where only a designer’s touch could make the user experience extraordinary. “What is this designer juju,” I asked myself, “and how can I get it?”

I recently took Code School’s Fundamentals of Design, which emphasizes that design is “intentional.” A good designer can state the reasons for his or her choice of typography, layout, and color. In this way, design is both creative and logical. The logic can be taught, and Code School aims to impart creative intuition as well.

Theory

The course started with some basic theories of design. Here are some examples:

  • Color systems – Red/Green/Blue (used for web), CMYK (used for print), Hue/Light/Saturation (how the brain perceives colors)
  • Color and emotion – red means passion, yellow means optimism and creativity, green means serenity and health*

* Colors have different meanings in different cultures, the course notes.

Rules of thumb

Also covered are ground rules that designers know after spending some time in the field.

  • Try not to have orphan words hanging at the end of a line.
  • Use cool colors in the background and warm colors in the foreground, because warm colors appear closer to the human eye.
  • When putting type on top of an image, adjust the image (using an overlay pattern or transparency) to make the text stand out. Do not adjust the text with tacky effects such as drop shadows.

Intuition

Here’s where it got interesting. The course taught creative intuition through exercises.

The course presents an actual web site and has you:

  1. Drag elements around into layout
  2. Apply a color scheme
  3. Choose fonts and font sizes

All the while, it validates that your selections match design principles such as symmetry (… or properly applied asymmetry) and contrast.

The fact that a computer can detect poor design choices hints that to some extent designer’s intuition can be learned.

How to learn basic design

Whether you have designed in mediums other than web or never designed at all, it is worth exploring these introductory resources.

Read a classic

Check out The Non-Designer’s Design Book for an introduction to the basics of design overall, not just the web.  These foundational principles carry through to all mediums.

Stay up to date

Sign up for HackDesign.org, and go through its lessons.  You will learn from the top minds in the field.

Take an interactive course

I would recommend Code School’s Fundamentals of Design, particularly as a compliment to the two suggestions above.

Responsive navigation with Zurb Foundation, in 5 minutes

Correction: rather than interchange, I used Foundation’s visibility classes to show a different logo on smaller screens.  Interchange is a superior method for responsive images because it saves load time on mobile devices.

Zurb Foundation makes it easier to implement responsive, mobile-friendly navigation.  We’ll apply responsive navigation to an existing web site in just 5 minutes.

Many thanks to Cooksmarts.com, the web site that taught me how to cook, for allowing me to feature it in these videos.

This is the final screencast in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

Follow me on Twitter @coreyITguy for more on modern web design.

Making tabs responsive in 5 minutes, with Zurb Foundation

To view in HD, click the gears icon at the bottom of the video.

In our last Zurb Foundation screencast, we made an existing page on Cooksmarts.com responsive, in just 5 minutes.

But we’re not done!

Now, we’ll tackle tabs. Even with our new responsive layout, tabs on the page do not respond well to small screens. We’ll replace them Foundation‘s sections, which can auto-magically appear as tabs on a large screen and an accordion on a small screen.

Many thanks to Cooksmarts.com, the web site that taught me how to cook, for allowing me to feature it in these videos.

This is the second of three screencasts in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

Making a page responsive in 5 minutes, with Zurb Foundation

To illustrate how much time is saved by a front-end framework like Zurb Foundation, I’d like to share a 5 minute screencast where I apply it to one of my favorite web sites.

Cooksmarts is a fantastic web site that has taught me how to cook. Its recipes are presented very well, but are not optimized for phone-size screens.

Many thanks to Jess Dang from Cooksmarts for allowing me to use the site in this demonstration. If you’re looking to cook at home more, their meal plans are fantastic.

This is the first of three screencasts in our Foundation series.

  1. Making a page responsive
  2. Responsive sections/tabs
  3. Responsive navigation

I recently wrote about the decision to use a front-end framework vs. writing CSS from scratch, then compared a couple of frameworks.

Links and usability

To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn’t have to guess or scrub the page to find out where they can click.

from Nielsen Norman Group, a pioneer in usability. My blog entries now reflect their guidance. Before, the links were gray all of the time. Now, each link is blue, then red when as you click it, then purple if you’ve visited its destination before.

Nielsen Norman Group’s advice is based on extensive observation. It’s amazing how much one can learn from watching someone use a web application or site. We’ll have more on usability testing.

Front-end framework speed dating

In my last post, I talked about the emergence of front-end frameworks. Creating a high quality responsive web site does not require writing all of the CSS from scratch, though doing so is a viable option. Frameworks start you out with a cross-browser, standards-compliant CSS and JavaScript base. When properly used, frameworks save time and result in modern, maintainable web sites.

The Grid

Every front-end framework described here is based on the responsive grid. Your content is arranged into rows and columns, which adjust themselves based on screen size.

For instance, if you have three columns of information on a large screen, they may become one column on a small screen.

The responsive grid makes your site look good on desktop computers, tablets, and phones.

Here is an example of the grid in action, thanks to our friends in Sweden:

A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!
A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!

Notice that the site’s columns shrink in the transition from desktop to tablet, and become a single column on a phone.

More and more, people expect content to look good on all devices. Sometimes, a separate “mobile” web site or app is a good approach. However, a responsive web site is often the clearest path, and frameworks make it easier to implement.

Continue reading Front-end framework speed dating