Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs

Images increase download time for end-users and workload for web designers, slowing down the time it takes to fully develop a concept for clients. Furthermore, images can add unneeded clutter and increase search-engine blindness, detracting from the principle of simple web design.

You don’t need images to create a deep and beautiful web design. Instead, you can use CSS, typography, and optical effects to do many of the same things and instead only use images when they are clearly needed. If you like these tips, you should check out the bonus tips for five more ways to stop using images in web design.

Before we get started, there is one potential downside to these techniques that needs to be mentioned. Because of the (awful) state of standards-compliant browsers, not all of these ideas will work (or look the same) in all browsers. Therefore, there may be times when you might opt to use an image instead when you want an element to be sure to render the same across all browsers. One way to test browser standards is via the Acid3 test. And, you can see how your design will look in a variety of different browsers with BrowserShots.

(more…)

Using Web Fonts in CSS3

Currently, you can only use about 10 to 15 types of fonts on the web without having to create time-consuming and non-Google friendly images. In order to promote and further the idea of simple web design, it would be better to use plain text. Thankfully, you can use CSS3 web fonts along with other typography techniques to dress up the font on your website.

As a disclaimer, remember that CSS3 is not universally supported yet by all browsers, so use the following techniques with caution. Off of the top of my head, I believe that this is supported in Webkit (Safari, Chrome) and Firefox, but if I’m wrong let me know in the comments.

Import Web Fonts Into Your Design

With CSS3, you can import fonts into our design much like you import video, images, text, and scripts. First, find a font on the web that you would like to use. Generally, it has to be publicly accessible in a TrueType format (.ttf). For this example, I’m going to use the Kimberley TrueType font referenced recently on A List Apart.

To import the font, merely reference it as follows in the stylesheet:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.princexml.com/fonts/larabie/kimberle.ttf) format("truetype");
}

The @font-face selector indicates that you are declaring a font for use in the stylesheet. The font is named (anything you like) after the font-family: selector. The path to the font is referenced via the src: attribute.

Now, you can use the font in CSS as you would any other font by using the name you previously gave the font.

h1 { font-family: "Kimberley", sans-serif }

You can use this pattern to import a huge variety of fonts without hosting any of them on your site or by creating cumbersome images. One issue, though, is copyright issues attached to fonts you find on the internet. You should either ask permission before using a font, or find a font that is Creative Commons friendly.

Interested in learning more about simple web design? You can follow @simplrdesgn on Twitter, join the Cherrysave Facebook page, or read along by subscribing to RSS.

The Semantic Web: Speaking to Humans With Readable Code

The semantic web consists of teaching computers to understand the meaning of web content. You should earn the advantages of writing on the semantic web when working on web development projects because search engines (and people) strongly rely and prefer code that makes sense intuitively instead of having to read pages of documentation and confusing inline comments.

What is the Semantic Web?

So what exactly is the semantic web? It turns out that it is difficult to define it simply, yet I’ll try anyway. The semantic web is best described as structured data. The main goal is to take the structure that the web and some applications have as a whole — URLs, categories, tags — and apply them to the data represented by code. That is, the semantic web envisions an interconnected web of data.

Many consider the semantic web to be a founding anchor of Web 3.0. British engineer Tim Berners-Lee envisions a web with SVG graphics built on a well-organized and self-descriptive (tagged, friended, categorized) Web 2.0. The semantic web promises to organize the world’s information in a dramatically more logical way.

Riding the Semantic Web: Organizing Your Code in a More Cohesive Way

The current HTML schema doesn’t have much support for the semantic web. In fact, one of the few ways you can tell computer systems about the actual content of your page and not just the display properties is through the meta tags. Using that, you can tell search engines about things like the title and keywords associated with a piece of content, but you can’t do much more than that.

Yet, there are some things you can do with the semantic web when you code to take advantage of semantic principals. And the best part is that they tend to be quite simple. Here’s a few examples of some of the things you can do:

• For headings, use a heading tag (h1, h2, h3, etc...)
• For paragraphs, use a paragraph tag (p)
• For lists, use a list item tag (li, ol, ul, etc...

Like I said, these are really simple principals, yet it can make a huge difference in the readability and clarity of code for both web developers, computers, and end-users. For example, look at the difference between the following two snippets of code:

Non-semantic

<span id="heading-1"><font size="8" color="black"><strong>Heading 1</strong></font></span>

Semantic

<h1>Heading 1</h1>

Obviously, the second snippet is much more simple for people and for computers (read: search engines and data miners) to read, and they should (or could) look about the same in a web browser.

The Advantages of Writing in Semantic Code

There are at least two advantages in taking advantage of the semantic web. First, computers can how understand the content of your page and make use of that. For example, in the current iteration of HTML, you can tell search engines the title and content of your page with the meta. In the future, Amazon could tell computers, in code form, the type and style of the products on their web page. The books would be classified as such, dramatically improving the categorization and usability of the internet. The second benefit is that it will improve communication between web developers and designers. Engineers will instantly understand what the code is attempting to model much more so than if one was using the common universal tags.

That’s all well and good, but I’m sure you’re looking for a better way to currently take advantage of the semantic web. XFN (XHTML Friends Network) uses data in the rel attribute to describe relationships between people. For instance, I could link to my friend Creed, whom I’ve met in real life, in the following way:

<a href="http://www.creedsblog.us.creedsthoughts.office.doc/" rel="met friend">

From the rel tag, you can see that I’ve met Creed, my friend, in real life (when he was stealing things out of my garage). The key to the semantic web, though, is that computers should be able to easily parse the meaning of those friend relationships. You can use a CSS snipet to do that:

a[rel~="friend"] {font-weight: bold;}

That will bold all of your friends via the stylesheet on a given page.

Of course, these are merely the beginnings of the semantic web. There will be undoubtedly more ways to classify and organize data on the web. Keep in touch with these updates by subscribing to the RSS feed or following me on Twitter.

The Encyclopedia of Typographic Contrast

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.