Friday, May 2, 2008

Web Design Basics

When designing something, a designer should first go through the basics of designing. Whether he is designing a print design or web design, he must know the dos and do not's. The following items will help you know the basics of web designing as well as some techniques that are specific to coming out with the best web layout.

1. Create a design that seems friendly.

There are actually a lot of web designs that scare people away and not attract them. If you want people to return to your website, make it soothing and light. Keep your site as friendly as possible.

2. Create a great homepage

When designing your website, you should keep in mind to conceptualize a homepage that would attract your viewers. Remember that the first page that your customers see can also be the last. So learn to create a page that will attract your visitor’s attention and then draw them deeper into your site.

3. Keep in mind the principles in designing web sites

Remember to apply your design principles such as balance, contrast, emphasis, rhythm and unity. This will serve as your guide and will help you conceptualize a good web design.

4. Think small in terms of graphics

Slow pages can be really very annoying. Whether you like it or not, one cause of slowing the pages is large graphics. To avoid such problem think of using images with a size of 10-12 kb.

5. Use graphics that fit the content

Just because you have a wonderful picture of you and your boyfriend doesn’t mean that you should include it on your website. Use images that are appropriate and that connect with your site’s content.

6. Don’t use blinking images

There have been studies proving that blinking images actually annoy people. If you want to use them, though, use them sparingly. You wouldn’t want your site viewers to leave your page just because of an annoying blinking image.

7. Stay with standard layouts

Try to use a layout that is simple as possible. The 3-column layout might sound corny and boring but it helps to keep your readers stay where they are and keep reading your site’s contents. Keep in mind that readers and site viewers stick with things that are simple and easy to understand.

8. Use standard fonts and limit the number of different fonts

Use standard fonts such as Arial, Verdana, Geneva, and Helvetica. They might seem too familiar but they look better on most browsers. Now, you don’t have to worry whether your fonts will work or not.

9. Don’t be greedy

Though ads help you make money by posting them on your site, keep in mind that people visit your site because of their perceived content and not because of the ads that you put in it. For all you know, these ads may drive your viewers away, if they are too many, and could possibly make you lose money.

10. Remember your readers

Understand that, unless you’re writing a site for yourself, your site’s content should include topics that your viewers might want to read.

Issues On Web Design

Different issues can’t be avoided even in web designing. Due to conflicts between differing goals and web design methods, conflicts arise. Some of them are listed below.

Liquid vs. Fixed Layouts

Web designers do not have control over everything when designing a web site. Some of the factors that they do not have control over are browser window (the web browser used), used input devices (such as mouse, touch screen, voice command, and text) and the size and characteristics of fonts available.

However, some designers choose to control the element’s appearance on screen with the use of specific width designations. This may be done with the use of HTML table-based design or CSS. Fixed width design happens when images, texts and design layouts do not change as the browser changes. Supporter of this design prefer to control the look and feel of the site as well as the placement of objects on the page. However, other designers use liquid design, as in Wikipedia. In liquid design, the design moves so that the content will flow on the whole screen or a portion of it. The supporters of this design wishes to use all the available spaces on the web.

CSS versus tables

During the days where Netscape Navigator 4 was the most popular browser, Web designers use tables to layout pages on the web. This was considered as the practical solution then. However, popular as it is, it requires dozens of nested tables even for simple designs.

With the emergence of dominant browsers such as Internet Explorer (which became more compliant to W3C), designers started to turn their attention in using CSS. Proponents of CSS say that tables should only be used for tabular data and not for page layout. In CSS, on the other hand, HTML returns to a semantic set-up. With this, search engines are able to understand what is happening in a web page. But one major downfall of CSS is the fact that control is essentially abandoned because each browser has its own trait which leads the page to have a different display.

So to avoid this stand off, you have to decide firsthand on the approach you will take when designing that webpage, here are some of the key elements you have to bear in mind:

Website Planning

It is important to plan on the kind of website that you would be establishing. Keep in mind the audience or your target market, as well as the purpose for creating the site and lastly, its contents.

Audience

The key step to website planning process is defining your target market or audience. Your audience is the group of people you visualize as the ones who would most likely visit your website. These people will be visiting your website for a purpose so it is beneficial to know the things they are looking for. To help you decide on this, you should clearly define the goal of the site and also understand what people want to feel or do when visiting your website.

Looks vs. Function

