Newer Articles § Older Articles

Kicking it out of the nest

After 2 months, the “learning project” that wouldn’t end is off my todo list. I took the H5 blog theme which is coded in HTML5 and designed a minimalist blog theme with it.

One of the things I wanted was a sidebar with columns so there are four widget areas in the theme. One in the footer, one that spans the whole sidebar and two that float underneath it and form two columns.

During the design process I found this article and fell in love with several of the color palettes. I since I couldn’t choose just one, I used several. So the there are a number of different color schemes to choose from. It’s easy to create your own, just copy one of the files in the CSS directory and replace the colors with yours. Put the new file in the directory and it’ll pop up in the pull-down list.

Allowing users to switch between color schemes meant needing an admin page. I’m not an expert with PHP but I have no problem experimenting, so I borrowed the code from another theme and customized it to meet my needs. Which is why you can also upload your own logo.

The beauty of all this is that both the themes I used were released with a GPL license that meant I could not only modify them but release the end-result to be used and/or modified by others.

If it’s accepted into the WordPress theme directory, I’ll post the link here.

Socializing

Check out the links in the sidebar for my social networks.

My Favorite App

You use Evernote for everything, don’t you? A friend asked me recently.

Well, yeah.

My account syncs with my phone and my computer and there’s web access. Nothing else I have does that. I use it for blogging ideas, a todo list, a grocery list, a wishlist, gift ideas, and pretty much any other information I want to keep track of. It’s like what the Notes app for the iPhone should have been.

There’s a built-in interface for emailing notes to friends and several ways of organizing notes. You can put notes in different notebooks instead of categories and/or use tags. The search feature goes through the full text so organization isn’t even necessary if that’s not your thing.

Recently, I started keeping my recipes in Evernote so I could check them at the grocery store. I’ve made that notebook public because several of my friends wanted to try them. I’ve also taken the RSS feed from it and they are now shared other places as well.

Evernote has put a great deal of effort into making sure your information is available where and how you like it, which makes it the most useful web service I use (Twitter is a close second.).

A new decade

It’s not only a new year but a new decade and everyone seems optimistic that it will be better that the year before. I usually avoid New Year’s resolutions (can’t break what didn’t exist) but here’s one for you.

I promise to post to this site more often.

If you’ve been here before, you’ve probably noticed that it’s had three different designs since it launched. It’s always hardest to design for yourself and as this site is the ultimate reflection of me and my work it’s been doubly hard to find what it needed to be. I’ve finally got a logo that is “me” and I’m confident that the rest of the design does what I want.

I haven’t been resting on my laurels though, I’m really excited by the possibilities of HTML5 so I created an new design for my Creative Librarian website based on the H5 Theme Template by Jeff Starr.

It’s really amazing how the combination of HTML5′s added semantic tags and CSS3′s advanced selectors make for cleaner code. I was so pleased with the result that now I want to redo the templates for this site in HTML5 ;-) .

That’s going to have to wait though. I’m almost finished with another project, another WordPress theme based on the H5 Theme Template that will be freely distributed. It has 4 separate widget areas, support for the newly released post thumbnails and several color schemes. I’m so happy with it I intend to use it on one of my other sites.

With luck, 2010 is going to be a busy year for me but I’m making it a goal not to neglect this space.

Adobe Design Center – Columns and articles from experts on web design and motion graphics

Many young web designers view their craft the way I used to view pop culture. It's cool or it's crap. They mistake Style for Design, when the two things are not the same at all. Design communicates on every level. It tells you where you are, cues you to what you can do, and facilitates the doing. Style is tautological; it communicates stylishness. In visual terms, style is an aspect of design; in commercial terms, style can communicate brand attributes.

via Adobe Design Center – Columns and articles from experts on web design and motion graphics.

I know this has been linked everywhere. But that’s because it’s hits the nail right on the head.

Systematizing the Graphic Design Process | Webdesigner Depot

Unlike other forms of art, graphic design is not just about taking paper and pen and letting the work flow.

Graphic designers have to help viewers get the message and help sell a service or product.

Creating a design for a client with little or no strategy just doesn’t work. Unlike traditional art, graphic design has to convey a very narrow message.

Developing a system for the graphic design process can help the designer achieve the best results.

Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results.

