Now certainly, I could have used one of the php bits to create thumbnails on the fly like TimThumb – but I really dislike using plugins for things I can do without them. She also gets totally confused using custom fields, so that’s out as well.

What I needed to do:
1. Determine a standard size for thumbnails and post images that would work well for her theme.
2. Create a post thumbnail using the first image attached to a post.
3. Display the post thumbnails on the blog main page listing of recent posts.
4. Create a standard image that would be displayed if she forgot to add any images to a post.

Since I’m a big fan of reusing code, I decided I wanted to use the built in sizing options of WordPress to get this done. I remembered recently reading an article with a chunk of code, so I found it again and reused that. The code process can be found on Web Developer Plus.

Setting The Image Sizes

Go to your WordPress backend and then Settings -> Media and configure the sizes that work well for your theme.

The thumbnail size is the most important. I set this one to 150px by 150px and selected the option to crop the thumbnails to that size. The reason I selected the crop is in the likely case the photo she’s using isn’t a perfect square, the image won’t look out of proportion when it’s sized down to 150×150.

Creating a Thumbnail From The First Image

This is where we get the code bit from Web Developer Plus and with a couple of minor changes end up with this:

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

The code, at this point, doesn’t do much but it will in the next steps. I do want to stop and explain the terminology a bit. You’ll notice the use of the word ‘attachment’ in the code above. That’s how WordPress identifies the image associated with the post. Think of sending an email and attaching photos to it. The code finds the images attached to the post and selects the first one. It puts the information about that image in the $img variable we’ll use later.

It is important to note that this only works for attached photos because that is what WordPress it set up to handle. That means that if you host your photos elsewhere and just link to them – it’s not going to work. You have to actually upload them into WordPress using the media uploader.

Deciding Where To Put The Thumbnail Code

Since I want the thumbnails to show up on the main page of the site in the list of recent posts down the content section, I need to edit the index.php that displays the content. Your site may use the_content() but in this example the site is using the_excerpt(). It doesn’t really matter, so long as this stuff goes inside the loop but before the spot you want to show your photo.

<div class="thecontent">
<?php the_excerpt(); ?>
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>" class="readon">Read the rest of '<?php the_title(); ?>'</a></span>
</div> <!-- end thecontent -->


I’m going to add the bit of code right above the call to the_excerpt() because that’s easiest at this point.

<div class="thecontent">
<!-- get the thumbnail -->

<?php
// Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- Display the image in here -->
<?php }
?>

<!-- end get the thumbnail -->
<?php the_excerpt(); ?>



Display the Thumbnails on the Main Page

Now the code is actually in the area it should be, but it’s still not going to show anything until we put something in place of the ‘<!– Display the image in here –>’ placeholder. What the code HAS done is created the $img variable we can call. So let’s get that working by putting in some code that will call the image.

<div class="thecontent">
<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>

<!-- ***** THE ACTUAL IMAGE ***** -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- ***** END THE ACTUAL IMAGE ***** -->

<?php }
?>
<!-- end get the thumbnail -->
<?php the_excerpt(); ?>


What the above code has done is take the placeholder and replace it with a call to the image.

Then since this is for a front page thumbnail, we want people to go to the main article so we create a link around the image that points to the article.

Finally, for CSS styling I wrapped it in a span called the-thumbnail (you can wrap it in something other than a span, name the class anything you like, and style it any which way you can think of).

But What If… There’s No Image?

But wait… what if my client forgets to add an image to a post? That one article will look strange on the main page without an image when most of the others have one.

I want to create a fail-safe for dealing with an instance where she might forget to put in a photo for the post. What to do first is create some kind of dummy image (maybe just a large square with the site logo / branding or whatever you want). Upload that image somewhere.

<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->

<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->

<!-- ***** END THE ACTUAL IMAGE ***** -->

The most important line in that new section is <?php } else { ?> — that tells it to do something if there is no photo.

You’ll see that you can just as easily change the url of the image to be any image location you upload the fall-back image to.

Putting It All Together

So here’s what we came up with after that. I’ll highlight the sections of my template code so you can see where I put it inside the template. Remember, your index page may not use the_excerpt() – it may use the_content(). That’s perfectly ok so long as:

1. You put the code that generates the thumbnail somewhere inside the loop – the loop beginning looks like this: <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
2. You put the image display code where you want it to be.

So here’s the final code I used on my clients site:

<div class="thecontent">

<!-- get the thumbnail -->
<?php
//Get images attached to the post
$img = null;
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'numberposts' => -1,
'order' => 'ASC',
'post_status' => null,
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$img = wp_get_attachment_thumb_url( $attachment->ID );
break;
} ?>
<!-- ***** THE ACTUAL IMAGE ***** -->
 
