Web Fontography Fun

With the rise of @font-face font linking in the all of the “big five” desktop browsers—Safari, Firefox, Opera, and Chrome—true web-specific typography is beginning to take shape.

In an excellent blog post from "A List Apart," Richard Fink looks at several events that have brought web typography to the forefront and addresses some of the issues it still faces. He covers the following in depth:

1. A Web Fonts Working Group was chartered at the W3C on March 18, 2010. Its first order of business was to establish the WOFF specification as the standard compressed “wrapper” format for delivering sfnt (OTF and TTF) fonts on the web.
2. Font rendering in IE9 using Windows’s DirectWrite has been unveiled via the see-for-yourself IE9 Platform Preview.
3. The first round of web font preparation tools like Font Squirrel’s @Font-FaceGenerator and EOTFAST have appeared.
4. A new wave of “font hosting and obfuscation” services (FHOS) have appeared alongside Typekit, Typotheque, and the free and open source Kernest.
5. The first “trusting” web font licenses from commercial font designers have appeared.
6. The CSS3 Fonts Module has evolved to include some of the advanced features of OpenType.
7. Adobe Flash, once a reliable cross-platform means of text replacement (sIFR), now appears permanently crippled.
8. Google has launched a free font-hosting service for a growing library of fonts. All of them available for self-hosting, too.

First of all, it's about time we found a way to use more fonts on the web. I'm really amazed it took this long!

Second, the new font formats for the web mentioned in the post including WOFF are a step in the right direction. WOFF is essentially a zipped font file that will soon be the standard “transport format” for fonts. It’s gaining support from Mozilla and Chrome right now and was sponsored by Microsoft and Opera in a submission to the W3C Fonts Working Group.

And finally (thankfully), Fink points out that he believes the Font Hosting And Obfuscation Services (FHOS) such as Typekit, Typotheque, Kernest and others are just a passing phase on the way to much better supported web typography solutions. We’re still in the growing pains of this new technology.

"You can view FHOS as a phase. Services are innovating. For example, the WebINK service from Extensis features a free installable “preview wizard” of sorts called Type Drawer that enables you, among other things, to instantly swap selected fonts on your page with drag and drop simplicity. This can be a huge time saver and it is certainly the kind of authoring tool designers need. Right now it’s proprietary to the WebINK service, but still it helps in shaping things to come."

Blindfolded Design 2.0 Peeking at CSS

I can't get away from the idea that coding CSS is a guessing game for beginners.
My process lately has digressed into:
1. Guess the best measures for different margins and colors.
2. Save the document.
3. Cross fingers.
4. Close one eye (somehow disappointment is better through one eye at a time).
5. Refresh browser or preview screen.
6. Sigh.
7. Guess again.

I am very thankful for layout generators, but that only gets you so far.

After our last project site, a site comprised of two to three pages, I've added one more criteria to my website design checklist: Check on another computer. I had checked the site in other browsers on my laptop, but it looked significantly different on my work computer. I think it had something to do with my  default browser font size because my text looked huge on the other computer.

Now, I'm not only guessing against what I can see in the five browsers I have on my computer, but also against what I can't see on other's screens. I'm having a hard time adjusting to that!

In other news, I'm excited about the added design properties available in CSS3 we've just started looking at in class. Hoorah for text-shadow!

I'm older than the World Wide Web

Above the abridged, international version of the history of the internet video we watched last week. I really enjoy the extra details about England and France because I had a sneaking suspicion it wasn't just us Americans who contributed to the internet's inception. The relative infancy of the internet and the it's more modern component the World Wide Web (WWW) surprised me.

I'm older than the web. If you were born before 1990, so are you. It's just mind-boggling to look back on how fast the technological changes happened once good old Tim Berners-Lee came up with HTML and coined the WWW we all use now. It's been only 20 years!

The number of sites has also grown exponentially.

According to a 2008 Google study, there are more than one trillion unique URLs on the internet today. We have come a long way since the first baby steps of the WWW. Back in January of 1996 there were 100,000 websites, and looking back even further to mid-1993 there were only a total of 130 websites. Not much need for Google in those days…

