Web Design

« Older Entries
Newer Entries »

Google’s Chrome Not Exactly Pure Gold

Tuesday, September 2nd, 2008

I was leery of Google’s new web browser. What could they possibly add to it that would make it more attractive than Firefox?? Being a web developer, I am a die-hard Firefox fan, because all the glorious plugins make it so dang powerful! Fireshot! Developer Bar! Firebug! These are my favorite, for sure, and they make building a website a much easier experience. If only I didn’t have to test everything in IE6….

so when the mythical Google Chrome was finally released today, I decided to give it a whirl, but with a negative attitude and a half-smirk on my face. Google just can’t get into everything, right?? So pointed my firefox window to www.google.com and started looking. And looking. You would think since a trillion people a day (no source cited for this), and looking to get into everybody’s computer even further, you wold think Google would have a link right on the home page. Not so. But I was determined, and eventually found it. It wasn’t exactly hidden, but it could have been more obvious. 

I downloaded the program and fired it up. First thing about it which I noticed - and liked, was the extremely light user interface. Since I make websites all day, I’m always looking to make a site’s UI easy and intuitive, but also not get in the way of the content. One thing which actually does bug me about Firefox is the very heavy toolbars - they just take up so much space, reducing vauable real estate. I hadn’t really thought about that before, until now… Hmm…

First things first, I decided to check out the CSS3 Acid3 test, just to see how this baby works out for us developers. Well, I’m going to guess a hundred million other designers were trying to do the same thing, because the site kept crashing. I couldn’t pull up acidtests.org on any browser! I was then pleasantly surprised! When the site failed to load, Google offered to show me a cached version from last week!! That was a nice feature. 

Speaking of developer tools, Google does have some handy JavaScript viewing and debuggin tools. I wish there was the same for CSS, but, alas. I enjoyed the link, “stats for nerds.” I guess I am. The options section was overly simple, but not very descriptive. You just have to poke around to find what you’re looking for.

The omnibar is another nice feature. This is basically the amalgamation of the address bar and the search bar, into one input field. It seems obvious, and indeed, many browsers will work that way, depending on your plugins. It is nice to have one out of the box.

A couple really annoying bugs: my mouse wheel only worked to scroll a page DOWN! I could not scroll up with the wheel. Also, some pages that prompted for a user id and password before page load would then mess up loading the images on the site. Some would only load half way, others not at all. It was particularly annoying when I tried to load my review site. Not a single image loaded!! Kind of a bummer when you’re trying to view site mockup designs. Another annoying bug, is the browser would randomly lose my login status on certain sites - like now, while I’m trying to save this article…

Since the platform is open-source, I’m certain great plugins will crop up. The bugs mentioned in this article are certainly minor and will be ironed out soon, I’m sure. The UI is nice and minimal, if not glaringly Blue (capital “B”). (I wish it would have incorporated more of the common shortcut keys, though, like full screen.) I couldn’t load the acid test, but all css sites looked as they should.

In short? It’s a pretty good first-attempt, but I don’t see a need for it. I still need some more convincing.

 

ShareThis

Posted in Web Design | 2 Comments »

“Catch and Release” launched

Sunday, June 15th, 2008

Catch and Release Artwork has been launched! Jim Tingey creates beautiful watercolor illustrations of your catch, including details of the location and fish stats. Great way to memorialize a catch without doing taxidermy, or uber-expensive sculpture.

For such an industry, with all the fancy gadgets and gear, and high-tech gizmos, the “outdoors enthusiast” field has pretty low-end web sites. Odd.

I did the design of the look-and-feel for this ecommerce website. (liQuidprint project.)

ShareThis

Posted in Graphic Design, Web Design | No Comments »

CSS: Tevi’s Hackless Image Replacement Technique, ‘THIRT’

Wednesday, June 4th, 2008

CSS Image Replacement - the purpose: style textual content with a background image, and visually remove the text, so we see the image in stead. The text is still there in the code, readable by search engines, screen readers, or any browser that does not support CSS (text-based, like some handheld ‘puters).

None of the methods out there satisfied me. There was extraneous code being written, whether it be extra span tags, or funny hacks to get it to work in some less-compliant browsers. A major downside to the common Fahrner Image Replacement technique, where you hide the text inside a span tag with display: none; is this is not very helpful: the text is not being read by screen readers! (Search engines - as of the writing of this article - do pick up the span content as long as the css is being written and linked from an external style sheet.)

Stuart Langridge and Seamus Leahy came up with an “almost there” approach. Check out Stuart’s link:
http://www.kryogenix.org/code/browser/lir/. The basic technique is to bump text out of the viewable area of a div with top-padding and by setting the height of the div to “0″. No extra markup, all css, accessible, beautiful. However, in order to get this work with early versions of IE, due to their incorrect box model, is to hack the code.

I try to avoid hacks. And, so, without further ado, I present you with ‘THIRT’! ‘Tevi’s Hackless Image Replacement Technique’!

It’s simple: bump the text out of view with excessive line-height! Keep padding at 0, and set the height of the div as you want it. Line height to 3 or 4 times the actual height, overflow: hidden, and bam! Ok. here it is broken down. Sorry for my excitement.

ul#topnav a#blog {
display: block;
height: 100px;
width: 41px;
background-image: url('/images/nav-blog.png');
line-height: 330px;
overflow: hidden;
}

Going through the code above, line by line:

  1. Set your div, or in this case anchor to “display: block” so you can safely set dimensions on it.
  2. Declare your height and width. (Out loud is not necessary)
  3. Your background image - the image which we will see in place of the text (you may want to do background-position or no-repeat, as well)
  4. your very excessive line-height attribute. This is what makes this technique work! Make sure it is very excessive!
  5. overflow: hidden; is actually what makes this work. Do this, and your text will be safely out of view!

ShareThis

Posted in Web Design | No Comments »

« Older Entries
Newer Entries »