LanaOlogy: Web Design Delights

Want Some Sprites?

No, not that kind of Sprite! CSS Sprites can be used to create background-image-based navigation links, among other useful purposes.

One technique for using CSS Sprites for navigation that comes from A List Apart is to create an unordered list of the links in HTML, use CSS to assign it a “before” background, position the links appropriately on the list image, & configure the “after” [:hover] states with the new link backgrounds. This creates a navigation image that appears complexly interactive when cursor rollover occurs.

An example of CSS Sprites in action can be viewed here.

Web Pages That SUCK!

Upon learning about good web design practices, I was curious to see some websites that didn’t use them. And I lucked up on two great examples of websites that make me want to cling to good design practices for dear life, thanks to http://webpagesthatsuck.com…

http://art.yale.edu/

Oh. My. God. I’m furious that I even clicked on the site. The background is terrible & poorly designed. I think the designer fancied himself artistic, but…no. The whole thing is aligned to the left in what I guess should be an ice design, but it fails so miserably because the page reads like a Microsoft Word document straight from hell. Waaaay too busy to even bother, the contrast is flawed, the color scheme is basically nonexistent, and I have no idea why that green gradient box with the main text exists. I understand this is supposed to be for an art school, but the animated rainbow border belongs on a site for Gay Pride more than it does here. Why is the contact information centered…at the top…with a transparent background and orange text?! WHO CAN SEE THAT WITHOUT INTENTIONAL EFFORT?! Don’t even get me started on the navigation…it’s the best element on the page, but you notice all the horrible design & busy junk before you even realize that it’s there. YALE?! Come. On. Ewwwwww.

http://www.vacaway.com/

Why all the .gif images? Maybe someone told this designer that everything on the page was supposed to move or something. It isn’t fancy, y’all. It is actually making my head hurt to look at all this. The graphics are so poor that I first assumed this HAD to be created back in 1996…we just don’t do things like this anymore! It’s so cheesy & weird. Not to mention poorly constructed, as a chunk of the navigation is concealed by that super-corny logo. No thanks, Vac-Away. I want no parts of whatever you’re selling…which I couldn’t bother to investigate, due to the page being so hideous. Must ALL the text headings be animated? Perhaps the designer is 12…in that case, great job little buddy!

Web Site Case Study: Web Design Best Practices

Currently in my class, we are creating a web site for a fictitious coffee house called JavaJam to learn how to build a website. Below are some quick notations regarding JavaJam’s use of Web Design Best Practices.

1. The JavaJam site utilizes hierarchical organization. This is best for the site
because it features distinct, unrelated categories of information split into pages,
each splitting from the home page.
2. Three Web Design Best Practices used in the JavaJam site include using alt text
to describe images, techniques of web-writing are used (bullet points), and color
is used consistently. Three design practices that could be better implemented are
that the content should provide links to useful sites (such as the featured artists’
websites), and a site map or breadcrumbs can used for further accessibility. I
would also improve the site by adding Flash elements.

Focus On Web Design: Okayplayer

Web Research & Focus On Web Design

There are many XHTML tutorials available for free all over the web! Here’s some info on two of the best ones I’ve found:

Jessey.net (http://jessey.net/simon/xhtml_tutorial/) features a simple five-part tutorial that is aimed toward beginning coders. Featuring screen shots and easy-to-read text examples, I’ve found this site to be a great companion to my regular class study!

About.com always features a plethora of links & information about nearly any given topic. XHTML is no exception! About.com’s XHTML Tutorial Webpage (http://webdesign.about.com/od/htmlxhtmltutorials/HTML_Tutorials_XHTML_Tutorials.htm) has many links describing XHTML in depth—even design resources and class links! Great for any skill level coder, I’d recommend this site to anyone wishing to gain a better insight into this topic.

This week’s Focus On Web Design looks into a very important element of coding web pages: the actual design itself! Lets look at two pages here—one with great design, and another with not-so-great design…

GOOD DESIGN: http://www.pointlesscorp.com/

I can’t say enough great about this site! The graphics and use of flash are right on the money, the navigation is simple, big & quirky, and the page loads quickly with all the information neatly arranged. It instantly catches your attention & leaves you investigating the site well after your initial click.

BAD DESIGN: http://www.zincbistroaz.com/

If the web presence is on the same caliber as the food, I’d steer clear of this restaurant! First the flash elements take too long to load, then there’s this music that I guess is supposed to be electronic fusion but really seems lame & unauthentic. The navigation is also weird at best…eggs? Really? Why on earth did it take three minutes to actually comprehend the navigation at work on the home page?!

HTML5 Studio--Check Out The Future!