Webmasters Gallery

I know, I know…none of us creative types want anything to do with coding past the very basic HTML/CSS we need to know to get our designs to the developers.

Doing development is something for those programming grunts, those code jockeys, those geeks.

Why should we enter the trenches of development when it’s so nice up here with the Photoshop brushes, afternoon tea, and MacPros? Because you’ll be a better designer for it.

Skeptical? Read on and discover 6 reasons why designers should code…

1. Better XHTML

I’ve worked with and known many designers who knew only the bare minimum needed to get their designs out of Photoshop and into a web format. Oftentimes they would make use of a software program or plugin like SiteGrinder. While these programs keep getting better and better at making compliant code, they still don’t match the human-produced variety.

Knowing how to write your own standards-compliant XHTML will make you a valuable addition to any web team (emphasis on the standards-compliant part). With all the fuss about PHP, ASP.NET, Ruby, and many other languages, people tend to forget that everything ends up being HTML in the end, because that’s what your browser has to have in order to render a page. The more you know about the medium you work in, the better you work in that medium.

2. Better SEO

And while we’re talking about standards-compliant code, we should mention SEO. This is a big buzzword, though not quite as much as it has been in the past. However, what this means is that SEO is becoming a much more commonplace idea of what a website should strive for, instead of just an added special feature for big business sites.

If you can learn to write your own code, you’re much closer to being able to list “SEO Compliant Designs” on your sheet of available services. That means you can charge more, and it’s another badge on your hat.

3. Better Accessibility

Better code and better SEO = better accessibility. Part of of the job of any designer is to present information in a clear and coherent manner, and on the web that means not solely in a visual manner. A shoddily-coded website can be a nightmare to navigate if you’re blind, or even if you’re using a mobile device.

Learning the ins and outs of developing code for accessibility not only allows you have that knowledge as part of your production skillset, but it will also help you to better understand the considerations you should take when designing for accessibility.

Accessibility is a mandate for all government websites, nearly all education sites, and businesses are starting to see the value in it as well. The more people you can reach via your site, the more chance you have of accomplishing your goal, whatever it may be. And that has to be reflected in any successful design.

4. Better Left Side

Being a right-brained creative is great, but giving your left side a workout can spur on creativity of a different nature. The motto at the bottom of the WordPress website is “Code Is Poetry”, and this is because translating a written language to something that can be visually seen is truly an art form.

Learning to write your own code opens up whole new avenues of expression. Developing your technical and analytical abilities can improve your information design, developing wireframes, and create a pathway to work with interaction design. And who knows, it may even improve your math skills!

5. Better Communication

It’s easy to get lost in the techno-jargon used by developers, simply because you may not have been exposed to the type of things they are discussing. Digging in and working with code yourself will allow you to become familiar with the terminology that is used when conversing about the construction of a site.

Being able to speak the lingo will help when you need to communicate with a developer or project manager about how a design should be implemented.

6. Better Design

You can only do so much knowing the fundamentals of design. Typography, color theory, composition, etc. are all fantastic and extremely important skills to know (and know well)…but eventually if you want to excel in your creativity, you must learn the tools of the trade. Painters learn about canvas types, paint compositions, and bristle qualities. Web design is no exception. Learn to code: you’ll be better for it.

Written exclusively for WDD by Ryan Burrell.

Simply put, usability is making your website easy for your visitors to find the information they need when they need it.

A common misconception about usability amongst web companies is that usability is expensive. Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.

Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.

1. Include a Tagline

A tagline is a statement or a motto that represents a company’s, or in our case a website’s, philosophy and mission. It should be the most obvious element on a website’s front page and it should clearly describe the website in one phrase.

Statistics show that a website has just 8 seconds to capture a visitor’s attention for them to browse the site further. Without a clear tagline a website would have a hard time keeping visitors long enough to browse the inner pages.

 

2. Implement Site Search

As with taglines, site search is a very important element on a website. When users are looking for something they typically look for a text field where they can enter their search term.

According to Jacob Nielsen’s web usability tips, make this search box 27 characters wide in order for the text to be clearly visible and easy to use. Place the search text field on the top of your web page, because users tend to search a website according to the F pattern, meaning from the top left to the bottom right.

Include a search button and clearly specify the search text, don’t use text such as Go or Submit, because these expressions tend to mislead your website’s visitors.

3. Don’t Use Extensive Graphics

Abusive use of design elements and graphics are always bad for a website, they just mislead the site’s visitors. Only design to improve the web page not just to decorate it. From a usability point of view, less is always more.

4. Use Site maps

Site maps are a relatively new website feature that improves web page navigation and also search engine optimization (SEO). Site maps in essence are a structural representation of a website’s pages and architecture. It can be a document in any form, or a web page that lists the pages on a web site, typically organized in hierarchical fashion.

 

