Sunday 30 December 2007

Lite Web Design

Don't Make Them Wait
01-13-2000 by Scott Pamatat of DesignMore.com

I have noticed that many web sites are trying to portray themselves as if they were a TV network. They put top-notch graphics and sound into their web page. What these companies are missing is that their visitors are not watching TV. This works fine for those with broadband high speed connections. The fact is, most are viewing your web site on a screen that is between 15 and 19 inches wide, can only see 216 colors, and can only download at 28.8 kb per second.

What does all this mean?

You as a web site owner, designer, CEO, or any one who has control over a web site should follow a simple rule. Are you ready? Here is the rule: make sure you are on a 28.8 connection; type in the URL for your web page; hit enter, and hold your breath. If you needed to gasp for air before the page was fully down loaded you really need to cut down on the size of the page. I'm sure some of you can hold your breath for a long time. So I will give you all a suggestion that your web page should be no larger then 50K. I would shoot for less than 30K. The number one visited web site home page is under 21k. That's right, Yahoo's home page is only 20k. This might seem like very little but you really can do a lot within that size.

How can I get it under 50K? 30K?

First, all your graphic images should be as small as possible. Try to get them smaller than 4k. Going up to 6k is reasonable. When designing a graphic for the web site keep in mind the number of colors being used. I know, as a graphic designer, it was hard for me to go from millions of color to only 216. Yes, 216 is the number of colors you have on a web safe color pallet. Use solid colors when designing your image. PhotoShop has made the gradient such a popular tool. It looks good to fade things in and out. I always see a background border made up of this gradient. I always right click on that image to see the size. The 8k-12k is not worth the space. The problem with the gradient is it uses many colors and dithering. Both take up big time K. The more color you have in an image the bigger it's going to be.
Use design more, graphics less. For a web page to be successful it needs to download quickly and look good. Here is the dilemma download quick or look good? Instead of designing graphics and taking pictures and turning them into jpgs to make your web page look good, try using color schemes. Use cell colors to make boarders. Use the negative space on your web site. What is not there is just as important as what is there. Remember sometimes less is more. When in doubt think of a typical visitor coming to your web page. Would that extra graphic sell them or keep them coming back again and again. If the answer is yes, by all means keep it. If the answer is "well maybe" or "it just looks good there", yank it. Viewers will appreciate not waiting more then they have to. The web is here to make our life easier not to sit in front of a screen waiting for heavy web pages to download.

Sunday 5 August 2007

web design - site structure

Good web design requires a solid site architecture based on the site's goals and target audience established in a project brief. The deliverables from this phase most often are:

1. Content Outline
2. Site Diagram
3. Wireframes

These three deliverables are dependent on each other and need to be completed sequentially.

Content Outline

Working closely with your clients, create a list of all existing content. Brainstorm content that needs to be created for the site. Review the list of content, trimming anything that does not match the goals or audience needs as stated in the project brief. Try to plan for the future and how the site content might need to grow as this will inevitably happen. Next, group your content into categories. As you categorise your content, considering getting user feedback through a card sort. Once your categories are established, create an outline of your content and review it with your target audience for accuracy.

Site Diagram

Take your final content outline and create a sitemap or site diagram. A site diagram is a visual representation of your content outline and site structure. You can use Excel, Visio or Smartdraw to create your site diagram.

Wireframes
A wireframe is a non-graphical layout of a web page. It is a simple drawing of the blocks of information and functionality for each page in your site. You will want to create a wireframe for the home page, each unique second level page and any other significantly different page on the site.

Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer.

Contact Carnival Media Group to design your website today!

Tuesday 17 July 2007

website or web site?

From AskOxford.com:

Question:
How should the term 'website' be written in official documents and on the web? Should it be website or web site, and should there be a capital W?

Answer:
It always takes a little time for new words to settle to a standardized form. Our most recent dictionary, the revised 11th edition of the Concise Oxford Dictionary, published in July 2004, shows website as the standard form, and future dictionaries will reflect this.

We recommend capital initials for Internet, World Wide Web, the Web, but not for individual sites.

Saturday 7 July 2007

Your web site should be easy to read

The most important rule in web design is that your web site should be easy to read. What does this mean? You should choose your text and background colors very carefully. You don't want to use backgrounds that obscure your text or use colors that are hard to read. Dark-colored text on a light-colored background is easier to read than light-colored text on a dark-colored background.

You also don't want to set your text size too small (hard to read) or too large (it will appear to shout at your visitors). All capitalized letters give the appearance of shouting at your visitors.

Keep the alignment of your main text to the left, not centered. Center-aligned text is best used in headlines. You want your visitors to be comfortable with what they are reading, and most text (in the West) is left aligned.