Here's a graphic outlining the growth of websites from 1990 to 2008. I'm sure at this point the graph line is pointing straight up due to the massive growth in more recent years.

Wonder about that one, single website back in December of 1990? That was info.cern.ch, the first-ever website and web server, created by Berners-Lee.

Historical perspective achieved. I can't believe I'm older than the web! From here it's just a hop, skip and a jump away from a, "I remember when" comment I can deliver to the next generation. Boy I feel old.

Paying attention to webpage layouts

As we move into CSS layouts, I’ve started to pay more attention to the layouts of some of my favorite web pages. Over the years, I’ve found that layout is a learned art form. When I first began doing layout art, I was working for my college newspaper on the sports page. My first page design was a disaster! After working for hours on arranging several boxes to fill the space on the standard broadsheet, my editor came by and told me two things:

1.         Scrap your design
2.         Go out, buy a newspaper and really look at the layouts. Break them down into the boxes they are and get some ideas for making your page better.

She was absolutely right, my layout was horrible! But, after years of looking at newspapers and emulating layout designs, I’ve really improved my design capabilities. Now in web design, I’m back to the basics. I realize that I’ve been as oblivious to the underlying structure of web layouts as I was years ago with newspapers.

As designers, that’s what we really want from a layout. We don’t want the users to actively notice the columns and rows. The layout itself should make the page’s content clearly understandably, easy to navigate and intuitively elegant. I’ve learned over the years that good layouts aren’t particularly complex. The content itself should delineate how the layout works. NEVER let your layout define your content! That’s a big no-no I learned working on the newspaper. Another is when all else fails, just remember “KISS.” Keep it simple, stupid.

Before I can move on with my web layout skills, I think I’ll take my former editor’s advice and start paying more attention to the layout of sites I go to all the time. There’s a lot I’ve been missing.

Web Content Really is King

In and around the entreaties to use clear, concise coding techniques, our textbook writer John Allsopp mentions again and again the importance of good content. Before we dive into the design-intensive side of this course, I think it’s time to expound on that point. What is good web content? How do you know it when you’re looking at it?

The best and normal content test happens when we (the users) are searching for information. For instance, this evening I went looking for details on an event happening in town that I had seen on an electronic billboard. Following a normal course of action, I googled the business to find get more information about the event from their website. Talk about a disaster!  The site was disjointed with links pointing here and there and product information in oddly spaced columns. I clicked on the “In the News” link expecting a press release site/blog or event detail list, but it took me to an article on the company in Texas Monthly. There was nothing else on the site I could find that looked like it would have event details.

Next, I searched for the company on Facebook, often the place where the most up-to-date details are posted. I finally found their page, but the link they posted about the event took me back to their site where I learned even less about the event. It contained only a bio of the person who was coming and no specific time/place/date details. DEAD END!

In my world bad web content happens when a user searches for something and cannot find it on your site. Or, they find it but it doesn’t give full details, contains incorrect or misleading information or just flat out doesn’t make sense to them. Content like code should be clear, concise and intuitive. It reinforces the entire purpose of the page itself. Why would you create a page without content or with bad content?

As a writer, I’ve learned how to identify bad writing, but what should good writing/content include?

• Information users can’t get anywhere else
• Details on a particular subject that have been aggregated and distilled into what’s most important
• Specifics on event information or statistics or news in a clear, concise, easy-to-read format
• A purpose; a reason for existing and taking up valuable pixels on your screen

Not only should sites focus on the importance of good content, but the coding and design should flow out of the purpose of the content as well. That’s because users are after the content. According to an excellent article in Smashing Magazine by Michael Aleo, design should make content better, but it cannot totally make up for bad content.

“The user is after content, not your gradient-laden design and CSS3 hover effects. Your job is to get them there as painlessly as possible. At the same time, great design can enhance content and take a website to the next level. Great design not only gives a website credibility, but it can lead to a better experience. Mediocre design and great content lose out every time to great design and great content. It just makes for a better overall experience, where content and design both play a role.”

