What most marketers and brand promoters miss is the fact that the goal should not be keeping website visitors (prospects) engaged with ‘cool’ graphics; the goal should be getting website visitors to involve, and understand the message, and become a customer. There is no denying that good a copy, decent color scheme and attractive graphics grab the attention of website visitors but what makes them stay or come back to the website is something else. ‘Something else’ – that creates the desire to know more about the brand or own the product.

This post is intended to give you an insight into ‘something else’ that works.

The foremost step is tracking your visitors. Use Google Analytics or whatever tracking tool you prefer to track the number of visitors and the gap between new and returning visitors. Set goal values (for example, 1 new sign up against every 100 new visitors) and set a target for, say, the next quarter. Once you get raw statistics of visitors, you are ready to move on and experiment with your website to achieve your targets.

The next step is starting conversations. Make is super easy for visitors to leave their feedback or comments. Whether you have a blog or a website, you should allow visitors to get involved by participating in a conversation or initiating a new thread. Remove barriers. Website visitors should not be required to create an account to leave comment. Allow them to use their twitter, facebook or Google account to get authenticated and participate in conversations.

Allow your website visitors to use their existing profiles like Google or facebook to join or sign up. If you must register them with you, avoid long registration forms. Ask only for the information that you would really need.

Allow your website visitors to stay up-to-date with your products, offerings or activities. Allow them to subscribe via RSS or follow you on facebook, twitters and other social networks. Also use Google Friend Connect, a very useful but a bit unappreciated tool.

Maintain a consistent and compelling twitter stream or Facebook updates on your facebook fan page to keep your fans, customers and prospects in the loop.

Offer useful content – not just informative articles or breaking news but practical and useful content that your website visitors would love to download or use online. It could be a freebie, online service, royalty free images, printable cards or anything that relates to your business.

Reward your customers or users with a royalty program or other offerings that compel them to use your products/services and recommend them to others.

Use crowd sourcing techniques to engage your website visitors and existing customers to help you decide new offerings or even the redesign of your logo or website. It makes them a part of the team and the sense of a connection with the brand.

Make your website or blog easy to navigate, good on eyes and tasteful to read.

These are just a few ideas. We would like to hear more useful tips from you. Why not leave a comment and share your best tips?

Future of Web Design

First thing first, the much awaited Future of Web Design Conference 2011 is going to commence on May 16^th. This is going to be an eventful conference with three days of workshops and technical sessions on HTML5, CCS3, web design, creativity and a lot of exciting ideas for designers, developers, startups and entrepreneurs. You would also get a chance to talk to gurus like Jeffrey Veen, the founder of Typekit, Aarron Walter, the user experience lead of MailChimp and many others. If you are in London, register today to confirm your booking.

Past, Present, and Future of User Experience

Cennydd Bowles has written a detailed post on the fall and rise of user experience. It is a long long long article but really worth reading. Cennydd has explored past, present and future of the practice and occupation of user experience and information architecture.

Crowd Sourcing for Winning Products

Also check out Waqas Mughal’s thoughts on crowd sourcing for changing consumer behavior, and designing/ branding products.

Free Image Gallery Style WordPress Theme

Finally, have a look at MyPhoto – an image gallery style wordpress theme. It is elegant, lightweight yet powerful enough to handle a large portfolio/photography site.  MyPhoto wordpress theme is released under GPL license.

Do you know that a large number of people in your audience would not be able to view your design as you intended. Imagine how a person with vision deficiency (like color blindness) would experience your website. According to an estimate, among adult computer users of the USA alone, 1 user in 4 has vision difficulty, 1 has dexterity problem and 1 in 5 has hearing problem. By ignoring these users, we not only reduce the number of users but also limit the scope of our products.

Today’s post is all about designing accessible websites/ web applications. Accessibility is the measure of ease with which users with physical disabilities, say visual impairment, can use a product efficiently and perform the required tasks satisfactorily. In other words, accessibility means that every user in his own context can operate a system and get required output without any constraints.

Here, it is very important to understand that many end-users may be using the product in a context that is very different from the context in which it is designed. For example,

• The user may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
• The user may have difficulty reading or comprehending text.
• The user may be colorblind.
• The user may not have or be unable to use a keyboard or mouse.

These and many other contexts should be taken care of when designing or developing a system. The following is a set of basic rules of accessibility that you should understand and comply with when designing websites or web applications.

Use Colors Wisely

