Saturday, December 29, 2012

Top 10 Mistakes in Web Design

 Since my first attempt in 1996, I have compiled many top-10 lists of the biggest mistakes in Web design. See links to all these lists at the bottom of this article. This article presents the highlights: the very worst mistakes of Web design. (Updated 2011.) Cartoon- Man searching for 'Honalulu' and getting no results.- Woman: 'Oh, forget it. Let's just go visit my mother in Fargo.'


1. Bad Search

Overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms. Such search engines are particularly difficult for elderly users, but they hurt everybody.

A related problem is when search engines prioritize results purely on the basis of how many query terms they contain, rather than on each document's importance. Much better if your search engine calls out "best bets" at the top of the list — especially for important queries, such as the names of your products.

Search is the user's lifeline when navigation fails. Even though advanced search can sometimes help, simple search usually works best, and search should be presented as a simple box, since that's what users are looking for.



2. PDF Files for Online Reading

Users hate coming across a PDF file while browsing, because it breaks their flow. Even simple things like printing or saving documents are difficult because standard browser commands don't work. Layouts are often optimized for a sheet of paper, which rarely matches the size of the user's browser window. Bye-bye smooth scrolling. Hello tiny fonts.

Worst of all, PDF is an undifferentiated blob of content that's hard to navigate.

PDF is great for printing and for distributing manuals and other big documents that need to be printed. Reserve it for this purpose and convert any information that needs to be browsed or read on the screen into real web pages.

3. Not Changing the Color of Visited Links

A good grasp of past navigation helps you understand your current location, since it's the culmination of your journey. Knowing your past and present locations in turn makes it easier to decide where to go next. Links are a key factor in this navigation process. Users can exclude links that proved fruitless in their earlier visits. Conversely, they might revisit links they found helpful in the past.

Most important, knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.

These benefits only accrue under one important assumption: that users can tell the difference between visited and unvisited links because the site shows them in different colors. When visited links don't change color, users exhibit more navigational disorientation in usability testing and unintentionally revisit the same pages repeatedly.



4. Non-Scannable Text

A wall of text is deadly for an interactive experience. Intimidating. Boring. Painful to read.

Write for online, not print. To draw users into the text and support scannability, use well-documented tricks:

    subheads
    bulleted lists
    highlighted keywords
    short paragraphs
    the inverted pyramid
    a simple writing style, and
    de-fluffed language devoid of marketese.



5. Fixed Font Size

CSS style sheets unfortunately give websites the power to disable a Web browser's "change font size" button and specify a fixed font size. About 95% of the time, this fixed size is tiny, reducing readability significantly for most people over the age of 40.

Respect the user's preferences and let them resize text as needed. Also, specify font sizes in relative terms — not as an absolute number of pixels.



6. Page Titles With Low Search Engine Visibility

Search is the most important way users discover websites. Search is also one of the most important ways users find their way around individual websites. The humble page title is your main tool to attract new visitors from search listings and to help your existing users to locate the specific pages that they need.

The page title is contained within the HTML <title> tag and is almost always used as the clickable headline for listings on search engine result pages (SERP). Search engines typically show the first 66 characters or so of the title, so it's truly microcontent.

Page titles are also used as the default entry in the Favorites when users bookmark a site. For your homepage, begin the with the company name, followed by a brief description of the site. Don't start with words like "The" or "Welcome to" unless you want to be alphabetized under "T" or "W."

For other pages than the homepage, start the title with a few of the most salient information-carrying words that describe the specifics of what users will find on that page. Since the page title is used as the window title in the browser, it's also used as the label for that window in the taskbar under Windows, meaning that advanced users will move between multiple windows under the guidance of the first one or two words of each page title. If all your page titles start with the same words, you have severely reduced usability for your multi-windowing users.

Taglines on homepages are a related subject: they also need to be short and quickly communicate the purpose of the site.



7. Anything That Looks Like an Advertisement

Selective attention is very powerful, and Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation. (The main exception being text-only search-engine ads.)

Unfortunately, users also ignore legitimate design elements that look like prevalent forms of advertising. After all, when you ignore something, you don't study it in detail to find out what it is.

Therefore, it is best to avoid any designs that look like advertisements. The exact implications of this guideline will vary with new forms of ads; currently follow these rules:

    banner blindness means that users never fixate their eyes on anything that looks like a banner ad due to shape or position on the page
    animation avoidance makes users ignore areas with blinking or flashing text or other aggressive animations
    pop-up purges mean that users close pop-up windoids before they have even fully rendered; sometimes with great viciousness (a sort of getting-back-at-GeoCities triumph).