Recently, search engines like Google, Yahoo and MSN have started offering a Sitemap protocol which is similar to a website’s site map page, but the data is organized in XML format. There are Sitemap XML generators that create these documents for a specific URL.

5. Don’t Break the Workflow

By workflow we mean every operation that a user is doing on a website. For example filling out a form, registering on a website, browsing categories, archives, etc. Don’t break these workflows, let the user cancel any operation. By not letting the user cancel an operation, we’re forcing them to finish it even if they don’t want to.

Not every operation on a website is obvious for users, guide them through the specific workflow by using descriptive tips. (e.g. when filling out a form). Javascript links usually break the workflow, so it’s not recommended to use them on your website.

Another mistake is not changing the color of visited links, this results in breaking the navigational design. Let users know where they’ve been and where they are on a website.

6. Create Easily Scannable Web Pages

Easy to read web pages plays an important role in maintaining visitors’ loyalty, keeping them on your site and reading your content. Usability tests show that the majority of users don’t read web pages, they scan them, looking for titles, bold, emphasized text or lists.

Eye tracking studies conducted by Jakob Nielsen show that users read content that resembles an F shape, meaning that the reading starts from the upper left of the web page, next it moves down a little starting from the left again.

 

Nielsen also states the implications of this reading pattern:

• Users won’t read a web page content word by word, they will extract important paragraphs, bold text, etc.
• The first two paragraphs are essential on a web page. These must contain the most important information that your visitors are looking for.
• Sub headings and lists stands out from the regular paragraphs. Use these elements to notify users on important information.

  
  

One important method that we can learn from traditional printed newspapers is that the journalists thought of a catchy headline and a catchy first paragraph to make readers read the whole article. They organize the content in an inverted pyramid format, just picture an upside down pyramid. The broad base represents the most important information in the whole article and the narrow tip represents the least important information.

We can use this format to organize web content by putting the most important pieces on top and the least important ones on the bottom, but how do we know which information is important and which is not? With the help of news values.

7. Don’t Design Misleading UI Controls

By user interface (UI) controls we mean web page elements, components and widgets that a user can interact with (e.g. a button, drop-down list).

Don’t design graphic elements that looks like a button, but is not. We often see text that is underlined and looks like links, but are not clickable.

By not having the action that the users were expecting, they would think that the site is broken and eventually leave. One other important usability tip regarding UI controls is consistency: Make sure that your UI controls are consistent.

 

Yahoo, as the above image shows too, is a good example of consistent UI control design. Every tab on the page looks and behaves the same, every link is underlined on mouse over, every button looks the same, etc.

8. Give Meaningful Feedback

Meaningful feedback is essential for a website. This is the communication channel between the site and the users, with the help of feedback we let the users know what’s going on on the site. In case of an error on your web page, don’t just print Error occurred, instead write meaningful error messages which tell the user what went wrong and what actions they can perform from there.

Feedback works in both ways. When a user fills in a form they are essentially giving you feedback. Don’t make the users have to fill in the same information twice. For example if a user has registered on a website and needs to fill in a form at some point, don’t ask for their name or any other information that they have already supplied, because these details already exist somewhere in a file or database. By simply getting these details automatically we are simplifying the whole process.

9. Do Not Overuse Javascript

With the advent of Javascript and the AJAX technique, web designers and developers can create responsive, transparent websites, but as with all new technologies there is a cost. In our case the cost is browser inconsistency. Not every user has an up-to-date web browser. They also might not have Javascript enabled by default.

By using Javascript on a website extensively we block out these users. Instead use unobtrusive Javascript and graceful degradation.

10. Avoid CAPTCHAs

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Even the name sounds complex. The most general form of CAPTCHA is text embedded in an image and by testing visitors we can separate human users from spam bots.

 

The problem with CAPTCHAs are that each form of human verification method triggers a complex process in the users’ brains (e.g. figuring out the distorted text, adding two numbers, etc).

Another problem with CAPTCHAs are the inconsistencies regarding different cultures. For example Chinese symbols, numerals are different from most western letters and Arabic numerals. Chinese people have a much harder time using CAPTCHA ‘enabled’ online forms.

Summary

• Always include a tagline which should be the most obvious element on a web page.
• Implement a 27 characters wide site search and place it on top of your website.
• Don’t use extensive graphics and design elements.
• Include a site map page and register a sitemap XML document in search engines.
• Don’t break a user’s workflow. Allow every action to be canceled if necessary.
• Create easily scan able web content and place the most important information on top of your web page.
• Don’t design graphic elements that looks like a button, but is not.
• Present meaningful feedback and don’t forget that feedback works both ways.
• Use unobtrusive JavaScript and graceful degradation.
• Avoid CAPTCHAs, use more usable methods instead.

 

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

In this article, we present 20 exceptional (and free) rich-text editors.
1. TinyMCE