<!-- # if post has an image # -->
<span class="the-thumbnail">
  <a href="<?php the_permalink(); ?>">
    <img src="<?php echo $img; ?>" />
  </a>
</span>
<!-- # END if post has an image # -->
 
<!-- # if post doesn't have an image -->
<?php } else { ?>
<span class="the-thumbnail">
<a href="<?php the_permalink(); ?>">
<img src="http://thedomain.com/fallback-thumb.jpg" />
</a>
</span>
<!-- # END if post doesn't have an image -->
 
<!-- ***** END THE ACTUAL IMAGE ***** -->
<?php }
?>
<!-- end get the thumbnail -->

<?php the_excerpt(); ?>

Oh, and remember — if you don’t like the size your thumbnails are coming out as — change it in Settings -> Media.

I hope you found that useful

~Nicole

Her: What if they said something negative? People won’t buy if someone comments in a negative way, and people who like something aren’t going to bother to come post comments, only angry people do that.

Me: Of course implementing something like this opens the door for negative comments, but also positive reviews. Most people look online for reviews before a major purchase these days.

Her: I don’t. If I don’t, lots of people don’t. Lots of people don’t even use the Internet.

Me: That’s true, but you’re starting an Internet business – your target market has become people who DO use the Internet to look up information on businesses.

Her: Well then I’ll just market it offline and I definitely do not want comments on there.

Right then, so, she doesn’t have comments. We went back and forth on it for a while, but the overall issue was not one of just simple difference, but of significant business perspective differences. She thinks in terms of the brick-and-mortar business even when creating an online business, and I think of the online perspective almost exclusively. In my opinion, she’s thinking like a relic and she thinks I’m an insane evangelist to believe in the web so much. Ah, the joys of family

I happened across a set of slides on SlideShare that I’m going to email to her, just for fun – even though the argument has passed.

If you know anyone who thinks the same way… maybe you might have better results from your argument if you share this with them early on

Where do you stand on this argument?

In any event, I wanted to promote a special they have just for WordPress users and put the ad for that in my blog sidebar. Unfortunately, none of the graphics for the special were of a size to fit neatly into my sidebar, and they moved too fast (timed around 2-3 seconds before the text change). Thankfully, I was able to find a compromise between what I want in keeping my site accessible, and what I had as options from the premade HostGator advertising images for the WordPress special.

I decided that I could not possibly be the only person to have this problem, so here’s how I managed it.

The Problem

Since I avoid animated gifs like the plague normally, but was limited to being able to use HostGator images only, I needed to find an easy solution that did not involve me having the files they used to make it. I needed to be able to resize the animated gif to fit in my sidebar better, and while I was at it, I wanted to see if it was possible to slow down the animation speed to be more accessible.

The Solution

I started off doing it the easy way. The image had two views only where text was different, so I took a screenshot of each version of the graphic as it changed text, and cropped them down to just the ad image. I put both in Photoshop as two separate layers on a project, and followed these instructions on how to resize animated gifs from there. Voila! I have a resized gif that now changes in 5 second intervals instead.

Photographer.

The next generation is alive and well. They are blogging, emailing, carrying mobile phones, text messaging, listening on iPods, networking and chatting with friends through social apps and messenger programs, and playing complex massive multi-player games online.

They are about 5 years old.

They are your target customer if you are in new technology development.

While there are some out there who still balk at the idea of focusing advertising and development toward kids – they need a refresher class in basic business. Solidifying brand recognition is a lengthy process, and if kids grow up using something, they will continue to use it as adults.

More than that obvious statement of focusing on the next generation now… the question on the minds of people who prospect ideas in new development is more tricky. What will these kids expect as adults? Or more specifically… what will we do NOW to affect what their expectation becomes later?

Observation of the new generation client starts now. As the people who create new technology, we need to know what functionality appeals from the start.

Here are a few of my observations, developed from watching my own kids as well as their friends:

Computers are for gaming and internet access.

As long as the computer has a browser installed, and whatever computer games they play accessible – that’s all they need. Kids expect to be able to do everything, aside from gaming, through their browser. The sheer idea of having to install a program to do something else is, literally, enough to make them giggle. Developers, that means that if you aren’t building web applications, or working on the types of software that make these things possible… start now.

Massive multi-player gaming will continue to grow by leaps and bounds.

My 8 year old has been playing WoW for the last year, and I recently posed the idea of buying her a game that doesn’t have other people connected. That got a blank confused stare from her. Her hesitant response was something akin to ‘Are they fixing it soon?’ Make a mental note of that… if you can’t currently connect to people, they assume it’s broken and needs fixing. Kids are fine with family/friend gaming on with Wii or Playstation etc… but the idea of having no ability to play with someone else? Get real. Developers: Listen in on that one – kids expect to be socially connected through technology. Period.

Operating system doesn’t matter.

Again, the use of a computer has changed. As long as it can play their games and connect them using a browser – that’s all they need. My 5 year old son has been using a Ubuntu Linux laptop since he was 3 and can use both that and a Windows computer very proficiently. My 8 year old daughter can use both of those, plus a Mac. Developers: All operating systems have an equal chance in the market with this generation.

Browsers matter alot.

I have been conducting a mini experiment on my 5 year old sons use of browsers over the last year or so. On the Windows computer I installed Opera, Firefox, Safari (for Win), and IE. The same for the Linux one (without Safari and using multiple-IE’s to have IE on there). On each browser I set up the same bookmark quick links to get to his favorite sites. He eventually tried them all, and I would occasionally watch how he interacted with them. Occasionally a site would pop up saying it needed a particular plugin – this response ticked him off. His typical response was to either change the page immediately to something ‘not broken’ or close the browser and open a different one. If I watch him now – I can tell you this: On Windows, he uses Firefox. On Linux, he uses Opera (likely because a few Firefox plugins don’t have a version for Linux). However – he can, and has, used them all. The defining criteria in how he uses them is simple: If stuff breaks or errors often when he uses it, he stops using it. Common sense I think. Developers: If you make plugins, make them for all operating systems. If you make websites or web apps – use common cross-os supporting plugins to ensure they work.

Web apps for chat and email.

My daughter will sometimes chat with relatives and friends using various networks – but she never uses an installed chat program even though we have them. Again, it’s about using the browser for it. She uses Meebo.com because she logs into them all at once and can talk to everyone in the same screen WHILE she’s in another tab doing something else. For email, she has a Gmail account which she uses through the browser only – big surprise. Downloaded email is ridiculous to kids when they have gigs of space to keep their email online and get it anywhere. Developers: Keep improving online apps for communication – they’re gold.

Wireless everywhere.

We vacationed in a cabin at a state park – my daughter checked email via wireless and played WoW on a laptop, my son played his web games. We went to the coast and stayed in a condo with no wireless and no internet in the condo lobby, they complained like the biggest junkies in withdrawal and wanted to go home the entire week. For my sanity, we’re never going there again. Developers: More and better wireless devices and connectivity. Businesses: Please God have wireless.

Mobile is King.

I doubt I even have to explain this one – but anyone who has been living under a rock needs to get out and go walk around some kids so that you can see the rapid clicking on phones. Texting will probably become an Olympic speed sport. Taking video and pictures with a phone is the new artistry. Schools are giving in to having cell phones in class for emergencies as long as they are ‘off’ – but I doubt they stay that way. I’d take a guess that when my daughter was in kindergarten about 4 of the kids in a class of 20 or so had cell phones with them. That number has grown each year as she moves up in grades. Developers: Make everything you can do with your web applications in a browser doable via a cell phone or handheld browser. The world is mobile – develop for it.

Movies on the Computer.

If the TV’s in the house are being used, it’s pretty normal for either of my kids to grab a DVD, head to their respective computers, and pop it in. Bringing a way to play DVD’s on long trips is just as important as having a way for EACH of them to watch their own thing in the van on a drive. Someone got wise to that since I’ve seen more and more family vans with multiple independent DVD drop-down screens for watching 2 things at once. But where I REALLY think this is going to continue to grow is with being able to ‘rent and watch’ movies from the computer. Netflix.com is getting there with the ability to rent and watch on the computer – but it’s not a perfect system because it requires Windows. Beyond that… I don’t think it’s enough. I think the next generation of kids is going to grow up wanting to be able to watch a movie using any device that can connect – and that means it has to be device and OS independent… AKA: through a browser. Developers: This is the age of YouTube folks – work on perfecting being able to watch movies through the browser.

