Archive for the ‘Web Design’ Category
Beta-testing Typotheque’s Font Embedding Technology
I had the opportunity to beta-test Typotheque‘s new font embedding technology. Great job. It worked very well. I secretly applied their fonts on one of my clients’ website so that I can see how it works in the real world situation. Here is before I applied their font:
http://clintonstreetbaking.com
This site makes an extensive use of browser fonts (very little GIF type). So, it was a good candidate for testing this. If you add the argument to the URL “?font=fedra”, the site will be rendered with Typotheque’s Fedra font:
http://clintonstreetbaking.com/?font=fedra
You notice that the browser first renders the page with standard fonts and re-renders it with Fedra. This re-rendering flicker is a bit annoying but unfortunately it’s a limitation of the browser and there is nothing anyone can do about it at the moment. I hope that the future browsers would check the font embedding first before they render the page.
The only requirements for using Typotheque’s font embedding technology are:
<link rel="stylesheet" href="http://test.typotheque.com/WF-008291-000085" type="text/css" />
And, after inserting this code, you can specify one of their fonts as if it’s a browser font. For instance:
p { font-family: "Fedra Sans Book"; }
That’s really it. Naturally, if you try to use these lines of code on your website, it won’t work because your domain name has not been registered with Typotheque.
They use only CSS to achieve the same thing Typekit does. I cannot say this automatically means better because I’m not aware of the security implications behind Typotheque’s implementation. (I believe the only reason why Typekit uses Javascript is to strengthen the security.)
For now, I believe Typotheque is interested in selling only their own fonts. If so, the security is not a big issue because they would not be liable to anyone else, even if their fonts get pirated. But as soon as they start accepting fonts from other designers, security would be an important aspect to scrutinize.
The administration site for purchasing, licensing for the web, and registering your domain is very well implemented. I had no problem. The user experience was excellent. As I said before in the thread about Typekit, building this type of system isn’t going to be realistic for independent font designers who are not programmers. So, services like this would probably be quite popular in the future. Perhaps Typotheque could even license their system to other foundries who are interested in distributing embedded fonts on the Web.
I would imagine that in 5 years, we will no longer be generating GIF images for non-browser fonts. I can’t wait. The font rendering on Windows would have to improve significantly too. Browser fonts render beautifully on Macs, but on Windows it’s still pretty crude. (Maybe this changed since Vista, but I wouldn’t know because I don’t got no Vista.)
Because the DPI is low on computer monitors (compared to print), at first, I would probably use embedded fonts only for headers. Sooner or later, more font designers will design browser-specific fonts. Web 3.0 will probably have a very distinct look because of the font embedding technology.
—posted by Dyske » Follow me on Twitter or on Facebook Page
New Site for Clinton Street Baking Co.
We just revamped the site for Clinton Street Baking Co. It was surprisingly a lot of work. You’d think re-designing an existing site would be easier, but this was almost a complete overhaul. DeDe, the co-owner, put a lot of thoughts into how best to present her restaurant on the Web. It was a true collaboration.
The vast majority of restaurant websites are poorly designed and built. Some are just bad while others are just a bunch of fluff and flash, reminiscent of all the flashy websites circa 2001, when Websites were built more for the sake of amusing people than for the sake of serving real purposes.
We wanted Clinton’s site to be highly functional and informative. We used our own content management system (blockCMS) to build it. Instead of doing extensive work in wireframing, we built a scaffolding site with the CMS. This allowed us to collaborate easily with DeDe.
Wireframes work fine as long as people who are viewing them are well versed in web development, but most end-clients aren’t (after all, that’s why they hire other companies to do it.). Even if you are an experienced web developer, it’s not easy to visualize interaction. So, if a scaffolding site can be built rather quickly, we often skip the wireframing stage.
Once the scaffolding site is up and running with a content management system, the clients can start interacting with the site, and add/edit the contents. Discussions about what is working and what is not working, what needs to be added or changed, become much easier when you have a website that you can interact with. It’s a great way to communicate with the clients.
The original site was 4.5 years old and it was definitely looking dated. The first sign of Web 1.0 is its page width which assumes a 800 x 600 computer monitor as the lowest common denominator. (Now, most sites assume 1,024 x 768.) Another problem with Web 1.0 sites is that fonts are too small for high density LCD displays. Even though we gained more pixels as our canvas, we are not putting more content into it. We are basically using more pixels to render the same amount of content, which means that the resolution (DPI) is going up.
Hopefully this new site will be able to serve the needs of Clinton Street Baking Co. for the next 5 years at least.
—posted by Dyske » Follow me on Twitter or on Facebook Page
The Reality of Online Stores
When I speak to clients who are interested in starting an ecommerce website, I try to be as pragmatic as possible, and even play a devil’s advocate a little. I go through a reality checklist with them because some of them have a completely unrealistic idea of what ecommerce is. The most popular misconception is that shoppers will come if you open an online store, just as they walk right into your store when you open a retail store. I always tell them that opening an online store is very much like opening a retail store on 1,234th floor of a 10,000-story skyscraper. Just opening a store on the Internet does not automatically bring any shoppers. Every shopper that comes into your online store is a result of your marketing effort. If you made no marketing effort, you will get zero customers. In this sense, a big part of the rent you pay for your physical store is actually a marketing budget. So, taking the store to the Internet does not necessarily save you any money because you would need to spend a lot more money on marketing and promotion.
Most people do not know what percentage of website visitors actually buy something. According to my research and my own experience with my clients, small online stores convert less than 1 percent of their visitors to customers. Even large online stores don’t do that much better either. (I believe 2% would be considered successful.) 1 percent is 1 customer out of 100 visitors. If your site can draw 100 visitors every day, I would say that is a pretty popular site. These days, it’s hard to get much traffic to your site especially if your site is new. We are all fighting for our shares of eyeballs on the Internet. Every year, new promotional schemes are invented, and the old ones become ineffective and obsolete. It’s pretty tough out there.
If you are not a celebrity, or if your business is not well-known, then building traffic of 100 visitors a day can take years. If your site or your product becomes a viral phenomenon, you could get thousands of visitors a day in no time, but that rarely happens, and you certainly would not want to count on that.
You could run online advertising campaigns to draw visitors to your site (e.g. Google AdWords), but this is often very costly. You could spend thousands of dollars in a matter of weeks, and as soon as you run out of money, the traffic drops back to where it used to be. Personally, I have never met anyone who had any success with advertising (online or print advertising).
Entrepreneurs need to be optimistic, because too much self-doubt can negatively affect not only themselves but also their partners, employees, and customers. So, to some degree, unrealistic expectations are unavoidable. But at the same time, I hate the feeling of selling shovels to gold-diggers, knowing very well that most of them would not make any money. It’s hard to play ignorant. This is why I play a devil’s advocate.
Many website developers ignore this part entirely, and try to sell all the bells and whistles of ecommerce to someone who wants to start an online store. Many of these sites would not make enough money to recoup the cost of the development. Think about it. Even if you are lucky enough to get 100 visitors a day to your site, only 1 person would actually buy something. If the profit for each purchase is $10, you would make $300 a month, which is $3,600 a year. That’s not much. You also need to keep in mind that most websites do not last more than 5 years because the technologies on the web evolve very fast. So, $18,000 is the total profit from this website. You then need to subtract the amount you spent on building the site (and your own labor too). Not very profitable, is it? Remember, this is based on a very optimistic scenario of 100 visitors / 1 customer a day.
Given this depressing reality, I always advise my clients to spend the least amount of money to build the simplest possible ecommerce site. For instance, instead of building a full-blown ecommerce site with hundreds of products, an inventory control system, and integrated payment processing system, just try selling a small number of products using PayPal or Google Checkout. Take full advantage of the fact that you can dynamically scale your store on the Web. (You cannot do this with physical stores.) Test the market potential this way, and if the result looks promising, then scale it up from there gradually. Adding PayPal or Google Checkout to your site is simple. It should not add significantly to the cost of building a website without ecommerce.
—posted by Dyske » Follow me on Twitter or on Facebook Page
Typekit – the Future of Web Typeface
This evening, I went to a meetup for Typekit and met the people behind this potentially revolutionary product. If everything goes as planned, Typekit will allow us to use any fonts on our Web pages. Right now without Typekit, we have a very limited number of fonts we can reliably use; the rest of the fonts have to be created as images. So, this would be a welcome change.
In the last 15 years or so, Web browsers have dramatically improved, but the limited availability of fonts has remained the same. In the end, this problem comes down to one thing: licensing. It was never a matter of technology. If it weren’t for the licensing issues, fonts could have been distributed to the visitors of your sites in a number of different ways. (Or, Microsoft could have given away thousands of fonts for free with every installation of Windows or Internet Explorer.) The problem from the get-go was how to resolve the licensing issues.
Interestingly enough, typeface is not copyrightable. It’s like cooking recipes. The only way that typeface can be copy-protected is to sell the fonts as a piece of software. But, you could open a font in a program like Fontographer or FontLab, slightly modify it, and release it under a different name. As far as I know, this is legal. [Correct me if I'm wrong.] Technically speaking, a company like Typekit could probably batch process thousands of well-known fonts in this manner and release them under slightly different names, but this would naturally anger many people, and would never get the support of the design community.
Because typefaces are not copyrightable, typeface design is not a thriving business. Not many people are full time font designers. But Typekit can potentially change this. For me, this is the most exciting part of it. Because the fonts are distributed on demand from Typekit’s central server, it is easy to keep track of licensing and usage. They would be able to tell which fonts were used, where, and how often. It’s sort of like submitting your own music to a subscription-based music service like Rhapsody. Independent typeface designers might be able to submit their fonts to Typekit and make money based on usage.
I asked Jeff Veen, one of the founders of TypeKit, if they are going to accept font submissions from individual font designers; he sounded open to the idea. But for now, they are working with font foundries. Foundries play a role similar to record labels. They market and distribute fonts for font designers, but if Typekit can do it directly, this could work better for many type designers. If you could eliminate some people in between, you might be able to actually make a decent living as a font designer. (No offense to foundries.)
I think Typekit will be a successful product. It would be a quick and easy way for design firms to create a design that would stand out from the rest. It would be SEO friendly too since we wouldn’t have to use GIF images for any type. We could also give quick face-lifts to the existing websites, since the implementation of it is very simple.
—posted by Dyske » Follow me on Twitter or on Facebook Page
CSS Drop Cap
I never use Drop Cap (formatting style where the first letter of the article or chapter is made several times larger than normal), so I never bothered to look into how it can be done using CSS. In the old days (10 years ago), designers inserted images of large letters. I thought that was awkward since the first letter would be missing when you did copy and paste, and more importantly, search engines would be missing the first letter when they scanned your site. Apparently now you can do Drop Cap just with CSS. It’s good to know. It looks something like this:
p.lead:first-letter {
font-size: 200%;
text-shadow: #aaa 4px 4px;
line-height: 1.0;
margin: 2px 3px 0px -2px;
float: left;
}
And apply the “lead” class to the first paragraph of the article. It’s definitely a good thing to know. Here is an example.
—posted by Dyske » Follow me on Twitter or on Facebook Page
Seeing the User Experience from Different Perspectives
I recently realized how differently people view websites. Naturally we all know that there are personal differences in looking at anything but the degree to which they are different has shocked me recently.
Whenever I create a design mock-up for a website, I send it around to my friends to see what they think, before I send it over to my client. My writer friends often respond by saying something like, “The copy on the site is just awful! I know you just want me to evaluate the look and feel of it, but I just can’t get over how bad the copy is.” Getting one comment like this would not surprise me, but I get this type of response from many different people.
If I send the mock-up to an information architect, he would start commenting on the structure of the site navigation and whatnot. I then tell him to ignore it, and just focus on the aesthetic part of it, and to my dismay, he would tell me that he can’t because the navigation bothers him so much.
On the other hand, if I send a wireframe sketch of a website to an aesthetic person (say an interior designer), she would say something like, “This looks terrible.” I then explain to her that this isn’t about the looks, and that it’s about the usability and information. She would then reply, “Sorry I just can’t get over how ugly it looks, and nothing else matters to me.”
I used to be in the last category, and hardly considered what a website looks like from a writer’s point of view. This is pretty obvious if you browse through visual designers’ portfolio websites. Their textual communication is very poor.
Many small business websites suffer from this problem because most of them are designed and built by individual web designers who see everything visually and are blind to textual communication.
Most of the user experience discussions on the web are issues related to building big websites with a large team of people. What is often overlooked is a discussion of what it takes to build websites all by yourself (with perhaps some help from freelancers), because, in terms of the number of websites out there, those are the majority.
When you build a website for a small business, the rules of the game are very different. It’s a different set of problems to be solved, and it’s often about the art of making the right compromises. It’s about having a wide variety of expertise and being able to use them appropriately; not getting caught up in one area too deeply.
Much of the user experience discussion on the web are about how to coordinate the team, that is, it’s about organizational/political strategies. When you are building a website yourself, you don’t have that problem because you don’t have anyone you need to coordinate. Even if you do, it’s a minor issue because the team is small. It’s like the difference between being a film director and a fine artist. They are very different creative processes with their own specific problems to be solved.
—posted by Dyske » Follow me on Twitter or on Facebook Page
