Typography for the web
Some great links that talk in detail about type on the web.
20 Things I learned
Web X-Ray Goggles
See what the Web is made of, and re-mix it. Expose the basic components that make up web pages, simply by mousing over them. It’s like seeing into the Matrix. Web X-Ray Goggles
Courtesy of Hackasaurus.org
AlertU System
To augment our existing emergency notification system, we have joined many other colleges in offering AlertU. During an emergency, you will receive important security information in real time. AlertU offers two-way messaging, allowing you to receive and relay information from inside and outside a crisis zone.
Sign up is simple. With your cell phone, text LPC to 253788 (AlertU). Reply Y.
Firefox 4 Beta 9 Goodness
If you have yet to see what the new Firefox will be able to offer, this link includes a video and a break down of the new features. As quick overview, FF4 will now have support for SVG files used as images and SVG filters in CSS, animated transitions and transformations allowing for the animation of CSS properties. These features are in addition to the CSS 3 specifications, and in addition to the extra HTML 5 support that Firefox 4 will support. Very cool. Everything in the video is possible because of hardware acceleration, and there are some cool transitions and cool new ways to think of interacting with a website. If you’re interested, you can download the current beta of Firefox 4.
If you’re not familiar with SVG files, they are scalable vector graphics. They are essentially a text file the describe how to create a vector image or graphic. Because they are text files they are VERY small, and because they are vector they scale no problem. Other browsers have already allowed SVG files as background images in CSS. Firefox was the last bastion preventing wider use of SVG in CSS. We should start seeing them used more often in place of jpeg, gif, and png. They will not completely replace jpeg and png image types since browsers can’t handle very complex svg files very well.
Web Fonts
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
| Arial, Helvetica, sans-serif | |
| Arial Black, Gadget, sans-serif | |
| Comic Sans MS, cursive | |
| Courier New, monospace | |
| Georgia, serif | |
| Impact, Charcoal6, sans-serif | |
| Lucida Console, Monaco5, monospace | |
| Lucida Sans Unicode, Lucida Grande, sans-serif | |
| Palatino Linotype, Palatino, serif | |
| Tahoma, Geneva, sans-serif | |
| Times New Roman, Times, serif | |
| Trebuchet MS, sans-serif | |
| Verdana, Geneva, sans-serif | |
| Symbol, Symbol | |
| Webdings, | |
| Wingdings, Zapf Dingbats | |
| MS Sans Serif4, Geneva, sans-serif | |
| MS Serif4, New York6, serif |
Effective Motion Graphics and Animation
As web sites and web applications become increasingly complex, they are also becoming decreasingly static. Web sites no longer present themselves as passive, static blocks of text and images. They move on their own and in response to user actions in order to:
- Capture attention (e.g., animated banner ads)
- Provide feedback after user actions (e.g., mouseover and on-click states)
- Provide deeper levels of information and facilitate understanding (e.g., infographics that illustrate complex data, such as planetary orbits)
Unfortunately, too much of this animation and motion is gratuitous and does not serve to enhance the user experience, and in many cases it actually distracts the site visitor. Usability professionals often encounter test participants who use their hands (or even sticky notes) to cover parts of the monitor where animated banner ads appear, because the ads attract their attention and distract from the content they are trying to read. More »
Flash Preloaders
If you use a Flash animation or Flash movie on your website that is bigger than 40kb, it is generally recommended that you add a preloader to the Flash file.
What is a Flash Preloader?
A Flash preloader is a graphic indicator that tells the viewer that a Flash animation is being loaded and shows the progress of the download, More »
Sliding Doors
I will not show how to create this but I will let you guys download the psd file as a reference. I provided 4 types of colors as default, you can edit them according to your preferences. Download the psd here and I even prepared the slices for you. What you need in building the navigation menu is only a 493px X 24px image like below.
Courtesy of kailoon.com