8. Violating Design Conventions

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. Every time you release an apple over Sir Isaac Newton, it will drop on his head. That's good.

The more users' expectations prove right, the more they will feel in control of the system and the more they will like it. And the more the system breaks users' expectations, the more they will feel insecure. Oops, maybe if I let go of this apple, it will turn into a tomato and jump a mile into the sky.

Jakob's Law of the Web User Experience states that "users spend most of their time on other websites."

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.



9. Opening New Browser Windows

Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks (particularly since current operating systems have miserable window management).

Designers open new browser windows on the theory that it keeps users on their site. But even disregarding the user-hostile message implied in taking over the user's machine, the strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.

Links that don't behave as expected undermine users' understanding of their own system. A link should be a simple hypertext reference that replaces the current page with new content. Users hate unwarranted pop-up windows. When they want the destination to appear in a new page, they can use their browser's "open in new window" command — assuming, of course, that the link is not a piece of code that interferes with the browser’s standard behavior. Cartoon- woman (at car dealership): 'How much is it with automatic transmission?'- sleazy salesman: 'I'll give you a hint - it's an EVEN number...'



10. Not Answering Users' Questions

Users are highly goal-driven on the Web. They visit sites because there's something they want to accomplish — maybe even buy your product. The ultimate failure of a website is to fail to provide the information users are looking for.

Sometimes the answer is simply not there and you lose the sale because users have to assume that your product or service doesn't meet their needs if you don't tell them the specifics. Other times the specifics are buried under a thick layer of marketese and bland slogans. Since users don't have time to read everything, such hidden info might almost as well not be there.

The worst example of not answering users' questions is to avoid listing the price of products and services. No B2C ecommerce site would make this mistake, but it's rife in B2B, where most "enterprise solutions" are presented so that you can't tell whether they are suited for 100 people or 100,000 people. Price is the most specific piece of info customers use to understand the nature of an offering, and not providing it makes people feel lost and reduces their understanding of a product line. We have miles of videotape of users asking "Where's the price?" while tearing their hair out.

Even B2C sites often make the associated mistake of forgetting prices in product lists, such as category pages or search results. Knowing the price is key in both situations; it lets users differentiate among products and click through to the most relevant ones.

Monday, December 24, 2012

Responsive Design are Best for Mobile Devices

Responsive design is quite popular these days. It is a new and revolutionary way of planning to develop websites which will be compatible for both PC, and laptop users as well as for the latest generation of tablet and mobile users. Right now it is recommended either to develop separate sites dedicated to the mobiles or tablets with separate web addresses or use a device that will detect the target devices and redirect the users to the device specific site. But there are two unique issues related to these suggestions.

    The device identification script that will be used to identify the mobile devices can face problem in tracking the huge number of mobile devices are continuously hitting the market every other day.  Developing and maintaining so many numbers tablet and mobile specific sites may take lots of time and can be lot more expensive than the normal.

Responsive design facilitates with a comparatively better solution for the disintegration of the web devices. The most important target is to create a chain of scalable designs intended towards the particular group of devices by utilizing scaling images and flexible grids. Web browsers offer data on the maximum number of pixel width that they support with the help of a CSS element that is termed as a media query. This value helps us to assume about the target devices as the maximum size of the width will be nearly the size of the screen of the device.

Instead of developing different websites with different contents, separate interfaces or creative elements, it is better to develop a responsive site that will adjust and scale the layers, which are for presentation, to offer the best feel within the screen space available.


Many think that responsive design should be taken into account for every new website designing project. Though this may not be possible for all projects because of the factors such as budget, time, technical expertise and target audience. But at least it should be discussed while planning for web designing.


Breakpoint is said to be the media query value which mark the switching of a new type of device. Mainly fluid designs are created to fit it within the preset limit of the media query. These limits will be equated to various types of devices like laptop, desktop, tablet and smart phone.

Once this threshold of the breaking point is crossed, another set of CSS codes will get activated to create the webpage with the help of perfect fluid layout, images and text format, navigation design targeting to these devices. There is no set of breakpoints that is universal as the idea of responsive design is quite new to the industry till date.

