Topic: Tips and Tricks
Dear Scrabulous, I Like U, and I Like UI
Dear Scrabulous-
I’m a big Scrabble fan, and I know I’m way behind by just having hooked up with you this weekend. I also know there are people fighting over you (not such a bad problem to have) and I hope you hang around. I like your user interface mostly fine, but I’m wondering if you could tidy up a few small things.
Tips For Coding HTML Email
For many, designing and coding for emails can become a frustrating task. With so many different types of email clients that each seem to follow distinct standards, many hours can be spent just to figure out what works. Luckily, there are great resources available for reference.
The following list contains both css and html tips to ensure your HTML emails look great when delivered!
- Great general overview for HTML emails. LINK
- Campaign Monitor offers an excellent guide to email CSS support that covers both web- and desktop-based email apps. LINK
- Premailer is a good tool for checking inline CSS in your email template. LINK
- The Email Standards Project works to improve web standards support and accessibility in email. They have also put together the Email Standards Project Acid Test. LINK
- A great Flickr group with people showing just how frustrating creating HTML emails for Gmail can be. LINK
Additional resources:
Styling the Button Element in IE
If you’ve ever attempted to style a button inside IE, you know that it can be a huge pain. On most of our projects, we’ve now started using the button element in place of traditional input buttons due to the ease of styling and consistency across browsers. One of the first things you might notice when you bring your nicely styled buttons up in IE is that, for reasons unknown to me, IE decides to stack the padding depending on the width of the content inside the element.
After spending some time adding a lot of extraneous CSS to the IE specific style sheets, I realized that two simple lines of code fixes the problem.
button {
width: auto;
overflow: visible;
}
Those two lines of code will save you countless hours. Go give your button elements some extra love.
UPDATE: July 16, 2008 - Please note that this fix DOES NOT work for buttons contained inside table elements.
Properly Focusing Clients on “The Look” of Their Site
Viget works with a wide variety of clients with varying depths of web knowledge. Some simply have a business plan based on a strong idea, while others have designed, built, or maintained sites themselves. Regardless of this level of understanding, there’s one thing we all “opinionate” and iterate on — the look of the site. Aesthetic is typically unique in that all of the stakeholders in the project can and want to have input. After all, if we can see, we tend to have preferences for colors, layout, photo selection, font styles, etc. So the visual design of sites is typically an iterative dance between the subjective opinions of those involved, the established goals of the site, and the more objective “rules” of good web design.
Hopefully, the client is involved in or aware of all of the planning (sitemapping, wireframing, defining of audiences and actions) before the look is ever approached. Occasionally, even when they are involved in the planning, clients lean toward an unproductive and over-iterative focus on aesthetic. Many times, this is simply because we as designers allow the client to see visual decisions as a separate “phase” of the project, and they unconsciously become detached from the rest of the site goals for a short time.
So, a simple suggestion to keep a healthy, balanced perspective toward aesthetic — at the beginning of any visual evaluation (competitor site reviews, mood boards, comps), simply take two minutes to clarify with the client that visual design is much more than preferences/decisions on color, photos, and layout. Remind her that visual direction must always be evaluated in the light of:
Users/Actions
How will intended users perceive this design? Are the actions they’re meant to take apparent?
Aesthetic
How does it look? What feeling does it evoke? Are colors/fonts used appropriately? How is the brand being used/reflected?
Content/Data
What information are we offering through this design? What are we collecting? Are the content areas being given proper design attention and priority?
Functionality
Is the content/data/technology that we have available being leveraged to create appropriate and interesting features?
Usability
How easy or hard is it to use the page/site? Is the content visually prioritized, is it easy to find, and is the user effortlessly able to take intended actions? Is usability suffering because of other poor decisions?
These simple ground rules for evaluating the look of a site tend to get everyone more healthily engaged in making design decisions. Decrease subjectivity and iterations, increase objectivity and communication, and maintain focus on the larger site goals.
Avenir: Font of the Future
When I asked Doug, the Viget Designer behind the typography on the Inspire Blog ,why he used Avenir he replied “because it is the greatest font ever”. Doug is not the only one to have such an opinion of the geometric sans-serif typeface, in 2004 Avenir was named one of Typographica’s favorite fonts. When Andy Budd asked Cameron Moll what fonts would he choose if he could only have 6 his first reaction was “ Avenir, Avenir, Avenir. I’ve abused this typeface in both web and print work, and it’s held up to the abuse with flying colors.”.
In French “avenir” means “future”. This hidden definition makes it a perfect choice for the Viget Inspire Blog because web designers are innovators who are always looking to push the boundaries and limitations of their medium.
Adrien Frutiger designed Avenir in 1988 and is best known for his typefaces Univers and Frutiger. Frutiger explained his reasoning for designing the San-Serif in an interview with Linotype:
“Looking back on more than 40 years of concern with sans serif typefaces, I felt an obligation to design a linear style of sans serif, in the tradition of Erbar™, Futura®, and to a lesser extent Gill Sans®. These have purely constructed characters from which the element of a handwriting movement has been removed. Obviously this could not be an outstanding new creation, but I have tried to make use of the experience and stylistic developments of the 20th century in order to work out an independent alphabet meeting modern typographical needs.”
Avenir has become very popular in web, print, identity, and environmental graphic design. As part of their national identity the Netherlands uses Avenir on their site amsterdam.nl as well as in signage and brochures about their country. You can find Avenir playing a key part in the branding systems of the Reuters and Dulles Fort Worth Airport. On the web a customized version of the font is used in the logo for Shutterfly and the book and medium weights on purevolume.com.
Frutiger describes his typeface as “modern and at the same time humane” but I find Avenir to be an inspiration.
Creative Over-Thinking
A few of Andy Rutledge’s words from The Design View Show, Episode 2, although aimed at answering the question of formal vs. self-taught web design education, reminded me of an important topic web designers need to remember: that constraint – not creativity – should be the overriding drive behind our designs.
As Andy shares, when designers think creativity – not problem-solving – is the prime measure of success, they enter a competition of artistry and decoration. I would add that true originality is often a high expectation of the creative-crazed designer, too. If it’s creative, looks nice, and feels super unique, then it’s assumed to be a successful design.
Such an assumption lays a comfortable foundation for designers to “trust their intuition” (advice often given from one designer to another) and fall in love with something they created – even though it doesn’t work. Too often, we designers create a logo, marketing idea, tag line, web design, or UX technique that we believe is innovative, when, quite frankly, it’s just not.
I call it creative over-thinking; when our desire to be inventive usurps our rational instincts. The end product is forced, and we might even feel some catharsis because of it. Sharpening our internal radars to recognize when we’re headed down this frustrating path is among the best ways to balance the art with the design purposes.
Techniques to stay oriented
Instead of “trusting your intuition,” I say “trust the intuition of others.” Be proactive about seeking feedback from outside sources knowing they usually don’t get it (often for good reason) but they’ll be honest in their reactions. The truth can hurt, yes, but most of the time we’re designing for them – not other web designers.
If you find yourself explaining your design decision in paragraphs rather than a simple sentence, then it’s time to re-evaluate. Portfolio pieces can look great but don’t communicate clearly or connect effectively. The more you explain concepts, the deeper you’ll dig. Effective design decisions will explain themselves.
Regularly along the way, re-orient yourself to the intended users and audience, and don’t waiver from this focus. Generally, “creative flare” isn’t at the top of their list of design needs. It doesn’t hurt, of course, but the best designs are credible, usable, easily digestable, correctly targeted, and clear. Often, it’s the simplest designs that achieve all these characteristics fluidly.
Quick takes to prevent over-thinking
- Know your core: are you an artist or a designer? Identify your leanings.
- Know that naturally creative people aren’t necessarily naturally design-oriented people and vice versa.
- Remember that art and design often clash. Save examples of the two working well together.
- Balance your desire for creativity with a desire for constraint and simplicity.
- Stop forcing ideas. It’s a great waste of time and energy and results in frustration.
- Seek out and accept feedback frequently from non-designers.
- Make achieving the client’s goals a priority over achieving your own personal aesthetic.
- Remember your users and audience and prioritize your design to meet their needs.
- If you’re compromising originality at work, seek fulfillment with intensely unique and creative side projects.
Bigger picture
Yes, this post in some ways falls into the age-old categories of art vs. design, creativity vs. constraint, form vs. function, original vs. ordinary. However, I’m more and more convinced that the best designers are those that understand the balance of all of these things. Here are a few links if you’re interested in any further reading:
- The Design View Show
- Universal Principles of Design
- Be a Beautiful Designer
- Collecting for Design
- Form vs Function (all the way from 2001)
Team Viget: Under the Hood
We’ve received great traffic and encouraging feedback since launching our Team Viget site just over three months ago. We’ve also been asked quite a few questions regarding the functionality used, so here’s some explanation on how Team Viget works.
The core is a JavaScript (JS) library called jQuery. It’s powerful and simple—even for the programatically challenged designer. Its ability to select HTML elements using CSS selectors and/or XPath is one of its greatest strengths. You should check it out.
The site acts as a dynamic-side scrolling box - except on a larger, site-wide scale. To begin, I created a container that spanned the entire width and height of the browser window (Fig. 1, blue box). If the user has JS enabled I assign a class to it, which sets the overflow property to “hidden” so it will behave like a mask.
The next child container of that mask holds all the content and is given an extra long width to accommodate users with JS disabled (Fig. 1, green box). Sub pages, which are really just classed elements, are then wrapped within another container then stacked and positioned (Fig. 1, pink box).
From that point, we move into animation. All of the movement is handled by the jQuery animate() function. It enables you to create amazingly smooth custom animations using anything from position and opacity to font size and borders. For Team Viget, we use it to animate the position. When a user clicks on one of our navigation elements, the entire content wrapper slides from right to left (Fig. 2, green box). It’s then repeated—moving the opposite direction—to return the user back to the home page.
So there’s a taste for you. Check out our stylesheet and JS file for more insight.
Oh, I almost forgot! We created the beautiful easing effects with George Smith’s jQuery easing plugin.
Recent Comments
I was gonna say, Fireworks has a useful feature to scale corners with 9-slice and even 3-slice scaling of buttons. I use it all the time and you can probably make use of the assets in...
- Erik on 'Resizing rounded rectangles in Photoshop'.
- Max Wheeler on 'Resizing rounded rectangles in Photoshop'.
- Jim Basio on 'I Can Has Stock Images!'.
Subscribe to Comments RSS