No Desktop Gadgets.

In fact, this goes for all things that auto-load on startup. This may surprise some of the folks who are hard at work creating all sorts of new gadgets for the desktop – but most kids I’ve watched use a computer shut them off. Why? I’ve asked and heard: ‘They make the computer slow.’ and ‘I don’t use them.’ and ‘I keep accidentally clicking on them.’ On Windows Vista, with the little default gadget bar – my daughter set it to not load at all. Why? They make the computer slow when she plays WoW – in fact, everything that loads on startup that’s not-essential is turned off. Again, as I pointed out before, kids use the computer to play games and use a browser. Why would kids want desktop widgets slowing the computer down when they have a Google homepage that has them, or Netvibes or Pageflakes? Developers: Work on improving portals that provide gadgets/widgets instead of something that is a glorified link on the desktop that takes up processing speed.

Kids Are Speed Demons.

They have even less patience for using websites and web apps than the average adult – which means it’s practically non-existent. If you make a website for kids – it had better be fast loading and processing. They will tolerate a slow loading site for their very favorite characters only, because the reward is significant. But if you aren’t Disney.com – you can’t afford to have a site as slow as they do. Keep in mind, this is what kids want now. These kids will grow up and still want it on an adult oriented site – learn how to speed up everything. Developers: Minify all your code. Don’t use tables for layout – they load slower. Optimize images to death. Reuse images. Don’t have music or movies play on startup – kids know how to push the play button and they will.

Kids Love Bright Centered Minimalism.

Adults tend to prefer monochromatic minimalism – kids like bright color. No big surprise there. But if you watch kids use a computer, you’ll notice that alot of times they tend to have tunnel vision and just look at the center of the page (though plenty of adults too also, I see it much more in kids whereas many adults start at the top left corner). Develop with that in mind. Take a look at PBSKids.com and you’ll see someone who has successfully done that. The design is minimal in content, yet colorful and very much center screen. Another element of that is that kids work extremely well with image representations. You ever seen a kid use a iPhone? It’s enough to make you dizzy! They combined the already amazing finger dexterity of kids (we’ve seen this for years with game controllers) and added picture representations and a minimalistic design. Developers: Take out the junk on your sites and apps on devices. Minimize. Use picture representations (but don’t forget to make it accessible!). Add TONS of bright color.

Free is No Longer an Option.

Kids nowadays are growing up with a million free to use web apps, games, research sites, etc.. Something being FREE is no longer a surprise – it’s expected. If something isn’t free, they find something that is. If you don’t think they can – just ask a kid to find you a website on a topic, and most often they’ll have Google loaded up faster than you can blink sorting through search results (btw – Google is centered, minimal, and often has a changing logo kids like). Business Developers: Find ways to use the ‘free’ business model (often supplemented with advertising or a premium service) or you will find yourself out in the cold with this generation.

Tech Savvy Input.

If people thought my generation was tech oriented – this one is VERY technologically savvy and can sniff out bugs and errors with their eyes shut. More than that – they EXPECT to be able to report bugs so they can be immediately fixed. My daughter knows how to report broken websites in Firefox, to report errors in the browser, and (even though I don’t) she knows how to file bug reports with the companies that run the games she plays. The flip side of that user input is that she also EXPECTS that those bug reports are easy to do, will be immediately appreciated and resolved. Developers: Prepare yourself for a whole generation that’s growing up on open-source, user driven technology. Plan ahead and get yourself ready with a bug reporting system, and a plan to implement fixes regularly.

In Total: Instant Gratification.

The current breed of technology developers mostly come from my generation – in which we were/are considered spoiled and selfish in our desire for things faster/better … the ‘I want it NOW’ generation. Because our generation went out and made technology to solve our need for speed – the new generation is even more focused on immediately being able to access what they want. That’s the technology they are growing up on.

Plan for it.

~Nicole

Photographer.