Do not rely on color alone to communicate a message. Ensure that text and graphics are understandable when viewed without color. If designers depend on color to convey information, colorblind users and users with devices that have non-color or non-visual displays cannot receive the information. Also ensure that foreground and background color combinations provide sufficient contrast when viewed on monochrome display or by someone with visual impairments.

Text Equivalents

Provide alternative text – For each image or image link, provide alternative text using appropriate attributes like alt and longdesc. Screen readers and talking browsers use alternative to describe an image to the users who cannot access the image, such as the blind users. Use short and clear alternative text for images that carry important information.

Provide multimedia synchronization – For any time-based multimedia presentation (e.g., a movie or animation), synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.

Consider Flickering

Avoid unnecessary graphic effects. Design pages that do not cause the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. People with photosensitive epilepsy may face problem due to flickering or flashing between 4 to 59 flashes per second (Hertz) range with peak sensitivity at 20 flashes per second. When a page includes moving content, provide a mechanism within to control moving/flashing objects.

Design Device Independent Pages

Design for device independence by using features that enable activation of page elements by a variety of input devices. Users should be able to interact with the Web site using a preferred input (or output) device. The input device may be a mouse, keyboard, voice etc.

Design Accessible Forms

Electronic forms contain a number of elements that require user interaction such as input fields, push button, radio button, check box, CAPTCHA etc. Design electronic forms in a way that people using assistive technology can access the information, field elements, and functionality required for completion and submission of the form.

Handle Time Outs

Accessibility problems can occur if your Web page times-out while a user is completing a form. Pages designed to comply with security requirements or reduce load on server may cause accessibility problem. These types of pages disappear or expire if a response is not received within a specified amount of time. Remember, that not all users are able to read or understand the page with equal efficiency. Always notify the user if a process is about to time-out. Also provide a prompt asking whether additional time is required.

Provide Options to Skip Navigation Links

Navigation links are usually placed at the top, bottom, or side of every new page. This creates difficulty for persons using a screen reader because screen readers move through pages by reading from top to bottom. The use of repetitive navigation links forces persons with visual impairments to re-read these links when moving to every new page. To counter this problem, Provide “skip navigation” tools that enable a user to move to the main content of a Web page without having to hear unnecessary information first.

Use Markup and Style Sheets Properly

Create web pages that can be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document. Use style sheets to control layout and presentation instead of elements and attributes.

Provide Text-Only Page

Provide a text-only page with complete information and functionalities as alternative to primary page. Remember, text-only page should be the last resort. Also make sure that the text-only page is updated whenever the primary page changes.

Scripts and Plugins

Text Equivalents – Ensure that plugins, scripts and other objects on a web page are accessible to users who need assistive technologies like page readers. Design web pages in a way that these are useable when scripts, applets or other objects are not supported. If this is not possible, at least provide text equivalents of these objects.

Alternatives –  When a web page requires that a plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that can be interpreted through assistive technologies.

Tables

Identify Headers: In data tables, identify row and column headers. For example, use TD to identify data cells and TH to identify headers.

Use Markup: For data tables with two or more logical levels of row or column headers, use markup to associate data cells and header cells. For example, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the “axis”, “scope”, and “headers” attributes, to describe more complex relationships among data.

Identify Frames

For proper navigation through frames, identify each frame with suitable title. For example, use title attribute on Frame elements. If required, describe the purpose of frames and their relation by using longdesc attribute.

Please note that a website or any web based interface that is optimized for accessibility may not comply with some functional requirements and vice versa. Therefore, functional requirements of the product must be kept in mind at every stage of design and development and appropriate guidelines should be followed accordingly.

Stay Updated

Did you find this post useful? Please consider subscribing to our Full RSS Feed. Stay updated by following us on Twitter and Facebook.

About Author

For the rest of 2011, we can expect a number of new trends as basic requirements of good web designs.

Here is how Greep It! foresees the future of web design for the rest of 2011.

Touchable Designs

With rapid proliferation of iPad, tablet computers and touch screen phones, web designs are transforming rapidly to catch up with the new generation of mobile users. Web pages and applications, now, have to be ‘touch-enabled’.

You should design interfaces that render flawlessly on traditional PCs as well as on touch screens of multiple sizes and resolutions. On the same note, your applications and pages should load fast on mobile devices with lower bandwidth. Hence, web pages and applications have to be simple, fluid and lightweight.

Splash Pages

The trend of photographic splash pages would continue to grow for the rest of 2011. You can see a large number of one-page designs on WordPress and all other platforms on the web especially since the launch of services like about.me. You can expect more and more creative experiments with splash pages/one-page designs with a lot of imagery, portrait pictures and animated background.

