Posted: September 13th, 2009 | Author: Kurt | Filed under: Programming | 14 Comments »
This is the first part of a series of jQuery tutorials for designers and web developers. You can automatically receive future additions to the tutorial series by subscribing to the RSS feed, or by following me on Twitter.
jQuery is a javascript framework that makes it easy to edit markup and styles on a page, build advanced user interfaces, and update data sources with AJAX (that is, Asynchronous Javascript and XML). In the words of the jQuery developer site:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Today, we’ll go over the first steps and the one major benefit of using jQuery: selecting and manipulating markup and CSS. First, you’ll need to include jQuery in your page:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// this is where our jQuery commands will soon go
</script>
...
For the course of this tutorial, I’m going to refer to a sample unordered list with two text spans. It looks like this:
<ul id="list">
<li class="listitem" id="listitem-1"><span class="smallcaps">Hello</span> and thank you for reading.</li>
<li class="listitem" id="listitem-2">I hope you like this tutorial.</li>
</ul>
Notice that I adorned the markup with the id and class attributes. That’s so I can select portions of the markup with jQuery. Remember, the id attribute should be unique, but the class attribute will be repeated on multiple elements, usually in line with an attached stylesheet. For this tutorial, though, assume that there is no CSS modifying the basic behavior with the markup.
Now, you can use jQuery to apply a style to the entire list. First, we’ll create a function that is loaded when the page is opened, we’ll select the entire list with jQuery, and apply a CSS style to make the text blue via the color attribute.
$(document).ready(function() {
// anything in here will be loaded when the page is ready
$("#list").css("color", "blue");
});
Here’s the rundown: the $() command is used to select markup or series of markup from the page. You can select elements by id, class, or element name. To select by id, add a # to the front of the id name inside the parenthesis. For instance, to select the first li in the example above, use $("#listitem-1"). Classes are selected by putting a . before the class name, and element names are selected without adding any modification.
You can use hierarchies to drill down through the markup and select specific portions of the page. The syntax is similar to XPath, where you place a > in between the names discussed above. Here’s a quick snippet partially based on the sample above:
$("#list > li") // all list items in the list with an id of list
$("div > .nav > a") // all links underneath the div elements that belong to an element with a class of nav
Once you select an element, you can apply a CSS style to them with the css(attribute, value) command. Attributes are things like color, font-weight, and display, and values are things like #cccccc, 1.2em, and inline. So, you can make the span in the section above render in small-caps with the following:
$(".smallcaps").css("font-variant", "small-caps");
Next time, we’ll walk through some of the more advanced selectors. Also, expect tutorials on AJAX and jQuery UI.
Posted: September 9th, 2009 | Author: Kurt | Filed under: Web Design | 5 Comments »
Typography is an essential part of web design, and something I know that I could do a better job with. So, I figured I would start to assembly a mini-encyclopedia on some of the elements you can use to create contrast. One of the main complaints I always here is that text is boring, but it doesn’t have to be with the proper contrast. Here’s the how-to on sprucing text up and building an interesting, text-centric design.
1. Caps
Use all capitalization to increase the emphasis on the heading. You can also use small-caps to develop the presentation of sub-heading and subheadings.
You want to avoid making long sentences that are all capitalized because it substantially reduces readability. Therefore, keep capitalization for headings and away from the body.
2. Style and Decoration
Don’t use underlining for any text that is not a link, instead, use italics.
Style combines nicely with other features, such as size, color, and weight, to create deeply textured text (that is, text with multiple effects that are different than the preceeding text)
3. Emphasize with bolding
But, don’t make everything bold. My suggestion (though I don’t always do this) is to bold the text in the heading, but to italicize text in the body.
4. Size
Sizing is the main technique used to highlight and emphasize important text. Generally, designers use large text to emphasize headings, logos, and slogans. While you can use large font to emphasize text, you can also use small font deemphasize and minimize content.
Generally, headers and logo text should be larger than body text, and non-essential text like meta data for blog posts should be smaller than the body text.
5. Direction
Turning a word sideways can create a dramatic effect. It reorients the horizontal presentation of a stream of text, and adds dynamic contrast in much the same way an image would.
6. Typeface
Generally, you can only use serifs or sans serifs on the web in order to ensure the font displays correctly on a diversity of browsers and operating systems. Of course, you can get around that limitation by using CSS Image Replacement. To do that, create the text in Photoshop, and create a heading — let’s say an h1. Set the background of the h1 to the image of the text you created, and move the plain text all the way off screen to the left so that it isn’t displayed.
The best way to use typeface for alternation and variation is to use a serif for the heading text and a sans-serif for the body text, or vice versa.
7. Color
You can use colors to emphasize and deemphasize font much in the way that you use size. The benefit of using color, though, is that color preserves and conserves space in a way that 64-point font does not. Further, you can combine size and color to further deemphasize text.
Create emphasis with a brighter color.
8. Spacing
Spacing plays an essential role in typographic contrast because it dictates the usage of space on the design. Modify and vary the tracking, kerning, and leading of text in the headings so that they are different than that of the body text. For the body text, set an appropriate line height and spacing in between paragraphs.
9. Alignment
Depending on the style and content of the design, you may want to vary the extent of ragged edges on font. Font that is justified or hyphenation looks smoother and is generally much more readable than text that is ragged. Yet, ragged text could work for large text paragraphs used for stylish effect in ragged designs. For body paragraphs, I prefer a smooth edge because ragged edges are hard to read.
It would be much easier to read through the placeholder text if it was hyphenated or justified.
Posted: September 8th, 2009 | Author: Kurt | Filed under: Inspiration | No Comments »
It’s absolutely pouring rain right now in Ann Arbor, and as I’m sure you can guess, walking to class in the rain is about the worst thing in the world. It’s going to take a lot of coffee to motivate myself to do it, and I’m sure you all need some motivation and inspiration after the long weekend. So, here’s some of my favorite coffee shop web designs, and hopefully this will caffeinate you up until you can make it to get some coffee for yourself.
Stearns Coffee
Espresso Royale
Sweetwaters Cafe
P.S.: Oh how I would kill for a Nepali Brew right now.
Metropolis Coffee
Blue Moon
Square One Coffee
Coffee Art
Remedy Coffee
Vermont Coffee Works
Posted: September 7th, 2009 | Author: Kurt | Filed under: Web Design | 13 Comments »
Easily make images disappear with this cross-browser compatible code snippet.
While CSS3 allows for a full range of effects (I’ve written some tips for CSS3 web and iPhone development), including transparency, the new selectors aren’t always compatible with a large variety of browsers. So, here’s a way to make text, sections, and images transparent with CSS.
To get around the lack of compatibility, I merely reproduce the same command in a variety of different ways. That way, if, for instance, the opacity command doesn’t work, the -moz-opacity selector might. Here’s a portion of the code snippet I used for the image above:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
filter:alpha
filter:alpha is compatible with Internet Explorer, and accepts values ranging from 0 to 100. 0 is a fully transparent element, and 100 is a fully opaque element.
-moz-alpha
-moz-alpha is compatible with Firefox, and accepts ranges from 0.0 to 1.0, in increments of 0.1.
-khtml-opacity
-khtml-opacity is used in Apple’s Safari, and in other KHTML-enabled browsers. Again, the scale is from 0.0 to 1.0, ranging in increments of 0.1.
opacity
opacity is the standard CSS3 selector. Use this when you are sure that the client or audience will be using a modern and standards-compliant browser.
Good luck making transparent images in your next web design. If you find these tips helpful, you should follow me on Twitter or subscribe to the RSS feed.
