Results tagged “web” from KPAO

GreaseMonkey is one of those tools that at first seemed frivolous, but now that I've been using it, I can't imagine browsing without it. It puts me in control of the web sites I visit. If a site is doing something annoying, a simple tweak to the CSS fixes it up nicely.

In the course of writing a script to remove the annoying "Next Story" panel that flies in from the right at the bottom of a NYTimes story page, I found a simple yet powerful function: GM_addStyle

Previously I had been jumping through hoops using getElementById, getElementsByTag with a for loop, and all other sorts of crazy DOM walking tricks to get references to HTML objects. But GM_addStyle makes it really easy. It simply creates additional CSS style declarations on the page, allowing you to override the existing styles.

Be sure to include a !important modifier after every style declaration so you can override styles applied at the element level.

If you want to see some of the scripts I've created, check them out on the Dave Cortright GreaseMonkey User Scripts page.

Oh, and here is the entire script needed to remove the annoying NYTimes fly-in panel:

GM_addStyle("#upNextWrapper {display:none !important}");

This is a good idea. A simple version of the Wikipedia web site. It is written using simple words and short sentences. This makes it easy for people who do not know very much English to read. It is good for people learning English.

I am trying to write using the simple English rules. It is hard. I want to use longer words and sentences. But if I work hard at it, I can find a simple word to use instead.

Click here to go to Simple English Wikipedia.

On a tip from Pete in the comments of my previous post on credit card logos, I headed over to Brands of the World. I found vector versions of 3 of the 4 credit card company logos.For completeness, I created the AmEx one myself in Illustrator (so it may be a bit off from the real logo). You can download the set of all 4 vector credit card logos in this ZIP file. Enjoy!

I was working on a shopping cart UI recently, and I was shocked by the dearth of hi-res credit card logos out there. Not only that, but there are a lot of previous brand logos kicking around out there. You think with all the e-commerce going on, the credit card companies would want to go out of their way to provide high-quality, up-to-date images of their brands. Not so. I could find nothing of the sort on any of the credit card web sites. So I created my own.

I started with the largest logos I could find (Tin Eye was a great image search tool for this), then used Photoshop to remove the compression artifacts and correct the colors. The Amex logo was impossible to fix, so I ended up recreating it in vector form in Illustrator, then applied the blue gradient in Photoshop.

Here is a ZIP archive containing all four high-res credit card logos. Enjoy. If you like them, link back to this page from your blog, Delicious, Digg, or wherever.

Update: After a tip in the comments, I compiled this set of vector credit card logos. I had to re-created the AmEx one myself, so it's not exactly right. But good enough until these companies get their act together and provide these assets on their own sites.

David Creemer wrote this post that got Reddited, spiking us into the thousands of page views for this blog. Yesterday, Seth Godin picked up on my eBay marketing post and wrote about it on his blog. Take a look at the chart of our traffic. It makes the rest of our traffic look like a rounding error.

Being a designer on a small development team means I end up in the code fixing visual design bugs. Firebug has been invaluable for this. Here are some of the things I do the most.

Right-click on anything on the web page and choose Inspect Element. This gets me to the section of the HTML source that I care most about.

Right-click in the Style panel on the right and choose Add Element Style. You can then add CSS declarations to this element and see immediately how it affects the layout of the page. If there's already a CSS block and you want to add a property to it, double-click on the white space after the opening or closing bracket.

Use up and down arrow keys in the value of a CSS element to cycle through values. So if I add a position declaration, I can use the arrow key to see how each value changes the layout. The down-side is you need a valid value in there already. undefined won't work as a starting point.

Arrow keys also work for numerical values, as long as they has specified units. Font size, margin, padding, position... you can nudge any of these values up or down using the arrow keys. It even works on an individual value within a multi-properly list (e.g. padding: 5px 10px 20px;) as long as you put the insertion point in the value you want to change.

And of course turning off a particular declaration is just as important as adding one or changing the value of one. Click in the left margin next to the declaration you want to disable.

There's a ton more in this utility, like the console for evaluating javascript expressions without resorting to alert();, and the DOM. But this is the stuff I use every day. I only wish IE and Safari had equally good debugging tools.

Many web site designers work on a Mac, yet most web sites are viewed in Internet Explorer. Hence, designers have to run Windows under a virtual machine (Parallels or Fusion) or connect to a Windows machine remotely (RDC or VNC) to test out their sites on IE.

Well no more. Some fine folks in the open source software community cobbled together a package for Mac OS X that includes the IE browser running on top of a Windows emulator. Get it from the IE 4 OS X site.

