think.point.click. » Design

Tips for Coding HTML Email Newsletters for Multiple Browsers

Ivan Printis — Sun, 28 Aug 2011 22:10:59 +0000

If you are reading this than you know the joys of trying to code your email for all of the various email applications out there. Outllook, AOL, Gmail, Hotmail each have their own quirks and rendering methodologies and getting your email to display in all of its splendor and glory in each is well…a pain in the ass.

So now that you are reading this article hopefully you’ve stopped banging your head against your desk and I have you attention for a minute or two. Here are the resources I have used and found helpful to aid you in your process.

I would start with the Email Standards Project. Here you can find a list of all the major web email clients and how they stack up to the Email Standards Project acid test. When coding, this will give you a head start on what each email client supports and what will render properly before you decide to really flex your creative CSS muscle.
Another great resource is from Campaign Monitor. You can take a look at the CSS support for both desktop and web email clients so you don’t have to figure it out for yourself. You can download the 2008 CSS guide in PDF, Excel format or view it on their webpage.
Now that you know what you can and can’t do you will need to test your work. Litmus has a great email testing tool that allows you to view your work in every major desktop and email client application. You will see exactly what you recipients see without having to open 10 different email accounts checking each one every time you make a change.
If you need a good place to start or some plain ol’ fashioned inspiration. Here is an added bonus. 30+ Free HTML email templates that will look good in all the major email clients tested by Campaign Monitor. They are organized by Left Sidebar, Right Sidebar and Single column layouts.

Well, I hope this helps gets you started or figure out why that image just won’t line up. I want to hear from you. What resources are you using to keep your emails inline?

Unboxing Apple’s New MacBook Pro

Ivan Printis — Mon, 06 Dec 2010 22:52:35 +0000

It only took six months of research, 20 or so visits to Best Buy, and 3 visits to the Apple Store to finally make a decision. And in all honesty, I have to say it was well worth it and definitely the best decision I could have made.

Now, just a little background on why it took me so long to figure out what to do. When I started my initial research, I did what most people do, I hit up google, read the reviews and made a list. Eventually, my very long list became a short one, which was widdled down to the Sony Vaio. I had taken a look at what Apple had to offer back in January, but the cost immediately eliminated a Mac from the list. I was like, “WTF, man! I can get the “same” thing for half the price.”

I knew I was making the right decision, a Windows based PC was the way to go and the Sony Vaio got it right. I had specked everything out, processor speed, video card, RAMM and could not see the benefit of buying a MacBook Pro. So, on one of my “final” visits to Best Buy to make sure I was comfortable with the screen size and weight, one of the Best Buy sales guys was like, “If you want to do all of that, You really should look at getting a Mac…”. I will get into the details later, but after 2 hours and as the store was closing I was still skeptical, but saw the power and flexibility of why Apple really had it right and how the new MacBook Pro was the best for the job.

Ok, so now to the fun stuff. Getting what I think is the best laptop you can buy in the market out of the box.

I have to give it to Apple and their Product Managers. They do an excellent job with keeping everything elegant, clean, and simple.

Can't you just feel the energy flowing from the box.

There are some lessons learned in not only how to sell your product,but how it looks and how you feel when you open it up for the first time.

I still don't know why they give you two electrical plugs.I should call Apple Care and find out. Doesn't she look good. I think my wife is jealous.

Sleek and Slick. A little over 5.5 pounds and less the an inch high,the Apple MacBook Pro looks and feels amazing.

…and there she is, in all her glory and wonder.The 15-inch MacBook Pro w/ Hi-Res Antiglare Widescreen Display.

Creating a Plan for Your Website – Organize then Design

Ivan Printis — Thu, 05 Nov 2009 04:20:48 +0000

Now you may ask why do I need a website design plan? Well, would you hire a builder for your vacation home before seeing the blue prints? Would you take a trip to Brazil without setting up a travel itinerary? A web site is a similar investment to which you will devote significant time and other resources. Any investment, if it is to succeed, requires detailed planning.

The steps you take before you actually start the design or coding will save you a lot of wasted time, energy and money in the long run. You will be able to determine the major objectives for your web site as a result of defining its purpose and identifying the audience. Stating objectives for a website is similar to setting up goals for a business, in that doing so gives structure and direction. The document you create serves as a reference point throughout your project and keeps the planning and creating phases on target.

Before you start planning your website, take out a pencil and a sheet of paper and do some preliminary research to help you answer some questions:

Explore other websites and identify those that impress you
Describe elements that contributed to that positive impression
Identify means by which information was presented to you – photos, text, video, sound
Describe what made the information easy to find
Why would you want to return to the website?

After this exercise, you should have a better idea about the direction you want to take and how you are going to approach your website. Start your planning by creating a site specification document. This is the blue print for your site. The site specification will serve as a reference point and guide as you build your site and will help to maintain your focus. Answer the following questions in your site specification:

What do you hope to accomplish with your website? Write a two or three paragraph mission statement that briefly states the site’s goals. Your goal may be to increase communication with your audience, increase your online presence, provide a new service or attract new customers and business. No matter what your end game, your website will require lots of work, therefore it is essential that you have viable and achievable goals for your website.
What do you or your company or organization hope to gain from creating and maintaining a web site?
How will you judge the success of the website?
What are the measuring factors you can use to assess the effectiveness of the site?
How will people find out about your website?
Who is the target audience?
What characteristics to they share?
How will you find out more about them?
What are the limiting technical factors affecting your site?

Clearly define and understand your websites goals. It is likely that through this discovery process you will want to achieve most if not all of your goals. Prioritize these goals as you define the purpose and carefully consider what type of site you are building. Do you want to communicate information, educate, entertain, or sell a product or service?

Keep in mind, what you want the site to accomplish and what your users want from your site may differ. Adopt your user’s perspective and think about the type of content you’re presenting. Look to the web for examples of how best to present it. As you continue to develop your design plan, choose content, and create your website, keep the purpose at the forefront of your planning and let it guide you as you make those critical decisions.

Dual Monitors: How to Have a Different Wallpaper on Each Desktop

Ivan Printis — Sun, 04 Oct 2009 04:37:39 +0000

I would consider myself somewhat of a technofile, so in the tradition of all things nerdy I made sure that both my wife and I had dual monitors. For the longest time we have been stuck in a bleak and boring world where our dual screens displayed the same wallpaper, but that world has come to a glorious end.

So how do you ask did we do it? Thanks to Jon Tackabury and Binary Fortress Software we have been given the gift of… Display Fusion. Display Fusion is free dual monitor wallpaper setup software. It can take any widescreen or high resolution background and display a different desktop wallpaper image on each monitor.

Get started by downloading Display Fusion and installing the program.
Once the software is installed, you’ll notice a new tray icon on the lower right hand side of your main desktop window.
Right-Click the Display Fusion icon and make your way to the top of the menu.
Click on “Desktop Wallpaper” to open up the dialog window where you will set up a different wallpaper for each desktop.

Once you have the Desktop Wallpaper menu open, click on each desktop in the display (1 and 2p) to configure the settings independently for each monitor. Note there is also the option to span your wallpaper across the entire desktop or download images from Flickr.com or Vladstudio.com.

To select your images Click “Load From…” in the Display Fusion Menu
You will get a drop down with options to upload images from:
- Your Computer
- Flickr.com or
- Vladstudio.com
Select the images you want and Viola! You now have a different wallpaper on each desktop.

Also here are some of my favorite stomping grounds when I’m looking for new desktop wallpapers. Have Fun!

Highlight, Display, Create On-Hover or On-Mouseover Text-Captions Over an Image Using CSS

Ivan Printis — Wed, 23 Sep 2009 05:56:20 +0000

Hah! Do you like the title? It’s a bit long, but this was an attempt to save you some time. I am hoping I captured enough keywords from all of the searches I did that you managed to find this page. Soh Tanaka is a talented web designer and developer and thankfully he took the time out to write CSS On-Hover Image Captions.

Excellent CSS Books Worth Checking Out from SitePoint.com

I used his code to successfully implement captions over images using only CSS for EduBasics: Home of Multiplication Hip Hop product page. In all it took about 15 minutes to update the stylesheet, html and upload it to the server. At the end of the day I hope this saved you some time and provided the code you needed.

A little due diligence; here are the Google queries that led me to Soh’s article – CSS On-Hover Image Captions. This list is a history of two hours of fumbling around on the internet. The queries are in order #1 being the last query that led me to the light. What search did you perform to get here? Comment and let me know.

css image captions (after two hours)
show text over image css on hover
display text over image on hover using css
diplay text over image on hover using css
on hover show text
css hover display text
css hover display image
show text over image on hover
display text over image
css hover
show text on hover using css
show text on hover
highlight image hover effect
how to highlight and show text using javascript
call multiple javascript functions
script.aculo.us highlight on mouseover
mootools
jquery
highlight on mouseover and display text jquery
highlight on mouseover and display text
spry highlight
scriptaculous
moo tools