Beyond Caffeine

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

After months of tossing around ideas on how I wanted to redesign my main site, WebsiteStyle.com, I finally came up with what I’m calling Version 1.0 of the redesign.

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

( Note: If you read the article, it will give the massive amount of images time to load for you. Unless I’m really boring the life out of you, in which case, please feel free to scroll down. )

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

This is a ‘Back to Basics’ sort of article, talking about techniques that we know are good to use, but sometimes forget to implement.

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 800×200px :

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

There are two new WordPress themes that I like online today, each one definitely in a different category.

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

A couple of weeks ago I wrote about how I have no problem conceptualizing site designs for my clients, but when it comes to my own sites, I tend to let design take a backseat and just leave them functional. It’s kind of like the cook who cooks all day at work and when they come home want to order takeout because they are sick of cooking. That’s pretty much the way it’s been with my personal websites for a while - ‘takeout’ design.

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

I have no problem doing design for clients - because I always have an outside perspective. Designing for your own site is kind of like… giving advice. You can give advice to other people but often not to yourself. It’s all about perspective.

For a while now I’ve been looking at my personal sites and thinking.. bleh. My reaction is something like ‘I’m bored with this’ or ‘There is something off in this design but I can’t tell what it is.’ So, I’m doing what any halfway sane web designer does when they can no longer get perspective on their personal sites — I’m getting another designer to do it.

I’m lucky enough to have an artist relative who can be on hand to deal with my predicament. Of course, I have to say that she is a saint, because there is nothing more difficult than designing a site for a web designer. I’m one of the most difficult to please ‘clients’ in the world, and that goes double when it’s my personal site.

One of the first discussions we had was about ’style.’ I told her I was open to design creativity, but wanted to keep my existing site colors. In preparation for this discussion, I had spent a few hours browsing and pulled up about 10 websites for her to look at, each having a layout that I found appealing or interesting and would be open to having a variation of. She sat there, browsed through each of them, and said to me ‘These are pretty much all variations on what you already have. Are these what -not- to do?’ I nearly cried.

After much discussion (read: bickering) we decided that it would have to be a middle ground, between my love of minimalism, and her desire to cover every inch of white space with some pattern or color. I started to have the feeling it’s still going to end up being more ‘graphical’ than I would prefer.

She has been throwing me sketches over the past week. Designs she came up with that won’t work for my site but would be good for someone elses. I’ll probably turn them into working designs just for fun, but they aren’t what I’m looking for. The range has been anywhere from a Texas themed site (which I’ve wanted to do for a long while) to a site that was somehow or other themed with toilet paper and trash cans. Odd…

Anyway, I think my designer is suffering from easy distraction into her art. It happens often enough, but since she’s just giving me all the designs she does and letting me do what I want with them, I can turn her sketches into something workable for web - someone else’s web, that is.

We’ll see what happens! She’s a picky artist. I’m a picky web designer. For all I know this process of finding something I want could be a decade long.

~Nicole

Here are a couple of nice themes from the web community today:

Ambient Glo 1.5

Fixed (Demo, Download). Fluid (Demo, Download).

A very nice 3 column theme that has the option to be either fixed or fluid width. Good use of color and white space. Created by Nathan Parikh.

CityPark

The Demo. The Download.

This is a theme for people who like the wide screen, which more and more people do. It caught my attention because it was simple and clean, yet there were little details all over.

~Nicole

The judging is over, the results are in, and now every WordPress/Sandbox fan has new designs to play with!

I enjoyed being a judge for this competition, though it was definitely not easy to pick which my favorites were out of 46 submitted designs. Huge congratulations to the winners!

The top design for the contest was SandPress by Arpit Jacob:

The 2nd place design was Moo-Point by Will Wilkins.

3rd Place was taken by the design called Prima done by Sunaryo Hadi.

There were also 3 runners up who will receive smaller prizes, but prizes nonetheless!

