Thanks for visiting! While you´re here feel free to take a look at my blog, view my recent work, or view my portfolio.
Unfortunately, I am not available for freelance work at the moment.
When beginning any project we start with an idea or ideas. Those ideas, no matter how great or how poor, must be translated into some form of audible, visible, or tangible medium for it to be communicated or received by another individual. The effectiveness by which we convey that idea is of the utmost importance. A poorly communicated idea can result in confusion, misguidance, or frustration, while an effectively communicated idea promotes healthy discussion, a clear view of the objective, and a feeling of mutual understanding.
When it comes to defining a solid user experience our ideas must be conveyed through multiple mediums, such as; verbal presentation, flow charts, documentation, and prototypes; usually in that order. Of all of these formats, especially when dealing with application design, prototyping is the most important. It is the culmination of all audible and written communication up to that point. It is the physical representation of the project or idea and is usually when the fun really begins. No matter how much documentation you have or how many times you have explained it, most people really wont be able to see what is literally in your head until you have developed a prototype.
A good way to explain it, I suppose, would be to compare it to reading a book vs. watching a movie about that book. No matter how well we present, or document, our clients will always have a certain idea in their heads based upon what you have explained to them. Sometimes they are on the same page but most times that is NOT the case. An effective prototype will not only visually convey what’s in your head, it will ensure that everyone is on the same page as you are. At this point stake holders and team members are better equipped to comment and make suggestions without creating confusion and it helps promote those “Ah-Ha” moments.
So, that brings us to HOW we convey this prototype. There are multiple methods of effectively producing a prototype. Some common ways are through rough Photoshop designs, Flash, HTML, or Paper prototyping. These days every second counts, literally. So when creating a prototype, especially in an Agile development environment, we have to get it out fast and we have to be able to make quick changes on the fly. Your prototype should have the ability to be altered and re-arranged on the go within seconds. In all reality I feel that there is a 3 step process when prototyping your idea and it always begins with paper. Yes, paper!
Paper is the perfect medium for prototyping. For several reasons:
- It’s fast.
- It’s easy to alter.
- It doesn’t require a laptop.
- It doesn’t require stakeholders to know Photoshop or HTML to make a note or an edit.
- Adding and removing functionality is just an eraser swipe away.
- Basic frames can be drawn up, photocopied and delivered for reviewing, notation, changes, etc.
Many people have the misconception that rough prototypes should be built with actual functioning components. In some cases this is true, but like I said, when I prototype I use a 3 step process and the first step is always paper. Once I have stakeholder approval for my paper prototypes it moves into the skinning phase. The skinning phase usually involves moving your paper prototype into Photoshop or whichever design program suits you best. This is where you add color to your creation. Make it beautiful, let the creative juices flow… ok, ill stop there… If design isn’t your forte, you can hand your paper prototypes over to the creative team.
Some may be wondering why you wouldn’t just start with Photoshop for your prototyping. The reason is “TIME”. Let’s say that you decide to begin your prototyping in Photoshop. You may be fast but I guarantee you’re faster with a pencil and a ruler. Anyone who has done a prototype design before knows that the end product is almost always much different from the beginning product. Imagine having to dive into Photoshop every time a stakeholder wants a change or you want to represent new functionality. Imagine the frustration of the guy sitting next to you chomping at the bit to show you what he is thinking, but cant jump onto your computer to demonstrate the change. Again, I guarantee that a pencil is faster than a mouse in this case and it can be passed around the table and altered by anyone.
After skinning your prototype and getting approval it’s time to cut and code or to throw it into flash. Flash is nice because it requires you to simply drop your designs into frames and link them together with transparent buttons. Although this may be faster in the short run it may cost you more time in the end. Most of the time Flash prototypes can NOT be handed over to the development team. They want code (unless the project is in flash, of course.) Your best bet is to start cutting and coding. By this point you, your team, and your stakeholders have a very good idea of how your idea works, and looks.
An important question could be asked right about now. What about usability testing? The answer: Usability testing should be happening as early as the paper prototyping phase. There is no reason that you should wait until you have a pretty HTML prototype for people to click through. Get those paper ideas in front of as many eyes as possible. When you move into the skinning phase, get those designs, once again, in front of as many eyes as possible. By the time you get to testing within an interactive HTML environment the feed back will be much more focused on functionality rather than how the site is organized or how the components look, saving you a lot of time and frustration.
So, in conclusion, the next time you have an idea put it to paper first.
They’re LIQUID! They’re TABLELESS! They’re ROUNDED and they use SPRITES!
Ok, maybe the subject of rounded cornered boxes has been beaten to death over the last few years with CSS becoming more and more agile. However, if you could humor me for a moment, allow me to present my solution to this issue:
I WANT A ROUND CORNERED HTML BOX THAT:
- Expands both vertically and horizontally to fit the content I put in it!
- Doesn’t require the use of tables (they are SO 2002)!
- Offers a liquid format without it breaking in older browsers… *cough* IE6!
- Uses sprites to help optimize my site and make fewer HTTP requests!
I actually have seen some great solutions to this problem but most of them included the use of tables or didn’t support liquidity. Also, a lot of them would simply just break in older browsers.
So here it goes. When I think of a rounded container in its simplest form I imagine 3 sections stacked vertically. A top section, a mid section and a bottom section. Both the top and bottom sections have 2 rounded corners and a repeating middle background. The mid section is composed of a left border, a right border, and a mid content section. However, in this example we wont be using images for the mid section, just simple CSS.
So now that we have a good idea of the anatomy of this rounded box, how do we actually build it?
Well, we need the necessary pieces. I have separated this tutorial, fittingly, into 3 sections. So, lets jump in to our handy dandy photo editor. In this case I will be using Adobe Photoshop CS3.
COULD SOMEONE GET ME A “SPRITE”?
To begin, lets create our sprite first.
- Draw a rounded cornered box on the canvas. In this example we will use a 10px radius for the box.
- Once drawn lets add a nice 4px border to it through the layer style tool. There you go… a round box… Wow… what a sight…
So we have our box, what next? Well, get out that “slice” tool because you’re going to need it! The key here is to get only what we need and to keep it consistent. We want to use as few images as possible.
Once you have the slice tool ready, let’s start slicing by zooming in to the left corner of our box. make sure to cut up to the point of repeatability. In this case I have gone just beyond the “corner bend” by about 3px. I know that my top-middle slice will match the color of the right edge of the corner slice we just made. This gives me a nice 15×15 square.
Now lets do the same thing to other side and the bottom section. Remember to keep it consistent. This cut should also be a 15×15 cut.
Now lets take a slice out of the top and bottom middle. Since this will be a repeating element we only need a 1×15 cut. So 1px wide and 15px in height to keep the sizes consistent.
You should now have 6 cuts made and your box should look something like this:
Now it is time to export these pieces. So go to “File” – “Save for Web & Devices”. I usually do the “2-up” view. we want to export all of the cuts at once so select them all by holding “shift” on your keyboard and ensure that the “slice selection” tool is selected. You will see them highlight as you select them.
Next, make sure that the export format is set as “png” (Setting it to this format keeps the image mode RGB making it easier to create the sprite when we are ready).
Then select “Save”. Select your desktop for the save area. Make sure that “Selected Slices” is chosen in the “slices” drop down box at the bottom. Don’t worry about what the slices are named for now. Then click “Save” again.
If everything worked out, you should have 6 png images on your desktop.
Now that we have our slices done, let’s bring them back in photoshop so that we can create our sprite.
Once all the slices are opened in photoshop. Create a new file and set the hight of the new file to 15px in width (Longest width) and 90px in height (15 X 6 = 90). Then zoom in to make it easy to move your slices in to the new canvas.
If you found that you accidentally exported your slices as “GIFs” you will discover that your slices wont drag and drop onto the new canvas you have created. But don’t worry, just go to each slice, select it, go to “image” in your toolbar, select mode, and then change the mode from “index” to “RGB”.
Drag your slices over one-by-one to the new canvas, stacking them vertically. I usually like to go from left to right, top to bottom for the corner slices and then I place the 2 mid slices at the bottom.
Once I am done dropping in the middle slices for the top and bottom, it is important to make sure you stretch those 1px by 15px slices out to be 15px by 15px. This will ensure that you don’t have breaks in the background when implementing them in a repeating background. Once done, your sprite should look something like this… hopefully:
Now that we have our sprite, let’s clean it up just a little. Remember, the less pixels your browser has to render, the better. So select each corner layer and use the “Magic Wand” tool to remove that excess white background around the curve. Set the wand tolerance level to around 2.
Now that we have removed the “fluff”, let’s export this sucker! Let’s go back to “save for web” in the “File” menu. This time make sure “gif” is selected for the export option and set the colors to 32. You wont even notice the difference and it will drop the size of your sprite from about 766 bytes to 433 bytes! Every byte counts! Now hit “save” and lets call it “g_box_spt.gif” and save it to your desktop. Once it is saved on your desktop, create a folder called “images” on your desktop and place your “b_box_spt.gif” into that “images” folder.
CONGRATS! You have just made a sprite! GO ahead an delete those extra slices off of your desktop. You wont need them anymore. Lets move onto the next section.
HTML TIME!
I have taken the liberty of writing the code for you. Simply download the HTML code here, unzip it and open it up in the HTML editor of your choice and I will explain how it is setup.
After pasting your code save your file to your desktop as my_box.html. Now if we pick apart the code you will see that I have three sections: top, mid, and bottom! How revolutionary! We will be going through the CSS in just a moment, but just know that the “box_top_lt”, “box_top_rt”, “box_btm_lt”, “box_btm_rt” are your corners. While the “box_top_mid” and “box_btm_mid” classes are the repeating backgrounds for the top and bottom.
The interesting thing we have done here is we have nested the corner images within the repeating background “divs” and for good reason. This will help each level to better function as a single group stacked one on top of the other.
NOW ONTO THE CSS
Create a folder on your desktop named “css”. Then download the CSS code here and save it into the “css” folder. Then open your HTML editor to view the css file.
This is where the true magic happens.
In the “FIRST” section:
- I have defined a width on the “.box_wrapper”. I set it to a percentage so that it is liquid.
- I created a “clear” class to clear the floats that we are using.
- I then applied the sprite to all of the listed classes that contain an image.We know that the height for all of the classes will be 15px because we made sure to keep that consistent when we created our slices.
- The key to making this work is the “relative” positioning. This allows us to manipulate any of these classes and move them pretty much anywhere. For more information on how absolute and relative positioning works read this article. I also set the font size to 0px to fix spacing issues in IE6.
In the “SECOND” section:
- Further define common properties amongst classes, such as; setting the width for the classes that contain corner images to 15px and setting the classes that contain the middle slices to repeat horizontally.
- At this point the relative positioning and floats come into play. Remember that the “.box_top_lt”, “.box_top_rt” “.box_btm_lt”, “.box_btm_rt” classes are contained within the “.box_top_mid” and “.box_top_mid” in the HTML. So we float the left corner images to the left and the right corner images to the right within the mid background div.
- Now, if we stopped there and looked at the HTML in a browser we would notice a tiny corner of the repeating background poking out from behind the corner images. We don’t want that so we push those corners out 15px more to the left and to the right by using the relative positioning property we defined on all of the classes in the “FIRST” section.
- Now, that we have ensured that everything is in place we need to properly reference our sprite. This can be a little tricky because you need the starting y position on the sprite so you can either go back into your photo editor and figure it out that way or you can use simple addition. we know that the top left corner was lying on the 0,0 axis so that means that the top right corner was lying on the 0,15 axis so put “background-position: 0px -15px;” and so on.
- Now that we have all the background images matched up and all the classes in place we need to create the mid container. That is as easy as setting the background to the content color you used when creating your box. In this case it is #FFF. Then we place a 4px border with the color being #9D9D9D, on the right and left side ONLY. This will tie the top, mid and bottom sections together. Once you have that all in place your box should look like the demo example here.
From here you can mold this box however you like. Want to center it? Throw a “margin: 0px auto;” on the “.box_wrapper” class. Add as much content you want to it, it will stretch. Test it in all your different browsers, it wont break! This method works great for liquid buttons, liquid modals, liquid pop-ups you name it. A lot, of which, I will be covering in the coming months so stay tuned.
I hope this helps those of you with those same “WANTS” that I had. Again, this is just a basic example and I am probably not the first person to come up with it. Either way give it a shot and let me know how you like it or if you have any questions or suggestions.
So, I was able to play one of my favorite games this last week. I call it the “Web Optimization Game”. The game basically involves trying to figure out just how well you can optimize your web pages to get them to load faster and FASTER! Ok, so it’s not for everyone but man do I love it.
In all seriousness web optimization is one of the funnest parts of creating an application. Not only is it relatively simple and non-time consuming but it can yield some great rewards. There is some sort of magic in watching the load time of a page go down, down, down the more you tweak and optimize the page.
This time around I was able to leverage a great tool. It’s called “YSlow“. It was introduced to me by my good friend Ravi Thinakkal or as I like to call him “Yahoo CSS Template Lover”. YSlow is available through the FireFox “Add-ons” tool and was actually developed by Yahoo. It works right within firebug and is able to verify whether or not you have taken the proper steps to fully optimize your web page. It has 13 checks:
- Make fewer HTTP requests
- Use a CDN
- Add an Expires header
- Gzip components
- Put CSS at the top
- Put JS at the bottom
- Avoid CSS expressions
- Make JS and CSS external
- Reduce DNS lookups
- Minify JS
- Avoid redirects
- Remove duplicate scripts
- Configure ETags
After it runs these checks it gives you a grade level for each criteria; A-F based on how well your site measured up. As much as I would like to go through all 13 steps I wouldn’t want to ruin all the fun you’ll have figuring it all out.
The interesting thing I found was that with very tiny modifications here and there, such as moving the JavaScript files to the base of the DOM right above the closing <body> tag, I was able to knock off almost 2 seconds of load time. By using sprites I was able to cut way down on “http” requests, thus further decreasing page load time. After doing all of this, as well as minifying, Gziping and caching Javascript and CSS files, we were able to take the site from a 5-7 second load time to under a second! The best part about it was that we didn’t have to make any major tweaks to the architecture of the application and we didn’t have to mess with the back-end very much at all.
There is a great book that I think every Front-End Engineer or UX Developer should have as required reading. It is called “High Performing Websites” by Steve Souders (Also introduced to me by the, before mentioned, “Yahoo CSS Template Lover” ). It actually goes over all 13 of the YSlow verification steps in detail. There are actually 14 steps in the book. The 14th is “Make Ajax Cacheable”. I highly recommend this book.
The best part about these techniques is that you see instant results. With each optimization step you can see the load time of your site getting faster and faster. In the end it makes for a much more pleasing experience for you and your end user. You are getting your user the content they need quicker and getting them to where they need to go faster.
Through optimization you can greatly minimize bandwidth usage and in the end that just means less money spent, especially if it is a major application that’s accessed constantly throughout the day. Before you know it your boss will be giving you high-fives and treating you to Sushi… ok maybe not, but you get the point.
So, the next time you get a little free time, download firebug and YSlow and play the “Web Optimization Game”.
If you’ve ever seen the movie “Young Frankenstein“, there is a particular part when Dr. Frankenstein fails to bring his “creature” to life. Upon realizing his failure he turns to his assistant and says, “Be of good cheer. If science teaches us anything, it teaches us to accept our failures, as well as our successes, with quiet dignity and grace.” Immediately after saying this he starts screaming and beating the crud out of the lifeless creature! Hilarious!
The reason why I mention this particular scene is because it so closely parallels the creation of my new blog / portfolio layout & site. (make sure to check it out if your reading this through an rss feed) Over the years, again and again I would begin designing, cutting, and coding with hopes of bringing this creature to life. However, in the end, due to “this or that”, I would never successfully breath life into the beast. In the back of my mind I would try to accept the failure with quiet dignity but in reality I would say, “screw it” and dump the whole project. I am sure many of you can relate.
You see, by the time I FINALLY got back to working on the project, I had already learned a whole slew of new and great CSS and/or JavaScript tricks that I wanted to apply or some sort of new design concept that would make my site all the more merrier. Thus, the process would start all over again.
Well, this time I was determined to bring this beast to life! So, after many hours of designing, cutting, coding, scripting, frowning and smiling… I threw the switch and the creature slowly arose from it’s lifeless frame and took it’s first breath. As much as I would like to accept my presumed success with “quiet dignity and grace”, much like my failures I’ll say, “screw it” and scream like Dr Frankenstein, “It’s Alive…ALIVE!”
The other day I was able to draw added inspiration from a recent article by Jared Spool named, “Failure Is Not an Option – It’s a Requirement“. There’s a quote in the article that reads, “Good judgment comes from experience and experience comes from bad judgments.” When used in the context of creating a top notch user experience, this quote is right on and I am a firm believer.
So, it is with great pleasure that I introduce you to my new creation and welcome you to “Branded X”… enjoy!
