There is a bit of an idea in our little web design world that “nobody who works on the web went to school for it.” At least, I get that feeling. Especially from little stories like these:
I have a BS in Botany, but after designing my first website on the university servers, I was hooked. Did a couple of sites for friends while working in a plant lab, and now I’m a full time web programmer and designer.
…
I had some extra time over Thanksgiving so I decided to spend it doing some recreational designing of this site. Here’s a few quick notes (I need to get back to content!):
When building a menu or other list of links, it’s generally a good practice to use display: block; or display: inline-block; so that you can increase the size of the link target. The simple truth: bigger link targets are easier for people to click and lead to better user experience.
You’ve seen this before:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>This is a way you can load a JavaScript library like jQuery directly from Google’s CDN (Content Delivery Network). You can get quick copy/paste access to these from ScriptSrc.net.
See in that above URL how it is pointing to 1.4.4 specifically? That little part of the URL can be tweaked. Perhaps you’ve seen it used that way before.
| /1.4.4/ | Loads this very specific version of jQuery which will never |
|---|
…
Ol’ Trent posted a quick tip post on using inset box-shadow for some simple yet classy effects. One of those techniques ended up with an vignette effect over top of an image. Like this:
It's really unavoidable these days, and that's good because it's awesome. Here are some choice quotes from Kenny Meyers:
Not every company is a Ruby shop. Not every company is a .NET shop. It’s my belief that 99% of the time both of these companies will need someone who knows JavaScript, and knows it well.
When people talk about HTML5, they are talking mostly about JavaScript.
And regarding frameworks and Chicken/Eggery:
CodeIgniter certainly helped me understand PHP better. jQuery gave me a good foundation for diving deeper into JavaScript.
The illustrated backgrounds that slide by with faded edges are the best part.
With all the vendor prefixes and all the new complex properties like animations and gradients, it's nice to format them so they are nicely readable. I agree with David DeSandro here that lining up the values makes for nice lookin' CSS. It would be cool if one of the "CSS prettifier" services could incorporate this.
Follow along as we use a few very simple CSS3 transitions to create a "slideup" box effect. Roll over the box with your mouse, and the title of the box slides out of the way and a more descriptive stylized box of information jockeys its way into place. This is supported in modern version of Gecko, WebKit, and Opera browsers. No Internet Explorer support yet, but no fallback is needed, the link works and the information shows as expected.
