Feature
Post

Category
Design

Styling photo captions with CSS

Sure, some photos are self-explanatory, but most photos are best served with text captions. It’s true for traditional media like newspapers and magazines, and just as true for blog posts and web articles. Here’s a quick tip on using photo captions and styling them nicely with the magic of CSS:

Now I won’t delve too deeply into how to code your captions. Some people do it this way:

<p><img src=”image.jpg” alt=”image” /><br />Caption text here</p>

But apparently the proper, semantic way would be to use a definition list, like so:

<dl>
<dt><img src=”image.jpg” alt=”image” /></dt>
<dd>Caption text here</dd>
</dl>

where:
dl = definition list
dt = definition term
dd = definition definition

Got that? Okay, let’s prettify it with some CSS. I want to caption a photo of a nicely sharpened pencil. Here’s the screenshot of what I want:

tutorial-captions

And here’s how to accomplish it:

HTML:

<dl>
<dt><img src=”images/pencil.jpg” alt=”Sharp Pencil” /></dt>
<dd>I love the smell of freshly sharpened pencils</dd>
</dl>

CSS:

.photographs dt {border:1px solid #ccc;font-size:82%;}
.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

Me, I like my captions plain and simple- I think the photos should stand out more than the captions. But once you know what you can do, you can basically go wild. For example, replacing the dd style with this:

.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

will give you this:

tutorial-captions-2

You gotta love CSS.

How do you like to caption your photos?

Feature
Post

Category
Webapps

Five Free Apps for a New PC

Did you get a new PC for Christmas? Blazing fast, with all the bells and whistles, perhaps with a shiny new widescreen monitor? I didn’t. What I do have is a brand spanking new Windows XP partition on my trusty old Macbook (thanks to Bootcamp).

Now I’ll admit: it was a fresh copy of The Sims 3: World Adventures, which runs much better on Windows than OSX, that got me here- but now that I am, I want to be able to do serious work on my Windows partition- with the help of these five apps, all fabulous and all free:

Notepad ++

A good text editor is probably the first thing I install on any new machine. Notepad Plus Plus has everything I need, from tabs to drag ‘n drop to macro recording. I love how lightweight it is, too- nothing fancy, but gets the job done wonderfully.

XAMPP

This was a no-brainer: with the heavy local WordPress testing I do, I use XAMPP on my Mac every day. That this gem of an app, which includes Apache, MySQL, PHP and Perl, comes in a Windows version is something I’m truly grateful for.

WinSCP

Many people like Filezilla, a powerful and free FTP program, but I’ve always had a thing for WinSCP- it reminds me of back when I was doing all my work on a Pentium II (and paying a lot of money for 5 gigabytes of hard disk space!) It supports SFTP, has an integrated text editor, and stores your session information.

PHP Designer (Personal)

Among these apps, PHP Designer is my latest “discovery”- and now I have trouble imagining how I ever got along without it. It’s an IDE (or Integrated Development Environment) that makes PHP coding- even for non-programmers like myself- a breeze. It features a clean and simple interface, and wonderfully intuitive menus.

ScreenHunter Free

On OSX I rely on Snapz Pro X for my screen capturing needs, and was ecstatic to find ScreenHunter, a free and truly fabulous screen capture program for Windows. Installs in seconds, and does its job beautifully, allowing you to do everything from choosing what to capture, to where to save it, and more.

What are some of your favorite freeware apps?

Feature
Post

Category
Design

Finding Inspiration Everywhere

Sometimes, finding inspiration can be hard. Whatever sort of artist you are, I’m sure you can relate. If writers call it a “blank page” moment, then for web designers it’s a “blank Photoshop canvas” moment. Suddenly, none of your thousands of fonts work; no color combination looks right; everything just seems tired or commonplace- and you’re on a deadline.

When this happens, stop working, and go find some inspiration. And no, you don’t have to wait for it to strike. Here are some places to find inspiration:

Magazines & Newspapers

You probably already find inspiration in magazines like ID, but you’ll be surprised at how many design ideas you can pick up from other, non-design related magazines. For example, home decorating magazines are a great place to find harmonious color combinations. Or, if you’re designing a website targeting female teens, pick up a copy of the latest Seventeen for ideas. I love looking at the various ways they lay articles out in newspapers, as well.

Plants & Flowers

Got some green around you? Whether it’s a well-landscaped park, a wild and untamed patch of garden, or a simple potted daisy, the “design” of a plant or flower is nothing short of amazing. Greens, browns, yellows- these are earth colors that are rarely muddy or depressing, because- well, it’s nature.

The Sky

Whatever time of day it is, there’s always something interesting going on in the sky above you. It’s easy to think of it as blue, but take a closer look: there are so many shades of blue, as well as a lot of other colors, in the sky. Is it cloudy? Marvel at the opacity of the clouds, the wisps around their edges. At night, look up at the stars- notice their natural shine, and how perfectly spaced they are in the vast darkness.

Light & Shadow

The best artists know that it’s all about light. Sunlight is wonderful- go stand in your driveway, and watch how the sun lights up the world around you. Pay attention to the shadows, to the color changes that occur when something is lit from a certain direction. Artificial light is also interesting: watch how a lightbulb casts glows around it; turn off the lights and shine a flashlight on the ceiling with one hand, while making shadows with your other hand. Or sit in complete darkness, and see how your eyes can still adjust to find light along the edges of objects in the darkness, creating a symmetry of light and shadow.

See, inspiration really is everywhere… even when you simply close your eyes. What inspires you?

P.S. A Merry Christmas to all of you who celebrate it! Right after posting this, I’m off to spend two days in the mountains with our extended families, to enjoy the cool Christmas air and hopefully roast some chestnuts on an open fire. Just the thought of it is inspiring.

Feature
Post

Category
Interviews

Contemporary and Elegant: An Interview With Tanya Merone

Tanya Merone is a graphic designer based in New York. She professes to be deeply in love with her trade and it shows in the artistry she pours in her work. She specializes in elegant, creative designs – her trademark in the design world. More →

Feature
Post

Category
Design

Make-It-Yourself Christmas Gifts for Designers & Developers

With Christmas just four days away, the flurry of gift shopping is well underway. One of the advantages of being a designer or developer, however, is that we can make stuff ourselves: we do it all the time, after all, and we’re usually masters at pretty packaging. If, like me, you prefer to avoid the madness of the malls, why not consider one of these make-yourself Christmas gift ideas this year?

2010 Calendar

Nearly every bookstore and stationer has dozens of these in stock at this time of the year, and they wouldn’t ordinarily be very exciting gifts- except if you design them yourself. The secret is to stay away from the printed-on-a-crappy-home-inkjet look, and get them bound professionally. Easy options are self-publishing services like Lulu, or using the built-in Calendar function of iPhoto. More serious designers will want to find good InDesign Calendar Templates. For inspiration, check out Dooce’s very popular 2010 Chuck Calendar.

A Website or Logo

Be careful with this one: giving someone a free website or logo for Christmas can be tricky. For websites, you’ll want to specify exactly how much work you’ll be doing- if it’s just design and development, if hosting and maintenance is included- and if so, for how long- etcetera. If you do choose to give one of these, design and print up a nice one or two page “coupon” to be redeemed. And speaking of which…

Coupons!

My husband and I used to give each other coupons all the time when we were dating. They cost almost nothing to design and print, and can definitely be “gifts that keep on giving”. Find ideas for Christmas coupons you can design and give here.

Art: Illustrations or Photographs

Whether you’re particularly handy with Illustrator, or prefer to sketch with a pen and paper, original artwork is always a lovely present. An illustration of your recipient’s beloved pet, for example, is a great idea- or, you’re more of a Photoshop expert, fix up a photo and frame it for them. I once gave some neighbors of me a photo I had taken of their house in an inexpensive frame, and to this day they talk about how much they love it.

These are just some ideas of things you can use your creativity for this Christmas. Hopefully, you can think of others- you’ll be amazed at how much you can do with great design skills and a good printer.

What are you creating for Christmas?

Feature
Post

Category
Design Focus

Friday Focus 12/18/09: Blueprints

Here’s another interesting look that’s being used in websites lately: blueprints. See how they’re translated into this week’s featured websites on Friday Focus.

Designs of the Week

Alex Swanson

I have some issues with the spacing in the footer boxes but other than that, good site.

Blueprint Design Studio

It’s a good idea to add real elements to reinforce the blueprint feel. I also like the animation when you hit the “Next Project” button.

Creative Joomla Design

More of chalkboard doodles than a blueprint imitation, but it fits. I really like that the email subscription form blends in, but it’s a little too blended in. Overall that’s the main issue with this site: everything looks the same, it’s hard to tell that there are actually links and clickable elements in it.

Pat Dryburgh

Here’s one going for the clean, subtle look. With blueprints it usually means white on blue, or light on dark in general, but it doesn’t have to be that way all the time, as this site demonstrates.

Alcomi iPhone Game Development Company

Taking the blueprint look to the third dimension is another great idea. Also, although not shown in full here: I like that the social media icons in the footer are flowing to the left (whooshes and all) instead of lined up side by side.

Social Media Weekly

Project ManagementBiz Ladies 09: Project Management
“Today’s Biz Ladies post comes from Tiffani Jones of Second and Park. Tiffani runs a copywriting and content strategy business as well as a web design agency and is here today to share the ins and outs of successful project management.”

ProgrammingjQuery Masonry
“Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats.”

Feature
Post

Category
Interviews

Randa Clay On Breaking Barriers

Randa Clay is a 39-year old mother of two noisy boys. She used to be an opera singer too! However, she took a sharp career turn when she left her cozy marketing job six years ago to build a name for herself in the design industry. More →

Feature
Post

Category
Design

Favorite Five: Free Festive Fonts

It’s about ten days ’til Christmas, and between marathon cookie-baking sessions and shopping like a madwoman, I’ve been on a quest for fabulous and free festive fonts! Sadly, in this quest I’ve encountered many hideous ones- badly drawn, sloppily put together, with maybe a few sprigs of holly added as an afterthought here and there. And with the Holidays hectic enough as it is, I thought I’d help you along with this list of five lovely free fonts, perfect for Christmas cards, gift tags, and giving your seasonal project that festive touch.

Royal

royal

Truly elegant, Royal is a blackletter font that works wonderfully in classical styles. Will add a regal touch to your design, and one you’ll want to keep in your font collection even after the holidays are over. Download Royal now »

Christmas Cheer

christmas-cheer

There are dozens of Christmas-themed dingbats out there: this one’s my pick. Includes some beautifully rendered images, and quite a few pre-made fancified phrases (such as in the image above)- which means, yay, instant greeting card! Download Christmas Cheer now »

Pfeffermintz

pfeffermintz

I saw this and thought “Candyland“, which of course immediately endeared me to this font. Love that game. That aside, Pfeffermintz is a good font for kid-related design work, with nice thick borders and easy to read letterforms. Download Pfeffermintz now »

FT Rosecube

ft-rosecube

I like to think that Christmas isn’t completely commercialized. It doesn’t have to look that way, anyway- and this font is perfect for giving your project that hand-made, non-commercial look. Download FT Rosecube now »

Monbijoux

monbijoux

Here I go saving my favorite for last again. Monbijoux, which literally means “my jewels”, is a jewel of a font, being a little bit retro, a little bit romantic, and absolutely gorgeously drawn. Download Monbijoux now »

Do you use festive fonts?

Feature
Post

Category
Code

Enhance Your WordPress Themes With Shortcodes


When WordPress 2.5 was introduced in Spring 2008, one of the biggest innovations and additions was the WordPress Shortcode API. Shortcodes have become a regularly used feature by designers and can help to reduce the number of plugins used. In this post we look at some shortcodes you can implement and use to enhance your WordPress themes.

Getting Started With Shortcodes

A shortcode is a php function which you can add to the function.php of your theme. Via the trigger add_shortcode() you can define the name of your shortcode and how to call the function in the editor. Add this code immediately under the php function in your function.php.

1. Adding A Generic Link

The easiest use for shortcodes is probably to use a shortcode for content you publish regularly like a link to your subscription page.

Sample Code

function subscribe() {
    return '<a href="http://www.devlounge.net/subscribe">Subscribe to Devlounge</a>';
}
add_shortcode('sub', 'subscribe');

What we did in this example was to define the shortcode sub and link it to the function subscribe. Now if you use the shortcode [sub] in the text editor it will automatically replace it with the link Subscribe to Devlounge in the entry.

2. Adding Pullquotes To Your Theme

Example of a pullquotePullquotes are a well known design element in print design but often forgotten online. Especially when posting long entries, choosing an ad rem quote can highly improve the readability and interest. The screenshot on the right is a perfect example of the visual effect pullquotes have.

It is very simple to add pullquotes to entry with a simple shortcode, similar to BBCode.

Sample Code

function pullquote( $atts, $content = null ) {
	extract(shortcode_atts(array(
		'float' => '$align',
	), $atts));
   return '<blockquote class="pullquote ' . $float . '">' . $content . '</blockquote>';
}
add_shortcode('pull', 'pullquote')

You can now use the shortcode [pull]your quote here[/pull] in the editor when writing entries.

Do not forget to style the new code in your theme’s CSS. In this example the shortcode [pull] returns <blockquote class="pullquote">.

Sample Code

blockquote.pullquote { width: 220px; padding: 5px 0; border: 0; font-size: 18px; line-height: 150%; }

As you can see in this example, shortcodes can easily be used to use different styling in your entries without having to write HTML. This can be very handy for multi-authored blogs, not every author knows HTML, and makes shortcodes a genuine alternative for bbcode. It is very easy to provide a shortcode to use @font-face in your entries.

3. Adding A ‘Twit This’ Image/Link

Twitter is very practical to promote your entries and there are several methods to implement buttons or links to submit your entries. But sometimes you want an additional method to quickly add a button or submit link.
When entries start to become popular sometimes it can make sense to add a link at the top right or left of your entry, without having this submit link in every entry. This can easily be done with a shortcode and is also handy on multi-authored blogs and without the need to allow your authors the add code, scripts to their entries.

Sample code

function twitt() {
  return '<div id="twitit"><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank"><img src="link to your twitter-button image" alt="Twit This image" /></a></div>';
}

add_shortcode('twitter', 'twitt');

You can now easily style the id="twitit" in your CSS, all the authors have to do to display the link is use the shortcode [twitter] in their entry.

If you want to add buttons to other social networks you can find the code needed for the submission process here.

4. Adding Previous Entries From The Same Category

Displaying related entries is a very popular on many blogs but some bloggers might prefer to show previous entries from the same category instead. This is very handy when you only have few categories and want to randomly display previous entries from that category.

Sample Code

function prev_related($atts, $content = null) {
        extract(shortcode_atts(array(
                "num" => '5',
                "cat" => ''
        ), $atts));
        global $post;
        $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=random&category='.$cat);
        $retour='<ul>';
        foreach($myposts as $post) :
                setup_postdata($post);
             $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>';
        endforeach;
        $retour.='</ul> ';
        return $retour;
}
add_shortcode('related', 'prev_related');

In this example the shortcode [related] will randomly display 5 entries from the same category.

5. Using Shortcodes To Hide Content From The Public

Shortcodes can also be used to hide content from non-logged in members. This can be very handy when you regularly publish paid content and still want to show a teaser to your entries. Additionally it can be smart to show only not-logged in users a certain text, fe. ‘This content is only visible to members, subscribe here to get access to all our awesome tips or log in here if you are already a member‘.

Creating The Shortcode For Guests

function guest_check_shortcode( $atts, $content = null ) {
	 if ( ( !is_user_logged_in() && !is_null( $content ) ) || is_feed() )
		return $content;
	return '';
}

add_shortcode( 'guest', 'guest_check_shortcode' );

Creating The Shortcode For Members


function member_check_shortcode( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return '';
}

add_shortcode( 'member', 'member_check_shortcode' );

With both shortcode functions added to the functions.php it now is very easy to add the teaser line, with link to your subscription or login page, and the content for members only.

An Example Entry

A small teaser paragraph here.
[guest]This content is only visible to members, subscribe here to get access to all our awesome tips or log in here if you are already a member[/guest]
[member]Your awesome tip and member-only content comes here[/member]
Continue with your regular scheduled program.

Sources

Feature
Post

Category
Design Focus

Friday Focus 12/11/09: Sunbursts

This week, I’ve come across a lot of sites with sunbursts, a specific type of lighting that’s popular with not just the Web 2.0 look anymore. You decide if they’re crucial to the design or not.

Designs of the Week

Amigo Secreto Virtual

Love the way the shape of the ribbon creates a similar cut for the rounded box below it. Everything in here is so chic, but it makes me wonder if to the ordinary visitor it’s Christmas-y enough.

My Twitter Cloud

I don’t get tired of seeing 3rd-party bird mascots for Twitter apps, but people could be a little more creative with their “cute” typefaces.

MediaLoot

Overall, it’s a good look. But the treasure chest could’ve been more refined, and I’m not too keen about the inner shadow effect on the logo.

Flourish Web Design

I could waste so much time telling you every bit of awesomeness on this site, or I could just tell you to go visit it and see for yourself. Perhaps the one worth mentioning here is the Featured Projects section, which looks pretty different compared to the other carousel designs we see. Also: respect to the tree!

The Press Box

The way the polaroid-style photos shuffle from front to back is topnotch.

Atomic Cartoons Inc.

The only thing that disappoints me here is that the blog is not as well designed as this site!

Naugstudio

The sunburst is so subtle you’ll barely miss it. It’s practically design with the rest of the design. Lots of icons!

gugafit

Excellent details here, from the illustrations to the framed photos to the type—the rounded font works so well here.

Fluido

Sometimes a narrow, low-contrast site is the way to go, and that doesn’t mean you have to skimp on the details. I’m not sure the graphics are at the footer, but it definitely reinforces the scrapbook/collage look but doesn’t look heavy at all.

Weather Maps

The last thing that appears on the page is the sun, which rises from behind the clouds. Good morning to you too!

LightCMS

Love the rainbow-colored navigation bar at the very top. The subdued blending is like the color palette for the whole site.

Maxvoltar

People should be more creative with the shape of their sunbursts, like this one. Love the fixed navigation on the rightmost column.

Studio dentistico associato Lombardo

The color matches the dentists scrubs! I also like the arrow treatment—a great way to build to your branding, although I’m not sure if it does match theirs.

Efrud.eu

A nicely textured sunburst.

Five Years of Firefox

I love the splashes of orange watercolor mixed with the ornamental line art. But most of all, I love how all the user-generated photos are laid out on the page.

Safarista Design

Some things need to be tweaked to work better but overall, the warm and playful nature-loving look is a welcome one.

Love Freelancing

The stark type in black combined with the two shades of blue is a nice departure from typographic sites that are usually black and white.

BestWeb

Needs a bit more color below the fold, but this site has its type and graphic details down pat.

Luiz Tiago

I like the boxiness against the painterly header.

Maryland Security

The amount of shine on this site is staggering, you’d think it were the set of Twilight (so I hear). But I like it. The links have large clickable areas, custom fonts are used everywhere, and they know their whitespace (though in this case it’s bluespace).

Social Media Weekly

DesignWhen Minimalism Backfires: When Too Little Is Not Enough
“This article explores some of the potentially negative side-effects of minimalist designs and the consequences of implementing one incorrectly.”

TypographyThe Rhetoric Of Typography
“A functioning message is one that succeeds in connecting with the habits and expectations of its audience.”

Web Design10 short ‘n’ sweet tips on how to design for web
“This article will quickly run you through some of the greatest issues with design for web and hopefully give you something to think about when you start your next web design.”

Feature
Post

Category
Interviews

The Passionate Sabrina Dent

Sabrina Dent is a strong-willed, no-nonsense pixel pusher based in Ireland. Reading through her awesome blog will easily tell you that. More →

Feature
Post

Category
Design

5 Tools for Web Design Wireframing

Most designers will agree that it’s always a good idea to wireframe your website and blog designs. By working out the best layout for a site, you can select the best placements for navigation, static and dynamic content, and so forth- and do all this early on.

A web design wireframe can be as simple as a sketch on the back of a paper napkin, of course- but today I want to talk about tools that help you take your wireframing to the next level:

Omnigraffle

omnigraffle

For Mac users, Omnigraffle just might be the best wireframing tool there is. It’s undeniably powerful, as you can see from its feature chart- and many of its features are well thought-out, such as “mini-inspectors”, which allow you to change an object’s size, location, fill, stroke, and more right at the top of the doc window. A standard license costs $99.95, while a professional one- with extras such as “presentation mode” and advanced text position settings- will set you back $199.95.

Photoshop or Illustrator

adobe

Many of us use one or more of these truly wonderful Adobe apps for wireframing- and with good reason. If you already use these for work, why not use what you already have- and perhaps more importantly, what you already know? Another Adobe program worth looking at for wireframing is InDesign, which can export PDFs with embedded links to submit to clients.

Balsamiq

balsamiq

I’ve written about Balsamiq Mockups, a nifty little AIR-powered app, before- and I list it again here because it’s truly a little gem of a program. Extremely easy to use, and specifically designed for collaboration, the app costs $79, and is worth every penny.

Lovely Charts

lovely-charts

This one’s free, but that’s not the only reason I recommend it here. It’s also easy to use, has an intuitive and- yes- lovely user interface, and is powerful enough to see you through most types of website wireframes.

Moleskine

moleskine

Definitely a step up from a paper napkin, I’ve posted about Moleskines before, and obviously I’m a fan. The “squared” type, pictured above, is perfect for grid-based designs. Perhaps the biggest pro? You can take it anywhere.

What tools do you use for wireframing?