Archive for the ‘Web Design’ Category
Why frames are slow
September 18th, 2007
MatthewWhy can frames be slow?
For every frameset, the browser has to request and download n+1 Web pages, where n is the number of frames in the frameset. The browser first requests the frameset page, which then tells it to load all the frames. These frames are requested from the Web server and delivered to the site.
Unfortunately, there is not a lot to be done about the inherent speed of frames. If you use a framed site, then make sure that each frame in the frameset is small and loads quickly. Keep the images small and use small amounts of text.
Web Design Colors
September 11th, 2007
MatthewCorporations understand the power of color and spend a lot of time and money using it for office colors, advertising, logos, websites and more. How are your colors working for you?
Research has shown the following psychological effects to these colors:
Blue - Cool, subduing, melancholy, contemplative, sober, cold, sky, water, ice
Red - passionate, exciting, fervid, active, heat, fire, blood
Green - quieting, refreshing, peaceful, health but it can also denote illness or guilt
Purple - dignified, pompous, religious, mournful, mystic, cool, mist, darkness, shadow
Yellow - cheerful, inspiring, vital, celestial, denoting high spirit, health, and sunlight
Black - style, class, romance, funereal, ominous, deadly, depressing, night, emptiness
CSS turns 10
September 7th, 2007
MatthewCSS is ten years old this year. Such an anniversary is an opportunity to revisit the past and chart the future. CSS has fundamentally changed web design by separating style from structure. It has provided designers with a set of properties that can be tweaked to make marked-up pages look right—and CSS3 proposes additional properties requested by designers.
Many CSS properties, both old and new, deal with text: they describe text color, position, style, and direction. This is all very good—after all, text fills most of our screens. But in order for properties to reach their full potential, we need a good selection of fonts. And fonts are sorely missing from the web.
Consider the fine designs in the CSS Zen Garden. What makes them so exciting to look at? In part, it is the variety of fonts. Fonts convey design messages and create effect, and while in traditional print design there are a plethora of fonts available, fonts have been in limited supply on the web. Web designers depend on ten or so universally available fonts for their designs, and are reduced in large part to using Verdana and Arial over and over again. A typical CSS Zen Garden design, on the other hand, uses a hand-picked font to render text and aligns the glyphs to a pixel-perfect degree…and then uses that text as a background image.
A background image!
There are many reasons why background images should not be used to convey text. Images are expensive to transmit and hard to make. Imagine trying to translate a web page into 15 languages and having to produce a set of images for each language. Additionally, the quality of printed web pages suffers as images don’t scale to the resolutions offered by modern printers. Using background images is currently the only way designers can use their favorite fonts on the web. But shouldn’t web designers have access to a wider selection of fonts and be able to use them without having to resort to creating background images?
There is a way: web fonts. Instead of making pictures of fonts, the actual font files can be linked to and retrieved from the web. This way, designers can use TrueType fonts without having to freeze the text as background images.
A brief history of web fonts
This is not a new idea. In 1998, CSS2 described a way to link to fonts from style sheets, and both Microsoft and Netscape added support for web fonts in their browsers. However, neither vendor supported the most widely used font format, TrueType. Instead, they each picked a different, little-used format with few tools to support it (EOT and TrueDoc, respectively). And so web fonts disappeared from the designer’s toolbox.
Better news
It’s a pleasure for me to announce that web fonts are back! Use them. Seperate yourself from others
Photo Resizing
September 7th, 2007
Matthewcss web design
September 7th, 2007
MatthewMuch of CSS is pretty straightforward and, I suspect, quite easy for most people to grasp. There’s font styles, margin, padding, color and what not. But there’s a wall that people will run into… that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser.
These are the six things that will help people get over the hump.
Box Model
At the very core of it, is an understanding of the box model within CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Suddenly things that look good in one browser go all to hell in the other. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. It’s also a good idea to know how to hack it up for older browsers.
Floated Columns
While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly.
Sizing Using Ems
There are two different issues at play here when it comes to sizing with ems: fonts and layouts.
With fonts, Internet Explorer 6 and lower don’t allow you to resize the text when specified using pixels (px). Those with vision issues may wish to set their font size larger in order to more readily read what you’ve written. Specifying your font sizes using ems has proven to be the popular approach to this problem. The importance of sizing text using ems is waning as users move on to better browsers.
Sizing layouts with ems can also offer up a whole other avenue of flexibility. When playing with text size, it can often throw an entire design out of whack. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design.
Image Replacement
Boring text elements dont’ excite us. We want to use lots of graphical flair along with gradients and glass effects. And we want to use custom fonts; fonts that browsers just can’t offer us yet. Image replacement techniques allow us to replace the existing content-rich and SEO-friendly text with stylish images or Flash files with embedded fonts.
- Revised Image Replacement
Sums up most, if not all, of the image replacement techniques currently in usesIFR 2 with documentation and sIFR 3 is in development
Floated Navigation
If you’ve mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. The web-standards-lovin’ folk love their unordered lists of navigation and there are a myriad of ways to style them up.
Sprites
Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. The first is CSS-based rollovers. More recently, it’s been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. This reduces the number of requests your browser has to make, improving the time required to download all files from your server.
Easily Write Code
August 28th, 2007
adminThis fall the business world will see the first tentative release of a product that Charles Simonyi has been working on, in one form or another, for most of his professional life. No, it’s not word-processing software, which the Hungarian immigrant developed at Xerox PARC and then took to Microsoft in 1981, and which helped build him a fortune estimated at $1 billion. It’s more audacious than that. Simonyi’s five-year-old startup, Intentional Software, is making software so smart that you can simply tell it what you want to do. Lay down a few basic parameters, and it will write its own code. No programming skills are necessary. read more
Smart use of Icons
August 24th, 2007
MatthewIcons and infographics are so integral to all GUIs (OS’s and online) that, like the street signs outside your window, we hardly notice them, even when we’re using them. And that’s exactly the way it really should be. The first time we see one it should help explain a concept behind a menu item, button or link — perhaps with a shopping cart silhouette next to a purchase option or a disk next to the ’save’ option. After the first time, we then tend to use them as flags or landmarks to move around interfaces we are familiar with.
However, there are times when that imagery can work against what you’re trying to achieve. Sometimes it can be as simple as emphasizing the wrong part of an interaction. In an online shopping situation, do you mark the ‘BUY’ button with coins or bills — emphasizing what the user is losing — or do you associate the process with the shopping cart or bag, emphasizing what your user is gaining. We don’t have to bug the Amazon board room to know the answer to that one.
Take the time to step outside your design. Try to think as a first time visitor. Usually the most successful icons are also the more simple.
Ecommerce Copywriting
August 18th, 2007
MatthewI have been focusing a lot on ecommerce copywriting this week. I have donw a lot of research on successful online businesses and the product descriptions are just one of a few important eliments on creating a successful ecommerce website.
Here’s an example of both good and bad product descriptions. Each of them is a combination of informational and marketing copy. Imagine that you’re a small business writing this product description for both new and repeat customers, and you want to maintain a polite, welcoming tone:
BAD: This newest model of the Sock-Saver 2007 is better than ever before! If you liked the Sock-Saver, you’ll love the Sock-Saver 2007. For the last year, we’ve been examining your feedback and implementing it into this great product. Now we’ve brought these changes to you in the form of the Sock-Saver 2007! Save more Socks!
Not only is this description fluffy and poorly organized, but it offers no real information to the potential consumer. What are the upgrades? Why would owners of the Sock-Saver want to upgrade to the 2007 model? Also, there’s no clear tone or audience established, which makes the description seem cluttered and ill-placed.
GOOD: We’ve examined vendor and customer feedback for our most popular product during the past year and discovered that buyers wanted more room in the main compartment, larger drainage holes, and a choice of colors to match a home or business. We’re now proud to present the Sock-Saver 2007. The newest Sock-Saver offers all of the missing sock protection of the original, enhanced with the customer-driven features outlined above. Just stuff the Sock-Saver full of socks, toss it into the washer and dryer, and never suffer from one-sock syndrome again!
If you’re a current owner of our original product, send in a photo of you loving your Sock-Saver for a 15% discount on the Sock-Saver 2007.
Notice how the tone of the example above maintains the company’s commitment to its repeat customers, as well as providing plenty of information for new customers. It carefully outlines the improvements that they’ve made to the product, explains how to use it, and offers a number of incentives for all customers to take action and buy the product. The benefits are clearly outlined in a way that is exciting for the customer, and maintains the tone that the writer has selected for the site.
Don’t buy, Lease
August 18th, 2007
MatthewI came across this website while researching a domain name.
Introduced in July 2006, and launched globally in January 2007, LeaseThis.com is the first company to offer advertisers the option to lease domain names on a global platform, giving them exclusive advertising and branding rights for the duration of the ad lease.
The company is based in Los Angeles, California and has strong connections with New York Advertising Agencies as well as some of the biggest domain owners across the globe.
With access to over three million domain name assets, LeaseThis.com has the ability to deliver the Internet’s premium assets to individuals and businesses worldwide.
More Shopping Cart Conversions
August 9th, 2007
MatthewI have been writing and sharing some real gems with our clients in our marketing tips and tricks section of our website. I decided to post a little “gem” to our blog. What separates success from failure with an online store? One and I mean only one, of many things about conversion is: shortening the distance.
Shortening the distance between the visitor and the product can make a huge impact on conversions. I have years of experience in analyzing buyers habits. This tip will not only bring your customer closer to the product but it will also help you with organic search engine results.. Don’t believe me. Put me to the test. Contact me and I will show you how we have created successful online stores.