1. Essay ( by Ian Stewart)
2. Tiffany Blue (by Ia Lucero)
3. Shades of Gray (by Leslie Franke)

(You can see all of the designs that were entered here.)

I am glad to see that 2 out of my 3 top design picks were in the top 3 for the results. They were excellent designs deserving of some acknowledgment.

Every one who entered deserves recognition for their efforts, and I hope that all the entrants understand that the decisions were very difficult. It was, however, as untainted as I think is possible, as we were also asked to refrain from reading the forums or posts regarding the contest until we submitted our results.

Thanks go out to Scott for running this contest, Andy for impartial reviewing of the results, and the people who sponsored the contest so that winners could receive some cash.

If people have comments on the results, Scott has made a nice little forum post for after-contest discussion.

~Nicole

I ran across a new WordPress theme (Isolated) that takes a nice approach to using Mootools accordion code, and integrating it into a WordPress theme. I have always thought that accordion style sections can look really slick, and I love Mootools, and I think the integration of it into this blog theme is done nicely. You can see the demo of the theme here.

Now, in my opinion, this theme is far from perfect, but I like the approach used. I noticed a few things that I do not care for, and I’ll list them here:

1. Love the accordion, but I don’t like seeing it open on something that requires a scrollbar. Gives a poor impression on first loading. I think the default showing accordion section should be something like an ‘about’ page or some other small summary of the site that will not scroll.
2. If you increase the text one step or more on the browser (ex: CTRL and + in Firefox), the top half of the site is great still, but there is significant break on the lower section right at the ‘previous posts’ link.
3. Speaking of the lower half of the page, I don’t care for the colors. To me the two halves look like two different designs. I think what is doing it is the higher contrast green used on the list items. To follow the theme on the top half, I would suggest reducing that bright green to match the muted green used in the post titles within the slider. They could even go to that bright green on hover like the top does.
4. It needs something in the top left corner. My eye keeps drifting to that spot for some reason. Maybe a jump scroll button to the lower half.

Overall, I love the approach. I think it could use some tweaking, but it is a great idea

~Nicole

If you have followed along through Step 1, then you have the HorizMenu.psd file to continue with. To refresh your memory, we left off with our HorizMenu looking like this:

Now, you may be wondering why that extra space is there at the bottom. Why we didn’t simply crop all the bottom off. The answer is that we want to see where the sub-menu comes in. This could be positioned differently if we were using a repeatable background on the menu bar, but since we aren’t, and in this fixed width design the text is influenced by the menu and the background, we have to work with what we have and be precise.

Open up your HorizMenu.psd (if you don’t have this file, click here to get it).

Using your slice tool, create three box slices dividing up that menu, and a fourth that is the bottom area. If you simply create boxes around the menu items, the fourth area will create itself. Make sure you are precise, and as you can see I’ve tried to center the submenu in the ‘About’ area.

Now that you have the menu sliced, you can crop out that bottom area.

After you’ve cropped the HorizMenu.psd to consist of only the menu items, then go ahead and save the PSD.

From this point, we’re going to save the slices as individual files.
File -> Save For Web...

I suggest looking at the 2-Up or 4-Up tabs to really compare what you want to save your images as without sacrificing quality. I’ve chosen to save these as JPEG with 60 quality, as shown here:

Simply click on the area showing the one you like the most, then click the ‘Save’ button.

Another box will pop up as shown:

Make sure that your selections in the drop down boxes are saving the images only, and as slices.

When you have saved them, check in the area you saved them to. You should see a folder with three new image files, each numbered and prefaced by what ever you put in the File Name box (in my case, HorizMenu).

If you don’t have these three files, or think you might have messed up somewhere, you can download them here to follow along on the next step.

That’s enough for now, and thankfully we won’t be touching Photoshop for a little while at least. I know, I know, most people don’t think that people who code websites deal with the graphic art software - but they end up quickly disabused of that notion. Even if you aren’t a graphic artist, if you put sites together, you need to learn how to work with the kinds of files that a graphic artist provides to you. After who knows, after a while… you might find yourself creating mockups in Photoshop just to do random tutorials