Some designers pay more attention on how the site looks rather than on how it works. Some even rely on advertisements, so that clients will find their website, instead of search engines. On the other hand, SEO’s or Search Engine Optimization consultants are concerned with how a web site works, textually and technically. As a result, designers and SEO’s end up having fights because of the differences of their concerns.

Web Design Facts

Fact 1: We can’t deny the fact that when browsers enter a site, they look for something that is relevant to their needs. If they ended in a particular site through advertisements, then they would expect to see something related to that ad.

Fact 2: On the other hand, when a search engine scans a site’s contents, it looks for contents which are useful enough for other sites to reference. It expects to locate a content that is consistent with the keywords.

Fact 3: Moreover, visitors who go to a shopping cart would expect to find photos with high quality, a variety of applicable views and lastly, a concise and clear description and costs. They also expect that the cart should work in all types of browsers.

But sad to say, some viewers do not find what they need in a website or sometimes they have a hard time going around the site. The following things should make you aware on the things why web sites fail.

One fact that web designers must know is that people wouldn’t enter your site unless they know their way around it.

Due to this concern, web designers must take into consideration that they need to conceptualize user friendly and easy to understand websites. For most customers or viewers, very extravagant design won’t matter as long as they don’t get lost in your site.

Your competitors are just a click away

When designing your web site, think very carefully on things that could give you a plus over your competitors. Think of the things that you can offer your customers in order for them to stay on your site and choose you above all else.

People hate slow websites

Designers must understand that searchers can be very impatient when surfing through sites in the Internet. Therefore, designers must find a way to minimize the slowness of websites and at the same time offer viewers with quality contents.

Searchers look for relevant information

Dr. Jim Jansen of Penn State’s School of Information Sciences and Technology said, “A web site has to be relevant to a searchers needs. Otherwise, by the time three minutes have elapsed, 40 percent of searchers will have moved on. While some may have found what they wanted, others may simply have given up and move to a different site." When designing web pages, designers can’t help but become graphic artists with the aim to make your site look great but sometimes lacking in information. Therefore, remember that while it is important to make your site attractive, it is equally important to place in your site the information that visitors need.

Sites should have clear abstracts

The first thing that appears on the result page as an answer to a search engine query is the site’s abstract. The abstract explains everything about your site. According to a study done by Penn State, more users or searchers can be drawn to a site with the use of an abstract. That is if the abstract is informative enough and gives relevant and enticing information about the site. Dr. Jim Jansen said, "For site developers, if you want to be looked at, it is absolutely critical that the abstract be crystal clear about the purpose of your Web site."

Before we share some of the necessary steps used to create a professional web design and website, the following question must be addressed: What constitutes a "professional web design"? More often than not, a web designer or web design company claims to offer professional web design services for their clients. However, should they be promoting "web design services" rather than "professional web design services"? When measuring the professionalism of a web design and website, one must take into consideration a number of factors/steps:


Multi-stage web design process
Project collaboration tools (if project has more than one person involved)
High-quality design
Attention to detail
Current web design technology (CSS)
Well written, interesting, grammatically-correct content
Usability
XHTML and CSS validation (clean code)
Standards-compliant
Optimization
SEO (Search Engine Optimization) friendly
Abuse of Flash, Javascript, and sound effects


To put it simply, what separates professional web design from web design is whether or not a designer or web design company takes into consideration the above items when designing and building a website. Other than paying for a respected companies name and reputation, the items listed above are why professional web design services tend to cost more than regular web design services - you're getting a lot more than a website - you're getting the total package of web design professionalism that will surely shine through once the website is completed and released to the public.

The good news is, you don't need to hire a professional web design company or professional web designer if you want a professional web design and website. Although there is a great deal of work involved, if you'd like to attempt to do the heavy lifting on your own, then the following professional web design tips will help you create a professional web design and website.

Note: You might be wondering why a professional web design company would give away their process and professional web design "checklist" for free. The answer is quite simple: there is only so much time in the day, and unfortunately we can't professionally design every website in the world. The more high-quality, professional websites there are in cyberspace, the happier we as professional web designers and lovers of websites will be. To be blunt, there is just way too much junk out there. Lets get started.


Step 1: Multi-stage web design process

We've already written an extensive article on the basics of a professional web design process, so we're just going to list some of the article's key points for the sake of avoiding redundancy.

Stage 1: Conceptualization and planning (flowcharts)
When designing a website, one should not begin the process inside of a text editor (BBedit) or website builder application (Dreamweaver, GoLive, etc). Instead, the process should begin on a piece of paper or within flowchart software. According to Wikipedia, a flowchart is:

