Website Design Web Development - Melbourne

IMAGES IN WEB PAGES – When to use GIF, JPEG or PNG

2008-04-21T20:25:00.000-07:00

There are three image formats widely used in web pages: GIF, JPEG and PNG. You need to choose the right format for your website images so that they will look good and still be a reasonable size.

Remember that web pages need to be about 70k or less (images and all) so that your pages download fast – this keeps your site visitors from falling asleep.

Points to remember:
JPEG
Use JPEG to save photographs.
JPEG cannot have transparent backgrounds.
JPEG is not good at preserving exact colors – don’t use them for logos or text.

GIF
Use GIF to save images that have sharp lines (like text) and solid colors.

Examples:
A solid red square
A typical corporate logo
Use GIF to save images that need to have a transparent background.
GIF was invented for creating screen graphics – don’t use GIF for images that you want to print on paper because they will look crappy.

PNG
Use PNG if you want to have images with blended (fades smoothly), transparent backgrounds.
Use PNG if you need to create print ready high-resolution graphics.

THEORY AND COMMENTS

ABOUT JPEG
Having plenty of time to spare because they were unable to get any dates, a bunch a nerd-photographers invented the JPEG – a method of compressing/packaging photographs in a digital format. JPEG is able to compress images by dumping unneeded image information – this makes JPEG a ‘lossy’ image format.

Because of this, with each generation that an image is saved as a JPEG, the quality gets lower since image information is getting lost with each cycle. As the quality of the image drops (information lost), the image starts to look worse and worse.
Don’t get me wrong; JPEG is still a great format for photographic images (widely used in high-end digital cameras like the Canon Digital Rebel,) you just need to know how to use them properly.

ABOUT GIF
GIF was designed for screen graphics in the day when modems were really slow. As such, they are very limited and can only support up to 256 colors.

GIF has a very simple one-color transparency, or as some people would describe it: an ‘on/off’ type of transparency. But, they are small in size and do a great job with images that have sharp lines … as I listed above.

ABOUT PNG
PNG was designed with the web in mind and is (by far) the most flexible graphic format ready for web use. The only problem is, that images saved as PNG always seem to be larger than their GIF or JPEG counter part. As such, most web designers just use GIF or JPEG.

PNG can do nifty things like contain gamma-correction information that automatically corrects the brightness of an image in different operating systems.

PNG has that smooth transparency I mentioned – graphic designers would recognize this as a 16 bit alpha channel. What that means, is that every pixel in a PNG can be semi-opaque to whatever degree you want.

PNG images come out larger because graphic design programs (Photoshop, Corel Photo Paint et cetera) are actually doing a bad job in creating PNG images. Maybe one day, they will get their act together and we can then all take advantage of PNG

Lite Web Design

2007-12-30T23:23:00.000-08:00

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.

web design - site structure

2007-08-05T22:51:00.000-07:00

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!

website or web site?

2007-07-17T17:23:00.000-07:00

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.

Website Design Tips - Melbourne Australia

2007-07-07T21:55:00.001-07:00

The design and layout of your website is the next most important part of building a website. Make a bad choice here and it won't matter how great your content is or how much advertising you do. If your site looks bad no one will visit and those that do won't stay long or buy anything.
Choose your colors carefully and keep in mind that your tastes may not be appealing to your target audience. Try a few different color schemes and ask some of your friends or family for their opinions about them. And remember this term, "white-space". In general, white-space is the cornerstone of good website design. Keep the background areas where your information or products will be displayed white or another light / pale color. Dark or oddly colored backgrounds distract your visitors from your information and also can make it difficult to read. Background images are also a big don't for the same reasons plus they make your pages load more slowly. Colored text should also be used sparingly. Contrast is key, otherwise it can be very difficult to read. Try to use colored text only to emphasize important information. If you choose to use a color other than black throughout your site make sure it is dark.

The name of your website, domain name, or business name should be prominently featured somewhere at or near the top of your pages either within your logo or near it. And it should fit within the typical boundaries of the page. If you make it too big or it contains too many words then it will stretch your pages so wide that most visitors won't be able to see the whole page unless they scroll sideways. Very annoying, and definitely not good website design. More about this later.

The layout is how things are arranged on your pages. There are many different ways to display your content and we'll cover that a bit farther down the page. What we're going to discuss here are the elements that frame your content such as your navigation menu buttons, any graphical accents, logos, etc.

The placement of the navigation buttons or links of a website are usually placed in one of 3 different areas of the page. Across the top of each page or down the left or right side. Regardless of where you choose to put them try to keep the text on the buttons or in the links as short as possible. Anything longer than one or two words will cause that part of your layout to be too wide and crowd your content area.

In general, you can only fit up to 8 buttons (maybe less depending on how much text you use) across the top of your pages and if you choose that layout then how the subpage page links are displayed also may have a limitation. Some layouts with top page primary page buttons will also display subpage links in a second row across the top and others will display them down the left side of the page.

Where your navigation buttons or links appear on your pages should be decided by the number of main or primary pages you will have in your website. Primary pages are the pages organized just below your home page in the structure or diagram of your website.

Navigation buttons down either side of your pages don't run into any limitations due to the endless amount of vertical space on every page. Remember though that the amount of text on the buttons will greatly affect the amount of space for content.

Your web site should be easy to read

2007-07-07T00:57:00.001-07:00

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.

Pay now or pay later

2007-06-19T19:38:00.001-07:00

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!

Developing a new website - Planning

2007-06-17T05:10:00.000-07:00

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.

Now Available: Microsoft eScrum Version 1.0

2007-06-14T19:06:00.000-07:00

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

2007-06-14T18:42:00.000-07:00

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!