Maps

Maps can be used in many different ways on a website. There are a plenty of examples around. Check out Ed Hamilton’s online resume built on Google Maps, navigate twitter trends by location maps on TrendsMap, track and find rental apartments using Google Maps on housingmaps, and experience sharing geo-tagged images with Google Maps on Snaper. There are many more examples and the trend would continue in 2011.

More Typography

Now that a number of font APIs allow you to display your favorite fonts on the Web and almost all major browsers are capable of rendering fonts seamlessly, you can expect more typography in web designs. Adding fonts to your design is now quite easy with simple API calls. You do not have to juggle much with scripts and CSS. Start with Google Web Fonts and see how easy it is to spice up your design with typography experiments.

Facebook Applications

Facebook is now more than a social networking website. It is hosting many smart applications. Checkout Branchout and see how job search and professional networking can be integrated within your facebook profile. The trend is catching pace and you would see many serious web applications developed exclusively for facebook. See Picnik photo editing tool for facebook and expect much more to come within your facebook account.

Food for thought: Also consider using QR codes. There are a plenty of ways people are using them in their designs. QR codes are being adapted rapidly. Many early birds are using these nifty codes to engage their online visitors. Microsoft is also pushing this trend harder with its own version of QR codes.

960 Gridder is built upon the very famous JavaScript framework jQuery. 960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it.

It injects your website of choice and you can then work with this tool to help you out with whichever layout/design task you find it useful for.

Compatibility: 960 Gridder is cross-browser compliant and works well with all major browsers.

Website: http://gridder.andreehansson.se/

Download PSD Guarantee Seal

Flag buttons in AI and PSD format

Download Flags

3D Software Box PSD

Download 3D Software Red Box PSD

Download 3D Software Green Box PSD

Download 3D Software Blue Box PSD

Basic Button Collection

Download PSD

Free Button Pack

Download PSD

Pixel Arrows Pack 01

Download PSD

Nice & Simple Subscribe Badges

View Details

Glossy Icon Pack – 4 pieces Free PSD

Download PSD

Free PSD Buttons & Icons

View Details

PSD Resource Pack

Download PSD Resources Pack

PSD Gems

Download PSD Gems

Star Sticker PSD

Download Star Sticker PSD

PSD Buttons

Download PSD Buttons

PSDFox

Download PSDFox

Radium Neue PSD Icons

Download Radium Neue PSD Icons

Deluxive Creative Pack

Download Deluxive Creative Pack

On-Stage: Free Vector PSD Icon Set

Download Free Vector PSD Icon Set

Windows Buttons PSD

Download Windows Buttons PSD

Login Area PSD

Download Login Area PSD

World ORB Icon PSD

Download World ORB Icon PSD

Glass Video Playback Buttons

Download Glass Video Playback Buttons

PSD Avatar Pack

Download PSD Avatar Pack

iVista Icon PSDs

Download iVista Icon PSDs

Globe PSD Resource

Download Globe PSD Resource

Paperbag PSD

Download Paperbag PSD

Web 2.0 Style Buttons PSD

Download Web 2.0 Style Buttons PSD

High Gloss Graphite Buttons

Download High Gloss Graphite Buttons PSD

Milky Way Blank PSD Buttons

Download Milky Way Blank PSD Buttons

Web 2.0 PSD Buttons

Download Web 2.0 PSD Buttons

Webnode uses a common modular system which allows you to drag content areas to create different layouts or add content like polls, forums, and photo galleries. There are also widgets for PayPal, Flickr, YouTube, and Google Maps. It lets user to use his own domain instead of somename.webnode.com.

Features

In this busy life, Inspiration means a lot for the Designers. They need inspiration to speed up the work and to finish in a timely manner. I thought to collect some nice Breadcrumb for Designers.

So here is the Breadcrumbs inspiration for you fellas.

IDEO

Coolspotters

Apple

TypePad

Grooveshark

Launchpad

Firstborn Multimedia

Bell

Devlounge

IDEO

Profoto

Net Mag

Techradar

MSDN Help

PSDTUTS

Like this post? Please subscribe for RSS

Features:

• Fully accessible to screenreaders and other assistive technology
• Works on Mac, Windows, and Linux
• Works with all major browsers
• sIFR is less than 10k and only loads once

Website & Demo: http://www.mikeindustries.com/blog/files/sifr/2.0/

Download siFR 2.0 Code