Just as Allsopp says we should make our code as easy for browsers to read as possible, the content on our web pages should have the same goal. For designer/developers, that means not allowing design to get in the way of the message that needs to be conveyed, and for content producers and writers, that means creating clean, important copy and leaving out everything else.

Past these revelations is the even more intriguing work of strategic web content (anticipating what users are looking for and making it easier for them to get), which I will not expound on here. There are some great blogs devoted to strategic content including: http://blog.braintraffic.com/, http://lucidplot.com/ and Content Strategy Week on http://johnnyholland.org to name a very few.

How to Convince Someone That Web Accessibility is Important

So we've talked about web accessibility in our development class. We read the excellent chapter on accessibility in "Developing with Web Standards" by John Allsopp and looked at different ways to validate code for accessibility. I get it. Web accessibility is important and there are a lot of great tools to get you there. But how do you convince a non-interested party (NIP) of the importance of web accessibility (WA)?


1. Hit them with the facts.
Your NIP is probably a normal functioning person who's never thought about WA. They've never wondered about how a blind or deaf person uses the web. They don't know that many normal people can't distinguish between colors like red and green. To give some scope to the amount of people that WA can help, it all begins with the facts.

According to the U.S. Census brief, Disability Status: 2000 (.pdf):

• 49.7 million (19%) of people ages 5 and over have disabilities
• 5.2 million are between 5-20 years of age
• 30.6 million are between 21-64 years of age
• Of the total number, only 57% are employed (average income $33,109 vs. $43,269 for the general population)
• 7.7 million have difficulty seeing newspaper print (even with correction)
• 8.0 million have difficulty hearing conversation (even with correction)
• Disabilities include visual, hearing, cognitive and mobility impairments

49.7 million people! That's a lot by any standard and I'm sure the 2010 Census numbers will be even larger.

2. Show them what it's like to use the web with a disability. 

• Use the neat, free screen reader Web Anywhere to let them listen to a website. 
• Show them what it's like to try and access everything on a site using only the keyboard.
• Let them see a site through the eyes of a color blind person with a filter site like this one.

The Web Accessibility Initiative (WAI) has a great listing of scenarios of people with disabilities using the web that can give you some good stories of disabled individuals attempting normal tasks online and the difficulties they run into.


3. Bring on the guilt trip.
Here's an older video of students with disabilities describing what it's like to use the internet. (Of course, the captions haven't been edited by whoever uploaded it, so the video itself is inaccessible. Oh irony!)




4. Tell them why you care.
Explain what you've learned about WA in addition to the information above. Make it personal. The web should be made available to everyone. It is increasingly an essential resource for many aspects of life: education, employment, government, commerce, health care, recreation, social interaction, and more. The web is used not only for receiving information, but also for providing information and interacting with society. Even the UN Convention on the Rights of Persons with Disabilities (2006) recognizes Web accessibility as a basic human right. I imagine it's a right your NIP wouldn't want to lose either.

5. If all else fails, WA is win-win.
Give your NIP a list of the ways WA benefits users who aren't disabled.

It also benefits...
older users, mobile phone users, users with low literacy, users with older technology or low bandwith connections, students with different learning styles and users not fluent in English

and it...

• helps with search engine optimization or SEO
• demonstrates corporate social responsibility
• increases customer loyalty
• reduces law suit risks

...and much more! The WAI has a great list of different motivations for moving toward WA that is broken down by type of business or organization.

Good luck getting your NIP on board with the WA wagon. The more non web developers we make aware of the importance of WA, the more we move toward changing the way the web works for the better of ALL users!

Typography & the Web

Go to: 6 Ways To Improve Your Web Typography

I’ve been reading a lot lately on web typography thanks to this great article from A List Apart on soft hyphenation, a blog post with tips on improving web typography and the web typography adaptation of Robert Bringhurst's "The Elements of Typographic Style." Since I came from the print world of strict word and line spacing and typographic manipulation, these resources have been very handy in figuring out how to override the basic browser settings for typography.

The soft hyphenation problem comes up with text that is justified. Justified text is both flush left and flush right so all lines of text except the last lines of paragraphs are stretched out to the same length. Hyphens are used to break words at the end of lines to help prevent gaps in word spacing. The hyphens that break up words in justified text are called soft hyphens. Generally, they aren't used on the web as the default alignment is left align, which leaves a ragged right edge on paragraphs.

However, this practice does not created the most readable text, especially when it comes to eBooks. Unfortunately, (as illustrated by the iPad and Kindle, ebook readers) though text can be justified, the soft hyphenation still gets ignored. They require readers put up with justified text withough natural breaking hyphens which causes odd spaces to show up.

Example of justification without hyphens:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nisi sed neque malesuada nec venenatis purus tempor. Suspendisse gravida ante ultrices lectus faucibus porttitor. Maecenas id nunc in eros fermentum auctor. Nunc at tortor magna, eget cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget tortor nulla, vel placerat turpis. Aenean volutpat, erat non lobortis rutrum, urna purus cursus lorem, ac laoreet ligula augue eu nisi. Proin elementum, nisi nec pulvinar facilisis, purus erat ullamcorper est, et dictum ligula nisi vitae libero. Mauris tincidunt vulputate mauris. 

Example of left align:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam nisi sed neque malesuada nec venenatis purus tempor. Suspendisse gravida ante ultrices lectus faucibus porttitor. Maecenas id nunc in eros fermentum auctor. Nunc at tortor magna, eget cursus justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget tortor nulla, vel placerat turpis. Aenean volutpat, erat non lobortis rutrum, urna purus cursus lorem, ac laoreet ligula augue eu nisi. Proin elementum, nisi nec pulvinar facilisis, purus erat ullamcorper est, et dictum ligula nisi vitae libero. Mauris tincidunt vulputate mauris. 

There is a way to hard code soft hyphens into text, but according to "A List Apart," using javascript to create hyphenated, justified text is a smarter way to achieve this end:

"Hard coding soft hyphens is a good path to understanding how they work, but a bad thing to do in practice. Soft hyphens make the HTML text hard to read and edit. Additionally, they may create difficulties for search engines. Users can’t turn soft hyphenation on and off with a simple UI widget. Using JavaScript to apply soft hyphens makes a lot more sense and works quite well."

The blog recommends the script, Sweet Justice, that can run English words through a hyphenation dictionary to break up words at the correct place to wrap to the next line. This looks like a very handy script!

Also, I found out how to insert en and em dashes this week as well! According the A List Apart blog, I can use en dash (–) or em dash (—). This is very exciting since we use a lot of em dashes in our writing to denote dramatic pauses and lists.

The Typographic Guide has really been a helpful resource for all my type-related questions including leading, kerning and more. So with great guides like these and scripts, I can continue to modify text and typography to my heart's content!

Blindfolded Design

As we transition into CSS, I can’t help but feel like we’re learning to design blindfolded.

This coding method is so unlike other graphic design mediums I’ve encountered, and at the same time (thankfully) similar.

It’s different in that unlike laying out a print piece in a layout editor such as InDesign, Quark or (shudder) Word, CSS coding is just type. You don’t select a photo’s box and drag it across the page to position it; you have to use the proper selector, property and value to align the photo where you want it. Then, you load the page in a browser to see if it moved to the correct location. If not, you make changes and check again. It seems like a lot of trial and error just to move one element! Even then, some browsers may display it differently. I won’t take the relative ease of print design for granted again!

However, it is my print design background that has helped me translate CSS coding to some extent. There are a lot of similarities in the vocabulary and ideas that surround what makes a “good” design flow well. It’s just figuring it all out that will take time!

Visit CSS Zen Garden.

One wonderful thing about CSS design is the simplicity of making changes to a whole site. Instead of the arduous task of manually changing text color, backgrounds, etc., designers can simply change the code to make global changes across a site that uses the same CSS file. One great example of this is the website CSS Zen Garden. It uses the same HTML and shows it with several different CSS options created by graphic designers from all over the world. So far there are more than 200 designs for the CSS Zen Garden and each page is completely different. The variety of submissions really shows the “the beauty of CSS-based designs.” 

Now to learn it blindfolded…

Creating my first web page! (and other musings)

Maybe the title is a little misleading, but I am excited about creating my first web page (from scratch) for our first class assignment. We were assigned to create a simple web page with a list of five items including links and photos. Here's mine. Since I put together the shopping list on Sundays, I used it for my list inspiration. I wrote the markup for the page using the HTML Kit editor which was very handy because it put together the structure for the page including the DOCTYPE and HTML, Head and Body tags for me. You can get the free version of HTML Kit here.

What I've learned so far in class, after flying through the chapter on HTML Markup, is that as a whole web programming is a lot more complicated than I first thought it was. The many elements and tags to remember is staggering and the complexity of even simple forms is not something I expected. I know I'll definitely appreciate the next web form I fill out! I'm sure it will seem less daunting once I have a few more pages under my belt. (I hope!)

At work this week, while using a content management system or CMS to edit the new website for TSTC, I got to explain to my boss what a relative URL is and why it would be a good choice to use them instead of absolute URLs for the site because the main domain name is changing. In this case the current working domain name for the site is new.tstc.edu and when we go live with the site, it will be just tstc.edu. The file folder/page structure will stay the same when the domain name switches over, so the relative URL worked great!

My boss was very impressed with my knowledge on the subject; always a good sign that I'm on the right track with this class.

Read more about absolute and relative URLs in this great post from Web Developers Notes.

What do you think of my first website? Isn't it delicious looking? :)

Starting at Square One

As the Weird Al Yankovic song above says, "Everything I know is wrong, and everything I thought was just so important doesn't matter." Well, maybe not everything, but a lot of things I believed to be true about web programming are wrong.

You see, I'm a marketing and public relations (PR) professional. In my world, not only is presentation everything, very rarely is presentation separated from content. I have a background in print publications including newspapers, magazines, books and newsletters. Formatting and presentation in print pieces are the key to a good end product. In PR and advertising, if a piece is not flashy or "cool" looking no one will read it. The same is true for websites. Formatting and presentation is everything!

Often in PR we try to control every thing on a web page the way we do print pieces with strict spacing, color control and layout. We want it to look the same in every browser and on every screen.

After reading the first 50 pages in our textbook, "Developing with Web Standards" by John Allsopp. I realized that many of the controls our profession wants for the web are unrealistic and in many ways just plain wrong. It was as if Allsopp was speaking directly to me on Page 12 when he wrote,

"Many developers (and marketing departments) think this means that our sites should, or even must look the same in every browser. In fact, the opposite is true. By striving to make our sites identical across all browsers, we can quite easily exclude users."

Exclude users! That's not at all what a marketing department really wants. We want to include everyone and control the way a site looks. Allsopp has an answer for that too.

"Embrace the web's flexibility as one of its greatest strengths, not as a weakness ... It's users who should be able to choose how they view and interact with the web. We have to give up the notion that designers and developers are the ones who are in control."

Really, "Embrace the web's flexibility" is your answer? Is this Allsopp guy some hippie web designer telling corporate marketing departments we can't control everything? No, he's just a realist who obviously knows the very nature of the web is changing all the time, and that chasing after control will lead to an "us vs. them" battle over who decides how the web should look and operate.

To be honest, as a user I wouldn't appreciate anyone telling me how to use the web. Or in what browser to view it. (I use Chrome whether you like it or not.)

So I'm ready to learn about the underlying beauty of web development as Allsopp defines it, semantically structured content that provides information to the most users possible. If I listen to the old, print piece model, I could end up with a pretty site that is inaccessible to users with disabilities or those using a mobile device, etc.

That's not to say I don't want the sites I build to look good. However, I'm learning appearance isn't the first order of business, and neither is control. As Allsopp puts it,

"It's easy for designers and developers to get caught up in the appearance of a website or web application, but much of the real beauty of the web lies beneath the skin. If we develop our sites only to please the eye and ignore the needs of software, like browsers and search engines, we miss more than half of the users of our work."

Looks like I'm not only learning some new languages in this course, but also a new way to view the web and the work I do with it.