Design Challenges

You are ready for an update

I recently read an entry on Eric Shanfelt's blog entitled "Publish Web First, Print Second" which further reinforced my accounts from a previous entry Instant Information entry. I have discussed this topic to death, which by the way is endless, in the past couple of month. I have discussed it with colleagues, friends, and just about anyone I know who is interested or willing to hear it.

Yet, little change has taken place. We all continue, day in day out, to use the Web site as a landfill. A place to dump all information, whether relevant or otherwise, and continue to save the best for print. I have also noticed that this is the case for most sites for which I visit and receive a magazine.

It dawned on my this evening that perhaps is not our sites or our processes that need an upgrade, but ourselves. We are at cross roads, a place where digital media is changing the way we obtained our information. We are at the point where most jobs are going digital, yet change hasn't taken place. People still walk into their desks and the only digital they see is their email. I'm referring to the mail clerk all the way up the food chain to the CEO.

I can assure you that less snail mail is receive every day than digital mail. We have completely revamped our immediate communication avenues, but have yet to see that we no longer wake up and go outside to pick up the paper. We instead turn to Google news, MSNBC.com, CNN.com, ESPN.com or some other .com avenue to be feed our daily dose of information.

Then why is it that most publishers insist in saving the best content for print? Because the senior level editors fear for their jobs, they fear that the pimpled face twenty something is going to come in and replace them.

My mother always told me and re-enforce two important things that I carry with me to this day:

1. Go into any career you want, just make sure you work to be the best in your field.
2. Always associate with smarter people, they will teach you new things and take you to the next level.

I used to think my mother was crazy, but what 12 year old wants to listen to their parents, let alone pay attention to any advice they might have to give.

The bottom line is that if you give the new generation a chance for expressing their ideas, and you surround yourself with the best and the brightest, you will rise in your career as you will have the best team working for you. If you insist in keeping them in the dark basement and cultivate them as mushrooms, they will grow to resent you and you will miss out in sharing ideas and growing your company to the next level. Ever noticed the Windows Update icon that pops up near the bottom right corner of your PC? A little box typically pops up notifying you of yet another update/upgrade to your current flavor of Windows. Don't you wish you came equipped with such an enhancement. Time to update!

Labels: advertising, cms, content management, CSS, Customer Service, Freedom of Speech, marketing

Embed fonts on your Web site

Recently, I have been thinking about design and the nature to code safely on the Web. As designers we typically choose to use Web friendly fonts like Verdana, Times New Roman, Arial, and Trebuchet MS.

Designers, however should not let browsers inabilities to carry a vast array of fonts interfere with their designs. Michaelangelo would not have sacrifice the roof of the Sistine Chapel due to lack of a smaller brush, so why is it that Web designers so often sacrifice bandwidth and turn to background images or heavy downloads to convey their message; not to mention the lack of search engine friendliness involved in presenting picures and images instead of text.

I sought out a clear answer on how to embed fonts on a site without the need to sacrife speed or SEO. Back in the late 90's both Netscape and Internet Explorer were fighting grounds for the title of browser reign supreme as such both came out with unusual plugins and font rendering programs, however this was but a mere patch and band aid on the problem as fonts were translated to images solving only the small side of the equation. I don't blame them as SEO wasn't a hot topic in those days and Google was but a silly word some guys thought of to represent their brand.

In today's Web, where Search Engines are the hot club were your name must be on the list, it is crucial to create SE's friendly sites. to do so, the @font-face construct must be utilize.

Here is a simple example courtesy of the css czars at A List Apart:

@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }

"Those familiar with CSS syntax will recognize the last line. The @font-face construct may not be familiar, however it’s easy to explain: as the “Kimberley” font is requested, the font file is fetched from the specified URL. The syntax is described in the CSS2 specification.

To avoid long lists of @font-face declarations in the style sheet, they can be hidden using @import" like so,