a schematic representation of an algorithm or a process.

In layman's terms, a flowchart provides a visual chart illustrating the structure of your website. How many main navigational items will your website contain? What will these items be called? Will there be any pages contained within the main pages? What will they be called? By planning out your website using a flowchart, you get a head start on:


Information organization
Usability
Determining the volume of content required


Stage 2: Modeling (wireframes)

In the modeling stage, static "wireframe" mockups are created for each unique web page. To create wireframes, one may use either:


paper and pencil
mockup software such as Adobe Photoshop or our personal choice, OmniGraffle Professional


These wireframes contain a bare-bones skeleton which illustrate the layout of a particular web page. Where will the logo go? Where will the content be located? Will there be breadcrumbs? Will you have a login box? Each of these questions (and many more) are answered in the modeling stage. A few things one should take into consideration when creating wireframes:


be sure to include all important elements that will be used (logo, navigation, content placement, images/video placement, login box, search, breadcrumbs, etc)
reference the flowchart which you created in Stage 1
don't use graphics - wireframes are meant to be bare-bones: boxes/circles/ovals which illustrate the placement of objects
only use text to label the elements, don't use body text (thats for the third stage)
focus on clean, well-organized, user-friendly layout; avoid cluttered layouts


Stage 3: Execution

The third stage in our professional web design process includes:


Creating the graphical user interface (GUI), also known as the design
Creating the content
Converting the web designs from images into code (markup) which web browsers use to present your website on the Internet


In the final stage, reference both the flowcharts created in Stage 1 and the wireframe mockups created in Stage 2 to create the final page layouts and designs. The design should be finalized in Photoshop or whatever image editing software you choose to use because it is a pain to make changes to the design once it has been converted into markup (code).

Trust us, process makes perfect

Following a well-structured web design process is by far one of the most importance steps that many web designers choose to neglect. By following a web design process such as the one we've just described, you increase the likelihood that your website will be well-organized, easily navigable, and user-friendly. If you're going to skip any of the items in our professional web design checklist, make sure that the web design process is not one of them.


Step 2: Project collaboration tools

Note: If you are the only one working on your project, then you can skip this step. Project collaboration tools are only recommended for projects which have two or more people involved.

Communication is one of the most important elements in a project. When multiple people are building a website, there usually are quite a few e-mails sent back and forth between one another. The more e-mails exchanged, the longer it can take to find a certain e-mail and the easier it can be to misplace important bits of information. This was one of the biggest problems that our professional web design company faced when we first began - there wasn't an easy way to organize the e-mails, attachments, milestones, etc.

Thankfully, after a little bit of research, we discovered a project collaboration tool called Basecamp. Taken directly from the Basecamp website:

Projects don't fail from a lack of charts, graphs, stats, or reports, they fail from a lack of clear communication. Basecamp solves this problem by providing tools tailored to improve the communication between people working together on a project.

Basecamp (and project collaboration tools like it) allows multiple users to access a website which stores all of the messages, milestones, file uploads, to-do lists, time it takes to complete parts of the project, etc. that are associated with a project. No more sending e-mails. Everything is securely stored on the Basecamp servers. The only e-mails you will ever receive are notifications whenever something is contributed or changed within a project.

Basecamp has packages available that can be tailored to suit your needs. If you only need to use Basecamp for one project at a time, then you can signup for free. Unfortunately with the free version, there are no file uploads allowed. However, for a measly $12/month, you can control up to 3 projects at once, have 250 megabytes of file upload space, have unlimited people and clients, have a real-time chat that can easily be integrated into Basecamp, and much more.

When it comes to project collaboration and communication, nothing beats a web application like Basecamp. If you're serious about your project and want to have the best communication possible, then you must try Basecamp. A project collaboration tool such as Basecamp is especially useful for a professional web design company which handles a number of projects and clients at any given time. For project collaboration, there is simply no better way to communicate.

Plug over.


Step 3: High-quality design

Who and what determines a "high-quality design"? There isn't one answer. Often times something that is appealing to one person may be extremely unappealing to another. Despite this fact, there are several things that a high-quality design should have:


Balance. Balance refers to the equal distribution of the heavy and the light elements on a single page.
Unity. Unity keeps all of the similar elements in the website alike and those that are diverse further apart; everything should be pulled into one integrated whole.
Emphasis. Emphasis involves the main points where the eye is drawn into the design; also known as "focal points".
Contrast. Not just color contrast, but also contrasting shapes, sizes, textures, and even typography.
Rhythm. Also known as repetition, rhythm brings internal consistency into your web design.


Since this is a broad topic and cannot be fully covered in this article, you can read more about the five basic elements of web design.

In addition to these five basic elements of web design, information overload is often times one of the biggest killers of a website design. Designers sometimes forget the saying "less is more" and somehow seem to believe that the more information that is stuffed onto one page, the better it will be. Don't become a victim of information overload. Keep your layout as clean as possible. Give different topics their own dedicated web pages. One of the biggest causes for information overload is not successfully planning out your website layout through the use of flowcharts and wireframes, discussed above in Step 1: Multi-stage web design process. Remember: white space is not necessarily a bad thing. As a matter of fact, white space is your friend, especially when creating a professional web design. Successful professional web designers learn how to use white, negative space to their advantage, and make it a key element of the design.


Step 4: Attention to detail

When professionally designing a website, every little detail is thought out and planned. Should there be a line above the headers, and if so, why? If you use rounded corners for your main body, should you be consistent and use rounded corners for everything else? Does your logo look better with a reflection underneath? The only way to answer any of these questions is to experiment. Sometimes the best results come from accidental experimentation. Don't always be happy with the first design. Work to improve upon the design and go through a few revisions, each time asking yourself "What can be done to make the design look better?", be more consistent, and most importantly, give your website a stronger identity and image.

When we say "detail", we're not just talking about graphic design elements. No, graphic design is just the tip of the iceberg. We're also talking about typography (font faces i.e. Arial, Verdana, Trebuchet MS, font sizes i.e 10 pixels, 12 pixels, 18 pixels, font weight/style i.e. bold, italic, font placement), the use of negative space, and other elements of design.

Attention to detail is important because it is oftentimes the details in your design which make your website stand out from the competition (or from other websites in general). People get bored with the same old design - give them something different, unique, and attractive, and they will come back and visit. Heck, they may even become inspired by your design.

Remember: Less is more. Use details, but don't abuse details.


Step 5: Current web design technology (CSS)

CSS - also known as cascading style sheets - replaced table-based website layouts years ago. The problem is, a lot of web designers are still using tables to create their designs. Not only is this unprofessional, but tables just plain suck. Here are a number of reasons why using tables for your web design is a bad idea:


Tables slow down your website. Everything inside of a table's cell is loaded before being shown to the user. This is especially apparent for people using dial up connections.
Tables make messy code and add unnecessary junk markup. File sizes are increased due to the excessive lines of code which means slower load times. Also, having to sift through hundreds (sometimes thousands) of lines of code just to make a change isn't a lot of fun.
Universal layout updates are difficult and time consuming when using tables. Making universal edits with tables involves opening each file, sifting through the code and junk markup, and making a change (again, on each page). Often times with CSS, all one must do is open the stylesheet and change a single value.
Tables should only be used to show data, not be used to design websites.
Tables limit your creativity and design. Table layouts are limited to boring, grid-based layouts. With CSS, you can place anything anywhere. The layout possibilities with CSS are endless.
CSS will save you time and increase your revenue in the long run. Updates and edits are much easier using CSS than tables. Because of faster load times, fewer visitors are likely to become impatient and leave. Longer visits = more browsing, more ad-clicking, lower bounce rates = more money for you.
Display your CSS website on tons of high-quality CSS Showcase websites. Tons of exposure if your website is featured. Table-based layouts are not welcome. Complete list on listible.com.


Some people will argue that table-based layouts are better than layouts which are built using CSS. However, oftentimes the person arguing that tables are better than CSS is the person who spent thousands of dollars on a table-based layout. Despite what anyone tells you, table-based layouts are inferior to CSS and should be avoided at all costs.

To read all about CSS, visit w3schools.com. Again, to be blunt, if your website is created using tables, it is not professional web design quality. Start using CSS stylesheets today and keep the tables in your spreadsheet application.


Step 6: Well written, interesting, grammatically-correct content

One thing that greatly compromises the quality and credibility of a website is poorly written, grammatically incorrect, misspelled content. This kind of content is unfortunately present in an extremely high number of websites - especially "professional" company websites.