The next step is coming soon!

~Nicole

One of my least favorite things in web design are all graphical css menus. I utterly despise them, and the reasons are endless.

• Depending on what is involved, they can be a real pain to make accessible at times.
• They tend to require a strong foundation in CSS or a significant learning curve.
• By their image based nature alone they are going to bloat the page size and drop loading speed.
• They most often are found attached to a design concept that is already heavily graphical and already has a huge loading time.
• I dislike dealing with designs whereby a client is so set on having a specific font that they are willing to sacrifice an extreme amount of loading time to have it.

These kind of things fall into my category of - ‘the prettiest websites no one ever saw’ (meaning that they are beautiful works of art, but they take so long to load that no one sticks around to see it).

All that aside - you might some day decide to make one for a client, and it is in your best interest to know how.

Herein, you’ll find Step 1 of a tutorial on exactly how I create graphical horizontal menus. People vary in methods, and hopefully you’ll find your own way to do it.

In fact, this tutorial is going to show you one of the worst kind of graphical horizontal menus. A ‘worst case scenario’ sort of tutorial. The menu we are dealing with will be:

• Used in a fixed width design.
• On a heavily graphical site.
• Mildly transparent to the background of the page.
• Include separate ‘on’ and ‘off’ rollover images on the main menu.
• Include a sub-menu that is also somewhat transparent.
• Include a sub-menu that is entirely graphical and has separate ‘on’ and ‘off’ rollover images.
• All custom fonts used.
• Important Note: The menus must be accessible. The images need to be background images. No Javascript for drop-downs.
• We’ll have to do a unique solution for IE6 and lower.

Sound like fun? Well, either way, let’s get going.

I created a little mockup in Photoshop of a menu design we’re going to use. I’m not going to teach you how to do the rest of the layout. Only the menu. You will need to have access to Photoshop or Gimp for this sort of project, or you will need to have all the individual images given to you by your client ahead of time. You can download the PSD of the mockup if you want to follow along.

Stop here and take a good look at the menu, then try to anticipate what elements might be problematic. It’s always a good idea when starting a new project to look for potential pitfalls so you can work out solutions ahead of time.

If you’re lucky, the graphic designer (or yourself) has labeled all the image layers in your graphics program really well. If you are making this yourself, you probably know how easy it is to get lost in your own design layers. If you get a poorly labeled one, go in and fix the labels so that it can be easily understood. You’ll save yourself time in the long run because good labeling is essential.

Okay, first things first - we have to get this menu ready to be used.

Go through your layers in Photoshop, and toggle the visibility (the eye graphic on/off) until all of your top level menu links are in the ‘off’ position.

Let’s select the menu portion of this design, like so:

Don’t worry about selecting the menu perfectly yet. With this section selected, in Photoshop do:
Edit -> Copy Merged
Then:
File -> New -> OK -> Paste
You should now have a new untitled window popped up that just shows the menu area.

Now, grabbing your new Untitled window by the title bar, move it off to a corner for now, and bring the full design to the front by clicking on its title bar. We’re now going to go back to our layers and switch all of the menu names to ‘on’ instead of ‘off.’

With this section selected, in Photoshop do:
Edit -> Copy Merged
Then:
File -> New -> OK -> Paste
You should now have a Second untitled window popped up that just shows the menu area.

At this point, you can close your large image PSD (for the time being at least) and work just on your pieces of the menu for a bit.

Stack your untitled images so that you can see them well. Then go to your first Untitled image (should be currently named Untitled-1), and try to carefully select only the green menu area rectangle. Then go to:
Image -> Crop

There is a crop tool, but I feel this method is a bit more forgiving. Work with whichever you are most comfortable. You may have to do a couple of passes at this to get it cropped perfectly. You want only the green leafy rectangle and the links on it for this one. We’ll do the second one a bit different, so don’t jump ahead