TinyMCE is an open source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.

2. FCK Editor

FCKeditor is another wildly popular open source online rich-text editor (check out some of the websites that use it). It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data.

3. NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).

4. BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open source application since 2002 – and with a devout following – you might be able to quickly find some help if you run into any issues in the BXE IRC channel.

5. MarkItUp!

markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

 

6. WidgEditor

The widgEditor is an open source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML textareas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.

7. EditArea

EditArea is a free JavaScript source code editor. It’s an excellent solution for weblogs and websites that allow developers to contribute and format their own code.

8. Cross Browser Rich Text Editor (RTE)

Cross-Browser Rich Text Editor (”RTE” for short) is a free rich-text editor released under the Creative Commons Attribution 2.5 license. It’s a work based on the designMode functionality introduced in Internet Explorer 5 and implemented in the Mozilla Rich Text Editing API. It just has basic features, so it’s perfect for individuals looking to add simple rich-text editing support.

9. YUI Library Rich Text Editor

The YUI Library Rich Text Editor is a UI control that’s part of the YUI Library. It’s a great solution for those already using YUI and individuals that want to save some server resources (since you can serve it directly from the Yahoo! servers). The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution.

10. FreeTextBox

Web professionals using the .NET framework that want to add editing capabilities to their web pages and web applications should check out FreeTextBox: a robust, fully-featured, and extremely popular rich-text editor for ASP.NET. It has a built-in image gallery, a helpful JavaScript API for customization, and a full list of editing controls for constructing tables, ordered/unordered lists, and even spellchecking (using the IE spellchecking engine).

11. Damn Small Rich Text Editor

Damn Small Rich Text Editor (DSRTE) is a lightweight, free rich-text editor built on top of the jQuery library and a PHP backend. It’s plugin-enabled (meaning it’s highly-extensible), has image-uploading capabilities (using Ajax for responsive user interaction), and an HTML cleanup feature to tidy up messy markup.

12. Silverlight Rich Text Editor

Silverlight rich text editor is the first rich-text editor for Silverlight. It has many useful features such as “find and replace” to quickly find specific text or to batch-replace them with something else, keyboard shortcuts support, serialization of text input for security, and much more. Note that the original creator has stopped further development (so cross your fingers someone picks up his project).

13. Free Rich Text Editor

Free Rich Text Editor is a free, JavaScript-based HTML rich-text editing solution released under the Creative Commons Attribution 2.5 Generic license. The interface is reminiscent of Microsoft Word 2003’s interface, so users of this desktop application will find it quite familiar. It has everything you’d expect from a robust rich-text editor, as well as a code view to preview and edit the HTML source code directly.

14. Dijit.Editor

The Dijit.Editor is Dijit’s (Dojo’s widget library) fully-featured rich-text editor. Built on top of The Dojo Toolkit (a popular JavaScript library/framework); it’s an excellent solution for those already using the Dojo Toolkit.

15. WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. It was developed to output compliant HTML 4.01 Strict Doctype HTML, so it’s the perfect solution for the standards-aware developer.

16. Whizzywig

Whizzywig is a free JavaScript web-based rich-text editor. Aside from features you’d expect

7 Free Tools to Identify A Font

from a rich-text editor, Whizzywig also has a Spanish and German version, a web-safe color picker to change your text’s colors, and custom-designed UI controls.

17. openWWYG YSI

openWYSIWYG is a free and feature-packed web-based content editor that’s perfect for a host of content management systems. It has a very intuitive “table creation” feature to help users construct HTML tables. It also has a wide range of browser support including IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.

18. XStandard

XStandard is a highly-standards-compliant rich-text editor. It comes in two versions: XStandard Lite – which is completely free, and XStandard Pro. XStandard Lite has Microsoft Word text cleanup, spellchecking, and the ability to interact with third-party applications.

19. Xinha

Xinha is an open source, community-built rich-text editor released under a BSD style license. It’s highly-configurable, extensible, and feature-packed. Xinha emphasizes on community development, and as such, you’ll find many helpful contributors in the Xinha forums.

20. Kupu

Kupu is an open source “document-centered” client-side rich-text editor released by the international association for Open Source Content Management (OSCOM). It features easy integration into a variety of content management systems including Silva and Plone, easy customization and extension, and Ajax saving for an uninterrupted user experience.

MIX ‘09 has kicked in and “The Gu” just had someone show SuperPreview something that does what we saw with Meer Meer.

SuperPreview let’s you do the same onion peel overlays to see differences across browsers, and you can have everything run in the server (same as Meer Meer). This means that you don’t need to run VMs with various browsers to get your testing in. On Windows and want to see what your app looks like in Safari Mac? No problem.

The demo also showed the nice visualization of seeing where DOM nodes actually are, allowing you to see how the CSS is different. Promising!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!