All posts tagged ‘design’

File Under: Software, Visual Design, Web Basics
Dec
28
2009

Designers, Step Away From the Photoshop

By

In many cases, web design begins in an image editor. A designer mocks something up in Photoshop (or some similar tool) and that design is eventually translated into HTML, CSS and JavaScript to create a live website.

But why do we work this way? It violates one of the fundamental tenets of good design, that design should follow content. It also means working with static documents. You submit a design to a client, the client likes it, but wants all the corners rounded. Have fun changing the corners in Photoshop — meanwhile, we’ll be adding a single line of CSS 3 to our live mock up.

In the final post to this year’s 24 Ways (see our coverage of other 24 Ways highlights), Meagan Fisher picks up what’s become a popular idea among many of web design’s most respected voices — that web designers should do their mockups in markup. That is, start with a live HTML and CSS page to create your designs.

Citing Photoshop’s shortcomings (not to mention expense) Fisher argues that tools like CSS 3 make writing — and more importantly updating — your mockups pure code just as fast, if not faster than the old Photoshop methods.

But there’s an added benefit Fisher touches on only briefly that bears further emphasis. Working with the code from the begin gives you chance to refactor, refine and improve it before production work ever starts.

Part of the reason lies in something designer Jeffrey Zeldman once posted to Twitter, “design in the absence of content is not design, it’s decoration.”

Starting with content — whether actual content, or simply the markup of the page — will force you to focus more on structure and making sure that your design fits the site from the ground up. In our experience this leads to slimmer, more semantic and easier to maintain code. As with writing in any language, the real process is not writing, but rewriting.

Even if you’re thinking that the world can pry your Photoshop markups out of your cold dead hands, give Fisher’s piece a read and, even better, try starting with code and see what happens. For some it might mean learning a new skill set, for others merely a shift in thinking. Regardless of whether you decide to switch to this method for good, we guarantee you’ll learn something new in the process.

See Also:

Tags: , , , ,
File Under: HTML5, Visual Design
Dec
23
2009

HTML5 Makes a Great Color Picker

By

HTML5 is changing more than just websites — it’s changing the capabilities of browsers, as well. For example, a very clever use of the HTML5 canvas tag allows developer Heather Arthur’s Rainbow color scheme add-on for Firefox to extract a color palette from any webpage.

Because browser add-ons — those in Firefox and Chrome anyway — can be built using HTML, they too can take advantage of HTML5′s new tools. In Arthur’s case, that means using the HTML5 <canvas> element to load the entire web page and then use the getImageData function to extract colors.

Now it’s true there are already some add-ons (and desktop software) that can do this, but the shortcoming of most such add-ons is that they simply parse a page’s DOM and extract CSS styles to build a color palette. That works just fine — unless key page elements are actually images.

Arthur’s method of putting the page in a canvas tag and then parsing that means that all the colors are extract since the entire page effectively becomes a single, parsable image.

Of course behind the scenes there’s a good bit more going on. For example, the average web page in Arthur’s testing turned out the use somewhere in the neighborhood of 10,000 colors (think of all the shades actually present in a simple button gradient and you can see why the number is so high). Obviously, displaying that many colors would be useless. So, the Rainbow add-on uses a clustering algorithm to figure out the predominant shades on the page.

Running algorithms tends to slow down your browser, but thanks to HTML5′s Web Workers component, the Rainbow add-on is remarkably snappy. The comments on Arthur’s post also suggest some further optimizations which would make it even faster.

In the end, Arthur has created a plugin that makes an admirable replacement for some desktop software and, even better, showcases yet another possible way to use HTML5. If you’re interested in the actual add-on, head over to the download page. (The add-on is still listed as experimental, but it hasn’t caused any problems for me on Firefox 3.6b5).

See Also:

Tags: , ,
File Under: Blog Publishing, Visual Design, Web Services
Dec
23
2009

Typekit Now Offering Custom Fonts For WordPress Blogs

By

Typekit, a web service that helps designers use elaborate typefaces in their web projects, has announced an easy way to use custom fonts on WordPress.com blogs. That means your WordPress.com hosted blogs can now take advantage of Typekit’s font library in just a few clicks.

Typekit is like a YouTube for fonts. Browse through Typekit’s library of available fonts, pick one you like and cut and paste some code into your site. As we noted when we first looked at Typekit earlier this year, the service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses.

With the new WordPress.com features, you don’t even need to know HTML or mess with any code to take advantage of Typekit.

To use the new Typekit features, just log in to your WordPress.com dashboard and click on the Appearance menu in the left-hand navigation menu. On the Appearance page you’ll find a new option, “Typekit Fonts,” with a place to add your Kit ID.

To get your Kit ID, you’ll need to create an account at Typekit.com and select the free option. From there, you can paste over the code and chose from any of Typekit’s fonts.