The only downside is that they are a version behind; IE 6 works, but IE 7 doesn't. It's still useful, as around 25% of people are using IE 6 to browse the web. You will probably want to test against it.

This won't prevent you from having to use one of the tools mentioned in the first paragraph to test out IE 7, but IE 6 for Mac OS X definitely makes the cross-browser debugging process a lot easier for me.

Oh, and the best way to get your designs working in IE? Using IE-specific HTML. I've given up creating the mythical cross-browser mark-up. I get it working in Firefox and Safari, then use IE-specific comments to patch things up in IE.

I've signed up for all the web 2.0 services out there like Flickr, Delicious, Twitter, Pownce, etc. Nothing has really stuck for me. But now I think I'm going for FriendFeed. They have the best model out there. Tie into all of the popular services and allow you to do basic stuff with their service too. When they add the ability to syndicate my updates out to these various services, I'll be stuck. It will be the central service to manage my vitality feed.

In case you're interested in my banal existance...
http://friendfeed.com/davecort

A recent news release from The CalorieLab ranks the US states by obesity levels. And California is 41st with a declining relative rate! Of course the actual rate is going up, but we're getting fatter at a slower rate than the rest of the country. Yay.

The graph reminded me a bit of the 2004 US presidential election results (you can draw your own conclusions from that), and that motivated me too seek other correlations and sources of nice data and graphs. What I found way exceeded my expectations: StateMaster. This site is is a treasure chest of data and graphs and correlations. Looking for a chart of oral health as measured by loss of natural teeth by state? They have it. Want to compare that rate's correlation versus energy consumption as a percentage of GDP? No problem (and just what the heck is going on in West Virginia anyway?).

Besides feeding stereotypes, StateMaster is an great (and perhaps educational) way to spend 30 minutes. But remember correlations does not imply causation (except maybe in Louisiana).

Firefox 3 has just been released, and it is really the best web browser out there. You should get it. Now. Go ahead. I'll wait...

OK, still not convinced? If any of my non-techie friends and family are reading this, install it and I will help you with any technical questions you have in using it vs. your current browser.

There are some pretty nice features in Firefox that Safari or IE don't have, but the best one is the address bar. They are keeping track of which links you visit most often and surface those at the top of the auto-complete menu as you type. They also search on all keywords in the URL and title of the page, so it's easier to get to a page in your browser history. I've always been a huge fan of weighted auto-complete lists like this; in fact my one of the designs I'm proudest of was this very feature for addressing messages in Outlook Express for Mac and Entourage. I then designed an auto-complete bar for Yahoo! Messenger 9 that greatly simplified the interface and made it a lot easier to start conversations with people both in your Messenger list and your address book.

But I digress. Download Firefox 3 now.

According to our logs, my font posts have been some of the more popular on this blog. So that got me thinking: how can I pander to the crowd and create a few more font posts to generate even more traffic? Seriously, it did get me thinking about web fonts again.

The root problem of typography on the web is current model that the browser will only render a font that is installed on the computer. Designers get around this by rendering text as images, but there are obvious scaling, localization, and internationalization issues. SIFR is a great utility for working around this -- and I highly recommend it -- but ultimately it too is a hack and is not very easy to use.

CSS 2 documents the @font-face rule, which allows designers to point to a font file on the web, thus ensuring that anyone viewing the page will see it in the proper font. However, Safari is the only major browser that currently supports this; heck, even Opera doesn't support it. Without support from IE or Firefox, this is bound to be another piece of amusing trivia, but not useful for actual web design.

But that got me thinking... Firefox does have an add-on architecture. One could write an add-on that supported @font-face. Nice, but why stop there? The designer in me wants a new system that will work with all the web sites that are already out there. What I want is a Firefox add-on that makes a list of all the fonts needed on each page, and if they aren't installed on the computer, goes out to the web and gets them. 

Google recently announced their AJAX Libs API, which enables any web developer to link to popular Javascipt libraries and let Google worry about hosting and updating. It's basically a central repository for commonly-used web resources.

So here's my grand vision (1.0): a central server that hosts the most-recent version of all popular open-licensed fonts, and a Firefox add-on that uses the font repository when the required font is not installed in the browser's OS. It turns out we don't really even need support for @font-face, though it would be useful for those who want to use a font that isn't in the central repository.

Update to grand vision (2.0): Actually there doesn't need to be a central repository, just a central index of font files. So all we really need is an open font directory server that lists all of the known ttf and otf fonts out there by name with URLs to them, much like DNS is a directory of IP addresses based on domain names.