Today is a new day in design for Beyond Caffeine. I am finally moving on from the old ‘Cleaker’ theme that has run this site for a good while now. I need something fresh and clean, and I found what I was looking for in a new theme called ‘Amazing Grace’ by Vladimir Prelovac. Amazing Grace is now the default theme for the blog.

I was really drawn to the colors of the theme, as well as the design. The colors are (for the most part) from a soothing palette and I am quite happy with it. It has a lovely spot in the top right corner that is used purely to showcase photos I have found. They serve no practical purpose, but are very lovely and reflect the tone of the site. The photo that is shown is chosen at random, so hit ‘reload’ a few times, or click on the photo credits link to see all the photos in the list.

If you are not seeing the new theme, you may have a cookie set for a different theme on this site. You can view the theme by navigating over to the sidebar where you will see a link to the available site themes. This theme switcher is active on ALL the themes I use on this site (and will continue to be there in the foreseeable future). You can easily switch between the new theme or go back to using Cleaker if you would like.

As a side note, in future, if you see any theme that is flagged ‘dev’ in the theme switcher – be warned. That means it is currently something I’m tinkering around with to make work for my site – expect it to be quirky.

I hope you enjoy the new theme as much as I am, and remember that you can always use the theme switcher if you don’t like it.

~Nicole

It was not intended to take quite so long, but ah well. Not only was it done in my sparse free time between client work, I had a few other personal things come up that took me out of commission for a bit (a death in the family, a major case of the flu I’m still getting over, lots of school stuff with the kids, etc..). In the end, I think it came out good for a first version of a re-design.

Part of the problem of designing for yourself, as a designer, is that it’s never perfect enough, and I have the feeling that this will be a case of always feeling the need to tweak and adjust and modify ad infinitum.

The old main site looked like this for the last couple of years:

The new version is much more reflective of my likes in color and design:

I’d say it came out to be a pretty major overhaul of the design.

Granted, it wasn’t without issues, which is why I’m calling it Version 1.0 of the new design. A few things glitched at the last minute, like the jQuery effects suddenly not working (I haven’t tried yet to see exactly what caused this – whether it was a new version change or if I just added a typo somewhere.), and having some lovely issues with Google reading my sitemap/robots files (or not reading them for that matter) so that my the 5-6 Page rank is suddenly coming up ‘not available’.

On a design scale, it’s going to need an alternate color version and I realize that. Not everyone is a fan of dark colors like I am (even if all my testing tools say I used enough contrast to make it readable). It’s a priority on my to-do list for the next version. In fact, in an ideal world I’d like to offer several swappable design themes that are entirely different. That should be easy enough considering that the new site design is one I converted to a WordPress theme. Yes, that does mean that I’m using WordPress as a content management system on my main site now. I figured that since I’ve been suggesting WordPress as a CMS for my clients, I might as well ‘practice what I preach’ so to speak.

In the end, this is what it has consisted of, and been built with, on a technical level:

• Photoshop for the design.
• Plain text hand-coding to XHTML.
• Converting the XHTML to a custom WordPress theme.
• Custom coding for child pages on WordPress.
• FeedList plugin for secondary content links from this blog.
• SearchEverything plugin for full search – it uses lots of WP pages.
• Contact form plugin from Green Beast with custom CSS mods.
• WordPress.com stats plugin for .. well, stats.
• Google XML Sitemap Generator plugin.
• Slimbox with Mootools for WP – Deactivated as a plugin and just pulling files from the plugin directory – it’s a long story.
• sIFR for special font headings.
• jQuery for effects – still needs tweaking.

For now, that’s what’s been involved in the CMS’ification of WordPress for this design. There is quite alot still on the agenda, and I’ll document as I go how I continue to evolve the site – just in case anyone aside from me finds it as fun and interesting.

~Nicole

So I was browsing around looking at WordPress themes (again) and I decided to conduct an experiment on my ‘reaction’ to the themes. I ended up collecting a list the 13 most eye-catching, reaction causing (good and bad), non-traditional theme headers I saw yesterday.

Consider this ‘inspiration’ for the non-advertising specialist. Or just use the images as ideas of what you could possibly do with your own site. As a web designer I’m often expected to know what kind of images and text are best for marketing and advertising etc.. Well, I don’t know about you, but my knowledge of that is fairly limited. That’s what advertising and marketing people are for. I know people who work in advertising – they practically have an encyclopedia of "what images cause what reactions in people" and "what works get people to do certain things" and probably lots more I’m unaware of.