Tuesday 19 June 2007

Pay now or pay later

Usability isn't necessarily a new term, but when it comes to how users interact with the Web, it takes on a whole new meaning. Web usability is evolving as we learn more and more about how our users interact with our online information, how they retrieve it and use it, how they want to move on our site, what they anticipate and what they expect within the realm of their experience.

The term 'usability' has historically involved testing how users actually get on a system and use it. With Web usability, I prefer to take it one step further and think of it in terms of how a user gets on a Web page and a) anticipates how to interact with it and b) actually interacts with it. This anticipation is what we need to test for along with use; it's the intuition and the logic involved in the Web experience that differentiates Web usability from other types of usability. Failing to rethink our approach to usability predisposes us to either success or failure—I don't know about you, but I prefer the success path. Web users are a fickle group; let's face it, if you don't anticipate what they want, give them what they want, how they want it and when they want it, you can forget the bookmark; they're not returning.

Think of Web usability as a 'pay now or pay later' proposition. If you don't check in with users early in the development process, you run the risk that you won't meet their needs when you launch the site. When you realize their needs haven't been met, you have to go back and rethink your whole approach, rehire the web developers and get them refocused on the project so they can redevelop the site. The terms, 'rethink', 'rehire', 'refocus' and 'redevelop' should be conjuring up visions of dollar signs for you, not to mention the fact that your brand, image and credibility were damaged in the process of launching a site users weren't able to use.

Testing for usability is a choice, not a requirement, and it is often the first step in the development process that management will scratch if time is running short. The next time you approach your web project, consider using the web usability strategy I developed to understand the scope of testing usability, how you could easily administer a test session, who you should test and what you want to test for. It may be less burdensome than you think!

Sunday 17 June 2007

Developing a new website - Planning

THE FIRST STEP in designing any Web site is to define your goals. Without a clearly stated mission and objectives the project will drift, bog down, or continue past an appropriate endpoint. Careful planning and a clear purpose are the keys to success in building Web sites, particularly when you are working as part of a development team.

Planning a Web site is a two-part process: first you gather your development partners, analyze your needs and goals, and work through the development process outlined here to refine your plans. The second part is creating a site specification document that details what you intend to do and why, what technology and content you'll need, how long the process will take, what you will spend to do it, and how you will assess the results of your efforts. The site specification document is crucial to creating a successful site, as it is both the blueprint for your process and the touchstone you'll use to keep the project focused on your agreed goals and deliverables.

Web sites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. To create a substantial site you'll need content experts, writers, information architects, graphic designers, technical experts, and a producer or committee chair responsible for seeing the project to completion. If your site is successful it will have to be genuinely useful to your target audience, meeting their needs and expectations without being too hard to use.

Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built. Remember that the site development team should always function as an active, committed advocate for the users and their needs. Experienced committee warriors may be skeptical here: these are fine sentiments, but can you really do this in the face of management pressures, budget limitations, and divergent stakeholder interests? Yes, you can — because you have no choice if you really want your Web project to succeed. If you listen only to management directives, keep the process sealed tightly within your development team, and dictate to imagined users what the team imagines is best for them, be prepared for failure. Involve real users, listen and respond to what they say, test your designs with them, and keep the site easy to use, and the project will be a success.

Thursday 14 June 2007

Now Available: Microsoft eScrum Version 1.0

If you're looking for another Scrum template to try with Team Foundation Server, consider using eScrum, which is an implementation of Scrum that's used internally by some teams within Microsoft:

"eScrum is a Web-based, end-to-end project management tool for Scrum built on the Microsoft Visual Studio Team Foundation Server platform. It provides multiple ways to interact with your Scrum project: eScrum Web-based UI, Team Explorer, and Excel or Project, via Team Foundation Office Integration. In addition, it provides a single place for all Scrum artifacts such as product backlog, sprint backlog, task management, retrospective, and reports with built-in context sensitive help."

Source: Download details: Microsoft eScrum Version 1.0

In addition, take a look at the VSTS Scrum Process Template on CodePlex, which is under the guidance of several Team System MVPs.

First Post

This will be my first post starting the blog for the website and web development projects I will undertake as part of the team at Carnival Media Group. Over the coming weeks and months I hope to cover topics such as programming and development for websites, databases, SEO, e-commerce, shopping carts, custom solutions, new techology and ASP.NET tips, tricks and other information.

I hope this can be a fun an interesting blog about my role in the company and new and any interesting development we are doing.

I would also like this to be an area for me to give my opinion on web development techniques and new directions in the web development field!