If you don't know how to write, then hire someone to write the content of your website. You'll thank yourself later. Even if you do know how to write, mistakes are easy to make. Run through your content a few times to confirm that everything makes sense, is interesting, and is spelled correctly. You'll look more professional and people will take what you have to say more seriously.


Step 7: Usability

Website usability is extremely important. According to usability.gov:

In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. Usability, as defined by Joseph Dumas and Janice (Ginny) Redish, means that people who use the product can do so quickly and easily to accomplish their tasks. Usability may also consider such factors as cost-effectiveness and usefulness.

If website usability is poor, then people can easily become frustrated and leave your website. A great deal of importance must be placed on website usability if you want your web design to be of professional quality. It is usually poor usability which separates the regular websites from the professionally designed websites. Usability is the most important element of a professionally designed website.

For a wealth of information regarding website usability, visit usability.gov and also read our Dos and Donts of Website Navigation Usability.


Step 8: XHTML and CSS validation

Some people will argue that validating your website with XHTML and CSS validation from W3.org is a waste of time. To be blunt, they are wrong (for a number of reasons).


Accessibility. Without accessibility, you run the risk of being sued. For example: a disabled person who cannot use a "conventional" browser can sue you if your website is inaccessible to them. Although validation doesn't necessarily guarantee accessibility, it is an important component of exercising ones due diligence and is reason enough that you should validate your website's XHTML and CSS.
Cross browser compatibility. The more validation errors your website has, the higher the chances are that your website will not look the same in all web browsers. We will cover the importance of cross browser compatibility in the next step.
You look more professional with a valid website. Again, like having interesting content free of grammatical errors and misspellings, having a valid website makes you look more professional to your visitors. It tells them "Hey, I care about my website's image, I took the time to validate it".


If you're building a website for the first time, then you may find that your website has a lot of validation errors. Don't worry, this happens to the best of us. The more websites you build and the more time that you take to learn the rules of validation, the fewer errors you will get and the easier it will be to validate your website.

For more information about XHTML and CSS validation visit W3.org.


Step 9: Standards-compliant

Perhaps the most difficult, time-consuming aspect of professional web design is making sure your website is standards-compliant.

Taken directly from Wikipedia:

Standards-compliant is a term often used in describing websites & user agents' (often web browsers) relative compliance with web standards proposed by the World Wide Web Consortium (W3C)

In layman's terms, if you want your website to be considered professional, then it must look and function the same in all major browsers. In addition, achieving interoperability lowers costs to content providers since they must only develop one version of a document.

As mentioned above, creating a standards-compliant website will take a good deal of time and can even involve using basic hacks in order for certain elements to appear the same across all major browsers. Major browsers include: Internet Explorer 6 (IE6 -PC), Internet Explorer 7 (IE7 - PC), Firefox (PC and Mac), Safari (PC and Mac), and Opera (PC and Mac). These browsers control the majority of the browser market share and therefore the website which you create should be tested extensively in each of these browsers to ensure standards-compliance. In addition, XHTML and CSS validation (as mentioned in Step 8: XHTML and CSS validation) are extremely important when programming a website to be standards-compliant. Validate your website, validate your CSS stylesheet, validate yourself (okay, you can't validate yourself, but if you could, would you?).


Step 10: Optimization

Website optimization is another crucial factor that must be taken into consideration when professionally designing a website.
Website optimization includes:


Image optimization. Next to audio and video, images can severely compromise the speed in which your website loads. Always compress your images using Photoshop or your favorite image compression utility. By compressing images, you decrease the size of a file which allows a web page to load quicker which ultimately decreases the chance that your visitor will leave your website due to long load times.
Audio/Video optimization. Another major annoyance which screams "unprofessional" is having enormous video and audio files embedded in your web pages. Try to use Flash Video (.flv) compression for your video files and (.mp3) compression for your audio files. Not only are the file sizes smaller than using (.avi) or (.mpg) for video or (.wav) for audio, but the video/audio loads faster which means other elements on your web page will load faster, too.
Clean code (just say no to tables). In case you skipped Step 5, do not use tables when designing your website - use CSS (cascading style sheets). Tables have a ton of junk markup which will slow down your page load time, increase file sizes, and make editing and updating quite difficult.
Validate your XHTML and CSS. Although covered in Step 8, XHTML and CSS validation is an integral part of professional website optimization and therefore should not be skipped. Validate your XHTML and CSS.



Step 11: SEO (Search Engine Optimization) friendly

Professionally designed websites should be designed with a solid SEO friendly foundation. To make your website SEO friendly:


Don't use Flash. If you must use Flash, make sure it is used sparingly. Flash content is not crawlable by search engine spiders and therefore the content located inside of Flash files cannot be indexed in the search engines such as Google, Yahoo, MSN, or Ask.
Don't use Frames. Search Engine Spiders have a difficult time crawling through a website that uses frames. Many Search Engine Spiders will receive the following message when visiting a website designed using frames:
“Sorry! You need a frames-browser to view this site.”

Keyword Research. Optimize your web pages by including keywords relevant to the content on your website. Use keyword research tools such as Wordtracker or Overture to find the best, most relevant keywords for your content.
Researched Keywords in Title of web pages. Arguably the most important element in SEO, make sure that your title tags include the keywords found in the keyword research stage.
Researched Keywords in URL. Be sure to include the researched keywords in the title of your web pages as well. For example, if a page on your website is about energy drinks, make sure that the file is saved as "energy-drinks.html". Use dashes instead of underscores, if possible.
CSS Navigation/CSS Stylesheets. CSS navigation guarantees that your website navigational text is crawlable by search engine spiders. CSS navigation also loads very quickly and anyone will be able to view the navigation using any browser.
Researched Keywords in Anchor Text. For hyperlinks inside and outside of your website, be sure to include the researched keywords in the anchor text of your hyperlinks. This helps search engines better determine what a particular page is about and will help that page rank higher with the researched keyword(s).
Images: ALT tags, no text in images. Not only are ALT tags required for XHTML validation, but they are necessary components of web accessibility. Try to avoid placing text inside of your images since search engine spiders cannot crawl image text. However, if you must place text inside of an image, use the text inside of the image as that image's ALT tag. Search engine spiders can read ALT tags, just not the text inside of images.



Step 12: Abuse of Flash, Javascript, and sound effects

The last step in creating a professional web design and website is to avoid the abuse of Flash, Javascript, and sound effects. Not everyone has Flash or Javascript enabled on their computer, and therefore your website should not be built around them. If you're going to use Flash or Javascript, use it sparingly.

Try not to use Flash Intros on your website. Most people hate waiting for Flash Intros to load, hate being forced to sit through them, and hate being surprised by the sound that many of them have. Do not create your website using only Flash. Again, what about the users who do not have Flash enabled on their computer? That could be a potential client, customer, or reader who you're missing out on because of an unnecessary technological limitation.

If you're going to use sound effects, make sure that they only play if the user enables sound on your website - never force sound effects onto your visitors. Nothing screams "unprofessional" like having a sound effect play each time a navigational item is rolled over or even worse, when the visitor lands on the home page of your website.

As a matter of fact, Flash and sound effects should generally be avoided when creating a professional web design. Javascript is the only exception as long as you program the website to work even if Javascript is disabled. Flash and sound effects are a nuisance to a lot of people, so for that reason alone, try to stay away from them.

The recipe to professional web design

These 12 steps make up the majority of the recipe which many professional web designers live by when designing websites. Of course, knowing the things that you know after reading this article and actually being able to create a professional web design are two very different things. However, as it does with anything, practice makes perfect. Now get out there and start building a professionally designed website! And hey, if you can't do it yourself, go to Google and search "professional web design". Chromatic Sites is in there, along with many other highly-respected professional web design companies.

The website design your company commissioned a few years ago may hold a special place in the hearts of some within your company, but the market needs to be gauged regularly to determine if what worked then is what will work today. Your online presence must evolve if you hope to stay ahead of your competition. Mimicry and imitation of the #1 company in your sector is not the answer. Let DexterityMedia.com help you think ahead, employing not only proven design tactics, but revolutionary methods as well. As a leading Search Engine Optimization Company and Interactive Media Agency with offices in New York and Dallas, DexterityMedia.com is dedicated to achieving a strategic online presence for our clients through innovation, experience, constant testing and evaluation.

Working in close collaboration with your company, DexterityMedia.com's web designers and developers focus on usability, searchability and corporate branding, creating the most prospect-friendly, user-friendly online experience for your websites visitors.

While we do enjoy some of the more cutting edge tools and methods, we tend to shy away from gimmickry and the gratuitous use of "the next big thing," relying instead on proven and researched technologies that we predict will have staying power.

Affordable, innovative and strategically sound, DexterityMedia.com website designs focus on building your business.

DexterityMedia.com designers have worked for some of the biggest names in business. Contact us for a portfolio sample and URLs to some of our work or to schedule an evaluation of your website design or redesign needs.

The concept of web development may include more than a singular ecommerce website.

I have talked about the subject of web development in light of positively constructing a website. I’ve also talked about the mentality needed to envision the entire site prior to launch so you have some idea of where you want to go. The goal also included the need for a plan for growth and site expansion.

This article looks at the subject from the point of view of a corporate office with a few satellite offices that support and expand the potential of the primary business.

In a brick and mortar store environment it is often true that a business will start in a singular location. As trust is built through longevity and commitment to quality and service the business grows. If the business does well the owner may decide to develop a second store in another city within the region of primary service and support. Other stores may be opened as a result of the ongoing success of the overall operation. The idea is multiple stores – one brand.

Web development may be the mirror image of the brick and mortar model. Why do I say mirror? Well, because in the case of an online environment an ecommerce business owner may be better served by starting with the secondary stores and building up to the primary online business portal.

If you’re thinking, “That does seem backwards,” allow me to explain.

These satellite stores should have direct links to your primary site. Each satellite may have its own emphasis, but will always relate to the thrust of your main business. The end goal remains the same, multiple stores – one brand.

Why develop more than one site?

In web development the idea of more than one site could mean improved site rankings for your primary site and additional opportunities to reach potential customers.

Think of it this way. Each satellite website you develop can take on a distinct list of keywords or phrases. Each will be associated with your primary product. All content on the site will be geared toward the specific keyword or phrase.

If you have four supporting sites that can go online at the same time as your primary site you have five distinct opportunities to reach consumers with your message. Work to optimize each site for search engines and select unique and researched keywords or phrases for each site.

Is that the only benefit?

By developing your web presence this way you begin the process with backlinks already in place from the satellite sites to your primary web presence. As your Search Engine Optimization (SEO) strategies begin yielding results they should do so in all five instances and ultimately this effort benefits your bottom line.

By having five separate sites that market the same product from a slightly different vantage point the potential improves for increased sales. This is true not just because there are more sites for consumers to view, but because search engines will connect with this scenario and provide improved rankings earlier.

Proper web development may include more than one site and more than one approach as the vehicle used to maximize the overall potential of the product or service being marketed.

This article takes a look at the top 10 web design tips for users at any level. It will give you 10 complete different points to contemplate when you next begin a site design or when talking to your web design consultant/employee.

Design is never straight forward and web design has the additional unpredictable complication of technology thrown in. This means that you need to consider the consequences of your design decisions and how it will effect the most important people who see your site, the users themselves. The following tips should help you consider this and have a positive effect on your site and its users.

1. Navigation & Functionality

You should never sacrifice overall functionality for artistic extravagance. It is highly unlikely your site will ever achieve its purpose if the people who visit it cannot clearly and easily navigate around it.

Your site should look good but first and foremost consider how someone who knows nothing about the site would think when they landed there.

Something occurring in website frequently these days is Mystery Meat Navigation. This is a term coined by Vincent Flanders and it is used to describe site where navigation structures are so obscure and difficult to process that users cannot identify them at all and end up running there mouse across whole sections of a screen just to identify hyperlinks.

2. Images

People say images are worth a 1000 words and in web design that’s true in 2 ways. Firstly an image can do a lot more than text in some situation but secondly they are much, much bigger files with a higher download time.

It is widely accepted users will click away from a page that takes longer than 5-10 seconds to load and every time you put an image in a page you are increasing the likelihood of this happening. Additionally each image you imbed into a page design activates an additional HTTP request to your server so dividing an image into smaller ones or using lots of small images across a page does not solve the problem.

ALT tags should also be factored into the code of a website. They are a huge help to people who have either images turned off in a browse, mobile broswers that can’t read the images or a random error preventing the image from showing. They also hold a small SEO benefit.

3. Tables

It is advised that you use CSS and not tables to format a document but in some cases tables can be necessary. Remember one thing however, a table cannot be displayed until it has fully loaded. This can potentially cause a huge problem for users as they wait for the page to load, nothing appears then out of nowhere the whole page is done.

Someone is much more likely to click away when nothing is loading than when they can see progress.

4. Fonts

Don’t design sites to use fonts only you have, chances are they will be converted into some dull font and ruin the effect you were trying to achieve. Save special fonts for specific headers and convert them to images. Make the rest of your site in standard fonts so that as many browsers as possible will see it in the way you meant it to be. Recommended fonts for high scale compatibility are Arial, Verdana, Courier, Tahoma and Helvetica.

5. Plug-Ins

Plug-ins hold a lot of potential for both users and designers but it can easily be misused and misguided.

Plug-ins have a many forms and uses, the most popular being Java and Flash Player. I have heard a lot of people say that these plug-ins are “safe” and that everyone has them but this is simply not true. Every plug-in has a stack of different versions and connects differently depending on the browser the user is surfing with.

Think if your users will really want to browse to other sites to download a plug-in, restart the browser then navigate back. If the answer is no use other tricks at your disposal to make your page unique and save the big guns that are Flash and Java for times where it is essential.

6. Tags

The “tags” I am referring to hear are meta keywords and description, title, alt and h1 tags. Together these tags help manage your sites search engine optimisation (SEO) potential and this is defiantly something not to overlook. Helping people find your site will bring more traffic in and more conversion if you are a retail site.

The higher search engines rank you the more traffic will filter down and the more successful your site will be. Try to keep a constant theme running through all your tags but do so in a subtle way. Splashing the same word 1000 times on your page will only have negative effects so make sure you strike the correct balance between informative and spammy.

7. Browsers

In a perfect world everyone would use the same browser and your website would look the same on everyone’s screen but unfortunately this is not the case. Every browser has its own specific functions and styles and learning to make you code cooperate with both can present some serious problems.

The three you really need to concern yourself with are Internet Explorer, Firefox and Safari. These make up a good 95% of the browser market at the very least and while there are some additional popular browser I would not recommend you spend time optimising code for the rest.

The only thing you can do is do your best and stay away from browser specific functions, you’ll never make someone get a new browser.

8. Pop Ups

Something that is very important to remember is that the user should be in control of their browser and desktop. Do not place unnecessary pop ups and window opening links everywhere and the user will feel they have lost control of the site, become annoyed and close the windows.

There are some exceptions to using the (_blank) attribute but I would steer clear whenever possible.

9. Text Layout

Text is part of your design to and positioning it correctly on the page is very important. Try to get all the copy you need as early in the design process as possible. This means you will be able to design around the copy instead of trying to cram it into smaller spaces because someone wrote twice as much copy as they said they were going to.

Use the right alignment for the right situation, remember 99% of people will prefer left align and while justified look aesthetically better it can be very difficult to read in longer bouts.

10. Site Search

In this day and age finding what you want on a website in paramount. After you have followed the first tip on navigation you should also provide a search bar on your site so that a visitor who cannot immediately see what they are looking for can search. Many internet studies have seen the success of these smaller additions to your site and free ones are available from Google and many other SE operators.

Conclusion

Taking these 10 tips into account will help you design a more user-friendly and successful website, sometime it may seem like they are hindering your grand design but failing to take notice may result in your site being a very pretty stop sign for browsers. Just because you can find your way around your Flash menu system that takes 6 minutes to load doesn’t mean Mrs Smith who needs the product can.

Before you embark upon the process involved when you design your own website, you must select and register a domain name. That is your site's brand name and contact name. In order to be given a domain name of your very own, you must make a yearly payment to the appropriate registering entity to obtain the exclusive right to it.

Obtaining a domain name doesn't mean you have a web site or anything close. All you have is a name. It is similar to getting yourself set up with a name for your business is the "real" world - just obtaining exclusive rights to a name doesn't mean you are totally in business. You just have a name.

A web host commonly implements numerous computers that are all linked to the Internet to allow a very large number of web pages to be broadcast all over the world. The first step in making your new web page visible is to use a reputable web host that will give your personalized website a virtual home.

Thinking of a domain name is very much like thinking of a name for your company in the physical world. Similarly, a web hosting account is the equivalent of renting an office for your company. After you have come up with a domain name and signed on with a web host, you will then need to design your own website to attract visitors.

As a beginning web designer, you first need to design your own website in a attractive, and appealing manner. After you have got your basic web page posted you will be able to make any adjustments that you feel are needed. There are free web editors and commercial versions that are widely available.

When you choose to use free software, you can also learn more from a complete tutorial on the web. The step-by-step tutorial will guide you in the process of making your own web page, site map, and comment forms. It will also give you tips on the basic aspects of the software so you can continue to update and improve the site in the future.

A crucial aspect of web development is optimizing your site for search engines. This should be undertaken from the very start of the design process. In addition, there are a number of other concerns involved in developing web pages.