Home | Archives for website design
Posts Tagged ‘website design’
Thursday, July 8th, 2010
Perhaps the most undervalued page of your Web site is the “Contact Us” page.
Here’s a story from my friend, Jon Websurfer. Jon was assigned the task of finding a supplier to make customized edible treats to use as corporate gifts for his company. He typed some keywords into his search engine, including his location. Out of thousands of bakeries in the U.S., a lucky eight showed up on the first page of results (the rest of the results weren’t bakers). Jon clicked on the results for five or six of these and looked over their websites, taking a maximum of two minutes on each page (for some it was more like 10 seconds). He evaluated them for:
- Presentation (if the site looks good, chances are they’ll do good product presentation)
- Ease of navigation (if he’s frustrated with your site, he may be frustrated with your service as well)
- Best looking (and best variety of) product photos
- How well they explained their ordering procedure, packaging, delivery and lead time.
Hoping to patronize a local supplier, he was frustrated at how hard it was to find out their locations. (more…)
Tags: brand experience, communication, contact forms, contact page, customer response, customer service, usability, user engagement, user experience, user friendly design, user interface, website design
Posted in Design & Usability, Marketing | Comments Off
Thursday, May 13th, 2010
Listening to my local radio traffic report is a painful reminder of the importance of white space. “What’s white space?” you ask. In the design world we use the term white space to refer to the empty space around a graphic, text or other design element. Effectively it’s the space where your eyes take a breather and your brain has time to digest what it just encountered.
Back to the traffic report. I know the station is determined to make everything entertaining or cool, but they’ve gone too far. In addition to the woman reporting traffic you also hear MUSIC and CAR HORNS in the background. Car horns, in a traffic report, really? Guess what I do every single time I hear the traffic report? I look all over trying to figure who I just cut off. As a result I never hear the traffic report, and I can’t be the only one.
Your Web site is no different. If visitors are bombarded with text, images, calls to action and a host of other distractions, they aren’t getting your message. That’s because without white space, it’s difficult or even impossible to visually sort and prioritize what’s on the page.
Here’s an example of excellent use of white space in design from the 37signals site.
Take a look at your Web site. Are you asking too much of your visitors? Are there too many words, too many calls to action? Next time you are considering a redesign (maybe that should be now) think about what adding white space can do for you.
Tags: colors, design element, distractions, empty space, information overload, logo location, usability, user friendly design, user interface, web page design, website design, white space
Posted in Design & Usability | 2 Comments »
Tuesday, May 11th, 2010
Quote of the Day (from Seth Godin, that eminently quotable guy…)
“Sorry that this e-booklet is so short. Actually, if I hadn’t spent so much time on it, it would be longer.”
How many times do you edit your written communication [not just proposals, print, web copy, but even brief e-mails] before it is ready for release? What “rules of thumb” do you use when you edit? Do you try to make sentences shorter, ideas clearer, remove unnecessary words? Do you remove entire sentences or subjects if they are about you instead of about your audience?
Here’s how to tell if you’re using a good method to edit: in most cases, the finished product should get shorter…and shorter… and shorter, until it’s as short as it can be and still express the essential ideas you need to get across.
An Extreme Example?
Tags: communication, web content, web copy, web copywriting, Web site copy, website design
Posted in Creative, Marketing | No Comments »
Monday, January 11th, 2010
A CSS sprite is a group of images combined into one image. CSS sprites allow you to reduce file size and load time on the page. For example, I’m sure you have seen a graphic that changes when you roll over it. Of course, these graphics are created using separate images for the normal state and the rollover state, but the savvy programmer will combine the two images to create a CSS sprite. Facebook, for example, uses sprites for all of their icons.
The best part about a sprite is that you can combine an unlimited number of images into one. The term “sprite” comes from computer graphics and the video game industry. It was used to describe graphics that were “grabbed” by computer memory and then only displayed one part at a time. This provided faster load time than continually having to grab new images.
How can you create a CSS sprite? (more…)
Tags: cascading style sheets, css, css sprites, html markup, structured markup, website design
Posted in Technology | 1 Comment »
Thursday, August 27th, 2009
This is part 5 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed box shadows. In this post I’ll be discussing the @font-face-Attribute.
I can hear the angels rejoice because of this nifty and soon-to-be resourceful property. With the @font-face-Attribute, you can use any font you wish allowing you to step away from system fonts and relying on graphics, sIFR or Cufón to display the fonts you want to use. (more…)
Tags: cascading style sheets, css3, custom font, structured markup, system fonts, website design
Posted in Design & Usability | No Comments »
Wednesday, August 5th, 2009
This is part 4 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed multi-column layouts. In this post I’ll be discussing box shadows.
Have you ever wanted to add a drop shadow to a div and had to add background images just to get that nice effect? With box shadows, there is no need and it’s so easy to adjust. Below you will see an example of a div with a 2px drop shadow on it. (more…)
Tags: cascading style sheets, css3, drop shadow, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Monday, July 20th, 2009
This is part 3 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed border radius. In this post I’ll be talking about multi-column layouts.
Newspaper-style columns are easier to read than long lines of text. In CSS3, the browser interprets the properties and creates the columns, flowing the text from one column to the next.
In the case above, we use this code:
#columns {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
color: #fff;
}
Webkit targets Safari and moz targets Mozilla browsers.
There are three things we can define when using this style. The number of columns (column-count), the width of each column (column-width) and the gap between columns (column-gap). If you don’t declare a column-count, the browser will create as many columns as are needed to fit in the available width.
If you prefer to use a vertical separator, declare a column-rule. This is pretty much a border property.
div {
column-rule: 1px solid #00000;
}
Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+. If the browser doesn’t support this, it will render the text as normal text.
In my next post I will discuss the usage of box shadows and how to add a drop shadow to a div.
Tags: cascading style sheets, css3, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Wednesday, July 8th, 2009
This is part 2 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed RGBA And Opacity. This time around we’ll be tackling rounded corners.
We all love rounded corners and in order to achieve that look, in the past we had to use images. CSS3 makes this much easier. To add rounded corners just put the following in your style. (more…)
Tags: cascading style sheets, css, css3, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Friday, June 19th, 2009
Cascading Style Sheets (CSS) were introduced to the Web world roughly 13 years ago. They have changed the way we program Web sites and have made our lives easier in many ways. Improvements are of course always being made and the latest of these is CSS3. If you want to make use of the features of this new version, keep in mind that not all browsers will support CSS3. As of now, Safari 4 is pretty safe and so is Firefox 3.5.
CSS3 has many new features. In this series I’m going to point out the ones that will really make a difference. (more…)
Tags: cascading style sheets, css, css3, structured markup, website design
Posted in Design & Usability, Technology | No Comments »
Wednesday, May 20th, 2009
There are numerous factors that determine how your site will perform in search engines. Unfortunately, good (visual) design is not one of them. Search engines are blind; they don’t see graphics or pictures. They can only read the text on pages. So, when it comes to search engines, your site is only as good as the text on the pages. (more…)
Tags: SEO, website design
Posted in Marketing | 1 Comment »