@import url(http://www.princexml.com/fonts/larabie/index.css) all;
h1 { font-family: Goodfish, serif }

The bottom line is that you should not limit yourself or set the bar too low, there is always a way to solve the problem. Problems are easy to come by, but securing an answer is where the intellectual matter comes into play. Don't let the ineptitude of todays' browser interfere with the future, just make sure that you gracefully prepare your site for degredation or for those living in the past. To appreciate the true power behind css, please refer to the Zen Garden project.

Labels: brand, cms, CSS, Design, dreamweaver, Features, jagged images, photo resizing, Search Engine, SEO

SEO Hackery and sales tricks

I was recently reading an article on SEO Chat, a large provider of SEO tools, articles, and news. I have been exploring and toying with the idea of hiring a consultant/ helper to get better rankings on some terms. I have a lot of experience on SEO, and keep with with the space, but it is always great to get third party validation.

The problem is that when it comes to SEO, you have to open up your entire site to some folks who just may do a hack job or worst, get you banned. This is why I get wary of SEO, thankfully SEO Chat is able to validate my worries, this article speaks of Network Solutions, one of the largest domain name registrars.

It is sad to see such a powerful company diminish the trust of the community by offering trickery and half-ass SEO programs to turn a profit on the less savvy.

Another point not covered in the article is that you do -not- get to select the keywords you want to rank for. They go after low volume low traffic "low hanging fruit" keywords (the sort a crappy site can rank for with the addition of the term into the title tag)

Another bad practice by these registrars, also not covered in the article, but I mostly seen it in godaddy.com, is that they keep track of the domain names you search for. If you search for a domain name a few times, they consider it popular and will self register to themselves and then ask you for a lot of $$$ to sell it to you. I notice this in the past and was happy to see validation from some other users commenting on it at the end of this article.

The bottom line is that we have to be very careful on who to trust. Don't open up your site to just any hack that comes along, especially if the price is too good to be true. Here are some tips to keep in mind as you are in the search for an SEO consultant from the king of all Search Engines, Google.

Labels: advertising, content management, CSS, Google, Search Engine, SEO

iGoogle Themes

Last year Google introduced iGoogle, an addition to the Google Web site that allows customization, thereby creating an individual homepage for each user. You can login to your personalized page via the iGoogle top right menu on the Google homepage.

Not only do you get to use the predefined gadgets, but you can add your customized RSS feeds or create your own gadgets via the Web developer tools.

Today I noticed that Google was featuring theme images for the iGoogle homepage. It got me intrigued and I starting browsing the many themes available. Thus far I had been using the beach theme which changes it looks depending on the weather and time of the day. However, there are many other themes available. You can even give it a world and create your own themes. I haven't experimented yet, but hopefully I will be giving it a whirl soon.

The bottom line is that Google chooses to keep improving every product, first came iGoogle, then came Google Tabs, followed by Google Themes, now iGoogle social networking via design your own themes, user rating, user comments and FAQ. This company knows how to get things going and keep going. Google guys, forget American Idol, you are my new idols.

Labels: Alexa, CSS, Design, Google, RSS, Search Engine, Social Bookmarking, software, techniques, Web Design, Web Searches

IE6 PNG Transparency Problem

I been working on redisigning a couple of Web site and have come across a very serious problem. I created an image to be place as the background of a div. I then went ahead and included the company logo as a transparant PNG file. Everything was going great. I normally develop in Internet Explorer 7, but make sure to test on all other browsers, Firefox, Netscape, AOL, and Safari.

Turns out during my testing I forgot one, Internet Explorer 6. Well it came to bite me in the butt. When I pulled up the site, the logo was there, but to my surprise it had a grey background instead of the expected transparent background.

After many javascript and conditional comments trials, I decided to incorporate the logo onto the background image. The problem came in that I needed that logo to serve as a hot link to the Web site homepage.

The answer was simple, I created a div inside the div containing the background image and gave it absolute positioning with an onclick command. Here is the code:

<br /><div id="logo"><br /><div style="position:absolute;width:228px; height:110px; cursor:pointer" onclick="document.location='http://www.website.com/'"></div><br /></div><br />

The bottom line is that when problems seem complex, the main key is not to panic but to walk away from it for a few minutes and come up with a solution. At first glance, I became quite frustrated, but I turned to work on something else, an hour later, the solution hit me. Hope this helps you as well.

Labels: cms, CSS, Web Design, Web Searches