Go to Untitled-2, and select all but the bottom portion below the green horizontal bar. You want to still be able to see where the sub-menu needs to come in from.

Then crop the image just as you did the previous one, until your images look like this:

Right click on the title bar of the second image, and click on Image Size. Jot down the height in pixels for this image. In this example, the height is 58 pixels.

Then click on the first untitled window to select it, and do:
Image -> Canvas Size

This will bring up a pop-up window. Toggle the height and width to show the values in pixels, and in the box with arrows you want to click the middle arrow in the top row. That will pin the canvas up by the middle top. Now you want to add some canvas space, just enough for our second image. That means we need 58 extra pixels in height.

My Untitled-1 original is 46 pixels in height, so I want to change that number to 104 pixels. Then click OK.

Your canvas should be expanded now by that additional 58 pixels, and they should be only on the bottom portion. Now you can go ahead and select the entire of Untitled-2, then:
Edit -> Copy
Click on Untitled-1, and:
Edit -> Paste
Move your new section around in there until it’s just perfectly below the top one.

You can now close (don’t need to save) the Untitled-2. All we need now is the joined menu. Then go save that menu (as a PSD) with a name you can recognize. I’m very simply calling mine, HorizMenu.psd.

Alternately, you can download my HorizMenu.psd file.

If you’ve ever worked with combined graphics, you might have an idea where we’re going with this. Either way… that’s enough for one sitting.

Keep Going - Step 2 is HERE.

~Nicole

If you have visited the blog lately, you may have noticed that the design has changed rather significantly. It’s not entirely done, and I’m tweaking things as I come across them, but I’m rather pleased with how it’s coming along so far.

The theme is based on the WordPress Cleaker theme, though I’m changing elements to make it a bit more of a perfect fit for the chocolate-colored scheme I prefer.

So why the change in theme? Well, I had been putting off quite a few major changes to my blog and finally decided to complete them this weekend. One of those changes is that my darling system admin and web host for the blog is phasing out of hosting and will be living abroad next year. I have had plenty of notice that this would be coming up in the future, and I decided that I would go ahead and move the blog over to my main server.

Now, the issue is that the blog had been running under 2.0.3 (I think) for quite a while. I keep at least one test install of WordPress running on my main server all the time, and decided to see how much of what I used on the other version would be compatible with the current 2.1.3 version. I copied all the theme and plugin files and did a test run on my WordPress testing server. Yikes! It died. The blog, not the server, that is. So the theme I was using was going to need a significant overhaul anyway because quite a few of my plugins were not 2.1.x compatible.

Faced with a choice between doing a redesign of a theme I was already tired of having, or starting over… I chose the latter. So now you see what will be the visual rebirth of this blog. I will still be tweaking and touching up here and there, but I think I like this look so far.

I made sure that many of the design elements are sticking around, such as the background and general color scheme that I like - but quite a lot is new.

Oh, I’ve been asked about the header image — that is actually something I whipped together in Photoshop and it’s a collage of the browsers I use for testing web designs (or a good portion of them anyway). Starting clockwise if you look to the top right of the collage you’ll see the Windows family of IE’s on display, below that is Firefox on Windows, to the left is the Linux family of browsers, and finally the top left is filled with various ones like Safari, Netscape, and Flock.

In any event, I am not too disgruntled about giving in and going up to the 2.1.x series (though I really dislike some of the changes). Overall, it’s proving just as stable as previous versions - even if I am having to substitute my plugins for others that do similar things.

~Nicole

Recently I posted an article which talked about the reasons to avoid using javascript navigation. The article listed reasons, but not alternatives, so that’s what I’d like to spend some time talking about.

Secondary Navigation

I feel that the best alternative to javascript navigation is to create secondary navigation for your pages. What is secondary navigation? In a nutshell, I consider secondary navigation to be any separate section of navigation that applies to a particular page or area of your site. Let’s look at some examples of this by taking a peek at the WordPress.org website. Below is a screenshot that I’ve scribbled on:

You can easily see that the secondary navigation sections change according to what page you are on. Here’s a different page:

This is a great alternative to using drop-down menus (a menu with a sub-menu on hover) because this method will work for any and all browsers.

CSS Drop-Down Menus

So what’s wrong with using CSS for drop-down menus? The answer may not be a huge surprise to you: IE doesn’t handle it well.

For most drop-down menus controlled with CSS, you essentially use a list structure with a sub-list for each menu item. The top list item is the shown menu item, and the sub-list contains the sub-menu items. You start by setting the value of the sub-list to display:none and then on hover of the main list item, you make it change the value of the secondary list to display:block. It’s a very simple concept, and theoretically this is how all menus will be done at some point in the future.

The problem is in IE6 and lower, primarily. It is possible to create this effect in IE7 (though typically you need some CSS magic specifically for IE7 to make it work), but earlier versions don’t support it properly. Why? Because IE6 and earlier had serious problems with handling actions on child-elements when triggered by a parent-element.

So, if you really want to use CSS for your menus, what’s a good way to handle this? Anything server side is ideal, but then you get into the issue of trying to detect browsers - which can work well most of the time, except that many versions of Opera cloaked itself as IE as the default setting.

Degradable JavaScript

This is a good solution, but it requires layout adjustments in some cases. You have to have the kind of layout that will work with this solution. Conversely, you can create a layout adjustment for people who have JavaScript disabled.

Let me show you an example of a decent (but not perfect) degrading JavaScript menu implemented on the US Patent and Trademark website. I have clicked on one item in the left menu bar, and you can see what happens, it dynamically opens up and shows the sub-menu:

But what if I don’t have JavaScript enabled? Here’s a screenshot of the same page with JavaScript disabled:

I think you can easily see that there are some pros and cons to this site. The good thing is that the menu is done in HTML using lists, so content is there for someone who has Javascript disabled - which is more than I can say for many sites that embed links into their Javascript. The cons? When it is disabled — the menu spans nearly twice the height of the content in the page when it’s all expanded. The visual aspect isn’t what comes to mind for me, it’s how awful it would be to listen to that many menu items on a screen reader. The idea alone is daunting.

I’m going to leave that thought to simmer in your mind, and move on to how this works (or doesn’t, as the case may be) for horizontal menus instead of vertical ones.

You saw what happened to the previous site when the JavaScript was disabled, but let’s pretend that you used a normal list structure again to create a horizontal list. Then you used Javascript to hide the sub-menus by default and to let the sub-menus drop down when you hover over the primary link. So, what happens if you have Javascript disabled? Well, in the described scenario, you’ll have all the links show at once, because the Javascript is no longer hiding the sub-menus. Depending on your layout and how these menus are styled, they’ll either push down your content to make space for all the sub-menus, or they will float on top of your content constantly.

Here’s an example of what could happen if the layers are set to float over the content, and they were no longer collapsed:

The obvious problem is not just that it looks lousy, the -real- issue is that the content is blocked.

Or if they are not set to float over the content, here’s what you could end up with:

In the second example, you’ll see a different problem - the content gets shoved down by the constantly expanded menu. Depending on how you have designed your page, moving the content like that could break your design by shifting other elements too far out of place. Aside from that, it looks bad, but not nearly so bad as the first option.

Be very careful with how you handle those horizontal menus. They can be really tricky to get right, and you have to really think ahead to make sure they degrade properly (which neither of the above examples do). Think about where those sublinks could be if you did have to show them to someone without Javascript. Could there be another area in the page where they could go? You know… like a secondary menu area.

Middle Ground Option

I commend everyone who creates their multi-level menus in CSS. As we’ve seen, those can be great and the only sticking problem is with IE 6 and lower. One middle-ground solution to that is to manage the menu controls for those affected IE versions using Javascript and browser detection as a combination. If the user doesn’t have Javascript, you have to offer a text version of the menu somewhere in your page, surrounded by a noscript element.