Here is a simple six-step graphic design process, which you may want to take wholesale or build on.

via Systematizing the Graphic Design Process | Webdesigner Depot.

I learned a lot of these techniques in school but a reminder never hurt.

Finally finished

I’ve been working hard on an update to the Midsouth SLA website and it’s finally done. I’d love some feedback.

How to make a widget sidebar in WordPress

WordPress is such a popular blogging application because it’s extremely flexible. It’s evolved and changed a great deal since the project was created, occasionally leading to addons and themes that are outdated.

Why Widgets?

One of the things that it seems every WordPress theme must have these days is areas where users can use widgets or small, predefined pieces of code that users can use to add custom functionality to their site. On this site I use one to list my recent tweets and another to display design bookmarks, a third links to my recent posts. Widgets are so popular because they make personalized coding easy for users. I didn’t have to worry about any PHP or javascript to use them once I set up the widget sidebar.

How’s it Done?

  1. First you create a file called functions.php in the theme folder.
  2. Then you paste in the following code:
     'Widget Bar',
            'before_widget' => '
    	<li>',
            'after_widget' =&gt; '</li>
    ',
            'before_title' =&gt; '
    <h3>',
            'after_title' =&gt; '</h3>
    ',
        ));?&gt;
    • If you’re only putting in one sidebar, you don’t have to name it but it makes it easier to keep them straight if you have multiple ones. I use two. One for my index page and one for the rest of my site.
    • To make a second (or more) sidebar, just duplicate the code and give it a different name.
    • The html can be modified to whatever you need.
  3. Now you just need to insert the sidebar wherever you want the widgets to show up (not strictly in the site’s sidebar). Just paste this code where you want the widgets, changing the name to the one you gave it in the functions.php file.
    <ul></ul>


That’s it! Just install the widgets you want as plugins and set them up under the Appearance pane.

New Toy in the Box

Typography has been a thorn in web designers’ sides for a long time. There are thousands of beautiful fonts in the world but only a dozen or so are available on most computers.

The Original

Enter the CSS font stack. Using font-family you can specify several fonts in order so that if the user’s computer doesn’t have the first, it checks for the second and so forth. But designers have always wanted more control and variety for their projects.

Workarounds


There are a couple of ways this has been handled. The first is using images for the text. The problem with this is that is takes the pages a lot longer to download. It also makes it impossible for people with disabilities like blindness to use the website.
Another work-around is a javascript, flash combo like sIFR or cufón. The first can be tricky to set up and requires the browser to have flash installed. The second only uses a font converter and javascript but results in text that can’t be selected or copied.

The New Toy

The lowest learning curve solution and the one that doesn’t require dealing with scripts is @font-face. You load the fonts on your server and link them in your style sheet. Then you can use them as normal. To give the developers credit, this has been available in Internet Explorer for years but it’s only been available in the other two most popular browsers (Firefox and Safari) in the most recent releases.
The next stumbling block is licensing. Very few fonts have been released with licenses that allow online use (font foundries are working on this).

Font Squirrel has @font-face Kits.  You browse through a list of freely available type families with web licensing and download a kit with the fonts in regular and IE’s proprietary format. You also get a copy of the license and a CSS file with the rules needed to include the fonts in your website.
I’m using Medio for the body copy and Caviar Dreams for the headings and navigation on this site. Just load the fonts on your website, include the rules in your CSS and use them in your font stacks as normal. If you want a to use a free font not available on Font Squirrel and you have a PC, Microsoft has a free application called WEFT to create an eot file from the regular files. Just double check the license. We want font makers to stay comfortable letting their creations be used.

What is Design?

Or the things that go through my mind in the car.

Design, art really, is a form of communication. Whether it’s emotions or a direct message, they are all trying to communicate something. The rules of design are like the rules of language. Line, shape, value, space, they are the constants that allow the viewer to interpret the message. Some are inborn in all humans, others are taught to us by our culture. Only once you know the rules can you break them properly without losing your viewer. An infamous example on the Internet is programmers who go back later and can’t decipher their own code. They broke the rules by not commenting properly so the message is lost.

Breaking the rules properly draws attention to a desired part of the message without obscuring the whole.

Newer Articles § Older Articles