However, even with my limited knowledge, I think most people have heard about the ‘above the fold’ importance. That need to grab people and make them at least move their eyes around and possibly stay a bit longer. Attention getting top areas of your site. Something that makes the speed-browser in all of us slow down. All the screen-shots are above the fold for me – only what I could see immediately. For reference, I’m on a wide screen monitor with high resolution, but I also have 7 Firefox toolbars (don’t ask) taking up space at the top.

I look at theme houses (sites that are mega-lists of themes) ALOT, and I realize there are actually a couple of stages you have to go through to get someone to actually look at your theme:

1. The first is that you have to get them to take notice of your design from a little screenshot.
2. Part two is to get them to click that all-important ‘demo’ link so they look closer at it.
3. Part three is getting them not to hit the back button because they hate what is above the fold on site.

If you can keep them there a few seconds, you might actually get them to like the entire theme and consider downloading it.

So, back to the experiment.

I decided to write down what I thought about as I was browsing. I wanted to see which ones got the most reaction out of me based on the header section. Obviously the themes I’m going to show you got me to click on the little thumbnail, but I’m going to share my first impression of some of the themes I looked at yesterday.

Now, hopefully by the time you’ve gotten here, all the images have loaded. So have fun, and feel free to try out the demo links so you can see if your ‘up close’ reaction was anything like mine.

Disclaimer: I am not advocating these themes as great themes. In fact, I don’t like most of them as entire themes. Some are actually just plain broken beyond the header. These are just examples of eye-catching header designs, nothing more.

Odd Note: Some of these themes actually ended up having the same author. This was not intended, I merely bookmarked the designs that got the most reaction and then when I was writing this up I discovered some had the same designer.

#1 – Forbidden Forest

Thoughts: "Wow. That’s really cool looking."
Links: Theme page. Online Demo. Designer.

#2 – A Good Catch

Thoughts: "People just LOVE to use animals to make people go ‘awww.’ Cute sketches."
Links: Theme page. Demo page. Designer.

#3 – Cherry Swirls

Thoughs:"Whew, that’s alot of color. I like the sweeping curves. Cutesy and summery but that bright yellow is evil."
Links: Theme page. Demo page.

#4 – City Slicker

Thoughts: "Now that’s neat. I like all the graphics at the top… but why so teeny?"
Links: Theme page. Demo page. Designer.

#5 – Desktop

Thoughts: "I love the collage headers. Always makes me stop and look at all the individual stuff."
Links: Theme page. Demo page. Designer.

#6 – Dreaming Off

Thoughts: "Lots of color, but I like how it is hanging on the sides like that. It makes a major impression above the fold, but its actually not the ‘header’ that does it but everything that’s around it.
Links: Theme page. Demo page.

#7 – Fleur

Thoughts: "Gorgeous. Finally, the only one I like the whole page of. Very minimal."
Links: Theme page. Demo page.

#8 – Kukufall

Thoughts: "Interesting illustration. Really grabs your attention."
Links: Demo page. Designer.

#9 – Lover Paradise

Thoughts: " Color! Wow. Lots of it. Very neat looking."
Links: Theme page. Demo page.

#10 – Orange Kitten

Thoughts: "Awww. Again, we know about the animals, but now we also have the protective reaction and it looks like the darn kitten is about to fall off."
Links: Theme page. Demo page. Designer.

#11 – My Gerbil

Thoughts: "Eep! What a way to freak out your viewers and get their attention. I literally leaned back when this loaded up. Just the thing… a rodent with beady eyes staring at you!"
Links: Theme page. Demo page. Designer.

#12 – She’s Got Style