Best Choice Suggestion

Overall, there are lots of different ways that you can handle navigation. Some are significantly better and easier than others. Some are accessible, some aren’t.

Which brings me back to my main suggestion. If you want to ensure the biggest audience, without having to jump through hoops of ‘what-ifs’ (do they have javascript? are they on IE 6 or less? etc…) — use a secondary navigation instead. As a reminder, the secondary navigation was what I showed above in the screenshots of WordPress.org. It really makes life as a developer tons easier if you create navigation sections that are perfectly compatible in browsers and very accessible. In my opinion, the best way to do that is to make a secondary navigation section.

Over time many bad web design ideas have been dropped or lost favour, including unnecessary splash screens and unwieldy framesets, for the good of the web user. However, one web design bad habit that persists is the JavaScript Dynamic Navigation. This is bad news for both web users and those looking to commission a web designer to build a site for them. Ultimately if your navigation is broken, so is your site.

The seven top reasons why you should not use JavaScript Dynamic Navigation are:

Site navigation is difficult when navigation is not permanently displayed.

Everyone likes to know where they are going and even where they are! A site with a permanently visible navigation structure meets both of these requirements, but popup or dynamic navigation systems do not. Remembering that Google and the other search engines are as likely to deliver a visitor to a subpage as they are to your home page, a clear navigation structure is essential. Think of it as they “You are here” icon in your local shopping mall’s map.

Embedded elements can clash with dynamic navigation

A typical dynamic navigation structure will result in an overlay or pop up/down display. The challenge here is that if your site is media rich (ie contains flash animation or embedded video) these embedded elements will take precedence on the page. The end result is that part of your navigation will be hidden behind these elements making site navigation difficult if not impossible.

Cross browser/platform compatibility issues

As any developer will tell you, since the dawn of the internet, not all browsers are created equal. Some applications will follow a stricter implication of JavaScript than others. The only way to combat this issue is through vigorous testing - something that takes time and money. When you consider how quickly some browsers release code updates you have to be prepared to be in constant test and verification mode.

Usability issues- Dynamic Navigation is not for everyone

Just like menus in Windows or OSX, dynamic navigation structures require good hand/eye co-ordination. Not everyone will be as fast or as accurate as you are when it comes to using a mouse and nested dynamic navigation can be particularly hard to use. Usability studies with elderly users or those new to computers and the internet shows that such nested menus quickly cause frustration and are far from easy to use. Operating systems have addressed this issue by allowing a user to navigate using their arrow keys as well as a mouse but this is a complicated and difficult task to accomplish in JavaScript.

The Experts don’t do it

Go and visit your favourite site and then all the big internet names such as Google, Amazon, YouTube, BBC, MSN, Yahoo!, MySpace, eBay, Wikipedia, Craigslist, IMDB, etc, etc. There is a reason that you don’t see these sites using dynamic navigation and that’s because there are better ways. Any coaching or strategy expert will tell you the secret to success is to model those who are already successful. So if th336e experts don’t use dynamic navigation why would you?

You have plenty of other options

One advantage of a dynamic JavaScript navigation structure is that everything is contained in a single script file. Changing any aspect of the whole site’s navigation can be achieved by modifying this one file. However, this benefit is not unique to JavaScript. An external xml navigation structure or a range of server-side scripting processes can achieve the same effect and all are capable of outputting standard XHTML without any of the drawbacks listed in this article.

Your site will be broken if JavaScript is turned off!

With increased security awareness and the constant screen invasion by pop-ups many users restrict or even turn off JavaScript settings in their browsers. While this activity is designed to stop the JavaScript based popups, squeeze pages and floating ads, it will render your site inoperable. Statistics from W3Schools show that 10% of the visitors to your site will have JavaScript disabled. As there are plenty of better alternatives to a dynamic JavaScript navigation structure why even risk alienating 10% of your site visitors?

