Archive for the ‘Web Design’ Category
Standardized Video
May 1st, 2008
MatthewThe Interactive Advertising Bureau (IAB) is set to publish new guidelines for online video ads on Monday May 5th. The group has been taking suggestions and input from industry members on proposed guidelines for a month.
The guidelines do not prevent new online video ad formats from developing in the future, but they may cut down on proliferation of forms, which can frustrate consumers and make the business of selling ads more difficult.
eMarketer predicts that spending on online rich media and video ads will account for nearly one-fifth of all online ad spending by 2012, up from 9.7% of all online ad spending in 2007.
“Video ads command higher prices than static display advertising,” said David Hallerman, senior analyst at eMarketer. “That both boosts overall ad spending and draws in more dollars from traditional brand marketers, who have been reluctant to commit much of their ad budgets to the Internet.”
Ongoing experiments with video ad formats and a lack of standards have, in part, kept the online video ad market from even stronger revenue growth.
Other hurdles have included limited high-quality video content to attract big advertisers and unresolved issues such as traffic measurement, which will be needed to gain the trust of the most deep-pocketed marketers.
As those problems are solved, spending will increase. eMarketer predicts that US online rich media and video ad spending will total more than $9.4 billion in 2012, which is more than four times as much as the 2007 spending level.
For its part, the IAB said that the guidelines and best practices address the most widely used current in-stream ad products, including linear video ads, non-linear video ads and companion ads.
“Digital video has matured beyond the experimentation stage, and continues to be one of the most exciting platforms within the interactive landscape,” said Randall Rothenberg, CEO of the IAB. “The creation of these formats and guidelines will allow digital video to continue to flourish on two levels—creativity and marketplace efficiency.”
The IAB said that the guidelines attempt to simplify digital video ad buying across multiple sites with minimum common ad specifications for video, overlay and companion ads. As with standardized ad formats in other media, they are designed to make operations more efficient through a common set of creative submission guidelines.
“In general, the attempt by the online ad industry to create standards and guidelines is most often a good thing,” Mr. Hallerman said.
Jeremy Fain, senior director of industry services at the IAB, told eMarketer that the standards were designed to make it easier to buy online video ads on a mass scale.
“The guidelines take out the friction, gather the most widespread formats and make it easier for large agencies to buy across larger audiences online—making digital video a serious portion of their online plan.”
He said that designers would still have plenty of room to create.
“All of our guidelines are minimum standards so as to not stifle innovation.”
Meta Tag Forward
April 9th, 2008
Matthew<META
HTTP-EQUIV=”Refresh”
CONTENT=”5; URL=autoforward_target.html”>
In the details
March 11th, 2008
MatthewYou’re at the table with fellow designers, an art director, and a creative director. The large screen displays designs you’re about to collectively critique. This is the first time you’ll all consider the initial round of concepts. The designs go up, one by one, and the words begin to flow.
It’s a phrase you hear often: design is in the details. With design, paying attention to small details—and in some cases, obsessively focusing on “what isn’t right”—can take a design from “nearly there” to “there” and beyond.
I attend meetings in which designers present their designs—typically the first round of comps—for the first time. Half the time, the presenting designer shows a rough product on the screen, and they usually believe the design is 90-100% done. But to the detail-savvy designer, the work is only 50-70% there. You can see the groundwork, foundation, and feel of the design in front of you, but you know it’s just not finished.
The goal of embracing details is to get you to think critically and present the best possible design you can—right from round one. In essence, you want your design to be ready for a real client presentation. So how do you take a design to 100%? You need to achieve polish, ridding the client’s mind of any doubt that the design is unfinished. It’s all too common for designers to feel rushed: you’re under deadline, you’re under pressure. But if you care about your craft and your ideas, you’ll take the extra time, perhaps working late into the night, as we all have, and add the touches that you know will make your work really shine. You know that feeling you get when you think, “Oh, I knew I should have tried that”? Do it the first time it comes to mind. Don’t let someone in your design review bring up an idea you thought of first.
Tips and techniques fortify any designer’s toolkit, but I must stress that thinking critically about a design is as important as the tools and skills needed to produce it.
Here’s a checklist to guide and inspire you to get the site done, done, done. Leave no stone unturned and no doubts about the design you present—let it shine.
Experiment
It’s not unusual for me to create up to four concurrent comps for just the first round of internal design presentations. I use these to “sketch” out designs. A navigation or logo treatment that doesn’t work in one comp may work in another comp. This allows you to have what I call “The Beautiful Mistake”—placing elements in other environments that create possibilities. Instead of feeling like you have designer’s block, just throw the ideas you have into comps and see where they lead. Getting started is half the battle.
On the same note, don’t be afraid to start over. If something isn’t working, close it up and trash it. If you think the navigation is too precious, remember how you did it, then start from that point in the next design. The goal is to refine, over and over.
Choices
There are many choices to be made when you’re designing—everything from type, to colors, to overall tone of the site. Sometimes, I like to throw a lot of things at a design to see what sticks, and sometimes I start minimally. Strive to make smart, simple choices. If there’s an easier way to design something, do it. The complicated choice will feel complicated to the client and intended audience unless you can make a complex interaction looks simple.
Stay consistent
Once you make choices, stick with them. If you choose to pad items with 10 pixels in sidebars but use 15 pixels in larger text areas, make sure the comps reflect those decisions. Keep notes while designing—these will form a good basis for a style guide. Consistency displays sophistication and shows that you fully understood and made sound decisions. Consistency should be transparent.
Completeness
Finish the design. Don’t miss a footer or a detail. Don’t say, “That’s to be filled in later—I didn’t have time.” Make the time. Don’t give any reason for others to torpedo the design or allow someone to fixate on a little detail—overshadowing the rest of the work. It’s these little details that deserve your attention. Creative directors, art directors, and especially clients will perseverate on details like this, so make sure the details are there.
Step in, step out, step back: balance
During a design, it’s best to step away from the design occasionally—even just for lunch or a 15-minute break. Look at something else. Come back and look at your design again. Think about your first impressions. Your own gut reaction will likely be similar to the initial impressions of those who see it for the first time. Take note and revise or change your design based on those impressions. Regardless of how “cool” or “neat” a particular element may be, if it doesn’t serve your design in a useful way, get rid of it and try something new. Always step back and re-evaluate.
Be your own critic
If you’re familiar with the team you regularly work with, the client or the client’s needs, look at your design as you get close to done and think about parts that will potentially provoke questions or concerns. Have a solid answer for the decisions you made.
Complexity in simplicity: less is more
When we discuss “less is more”, we mean different things. For example, sometimes the design needs to scale back. It’s got too many elements. Or a design chokes itself with too many colors. When doing detail work, “less is more” is about leaving in only everything that is necessary and making it harmonious. Let the complexity be in the simplicity—a design is not useful when it’s perceived to be complex. A design should be useful, simple, and straightforward—let the complexity shine through via simplicity.
Obsession is healthy
If I don’t feel right about a navigation or a flash widget that displays photos, I will sit and stew and sketch until I find something that fits. Design is a puzzle you create for yourself—you have all the pieces, but it’s up to you to decide how they fit. Perfection is not something to strive for, but close to perfect is—it leaves room for exploration, dialogue, and learning.
I find myself thinking about designs I’m working on at odd periods of the day—in the shower, making dinner, or walking to the corner store. Small, quiet moments are when I have breakthroughs and solve problems. These are the times when the right details will appear. This isn’t often billable time, but it’s a good exercise to think about a design before attempting it. I don’t sketch much using pencil and paper; I like to let a design percolate and grow in my mind before committing it to the screen. I imagine the look, the feel, and the details. I relish the details.
Detail work isn’t easy. It takes time, inspiration, and imagination. It is however, very good practice—it allows you to cultivate a critical eye to help yourself and your fellow designer. Relish the details and your designs will cut the mustard. I found this article from
Catching up
January 29th, 2008
MatthewIn an effort to make up for a lack of attention to our blog I have put together some cool links and the following statistics in reguards to the future of internet website design.
· 43% of all retail sales are expected to be influenced by or made on the Internet by 2012. · 75% of web users admit to making judgments about the credibility of an
organization based on the design of its web site.
· 83% of businesses use the Internet to research and find potential vendors.
I am going above and beyond for one client with assisting them and there wording. I came across the following websites to assist me.
Style & Diction
This is an interactive web page for checking a sample of writing. It is modeled after the ancient Unix utilities style and diction. Enter or copy text into the first box below. The scores to the right give the readability of the text according to various formulas. The Flesch reading ease score is based on a range of 0-100, with lower values for harder text and higher values for easier text; the other scores show the approximate (
Tests Document Readability And Improve It
This free online software tool calculate various readability measurements like Coleman Liau index, Flesh Kincaid Grade Level, ARI (Automated Readability Index), SMOG. Document readability is the indication of number of years of education that a person needs to be able to understand the text easily on the first reading. Comprehension tests and skills training.
Tool is made primary for English texts but might work also for some other languages.
Also came across a cool idea but I am not sure how practical it really is. Anyways, take a look.
7 cool webmaster sites
January 16th, 2008
Matthew1. SharedBook: SharedBook Inc. offers a collaborative, on demand Reverse Publishing Platform that maps data into an online book-making template. Individual users can write and manipulate content and invite friends and family to contribute. The end result is a unique, personalized product that can be presented in a virtual flipbook or professionally-published book format, giving websites a unique way to present their content and build brand awareness. SharedBook recently introduced an open API that will enable any website to transfer data to the ShareBook platform. Developers can use API calls to send comments and photos into the ShareBook bookmaking space, taken from blog posts, comments, photo galleries or other sources.
2. FormSpring: FormSpring offers an easy way to build, host and process online forms — ideal for independent marketing campaigns or promotions, surveys, order forms and complex registration forms. Forms can be created through FormSpring without having to know any HTML or Web programming. FormSpring makes collection of the data exceedingly simple by sending submissions to users in a single spreadsheet or from an RSS feed. All submissions are through a secure 128-bit SSL site that encrypts data with PGP. FormSpring offers a basic free account with nothing to install or download.
3. Google Checkout: Google Checkout™ is a new way to process online transactions. Checkout can work independently to pay for or accept transactions or, in tandem with Google’s AdWords search advertising program, to increase sales and minimize expenses throughout the online purchasing process. Google Checkout also offers fraud protection as well as a unified page for tracking purchases. An added benefit, merchants can process sales from Google Checkout for free until the end of 2007.
4. Y!Q Search: Successful website owners all have one thing in common — they provide content relevant to their users’ needs. If you’re struggling to find additional sources of relevant content, consider Yahoo’s Y!Q contextual search. Y!Q lets users search from what Yahoo calls “the point of inspiration” — your site. Simply cut and paste a simple string of Javascript code into your own site’s HTML and you’re off and running.
5. Snap Preview Anywhere: Snap Preview Anywhere provides link previews for site visitors. Users can get a glimpse of the link destination without needing to click on the link and leave your site. Snap Preview Anywhere is a complimentary service and supports nine languages — English, Japanese, Korean, Chinese (Simplified and Traditional), French, German, Spanish and Portugese. In a world of information overload and short attention spans, tools like this are providing value to end-users and advanced functionality for websites.
6. ClipSyndicate: A new Web publishing platform that enables users to find relevant video clips for use on their sites. Search by keyword or browse content providers like AP, Bloomberg and others, or through pre-defined channels such as News, Entertainment or Health. Then reformat video content for your website or blog through various integration formats like HTML, JavaScript or RSS. The ClipSyndicate Media player is launched directly upon click, allowing users to view a selected video and browse deeper into a channel. Still in beta, ClipSyndicate presents an interesting alternative with an opportunity to share in revenue. It might be a competitor to big players like YouTube that will ultimately release a competing service.
7. AnswerTips: If your website is loaded with jargon or complex terminology, you may want to look into AnswerTips — a free product from Answers.com that displays small “bubbles” of information when users double click on a word in question. It’s quick and easy to integrate and won’t distract readers or cause site owners to lose visitors, as new browser windows are not initiated. Make sure your users are aware of the feature so that it does not get overlooked.
Key to optimizing web graphics
January 16th, 2008
MatthewOne of the most important aspects of graphics optimization is to have a strong understanding of the various graphical file formats available and how (and when) to use them. For example, .jpg is often used as the default file format by many Web developers when inserting images into Web pages. However, the .jpg format works best for photographic imagery, and any “drawn” imagery (buttons, logos, etc.) will often look as good or better and be substantially smaller if saved into an 8-bit .png format. A .gif will also work but the .png file format tends to achieve better results for most
drawn imagery.
It’s also important to understand color bit-depth, and the fact that minimizing the number of colors needed to display a graphic on-screen will result in significantly smaller file sizes. Many Web developers will often load all of their .gif or .png imagery with a full 256 colors (8-bit), when 5-bit (32 colors) or 6-bit (64 colors) will display the same graphic with no discernible difference on-screen.
If developers around the planet would commit to performing the above two steps when inserting graphics into their websites (selecting the optimal file format for the job, and minimizing the number of colors needed to display the graphic on-screen without negatively impacting its appearance), there would be a dramatic decrease in bandwidth consumption and page load times across the Internet.
Expiring Domains
January 15th, 2008
MatthewI am currently going through two extreme pains with registrars on domains so I did some research and came up wit the following information.
What happens after a domain name “expires”For 40 days, the domain is in a grace period where all services are shut off, but the domain owner may still renew the domain for the standard renewal fee. After 40 days are up, the domain goes into a “redemption period”. During this phase, it will cost the owner additional fees to re-activate and re-register the domain. The average fee is around $150, depending on your registrar. If a domain name enters the redemption period it is unlikely that it will be renewed. After the redemption period the domain goes into the true deletion phase. This phase is 5 days long, and on the last day between 11am and 2pm Pacific time, the name will officially drop from the ICANN database and will be available for registration/The entire process ends exactly 75 days after the listed expiration date.
Getting your domain
We know that domains are available to the general public 75 days after the expiration date, and there is the unpredictable three hour period of time in which the domain is deleted from VeriSign’s database and released back into the registry pool. There are three major services which specialize in hammering away on VeriSign’s servers during the drop period. The three companies are — Snapnames.com, Enom.com, and Pool.com — the all work in a similar manner. They use a network of registrars to hit the Verisign servers at frequent intervals and grab as many requested names as possible. If you don’t get your name, you don’t pay.
Snapnames.com
Snapnames.com (the exclusive partner of Network Solutions) charges you $60 for your domain unless there are multiple interested parties, at which point there is an open bid auction between all parties. Seems fair enough. Snapnames is a bit of a newcomer to the game, but with their Network Solutions affiliation, they are said to be improving their success rates.Snapnames has an exclusive partnership with Network Solutions which allows them first shot at any and all expiring domains that are currently held by Network Solutions. The domain I got was not held by Network Solutions but a great many are. If yours is, Snapnames is your best bet. You’ll still have to bid against any others who may be after the same domain, but the auction process at Snapnames is pretty fair and straightforward. If you are the only bidder, it will cost you a flat fee of $60. Not bad.
Enom.com
For over 6 years, ClubDrop has been eNom’s exclusive destination for aftermarket domain names, including Pending Delete and Pre-Release names. On
Pool.com
Pool has a cool feature called Catch and Release. Catch and Release (C&R) is a fast and easy way to acquire available domains and assess their value prior to making a final purchase decision.
Website Usability
December 4th, 2007
adminI came across UserTesting.com — a company that conducts remote usability testing for $19 per user study. For that you get a 15 minute video of the tester using your web site and a short written report.
I plan on having them run the test on a few of our sites and will post the results.
Wordpress Static Home Page
November 5th, 2007
MatthewI’ve been asked about this a few times lately, I know there’s a plugin that does this, but this is the most simple way, by far.
Duplicate the page.php file of your theme and name it home.php
Right before the line that starts with “< ?php if (have_posts())…”,
add this line: “< ?php query_posts(’pagename=home’); ?>“
Create a page in the wordpress admin, and make sure that it’s post-slug is “home“
Done. Now the page called “home” will show as your homepage.
Check your font
October 13th, 2007
MatthewI came across a few cool tools for working with fonts and css.
Typetester is an alternative to
fiddling around with CSS in order to test out font settings.
I also found Designer Plaything,
which, while a little rough around the edges, provides a useful alternative
to Typetester in that you can try out different headline / body copy combinations.
With some more font options and some further development — more customization
options, user-defined text, the addition of sub-headings — this could
turn into quite a useful tool.
Designer Plaything also provides a brightness and contrast check of your color
settings, which is a nice touch.
Aother is Font Tester
It’s very customizable and, like Typetester, allows you to compare fonts against
each other.
However, it doesn’t include the option to compare headings alongside body copy.
It also seems a little bug-prone which precludes me from recommending it wholeheartedly.
For example, in Firefox changing the number of columns via the ‘View’ option
causes the example text to disappear.