Thoughts: "Ooooh… I love that drawing! I wish I could illustrate like that.. I need to find that artist."
Links: Theme page. Demo page. Designer.
(Note: There is a separate artist of the graphic. She has a deviantART page here http://vikifloki.deviantart.com/ and has a great looking gallery of other illustrations.)

#13 – Summer Holidays

Thoughts: "When all else fails… just put the site on the wrong side and scribble all over it."
Links: Theme page. Demo page. Designer.

That’s all folks! Hope you were inspired, and at least not too creeped out by the rodent

~Nicole

I browse the web on a very fast connection. One might assume that sites load super fast for me. Not really. The amount of times I hit a website that takes forever to load is just ridiculous considering my connection. When you think about the fact that the majority of the world is still on dial-up, I can’t imagine how slow it is for them. (I remember my dial-up days, with much happiness that they are gone.)

One of the biggest culprits I see is the slice-n-dice. You know what I mean, the people who design in Photoshop, and make big chunky slices. Don’t get me wrong, people who are true graphic artists can create beautiful sites, but sometimes those fall in the category I call ‘the prettiest site you never saw.’ Why? Cause it took too long to load and your visitor moved on.

I’m not entirely certain why gradient/logo headers are such a culprit for extra loading time, but they seem to be. I work in web, so within 1 minute on your site I’ve probably checked the code already. It’s just a habit. Anyway, I find ALOT of people who have these big header images that are built of a linear gradient background with a pretty title text. Usually the title text is some sort of unique font, with drop shadows and other stuff.

I see a couple of things happen a lot of the time. Either people just chunk everything in one graphic and save it like that, or they are too afraid of the crop tool to really slim down the gradient. Seriously folks, learn to be merciless with the crop tool, it’s not gonna bite you. Linear gradients are the easiest to crop and the most common on the web.

Let me give you a working example of something I’ve seen a million times.

That’s a sized down version of a 800px (wide) by 200px (high) site header. It has a unique font for the title, with drop shadow and a mild stroke effect. In original form that header is just tossed into the HTML as an image, and has 9.64k chunk of the loading time.

For this very simple header, there is no reason for it to take that much of the load time.

So then, I’ve seen people do the following as an alternative:

They decide to use CSS for the background and cut out the title and put it on top. So they get two images…

A gradient (1.22K) :

And the logo (5.63K) :

They use some HTML like:
<div id="header">
<h1><img src="color-logo.jpg" alt="Website Title." /></h1>
</div>

And some CSS like:

body {margin:0 auto; width:800px;}
div#header {background: rgb(19,75,123) url(gradient-bg.jpg) top left repeat-x; height:200px; text-align:center;}
div#header h1 {padding-top: 90px;}


Which works fine really, as long as:

a) You measure the distance from the top of the logo to the top of the gradient to know how far down the logo needs to be to match the gradient (in this case, note the 90px top padding) … and

b) You don’t mind reworking your title image if you ever change the background. To be honest, I’m a PNG fan, but in this case, using a PNG instead of a color JPG like this would actually create a title graphic double the size.

Okay, so, those two combined take up 6.85K, which is better. But here is where I get on people about not cropping the gradients enough. Why does it need to be that wide? It just repeats. We know this, you are repeating it to make it go the full 800px wide.. so why not make it smaller to start. I see this all the time, and I’m not entirely sure why.

Do not be afraid to crop, and crop some more. Wring every bit of load time out of those images as you can.

Keep the title image made, and then crop your gradient down to 1px on the repeating direction:

If you have a gradient that repeats vertically instead of horizontally – make it 1px high and the full width. There is no reason for it to be any bigger.

So here’s comparison of the how they look in the browser (the top is the full image graphic, the second is the big gradient and separate image title, and the bottom one is the skinny gradient and the separate image title). Remember that this is a scaled down (for the article) version of the actual headers at 800x200px :

For a loading time comparison:

The difference from the 9.64K original all image to the 5.99K mini gradient and logo combo is a savings of 3.65K. Now that may not SEEM like alot, but it’s 1/3 the loading time of the original. If you could decrease all your instances of your gradient use by at least 1/3, wouldn’t it be worth the loading time savings?

So, in a nutshell, my parting words to you are: Crop and Crop Some More!

~Nicole

Todays winner in the minimal category, sporting a very Web2.0 color scheme, goes to Prisa from NofieIman.com.

The only thing lacking in this one is an online demo link – otherwise it’s a great looking screenshot.

The second theme is my winner for the ‘nicest use of lime on a business looking blog I’ve seen in a while’ category. It’s called Greenwave (though it really looks lime to me) and is done by Romow.com.

Greenwave thankfully has a demo online for you to peek at too.

Try ‘em out!

~Nicole

Of course, the problem with that is that I do great designs for my clients and I realize that I’m not showcasing my abilities on my own business site. My current site doesn’t exactly tell a potential client that I am quite skilled with graphics, nor does it scream that I am decent with creating enhancements on a site with Javascript and DOM in a nice accessible way. It doesn’t even yell out loud that I’m strong with CMS and blogging software, nor does it give a great indication of my ability to use PHP since I never bothered to take my main site code out of SSI. This is what procrastination causes. Anyway, point being – I am trying to put together a nice ‘portfolio’ site. Something that I actually really put some effort in and use all of my skills in some way.

So I had been talking to a artist who was going to take an outside point of view on my site and try to help me conceive an idea for it and design it for me. Well, a few weeks later and that plan has changed. Unfortunately, my artist and myself haven’t been able to find a ‘meet in the middle’ point. My design preference is very minimal, where she is the kind of artist who wants to cover any white space because its ‘being wasted.’ So… it just wasn’t going to work to have her conceive of a design that I could use.

We did, however, realize quickly that she’s great at coming up with unique ideas for -other- designs, just not for my site. So we’ll implement some of those in the future. However, in all that creativity she had, I still was lacking a good design. So, I did the only thing I could do – I cracked open my Adobe Photoshop CS3 and started tinkering with ideas. And tinkering. And scrapping. And tinkering, and tossing. But then! Suddenly, I had the beginnings of an idea.

I knew already that I wanted my colors to stay at least similar to what they were already. In an ideal world, I would keep the exact colors and just use them in different ratios. When you change a site design entirely, it’s rather important for the site to still have some elements that are recognizable so your viewers don’t think they mistyped the url. With that said, I just also didn’t want to suddenly take my rich earthy toned website and make it look like a cotton-candy explosion.

My current color scheme involves the use of a deep burgundy, a rich chocolate color, some soft beige, a little white, and hints of gray. My design now uses the white the most, but right after that is burgundy, beige, then the chocolate and gray. I wasn’t terribly happy with that proportion, because I like the richness of the browns and really wanted to work with them more. I used one particular brown color for my skiplink menu at the top and really love it – so I decided I wanted to try with that color as a background.

Another thing I have been thinking about is my title font and little flower image in my current design.

To put it simply – I hate them. I have for a while, but I’ve just been too busy (or maybe too uninspired?) to change it.

I decided that since I hate them so much, I would focus on creating a title and flower design that I really loved. It took me a while to work that out, but I finally nailed the font I loved in Trajan Pro. It’s exactly what I was looking for in a traditional style print. So I’m going along, tinkering with brushes, and I used this great flower brush that really fit what I was going for and took the scale completely to another level from the old little ugly flower.

So I played with the title and flower, and played some more. Suddenly I realized what I was doing. I was having a design ‘moment’ and really creating what I like personally. I decorate at home in heavy traditional styles. Not modern traditional, but traditional as in antique, heavy, inlaid, carved (preferably all of the above) sort of furniture. I like dark, rich colors, with a heavy impact. This new design is definitely heavy. But you know what? It’s perfect for me for it to look like that. It is a personal site and if it’s going to reflect who I am, then it needs to be a heavy design because I’m just not a light and airy person. So… I decided to step out of my minimalism hat for a bit and went for the rich and dark sort of look.

If you want a sneak peek, here’s a look at that header, flower, and rectangle loving design remixed:

Before anyone starts thinking.. ew.. ‘I hate dark designs!’ let me say first that I don’t. I love dark designs. It’s also my website, and I want it to reflect what I like. However! Since I am going to use this as a showcase of what I can do, I will be adding in an alternate (at least one) switchable style that is completely and totally different – when I figure it out, that is. I am thinking, currently, of a chocolate, white, and pink deconstructed sort of look, but I’m not entirely certain what the alternative style will end up being. The only thing I do know is that the alternative style will be as light as this design is dark.

I had some great success working on this design today. I’m not going to be implementing it tomorrow. I probably won’t even implement it this next month. The design needs finishing, a few details, and then… I’m going to re-write some content, re-organize some of the pages and how they are laid out, and then I have to take it from being a rather complex Photoshop design to a completely flexible website design. Once it’s actually coded – then I can start creating some enhancement effects with Javascript and toying around with adding nifty features.

So.. it’s been productive. I am glad I decided to attempt getting outside input on it, but in the end, I finally ended up figuring out what I wanted and deciding to simply design for me.

~Nicole