Top 10 Secrets for Building a Successful Website

Posted on Aug 20, 2009 by William to Web Design

Businesses are increasingly realizing that building a successful website is essential to their existence. Apart from selling, building a good website can create a platform for spreading awareness and gaining recognition. Thus, following website building tips, such as having a user-friendly design and proper optimization, can spell success for organizations.

Read the rest of this entry »

Tags: building a good website, building a successful website, website building tips

Attention Map

Posted on Aug 18, 2009 by Neil to Web Design

I recently read an article that introduced a new concept called attention maps. An attention map is basically a list of goals for a page that basically assigns a point value of importance to sections of a website then distributes those areas onto a page. The most important areas are larger and also fill up more dominant sections while less important areas get pushed down and/or to the right.

From a designers perspective, this is something that is often done without the use of a map. Generally, you put the navigation up top then bring in a fantastic photo and put a catchy slogan in there followed by a link to convert the viewer into a buyer. Pretty simple formula that has proven to be effective.

However, what if you client has multiple areas of expertise and they are struggling internally to decide which areas carry more importance than others?  Maybe the board of directors needs a tool or diagram that demonstrates how a reorganization of priorities may look?  This is where an attention map comes into play.

First establish a point value for all goals.

Example point distribution:
-20 points allocated among four goals

Example result:
* product photo and description : 10 points
* features : 6 points
* Other products: 2 points
* News: 2 points

Translated into design this is what would happen. the 10 point item is obviously front and center taking up the majority of the page. The features could fall to the right of this product section since it holds a value of 6. The other items: Other Products and News would fit in below. This is an effective distribution of space that should translate into a good webpage.

In another scenario, the client puts a value of 4 on his main product but then spreads the rest of the 16 points evenly across 8 items. This breakdown divides his page into small parcels which will translate into a boxey and innefective design.

In a nutshell the Attention Map can be a useful way to map out the screen real estate. Additionally, its a great way to show your client that there is logic involved. To create an effective website it takes more than just good design. An effective website is a combination of great design and logic.

10 Web Design Tips

Posted on Jul 28, 2009 by William to Web Design

These days, companies pour an incredible amount of money into designing, redesigning, and improving their websites. The problem with laying down a sacrosanct list of web design tips is that website beauty and even functionality is in the eye of the beholder.

Read the rest of this entry »

Tags: web design tips

Proper Web Site Color for a Better Conversion Rate

Posted on Jul 9, 2009 by William to Web Design

Selecting appropriate web site color is critical, as it increases readability, makes the navigation clearer and spurs emotions that may impact the popularity of a site.  A study commissioned by RightNow Technologies and conducted by YouGov Plc in end 2007 indicates that trouble in searching for information related to products and delivery frustrates consumers, resulting in them abandoning the shopping cart.

Read the rest of this entry »

Tags: Page Layout, site color scheme, website color, website color theme

In the year 3000! ok maybe 2012 – The future of Development

Posted on Jun 8, 2009 by Rich to Technology Trends, Web Design

So I have been reading lately on the evolution of web development and how it will affect our culture as a whole. I have seen many blogs and articles state that mobile development will grow substantially. I totally agree with this item. Most websites now have evolved into thinking of mobile website presentation as an important part of their design and development. Some may argue in having a separate presentation for your mobile edition like yoursite.com/mobile or m.yoursite.com others might argue that something like “Progressive Enhancement” might be the solution.  While others still might have their own reasons for doing what they do. I personally feel like there is no right answer. The biggest question to me is something that plagues us as developers and designers on the regular computer browsers.  That is cross-browser compatibility. For example, I went from a sidekick slide to a G1 and now to the iPhone. Each phone supports different functionality and such. which makes it very difficult to have the mobile edition look the same across all phones. Yikes!

Another thing I have read about lately has been on the “I hope IE 6 Dies” mentality. While me as a Developer would truly hope so, we might not have that even in 2012. With the prices of these systems, licensing costs, lack of IT manpower or whatever else could be impeding the upgrade of computer systems in larger corporations we might still have to deal with this disease.

Frameworks Frameworks Frameworks. Developers have their preference. Some might tell you to learn all, some might say stick to one. At the end of the day, I can see them integrating concepts together to form the ultimate framework like voltron.js

I would talk about HTML5 and CSS3, but why. If not all browsers support it, then we are back to 2009.

Tags: CSS, CSS3, Dojo, HTML5, jQuery, Progressive Enhancement, Prototype

Web Design Trends for 2009

Posted on May 21, 2009 by William to Web Design

Web design trends for 2009 seem to hint that, while advancements on certain fronts will give way to novel designs, many of the old favorites will be back in fashion.

Read the rest of this entry »

Tags: new trends in web design, Page Layout, trends in web design, web design trends

Getting to know the 960 Grid System

Posted on May 5, 2009 by William to Web Design

There is a popular commercial on television for a company that claims to “move at the speed of business.” As anyone who owns a small business can tell you, time truly is money, and sometimes, it helps to have a system for web design that cuts down on the mistakes and maximizes the number of people you can reach with your site. The 960 Grid System is named for the web design idea of having 960 lines per web page.

Read the rest of this entry »

Tags: 960 grid, CSS, Page Layout, web design

The Mega Menu

Posted on Apr 14, 2009 by Nicole to General, Web Design

The Mega Menu is becoming a successful tool for the websites of today.

The usual drop down menu has now been improved upon. Many web developers have fought tooth and nail to avoid having to code a drop down menu. It was also a question of whether or not drop down menus were just trends. A new bigger and better drop down menu has started to pick up popularity. The Mega Menu is standing up to the web developers and is becoming a successful tool for the websites of today.

