Blog Post #5: Web Typography

One of the big frustrations that designers have about designing for the Web is the historically poor state of web typography. As web designers strive for consistency across platforms, they have been forced to rely on only a small set of commonly installed fonts, knowing that their ideal choice of font may not be installed on the end-users system. As a result, designers would often turn to creating images for their headers and subheads (pictures of text instead of actual text), but this has never been a good choice for body copy as it has some draw backs in terms of file size, semantic markup, and accessibility. However, many people feel that typography on the web is finally beginning to mature. Why is that? What is the @font-face declaration and what are the implications of downloadable and/or hosted fonts? What is WOFF and why is it significant? What are your impressions about the current state (and future) of Web Typography?

I think that people are saying web typography is maturing because of the introduction of the @font-face declaration with CSS3. W3 puts it well:

"The @font-face rule allows for linking to fonts that are automatically activated when needed. This allows authors to select a font that closely matches the design goals for a given page rather than limiting the font choice to a set of fonts available on all platforms."

I for one am happy that this functionality is finally available, as I am one of those people who have created images for headers (usually banners). I also have found many interesting fonts on the Absolute Font Archive that I would like to use, and I regularly bookmark Smashing Magazine's articles on fonts and typography. Before the arrival of @font-face, though, you had to stick with what fonts people were likely to have on their computers, and that list is pretty limited. But with @font-face, all those great fonts people have created and put on the internet for download can finally be put to use!

I have not played around with WOFF, but apparently it means "Web Open Font Format" and is what is used to embed fonts in pages. It is also significant in that it compresses said data, allowing for pages to have smaller file size and thus load faster. And of course, we always want our pages to load faster. I mean, it's kind of common web courtesy nowadays.

I have to say, I'm excited about where web typography could go with the arrival of @font-face. As I said before, it will allow so many more interesting fonts to get some use. This will allow designers to make web pages so much more unique too. And UNIQUE IS GOOD!

I apologize if my commentary on this is sparse; it's a subject I'm interested in but don't know a ton about. (Plus I'm kinda tired out from doing Exercise 3). Still, a development like this is worth blogging about, right?!

Oh, and by the way, I chose not to do Blog Post Topic #4. Hence the jump from #3 and #5.

Blog #3: What is RSS?

On many blogs and CMS systems, you have the option of publishing a site feed which will create an XML version of your blog for RSS syndication. What is RSS? How is it useful and/or being used? How can you use the RSS feed to track updates to your fellow student's blogs? What's an aggregator?