Once the media query range and breakpoints are fixed now it is the time to fix the width of the design. Though the designs are developed to fit within the ranges of the media query still a starting point is necessary to be there. It is probably the simplest to set the lower end value of the media query range for the width of the content and later fit the layout upward if necessary. But there is an exception in the mobile portrait design where the value is set at 310 representing the commonest minimum width used for smartphones. In this case, the design needs to be fitted both upwards and downwards as per the requirement.


It can be considered as the convenient option for the most number of projects related to responsive designing. Two options for mobile designing can be merged together to get two completely new and separate designs offering far better results. There is an extra benefit i. e. you can add breakpoints later if you wish to adjust extra-large screens without designing the site all over again.

There is certain misconception related to the responsive design that, it is only developed for web browser on mobile. It is all about designing websites for a particular screen size. Both developers as well as designers need to change their thinking about web designing. There are many designers who come from graphic designing background and are familiar with working in limited width mediums like billboards, ads, fliers and many more.

But while designing responsive sites the designers must have an idea on how the sites will look on different widths to make the responsive site the best one. They also think about the way the navigation should be adjusted. Moreover, the designers should realize that they will not be able to control the design anymore and have to adopt new flexibility. If the responsive design turns out to be a successful one then it is possible to develop wonderful sites with huge usage in all devices.

Responsive Web Design and CMS

Responsive design is a new concept which is growing rapidly all over the world. But still its compatibility with content management systems and other platform is uncertain. Most of the discussions related to responsive web design come from the front end development point of view. However, the large number of websites are created with strong back end CMS. There are few content management systems which allow better grip over the presentation layers than the others.

Therefore, the expense and the amount of effort for moving to responsive design may differ. Companies having strong technical expertise should evaluate the way using which they can align well with the responsive design plan and at the same time should define the upgrades as well as the other changes that are needed to be done.

Like many other new technologies responsive design is also not free from few drawbacks. Internet Explorer 6 and 7 do not support some features that are used in an ideal responsive design. But that does not mean that the design will not be visible in comparatively older browsers. The design may function or look a bit different than the way it is looked in the newer browsers unless you add some extra codes particularly for those browsers. It is suggested that before you start designing you should take a look at the web analytics data to check the percentage of your target audience depends on the older browsers.
Clean Air Commute Challenge

The technique of using only the most popular screen size as reference may become backdated with the modernization of the devices. The new way of responsive designing which is emphasizing more on content, rather than on context is getting introduced to the market. But this is yet to be standardized.

Media queries that is used downloads all the contents even if you do not see them on screen. This reduces the download speed of responsive websites comparing to the device designed sites.

You should always opt for a site that is compatible with all kinds of devices. If you already have a site then it might be difficult or expensive to make it adapted to the responsive design. Therefore, it will be easier to use mobile website template which is a convenient and an easy way of adapting conventional websites for mobiles and other devices.


Source: http://designmodo.com/why-responsive-design/#ixzz2FyJ34X2q

Web design training: the top online resource

Web design can be daunting. Just the sheer amount of new techniques and acronyms appearing every day can make it seem scary and confusing, even if you're a professional web designer, let alone a beginner. But don't worry - help is at hand in the form of easy to understand, web design training resources on the web.

There are many approaches to web design training - some paid, some free; some interactive, some not; some based on text, others on video. Which means it can even be an uphill struggle working out where to go and what to learn.

To make things easier for you, we've gathered the best 20 web design training resources on the web. All have a good reputation and feature instruction and advice from web design's leading experts. Most include a range of lessons covering a range of levels, from beginner to advanced.


W3 Schools - http://www.w3schools.com/

While many web training sites look colourful, attractive, and welcoming, with video and colourful graphics, W3Schools looks a bit flat and boring at first glance. But don't be put off!

If you're looking to start from the beginning with the most basic lessons in HTML and CSS, the site offers a steady progression of interactive tutorials that explains everything in plain and simple language and, more importantly, lets you play with markup live on the site, so you can see what effect the tiniest changes can have on how a web page appears in the browser.

Yes, yes, we know: there's been some criticism of the site, which has pointed out some technical errors in some of its lessons. However, for a beginner who doesn't know quite where to start with HTML, CSS, and JavaScript, we'd still provides a very user-friendly, straightforward and free way to get going.



Web Design Company Saudi Arabia

As a leading web design company in Saudi Arabia Gloria Solution serves its customers with best quality web design and development services. Apart from Web design Gloria provide Software Development, Interactive Web Development, Mobile Application Development and Online Search Engine Optimization services to its customers in the Kingdom.