The Mega Menu is Big, has two-dimensional drop-down panels that are grouped into navigation options, they eliminate scrolling and use typography, icons, and tool tips to explain the user’s choices.

Mega Menus group and organize navigational options. They are easy to read and help the design and flow of the site. Mega Menus display everything and by helping the user find more, it will help the site sell more. The Navigation choices are structured through the layout, typography and icons. It renders fast, which is an important component for the interface.

There are a few downsides to the Mega Menu. First, they cover up a lot of content when you roll over the button so if you accidentally roll over one, the content you were looking at disappears under the menu. If you have a small monitor the text on the Mega Menu could get jumbled and overlap, making it non-functional.

The Mega Menu has more Pros than cons. Done right this new menu can guide users to exactly what they are looking for.

Below are examples of some places where the Mega Menu has been successful.

The Mega Menu was introduced in the 2007 Microsoft Word Program.

Vertical mega drop-down from Target.com

Vertical mega drop-down from foodnetwork.com

The Mega drop downs are better than Regular Drop Down Menus:

It has always been suggested to use Drop down menus sparingly. This is because they can be confusing from a usability standpoint and are usually more trouble than they’re worth.

A few good things about the Regular drop down menus is they conserve screen space and help the user with selections they may not know. Simple drop down menus are functional and recognizable by any user.

The Ugly
The following are types of drop down menus that can ruin your site flow and annoy your user. Interacting menus, users get confused when options come and go. Very long menus. Menus of state abbreviations, write out the entire state name. This goes for Dates as well, January looks so much better than Jan. Menus of data well known to users, such as the month and year of their birth. Users are hard wired to type in when they were born, they don’t need to see a menu of years. Lastly, Scrolling menus should not be used because the user isn’t able to see all of the information.

The following tutorials may help you in developing a Mega Menu for your next site. If you find any other tutorials on this please participate in this blog and post them.

Make a Mega Drop-Down Menu with jQuery

Get the jQuery listmenu plugin
It creates a top level alphabetical navigation menu from a plain old UL, LI or any set of html nodes. Has good options for specifying how many columns in the dropdown, was created with css-styling in mind, etc.

Tags: website architecture

8 Reasons Why Now is the Time to Update Your Website Design

Posted on Mar 24, 2009 by Damien to Web Design

With the current downturn in the economy it’s often the opinion that what you have online right now will do till things turn around. You are not alone in this strategy but lets look at what’s wrong with this idea why NOW is the perfect time to give your online presence an update.

1. A site update can bring in new traffic and generate additional interest where the old site may have gotten stagnant.

2. Conveys an air of success and the view that your company is doing quite well even in an economic downturn.

3. Allows you to expand your business and possibly add new items to your site that could generate additional traffic and therefore additional revenue such as news feeds, blogs, discounts, newsletter signups, etc.

4. Optimizing the site during a redesign is often one of the reasons for the update and is extremely helpful in getting your site back up to where it should be on Search Engines such as Google and Yahoo.

5. Allows you to re-focus your website to better suite your clients. During the redesign process we analyze what was lacking in the older version and make sure to make your site as profitable as possible using analytics and user tracking.

6. Your competitors are either stagnant or they’re scrambling to update themselves. Now is the perfect opportunity to fly past them and absorb they’re market share with a fresh new look.

7. Gives you an entirely new online presence for which to market in social networks, media campaigns and print advertisements. Something you’re not only proud of but excited to introduce.

8. Now may be the perfect opportunity to take control of your newly designed site by adding such tools as a full site CMS, allowing you to easily manage your online content and keep it fresh and new.

By updating your online presence, updating your online technologies and paying careful attention to tracking traffic, usability and customer focus the return on investment can mean the success of your overall business plan. A redesign/revision can take care of all of those loose ends you may have wished for when initially launching your site. Now is the time to bring those ideas to life and reinvent the face of your company online.

THAT Agency can help. Contact us now about your redesign at 888.873.3281.

Why Wireframe Your Site?

Posted on Feb 19, 2009 by Damien to General, Web Design

Some of us tend to skip the wireframe stage of website development for a few reasons such as time constraints, client budget constraints yes even pure laziness. The truth of the matter is that wireframing is an extremely important step in the planning process of a website. Skimping here only makes it more difficult down the road to truly get the proper message across to the user.

Here are a few key reasons you should always wireframe:

• Allows you get a clear picture of what information will be needed on each page before design
• Allows you to spend time and really focus on what each page’s purpose is. Careful plannings is paramount.
• Allows you a fail-safe for uneducated clients who tend to change their minds during the design phase of the project. If the site is planned out properly in the wireframe stage the functionality of the individual pages shouldn’t change much.
• Allows you to set a fallback point. When a client signs off on a wireframe that means they agree to what’s on that page. Education of the client also plays an important role here as well as they need to know that changing items already signed off on the wireframe can and probably will bloat the budget.
• Allows you to have a clear look at how the site will react to various visitors without the clutter of color or design elements.
• Allows you to remove any clutter that may be added to to the site that may be unnecessary and detrimental to the site goal.
• They’re easily adjustable (pre-signoff) and easy to produce allowing the planning process to move along smoothly and efficiently.
• Reduces the chance of scope creep.
• Gives the designer a clear view of what needs to be designed
• Gets the client deeply involved in the planning process early and opens communication between both parties

Overall the sometimes forgotten wireframe can be a lifesaver. Proper planning of page elements, page goals and site objectives can make or break the overall project.