RSS stands for "Really Simple Syndication." Syndication is basically a process that spreads something out to a wide audience. The term is used in the TV and newspaper worlds to describe something that appears, say, across the U.S., like a political cartoonist whose work is published in many different newspapers across the country or a TV show that is "nationally syndicated," which means it airs across the United States, though on different channels in different areas depending on how the cable channels are set up. Some shows may also be said to be airing "in syndication," which means they air on different channels depending on where you live -- which usually happens when something airs on a basic channel like ABC, which may be channel 8 for one person and channel 10 for another, depending on what company a person has their basic cable service through. (If it airs on a "cable channel" like TLC or Lifetime, usually this "syndication" idea doesn't apply because not everyone has those channels, since "basic cable" does not always offer such channels).

The same idea of "syndication" applies to RSS on the web. RSS allows content to be "syndicated" across the web to those who would like to follow said content, which they indicate by "subscribing" to the feed (just as you might "subscribe" to a newspaper containing syndicated content), usually by using a service such as FeedBurner or Google Reader. More on that in a bit.

RSS is useful because it is an easy (hence the "Really Simple" part) way to get content to those who want to read it. It also allows those who like a certain site to continuously follow it and read its new content easily. It is being used primarily with blogs, since people often like to follow blogs they like (especially since nowadays there's a blog for practically everything under the sun) but may not want to keep visiting the site over and over to look for updates. However, any site -- not just blogs -- can set up an RSS feed. There are various ways of doing this; I assume if you use a Content Management System (CMS) such as WordPress, Drupal, or Joomla they provide some admin option that allows for a feed to be created (or if not, most CMSes have active communities that provide plug-ins that will allow you to do things that aren't already included in the CMS install itself). Googling "setting up an rss feed" or something similar produces many results. The book Building Web Sites All-in-One Desk Reference for Dummies also gives a good explanation of it in its "Feeding Them Your Content: RSS" section. I follow two sites, one for a fan translation group that uses Drupal for their site, and the other the official site for Prince William & Kate Middleton's wedding, that are not blogs but still have RSS feeds that can be followed.

I could follow my fellow students' blogs using an RSS aggregator, also known as an RSS reader. There are many such readers; the previously mentioned FeedBurner (now owned by Google) and Google Reader are two examples that most RSS feeds (which may be called "atom feeds" depending on how the feed is set up) will recognize. Most sites will have some sort of RSS icon (represented by an orange square with little "listening" waves on it) that when clicked will allow you to subscribe to the site's feed. Either that or there will be some other clear link to do so. If not, you can try adding "/rss" to the site's URL to see if that brings up the feed (it works on the Royal Wedding site anyway) or you can follow the site's feed using your browser, if it allows you to do that (I think IE and Firefox both do). If you have a Blogger account, there is a system on the Blogger dashboard that allows you to add Blogger blogs to your "reading list," which I believe you can somehow sync to Google Reader as well (it would make sense, since both of them are owned by Google).

Given our mostly mobile-driven world these days, there are also many RSS readers for mobile devices. I use a RSS reader app called Byline, created by the company Phantom Fish, to follow RSS feeds on my iPod. It was recommended to me by several people when I asked for advice on an RSS app for iOS after my previous one failed me. Its only flaw is that you cannot add feeds from within the app, likely because it is tied to Google Reader (you have to go into Google Reader and add the feeds there). Similar apps can probably be found in the Android Market (for Android devices) and the Windows Marketplace (for Pocket PCs and Windows phones).

Anyway, I hope you have learned a little bit about RSS from this post! Till next time!

P.S. A couple useful links:

RSS readers for Android: http://www.talkandroid.com/8805-top-5-android-rss-readers/

Some Windows Phone RSS reader options: http://marketplace.windowsphone.com/search.aspx?keywords=rss%20reader

Blog Post #2: Can I Get a Resource?

Although we don't have to do both of the posts for this week, I decided I will go ahead and do this post too and share a few design resources with you all.

Hex Hub HTML Color Codes - I use this site all the time to find hexadecimal codes for colors. They have a lot of ones listed here, which should make it easy for you to find the perfect shade. Programs like Fireworks and Photoshop let you put in hex codes in the color picker too, so you can use these codes in your graphic design as well.

Namechk - This is not so much a design resource but it could help you when you decide to get the word out about your website on social networks. This site lets you check over 100 social networking sites to see if the username or custom URL you want is available. Saves you lots of time and stress.

8 Simple Ways to Improve Your YouTube Channel - This is also social media-related in a way, but it's the best article I've ever seen on helping you out with YouTube. I found it when I did a Google search on how to change your YouTube username (since I no longer like the one I have). The article is on Mashable, a popular tech blog that is worth following in and of itself.

StumbleUpon - I came across this semi-obscure social network a while back, which suggests web content to you based on what you tell the site your interests are. I have found a lot of great stuff using this site. You can browse what you are given using the site or through downloading the StumbleUpon Toolbar for Internet Explorer. Either way, when viewing a site, you give it a thumbs up or thumbs down. StumbleUpon uses this data to improve its recommendations. It's definitely a good place to start to get inspiration!

~*~

Hope you enjoyed this short list of resources! Till next time!

Blog Post #1: "Erin's Challenge! I Can Speak Japanese" is cool!

Find a site that you think is cool or cutting edge and well designed. Explain what this site is about and why you find it compelling. What makes the site cool or cutting edge and how does it differ from most sites that are out there? Are there special, unique, or interesting features to the site? Can you determine how the site was made and/or the tools and techniques that were used?

The site I would like to feature for this post is Erin's Challenge! I Can Speak Japanese. I found this back in March while searching for Japanese language learning resources. It was created by the Japanese Foundation, an organization, that, according to their own website, "specializes in international cultural exchange in Japan," and is specifically sponsored by their Japanese-Language Institute in Urawa. Its purpose is to teach the Japanese language to foreigners through the use of 25 video skit "lessons" starring a young British girl named Erin who is studying abroad in Japan. Each lesson focuses on specific cultural situations which Erin encounters, such as introducing oneself, asking where something is, telling time, asking the price of a bus fare, and ordering food. Each lesson includes the video skit, a script of the skit, a manga rendition of the skit, and review questions. Text for the skit, script, and manga can be viewed in Japanese with kanji, Japanese without kanji, Romanji (Japanese written in Roman letters, like what we use), and English (or whatever foreign language you speak - I viewed the English site but you can also view the site in Japanese, Chinese, Spanish, Portuguese, or Korean). There are both basic and advanced versions of the skits available, allowing anyone of any level in the language to enjoy this resource. As the site's motto says, "Free Japanese learning website, even beginners can enjoy." You can also make an account on the website, which opens up more features, but the site is fully functional without one.

I find this site compelling because it provides an easy way for foreigners to learn Japanese. It has the script for those who learn best through writing as well as elements for visual learners such as the video and manga. The use of cultural situations to teach the lessons also introduces users to aspects of Japanese culture they might not otherwise learn about using other resources, as well as putting the learning into contexts that a visitor to Japan or study-abroad student might easily encounter.

I have not explored many Japanese language resources on the net, so I am not sure how Erin's Challenge differs from what else is out there. But its use of video and cultural situations is probably pretty unique. Plus the site seems very tailored to foreigners, especially as they feature a foreign character, which is cool. The site is also more interactive than most, with the features such as the videos and scripts, and features that help you understand what you learned, like the Key Phrases (which also includes a section showing how these key phrases can be used in situations other than the one Erin experienced) and the Let's Try area, which also introduces a situation similar to what Erin experienced but not the same (the one for the first lesson, for example, discusses exchanging business cards, even though the main lesson is on classroom introductions). They also provide a very useful FAQ that shows how to use each part of the site, as well as giving very specific technical specifications to help you get the most out of the site.

The video skits are a unique part of the site. Instead of just having a teacher teaching you Japanese, you get to follow a story, namely that of Erin's six months studying in Japan. Erin gives viewers somebody to relate to as they embark on their journey learning Japanese, which makes the experience that much more interactive!

As for how the site was made...clearly Flash was used for most, if not all, of it because the site is very dependent on Flash Player. The skits were taken from a DVD series, so some sort of video conversion software was used to put it on the internet. Since the site also allows you to make an account and features a "user ranking" sort of leaderboard, there is probably some sort of interface that manages that part. According to the FAQ, the site also uses JavaScript. The FAQ also suggests you have a large screen size (1024 x 768 or higher), which makes sense since the site takes up a large amount of screen space even on my laptop (which has a unusually wide screen and a resolution of 1280 x 800).

Anyway, I definitely recommend this site if you want an easy and creative way to learn the Japanese language! I now leave you with some screenshots of the site, taken by me in full-screen:

The site's homepage

The first Basic Skit in action.

The "Script" feature.

The "Manga" feature, with only English turned on.
Down in the corner, there is also a "Learn onomatopeia with manga" feature,
which helps you learn the Japanese words for different manga sound effects.

The "Review Questions" feature.

The first Advanced Skit in action. Though on the
same subject as the Basic Skit 1, the situation
is different.

The "Key Phrases" feature for Basic Skit 1 in action,
featuring an animated version of Erin along
with an animated "teacher."

The "Develop vocabulary" section for Basic Skit 1
(with a helpful reminder to get the latest
version of Flash Player on the bottom).

This trailer from the site's official YouTube channel also gives a very good overview of how the site works, including some stuff I forgot to mention: