lamp-white-knockout-8px
Contact

Graphics

Graphic Possibilities With Open Source Web Fonts.

Firefox and Chrome's font display updates make it possible to create a typography-driven website like this one look good on any PC.Back in 2010, Google made big news by releasing their own open source web fonts. Starting with just 19 typefaces, it was a huge improvement for developers and designers who’d been stuck with the same 9-10 web safe typefaces for their font stacks. By 2012, Google Web Fonts (since renamed Google Fonts) had grown to over 500 font families. Adobe typekit became popular around the same time, offering even more web type options. Web creators were no longer limited to a handful of body text fonts, and we all basked in the happy glow of digital progress. Unfortunately, there was a hitch. Most web designers work on Macs, known for their pristine graphic rendering. While the new fonts were looking great on designers’ Mac screens, the letters appeared very differently on the average user’s PC: they were highly pixilated, blurry at the edges, and “crunchy-looking.” Once developers realized they should be testing the sites on PCs, they were shocked to see their new typefaces looked, frankly, awful.

The problem wasn’t with the fonts themselves- PC browsers just weren’t advanced enough to display the new typefaces cleanly. Internet Explorer was the first to optimize character rendering; soon, open source fonts looked better in IE than any other browser. This still wasn’t very crisp, but it was better than everything else out there. Firefox quickly followed suit and improved HTML text appearance even further. The rendering you see in Firefox today is the standard that set the bar for text rendering over the last few years. Chrome’s text looked jagged and pixilated in comparison until just this August, when Google’s Chrome 37 update raised the ante again. The update came with DirectWrite support for Windows, which transformed HTML characters into something crisper and cleaner than PC users had ever seen before.


Same Fonts, Different Browsers: Firefox and Chrome’s text rendering.
(Firefox: Left, Chrome: Right)

Looking at these Chrome and Firefox text displays side-by-side, you can see how Chrome text is distinctly crisper and more resolved, looking a lot like the rendering on a Macintosh, in fact. Chrome’s new super high-resolution type display is a a huge leap for browser technology. Suddenly, all fonts look incredible, no matter who’s supplying them.

We offer the complete inventories of Google Fonts, Adobe Typekit, and Fonts.com for our clients’ web projects. The foundry previews are real HTML, not bitmaps, and they show you exactly how your fonts will look. The right type sends a cohesive message about your company to customers, telling them exactly what “personality” your business has. We alsoCreative typography can communicate an individual style and leave visitors with a memorable impression. offer expert font selection advice if you’re having trouble deciding or want a second opinion. Between these resources, you get an incredibly broad typeface selection- a tool that gives you a fresher-looking site that stands out from the rest.

Graphics and Iconography with Open Source Glyphs

The evolution of typeface display technology actually gives us a powerful opportunity for rendering graphic elements, too. Recently, we’ve actually started replacing traditional graphic elements with HTML glyphs, using characters from font sets as symbols, graphics, or even images. You see glyphs like the TM and copyright symbols implemented this way traditionally, but the level of clarity in web text display now opens up a whole new world of possibilities.

Advantages of HTML Typeface Characters as Graphics:

  • Web font characters come ready to go as live, linkable text.
  • Faster loading than traditional JPG images.
  • Completely resizable as pixel-perfect vector entities.
  • They don’t require any special coding structures, like image files.
  • HTML glyphs are searchable by engines for SEM keyword optimization and visitor queries.
  • Many font packages are specifically designed to use as icons or ornamental elements, targeted to specific graphic styles, like the Adorn typefaces.
  • Now that browser technology has caught up, font-based graphics look just as sharp as any traditional graphic.
  • They cut design time and costs down significantly.

We can also create HTML iconography through typeface packages now. Whether you’re developing a web app, branding a new product line, or want some simple icons for your homepage navigation, we can offer you a whole new playground to experiment with.

These techniques not only open up possibilities for designers and creatives, they also empower developers, who can now use typography instead of graphics to stylize web apps, create brand identities, and unroll fresher-looking sites. Having access to all of these symbols opens up a whole new field programmatically. Instead of designing a graphic, resizing it to optimize loading times, coding it for html, and uploading it, programmers can literally just hit one key, paste in a character that’s already an html entity, and keep on trucking.

We've come a long way since wingdings! (Circa 1990)
We’ve come a long way since Wingdings!

Interested in updating your site’s typefaces? Want to see what we can do for your icons and graphic elements? We would be happy to give you a free consultation.
Contact us today.

Why Minimalist Designs Work Well for Product Sales Websites

In modern web design, the more streamlined, focused experience you can give your visitors, the better your results. Far from a niche style, Minimalism is actually key to any good professional website today.

Web design is all about appealing to your customer’s eye and drawing them back again and again to your site. In eCommerce design, the ultimate goal is getting your product purchased. A well thought-out, appealing design will keep your viewer engaged, while supporting the credibility of your product, site, and business as a whole.

As web designers, we have seen many designs become overworked, under-planned and simply unfocused. An experienced web designer learns to balance design versus functionality and simplicity versus gimmicks. While staying at the forefront of web trends is a goal for any site, an e-commerce site’s main focus has to be getting the consumer to purchase the product.

Lulu Lemon

Remember websites in the early 90’s? Busy, info-packed layouts with bright flashing colors that lit up your screen like a disco ball? Although we find those early designers’ “more is more” enthusiasm for the brand-new online world a little endearing, web design has come a long way since. Research shows us that less really is more when it comes to engaging visitor attention, and success online is all about how your site shapes people’s focus. Caption: If your site still looks like this, it’s time for an upgrade!

Minimalist aesthetics are a popular design strategy in e-commerce today. The style directs customer focus to the product immediately, eliminating any clutter that would distract the viewer. Minimalist design allows the product to become the focal point of the site. By breaking a design down to the bare essentials, you can produce a clean, but very functional site. A good minimalist designer knows how to use white space, create balance and contrast, and precisely focus the content. These types of designs guide the viewer’s eye- not to flashy ephemeral web trends, but the clear-cut star of the site, the product.

Companies sometimes shy away from minimalist designs for fear they might look unfinished or too simple, but when they’re done right, minimalist designs are some of the most beautiful, classic and engaging sites on the web.

One great example of minimalist design is MagicLamp site Odin New York. By simply showcasing their products through high quality imagery, Odin created a storefront that exudes the high class, fashion forward image it’s known for. With simple lines, clean typography, generous white space and outstanding product photography, Odin uses clean, minimal design to focus on what their site is for: selling their products. Another excellent example of using minimalist design to focus on the end goal is PosePrints. PosePrints created a cohesive site aesthetic with careful use of white space that draws the eye to the product focal point. Using a simple monochromatic color scheme, the only flashy items on this site are the products themselves. The stationary card images are the color and the “pop” that stand out on this site. PosePrints’ design gives the customers a sense of style without distracting them from the product itself.

Pose Prints

 

When it comes to web design and minimalism, remember “less is more” and sometimes less can bring you more…revenue.

 

eCommerce Conversion Checklist

When looking at your current website or considering a plan for a new website, there are many site behaviors, features, or potential visitor actions that effect conversion rates. The following checklist is a summary of features or additions that you should consider. Note that this is beyond the basic list of must-have’s for any shopping system.
 

    1. Shopping Cart Life Span: How soon does your shopping cart expire for anonymous users? More than a few shopping systems use Session variables for tracking cart items, and expire within hours, especially for users behind prozies that change IP addresses often, thus rendering the current Session invalid (think AOL). Several studies point to the fact that customers will wait as long as 4 days before deciding to buy, and if the item they were looking at is still in their shopping cart, you just saved them several steps and increased the possibility of conversion substantially.

 

    1. Solid and Flexible Product Navigation: this is a subject that could go on for ever. Our recommendation is that you look at new ways to extend product and site navigation based on current user actions and possibly experiments you run with users. If you don’t currently have a search feature, ask some users whether it would be a substantial gain to have one. Look at different ways to categorize product and build new filters. Then look at how they get used, and make further changes based on those results. You may end of up with something that not only makes it easier for your customers to find the products they are looking for, but a significant differentiation over your competition.

 

    1. Product Shots: Starting out with great product shots is always nice, but it doesn’t always happen for a variety of reasons. Think about getting or taking better pictures, as well as optimizing old and new pictures for the best display and fastest download. Batch converters get better over time, and you may find that you can keep high quality while reducing file sizes by 50% or more.

 

    1. Clear & Concise: Make sure your policies regarding Shipping, Returns, Conditions, and Terms are readily available and clear to customers. Make it easy for potential customers to do business with you by providing steps and contact point (phone, email, or online forms) for dealing with different situations (ordering offline, exchanging a products, et al).

 

    1. Clear & Concise Part 2: Product descriptions can be a wealth of information for your customers about your product. It also has the added benefit of helping you with Search Engine Optimization. New products should not necessarily get all of the copy-writing time. Consider re-working existing product descriptions that are top sellers too. Never skimp here. Hire someone if that is how it will get done.

 

    1. Advanced Product Configurations: If your products are amenable to add-ons or modifications, consider building specialized forms for those products in the product detail page. This could be a new source of revenue, and will likely increase your per-order averages.

 

  1. Product matching: in apparel, jewelry, and other specific types of product sales websites, offering a generalized “recommended products” in the lower part of the product detail page is often not enough. Consider setting up specific matches, for example, this pair of earrings goes well with that necklace. Think of it as the editorial content of the site that customers will appreciate, because you have taken the time to not only know your product, but give them direct guidance on what goes with what. If you don’t think this applies to you, think about it and see if there is something similar you can offer for your products, as it yet another way to increase per-order averages.

We are an account based marketing agency.

Marketing

Company

Follow Us

Twitter Facebook-f Linkedin