Written by: Iain Row
About the Author: Iain Row is the lead developer at Prominent Media, Milton Keynes Web Development that specialises in producing website navigation solutions. This article was prepared by Andrew Silvers of Attraction Marketing. 2006 Prominent Media Ltd.

Why? I think that has been the question echoing over and over in my mind. Why? Why? Why was this choice made?

Before I continue ranting about how Microsoft seems to get a thrill out of coming up with one developer-frustrating bit of news each month, I’m going to backtrack a bit and explain what I’m talking about…

In the SitePoint newsletter released on January 10th, there was a rather major article posted. The title of the article was “Microsoft Breaks HTML Email Rendering in Outlook 2007″ and can be viewed online in the archive. The article was republished on the main SitePoint site and incited a slew of comments, as expected. After that, we saw the topic covered over at Campaign Monitor, and Pixel Acres.

Why all the fuss? If you haven’t read the article, let me summarize the general issue from the standpoint of a very irritated web designer (one of many in this case).

Once upon a time…

…Web developers/designers were finally relieved to see IE7 in some sort of standards compliant form (even if it isn’t up to specs yet, it’s better than it was - even though they completely ignored the usability experts who were warning in beta that the interface was awful, but that’s another story entirely).

… This has a secondary benefit which made developers happy, because IE is used for rendering/display of emails in MS Outlook. With IE7 running with more standards compliance, that would mean that HTML emails would hopefully offer a bit more functionality based on that IE7 rendering. (Note: To any not familiar with HTML emails, it’s tricky business to make them display well on different email programs.)

… IE7 is released and downloaded by many people across the world.

… Whoops. Somehow we missed this article on the Microsoft site in all the excitement.

… So now we’ve found out that, for some unexplained reason, Microsoft has decided to not use IE7 for rendering in the new Outlook 2007.

… "But wait", you ask hesitantly. "What -will- be used for rendering?"

… Microsoft Word.

… No, I’m not joking.

Truly, I have no idea why this took place. Both the products belong to Microsoft, yet the chose to toss out the recently improved and expected solution to replace it with one of the most junk filled word processors ever created.

To cut to the heart of it, let me explain what is making people so upset. Choosing to use MS Word for rendering instead of IE will result in the loss of several options. This list has been repeated in several places online since developers have noticed this, so I’m just going to quote the list used in the SitePoint article rather than reword it minimally to say the same thing:

* no support for background images (HTML or CSS)
* no support for forms
* no support for Flash, or other plugins
* no support for CSS floats
* no support for replacing bullets with images in unordered lists
* no support for CSS positioning
* no support for animated GIFs

I am, honestly, quite annoyed. I publish an email newsletter each week that goes out to several thousands of readers. It is an HTML newsletter with significant CSS use. Now I’m thinking… okay, so, not only do I have to rework the newsletter, but if people upgrade to Outlook 2007, and try to read their old emails, I imagine now they aren’t going to display properly.

I am not the only one who’s annoyed. Annoyed doesn’t fully encompass it though. I’m also simply dumbfounded.

Now, before any plain-text only advocates jump on the bandwagon and start talking about how they don’t care, let me give you a quote from an anonymous poster on the SitePoint post:

HTML vs. plain-text in email:

1) This typical debate comprises progressive people debating the stagnant. “HTML has no place in email.” I’ve heard my grandfather make similar statements like “computers have no place in a library.”

2) Just because email started in plain-text doesn’t mean it has no room for evolution.

3) Anyone with a subscription list that offers a choice between HTML and plain-text can attest to the fact that HTML is preferred infinitely over plain-text. So anyone who says it has no place in email is an elitist who is ignorant of the preferences of the majority.

This article isn’t about HTML vs. plain-text.

This article is about the fact that Microsoft is catering to their own monopolistic goals and placing devastating hurdles in place for the web-design community. They’re taking 200 steps backward while everyone else takes a few steps forward. And they bank on knowing that they have lassos, enabling them to keep us all at bay.

Can anyone lay out a good reason why Microsoft would have made this decision? If your answer is that “they want people to use plain-text formats because HTML emails are stupid,” you’re in the wrong forum.

Now, there is supposedly a way around this. A comment by Oscar Gensmann (on the SitePoint article) had this to say about the options in Outlook 2007:

Outlook 2007 does have a way to render an e-mail using the built in browser (security-zone).

The method is:

1) Open the E-mail in it’s own window (double click)

2) Click the toolbar button called “Other actions” in the ribbon

3) Choose “View in browser”

This doesn’t help the problem with the preview pane and the fact that the user has to do a considerable amount of work to view the e-mail in it’s correct form. It does however change the situation where it’s totally impossible to view an advanced HTML e-mail in using Outlook 2007 as the primary e-mail client, to a situation where people choosing to use 2007 can be taught how to view advanced HTML e-mails with a simple couple of clicks method.

While that may be possible, how many of your average users are going to know to do that? As most developers/designers know, the average user cannot be expected to know how to alter settings. It should be assumed that many of them will leave their software in it’s default form. Besides, while it is a partial fix, it doesn’t solve the issue of the email preview (which tons of people use).

Obviously the user doesn’t care what is rendering their emails. They won’t know if it’s IE7, MS Word, or ‘that Google thing’. All they need is for it to work the way they expect it. Which is why this is a developer problem.

If developers didn’t scramble to find work-arounds every time Microsoft threw another curveball, it would become as obvious to customers (as it is to many developers) exactly how little they care about inconveniencing people.

~Nicole

After you’ve used Firefox for a while, you may have the desire to tinker around with the userChrome.css file and tweak it a bit for your likes or dislikes. Unfortunately, finding the userChrome.css is a bit confusing for people - particularly when the file doesn’t actually exist. This is something that was a bit confusing to me in the past, so I imagine that at least one other person out there has had a problem figuring out how to do this also.

For people who, like myself, are trying to get good at Linux by using Ubuntu, sorting through things at the command line is a tad intimidating, but I’m going to walk you through it and show you that it’s not so scary. In fact, I’m actually using my command line a lot more these days in Linux.

I’m going to give an example using one of the simple things you can do with the userChrome.css — we’ll change the sidebar from opening on the left to opening on the right. I’ll show you both ways in Ubuntu, the terminal way, and the file manager way.

The Terminal Way

1) Go to Applications -> Accessories -> Terminal
2) Type the following:
cd ~/.mozilla/firefox/
3) Then type:
dir
4) Look for the name of the directory that ends with .default as it’s name. It’s a randomly generated name, so you’ll have to look at see what it is for your computer. For example, on my computer I see the following when I type ‘dir’:
a8meqmbz.default pluginreg.dat profiles.ini
5) You want to change to the chrome directory that is inside that .default folder, so you type this (though change the name for your folder as it is on your computer)
cd a8meqmbz.default/chrome/
6) Type: ‘dir’ again and look at the directory. You should see:
userChrome-example.css userContent-example.css
7) Now, until userChrome-example.css is saved as plain old userChrome.css, it does nothing. It’s just an example file. Firefox won’t recognize the file till it’s renamed. So you need to open the file. I like using gedit, so I’m going to type:
gedit userChrome-example.css
9)That should open the file in gedit, and you can add the following lines to the very bottom of that file:
/* Move sidebar to the right side */
hbox#browser { direction: rtl; }
hbox#browser > vbox { direction: ltr; }

10) Do File -> Save As in gedit, and save it as userChrome.css (instead of userChrome-example.css). Then close gedit.
11) Close Firefox if you have it open, and then reopen it. You should be able to see your sidebar on the right hand side instead of the left (In Firefox: View -> Sidebar).

The File Manager Way

1) Click on your home folder.
2) View -> Show Hidden Files
3) Search through the folder until you find the one named ‘.mozilla’
4) Go into the .mo