Anyone want to take this on? Ping me in the comments if you're interested. Googlers looking for a 20% project, take note!

One of the biggest problems with serif fonts on the web, is they are visually busier than sans fonts. They simply have more complexity and details in their letterforms. But if a web design, it's often nice to have a contrasting font to help communicate different types of information, and using a serif is the most reliable way to do this.

I've found that the italic version of serif fonts are less complex and busy than their normal counterparts, and they are more beautiful too. Plus, there isn't that much italic serif used out there on web pages, so you can create a more unique look simply by going italic. Notice that in this blog I use it for blockquotes:

Passerby were amazed by the the unusually large amounts of blood.

I also use it when UI text appears where content should be, sometimes using my favorite web color for alerts, firebrick:

Sorry, no items matched your search. view all

Times New Roman is actually a quite beautiful italic, and nearly everyone has it. I also really like the new Microsoft font Constantia as a serif (and conversely, I really dislike Cambria). I'm not a big fan of Georgia either; it's a bit too big and clunky for my taste.

Constantia  The quick brown fox jumps over the lazy dog.
Times New Roman  Pack my box with five dozen liquor jugs.
Georgia  Jackdaws love my big sphinx of quartz.

As an uniformed or under-informed consumer, filtering through all the options out there is hard. A while ago when there were fewer choices, it was easy. If you needed an item, you bought the only one that was available. Now you go to the store and there are 10 or 30 or even 200 choices, whether it's a digital camera, cable TV, energy bar, or sleeping bag. So what's a consumer to do?

Seek help, of course. So you read a buyer's guide or product reviews or even read the marketing copy on the packages in the store. But while these help you narrow the field down, they still force you to make the final decision: A vs B (vs. C vs. D...). My idea is to take the filter to the extreme. So I started a new site: rated-best.org.

For every product and service category I review, I will give you one recommendation. That's right, there's no decision to make (other than whether or not you actually need this new product or service); I will have already done the work for you. Granted, you're going to have to trust me. And I have to earn that trust. Fair enough. But once I do, this site will save you a ton of time, effort, and stress.

So a single recommendation isn't going to work for everyone. That's fine. The site isn't for everyone. It's for the 80% of the population out there who has been overwhelmed by the paradox of choice and just wants the best overall product out there without having to do a ton of (or really any) work. High value, low cost decision making. And if you think I'm wrong, let me know. Write in the comments. Suggest a better alternative. You might just change my mind. :-)

Thanks for checking out the site, and I hope you enjoy the recommendations. I want to keep this open as a 2-way conversation, so let me know what products and services you recommend. I need your help in filling out the full product and service space. Thanks.

My latest project is now in public beta: AskMeGo. It's a site that lets you find other people based on a shared interest in a certain topic.

Anyone can register on the site and choose categories that they'd like to chat about, and write a brief description of their experience in that category. People coming onto the site can browse through the advisors currently online, and click to start chatting with one, or search for people in a specific category. If there is isn't anyone who has the expertise you are looking for, your can request an advisor, which posts your request/question to the community.

We support all the major IM networks, so it's pretty easy to sign up and then respond to requests as the come in over IM. We also support offline notifications, so if a particular person you want to chat with isn't available now, you can request a notification when they come online, and we will send it out when you are next both available to chat.

While online forums have given people the ability to do this sort of thing for a while, their asynchronous nature and group nature makes it a different experience than the more intimate 1:1 real-time experience we want to create. And chat rooms of course have a diffusion of responsibility that leads them to lowest common denominator interactions.

Check it out and let me know what you think. Thanks!

Other team members' posts:

• Sean O'Malley, lead product manager on AskMeGo
• Frank Cort, technical developer on AskMeGo

Domize is a great example of a simple tool that does one thing and does it really well. It lets you search for available domain names, and tells you if they are available dynamically as you type. No more submitting a form, wait, view results, and then hit the back button, select all, delete to start over again.

This site won the online film Webby for best animation, and you can see why. There's some great stuff in there. Brokeback Mountain is one of the best.

Oh, and if you want to check out the web site Webby winners, this is the link.

Depending on who you ask, there's a new blog created about every second or so. There seem to be far fewer unique and interesting things to say.

One of the most annoying usability bugs on the web is the simple lack of .focus() calls. If the page has a search bar, or sign-in form, or really any other form field on it where the primary task is for the user to type text into it, then it just makes common sense to place focus in that field when the page loads.

It's very simple too. Here's the call to use:

<body onLoad="document.GetElementByID('text_field_ID').focus();">

Yes, I'm talking to you, BankDirect.