Not using WordPress.com? No problem, there are already two plugins that make it easy to integrate Typekit into a self-hosted WordPress blog. If you’re on another blogging platform or custom site you can still use Typekit — see our earlier hands-on review of Typekit for details on how to use Typekit on your site.

See Also:

Tags: , , , , ,
File Under: CSS, HTML, Web Apps
Dec
1
2009

Zen Coding Auto-Generates HTML from CSS

By

Writing HTML can be something of a pain. Angle brackets and long tags names mean you’ll spend more time typing awkward code than your average programming task requires.

Good text editors and development environments like BBEdit, Eclipse or Adobe Dreamweaver can help simplify your HTML workload, but what we’ve always longed for is a Markdown-like way to create raw HTML.

Smashing Magazine’s Sergey Chikuyonok recently unveiled a programming tool called Zen Coding that isn’t quite Markdown-level bliss, but it’s pretty close. Chikuyonok created Zen Coding from a very basic idea: what if CSS selectors could not just target HTML tags, but also generate them?

In other words, if you’re using Chikuyonok’s tools, writing CSS like this:

div#content>h1+p

will generate HTML markup like this:


<div id="content">

   <h1></h1>

   <p></p>

</div>

Veteran coders will likely protest that there are already tools like SparkUp and Haml which do very similar things (though with a slightly different syntax). However, Zen Coding offers some nice plugins for popular text editors that SparkUp lacks, and Zen Coding isn’t language-specific like Haml (which is primarily of use to Ruby on Rails developers).

Under the hood, Zen Coding accomplishes two things. First, it expands abbreviations written the form of CSS selectors, and second, it’s able to match tag pairs so it correctly closes your tags.

Consider this somewhat more sophisticated bit of code:

html:xt>div#header>h1#logo+ul#nav>li.item-$*5>a

A mere single line of code. When run through Zen Coding’s expander and tag matching tools, it becomes a basic HTML page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

   <title></title>

   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

</head>

<body>

   <div id="header">

       <h1 id="logo"></h1>

       <ul id="nav">

           <li class="item-1"><a href=""></a></li>

           <li class="item-2"><a href=""></a></li>

           <li class="item-3"><a href=""></a></li>

           <li class="item-4"><a href=""></a></li>

           <li class="item-5"><a href=""></a></li>

       </ul>

   </div>

</body>

</html>

The syntax is a little more complex than simple CSS selectors. For instance, the item-$*5 bit in the example above is used to generate five <li> tags, but it won’t take long to commit the few quirks to memory.

The easiest way to wrap your head around the power of Zen Coding is to watch the demo movie that Chikuyonok put together.

A new way of writing HTML code using CSS-like selector syntax

Our only real gripes with Zen Coding are that it lacks HTML5 support and insists on XHTML syntax. However, since HTML5 isn’t a standard recommendation and there are only a handful of tags where the difference between XHTML and HTML is important, we’re willing to overlook those deficiencies.

If you’d like to give Zen coding a try, there’s a sample online editor available, just use ctrl+, to expand your selectors. If you like Zen Coding’s approach, there are a few plugins available for text editors. Head over to Smashing Magazine and grab a plugin for Aptana (cross-platform), Coda (Mac), Espresso (Mac) or Emacs (cross-platform). The abbreviation expanding tools also work in plugins for TextMate, TopStyle, Sublime, GEdit and the editArea online editor.

See Also:

Tags: , , ,
File Under: UI/UX, Web Services
Nov
25
2009

Google Tests Redesigned Search Page

By

Google’s new look? The search giant is testing a revamped results page. Click the image for a larger view.

Google appears to be testing a possible redesign of its iconic search page. Whether or not the new prototype will ever become official remains unknown, but thanks to some clever JavaScript you can check out the new look today.

The Google watchers over at Google Blogoscoped have found a snippet of JavaScript you can paste into your browser’s URL field which will activate the new look. Because the JavaScript code sets a new cookie, you’ll most likely need to log out of your Google account before it works.

Once the cookie is set, refresh the Google homepage and you’ll see the changes. The search buttons have become blue and the overall look is a bit like that of Google Wave. More significant is the redesigned search results page (seen above) which features an always-on sidebar for narrowing search results by type, date and view.

The brighter, more Wave-like look of the prototype doesn’t bother us, but we’re not so sure about the sidebar, especially given that the same options are already available in the infinitely more compact menu that runs along the top of the page.

There is one new search option in the sidebar that you won’t find on the current Google page — the ability to see results from online forum sites.

The good news, should the new look utterly disgust you, is that so far Google hasn’t even mentioned the new look (and had not responded to our inquires when this story was published) let alone taken any steps toward making it official. Given Google’s track record of beta testing, we suspect the redesign will be thoroughly and publicly tested before it goes live, if in fact it ever does.

See Also:

Tags: , ,
« OLDER POSTS