Summary:
In HTML authoring, there are very good reasons to include an 'alt' attribute into every 'img' element. The purpose is to specify a textual replacement for the image, to be displayed or otherwise used in place of the image. Thus, the prime rule is: Consider what the page looks like or sounds like when images are not shown. Then, write for each image an 'alt' text that best works as a replacement. This document also gives more specific suggestions for simple, common situations, and some uncommon too. For content-rich images, it recommends explicit links to textual alternatives.
Originally written probably 1998-09, with the title Simple guidelines on using ALT texts in IMG elements.
This page belongs to section Web authoring and surfing of the free information site IT and communication by Jukka "Yucca" Korpela.
December 27, 2006
November 02, 2006
Usability - A blog about Card Sorting
Donna Maurer is an expert on the topic of card sorting. She has a very nice and practical approach to card sorting. She maintains an up to date blog on the topic, the best resource I have seen...
Card Sorting Blog
Card Sorting Blog
October 30, 2006
XHTML - The Four Essentials of Modern Web Design
The four essential practices focused are:
read on...
1. Valid code (standards compliance)
2. Accessible code
3. Semantically correct code
4. Separation of content and presentation
read on...
September 25, 2006
IE7 - Details on CSS changes
Details on CSS changes in IE7
List of bugs fixed (mentioned in positioniseverything.net):
Other bugs fixed:
List of bugs fixed (mentioned in positioniseverything.net):
- Peekaboo Bug
- Internet Explorer and Expanding Box Problem
- Quirky Percentages
- Line-height bug
- Border Chaos
- Disappearing List-Background bug
- Guillotine Bug
- Unscrollable Content bug
- Duplicate Characters Bug
- IE and Italics
- Doubled Float-Margin bug
- Duplicate Indent bug
- Three pixel text jog
- Creeping Text bug
- Missing First letter bug
- Phantom box bug
Other bugs fixed:
- Overflow now works correctly! (That means boxes do not automatically grow any more.)
- Parser bugs: * html, _property and /**/ comment bug
- Select control: CSS style-able and not always on top
- Auto-sizing of absolute positioned element with width:auto and right & left (great for 3 column layouts)
- Addressed many relative positioning issues
- Addressed many absolute positioned issues
- % calculations for height/width for abs positioned elements http://channel9.msdn.com/ShowPost.aspx?PostID=191182
- <?xml> prolog no longer causes quirks mode
- HTML element truly independent of the Body (now gets its own width, height etc.)
- 1 px dotted borders no longer render as dashed
- Bottom margin bug on hover does not collapse margins
- Several negative margin issues fixed
- Recalc issues including relative positioning and/or negative margins are fixed now
- CLSID attribute of <object> tag no longer limited to 128 characters
- :first-letter whitespace bug described in http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx fixed
- Descendant selector now works properly for grand children when combined with other selectors
- First-line and first-letter now applies when there is no space between word :first-line and opening brace {
- Pseudo-classes now are working as expected if selector is excluded
- The :link selector works now for anchor tag with href set to bookmark
- Addressed !important issues
- PositionIsEverything piefecta-rigid.htm now works
- List-item whitespace bug fixed
- Fixed Absolutely Buggy II
- Absolute positioned elements now use always correct containing block for positioning and size information
- Nested block elements now respect all overflow declarations (hidden, scroll, etc)
- Fixed the opposing offset problem (absolute positioned element whit all four top, bottom left and right are present)
- <a> tags nested within LI elements will no longer add extra bottom margin when hover occurs
- We no longer lose the image aspect ratio on refresh
- Cleaned up our ident parsing according to CSS2.1 rules
- Fixed parsing bugs for multi- class selectors and class selectors that are combined with id selectors
- And many more
August 09, 2006
User Experience Forums
UX Forums - launched for Usability and User Interface Design Professionals around the globe - For discussions, Knowledge Transfer, Problem Solving. etc.
contains the following discussion boards:
Usability & HCI Stuff
Quality in Usability
User Interface Issues
HTML, DHTML, JS Issues
How's My Site?
General Questions / Job Postings / Conferences
Web Hosting & Domain Names
Resources
contains the following discussion boards:
Usability & HCI Stuff
Quality in Usability
User Interface Issues
HTML, DHTML, JS Issues
How's My Site?
General Questions / Job Postings / Conferences
Web Hosting & Domain Names
Resources
August 08, 2006
Usability: Heuristic Evaluation Primer
Heuristic Evaluation
containing...
- Jakob Nielsen's 10 Heuristics
- Tognazzini's First Principles
and many more resources for reference.
containing...
- Jakob Nielsen's 10 Heuristics
- Tognazzini's First Principles
and many more resources for reference.
April 26, 2006
Rock Solid CSS Layouts
March 29, 2006
User-Centered Design principles
Meeting the ease of use challenge is largely a matter of adhering to the following principles. For each principle, the goal is to involve users -- to ask the right people the right questions. Putting yourself in their shoes is a sure way to put your product at the front of the pack.
1. Set business goals. Determining the target market, intended users, and primary competition is central to all design and user participation.
2. Understand users. A commitment to understand and involve the intended user is essential to the design process. If you want a user to understand your product, you must first understand the user.
3. Assess competitiveness. Superior design requires ongoing awareness of the competition and its customers. Once you understand your users' tasks, you must test those same tasks against competitive alternatives and compare their results with yours.
4. Design the total user experience. Everything a user sees and touches is designed together by a multidisciplinary team. This includes the way a product is advertised, ordered, bought, packaged, maintained, installed, administered, documented, upgraded and supported.
5. Evaluate designs. User feedback is gathered early and often, using prototypes of widely ranging fidelity, and this feedback drives product design and development.
6. Manage by continual user observation. Throughout the life of the product, continue to monitor and listen to your users, and let their feedback inform your responses to market changes and competitive activity.
Courtesy: IBM - Ease of Use - UCD
1. Set business goals. Determining the target market, intended users, and primary competition is central to all design and user participation.
2. Understand users. A commitment to understand and involve the intended user is essential to the design process. If you want a user to understand your product, you must first understand the user.
3. Assess competitiveness. Superior design requires ongoing awareness of the competition and its customers. Once you understand your users' tasks, you must test those same tasks against competitive alternatives and compare their results with yours.
4. Design the total user experience. Everything a user sees and touches is designed together by a multidisciplinary team. This includes the way a product is advertised, ordered, bought, packaged, maintained, installed, administered, documented, upgraded and supported.
5. Evaluate designs. User feedback is gathered early and often, using prototypes of widely ranging fidelity, and this feedback drives product design and development.
6. Manage by continual user observation. Throughout the life of the product, continue to monitor and listen to your users, and let their feedback inform your responses to market changes and competitive activity.
Courtesy: IBM - Ease of Use - UCD
IBM User Engineering
User Engineering (UE) is a significant evolutionary advancement in the process of developing offerings that satisfy and delight users, as well as the stakeholders who invest in bringing them to market.It requires an understanding of value propositions—the values that users seek, how an offering will provide those values, and the values sought by the business providing it. The objective is a balanced design that provides value for the business, stakeholders, and users. UE is based on delivering this measurable value to each of them.
This section of the site provides a comprehensive reference source on the User Engineering process pioneered by IBM. It builds on the well-established User-Centered Design (UCD) process with the overall objective of delivering maximum value to the Customer/User and Supplier.
Introduction
User Engineering is about satisfying users with all aspects of an offering .
Principles
User Engineering is based on principles that govern its structure and practice.
Role by phase
The linkages between roles , phases , activities , work products and measures.
Phases
The design process has discrete phases where specific activities are performed.
Roles
A set of roles , with specific skills, must be staffed to perform User Engineering .
Activities
Activities are a set of actions performed by one or more roles , resulting in work products .
Work products
Roles produce work products during each phase of the process.
Methods
Methods provide proven techniques to help perform activities .
Measures
Measures are taken at each phase to ensure project goals are achieved.
Glossary
List of special words or phrases (terms) used throughout User Engineering .
User-Centered Design
Some of the core elements of User Engineering are direct extensions of the well-established User-Centered Design process.
IBM Web design guidelines
This information is most valuable for novice and intermediate level Web designers, but contains tips and other information that may be useful to more experienced designers.
1. Introduction Clarifying how to use these guidelines.
2. Planning Getting started on a Web design project.
2.1. User analysis Eliciting initial input from users.
2.2. Competitive and market analysis Finding a niche in the market.
2.3. Strategy Determining the detailed plan for meeting your goals.
2.4. Content Establishing goals and an initial plan for content.
2.5. Dev tools and technology Learning about the technology options.
2.6. Schedule of time and resources Creating a Web design project plan.
3. Design Creating the framework for the site.
3.1. Structure Making it easy for users to find what they need.
3.2. Navigation Making sure users can move around in the site easily.
3.3. Text Designing text that is easy to scan and read.
3.4. Visual layout and elements Page layouts meeting users' needs.
3.5. Media Using animation and other media effectively.
4. Production Building all the pieces.
4.1. Preparation Establishing conventions for file management.
4.2. Browser compatibility Supporting different browsers.
4.3. Creating images Images to meet performance requirements.
4.4. Cascading style sheets Making good use of CSS.
4.5. Final testing Ensuring the site is ready for publish.
4.6. Rollout Publishing the site.
5. Maintenance Make it a site worth coming back to.
5.1. Administration Keeping your site healthy and vital.
5.2. Advertising your site Your web site gets deserved attention.
6. e-commerce topics Selling goods and services online.
6.1. Customer support Supporting before, during, and after purchase.
6.2. Trust Establishing trustworthiness.
6.3. Product navigation Enabling users to browse products easily.
6.4. Product information Providing product info that users need.
6.5. Purchase transaction Easy means to purchase products.
7. Bibliography Research cited in these guidelines.
1. Introduction Clarifying how to use these guidelines.
2. Planning Getting started on a Web design project.
2.1. User analysis Eliciting initial input from users.
2.2. Competitive and market analysis Finding a niche in the market.
2.3. Strategy Determining the detailed plan for meeting your goals.
2.4. Content Establishing goals and an initial plan for content.
2.5. Dev tools and technology Learning about the technology options.
2.6. Schedule of time and resources Creating a Web design project plan.
3. Design Creating the framework for the site.
3.1. Structure Making it easy for users to find what they need.
3.2. Navigation Making sure users can move around in the site easily.
3.3. Text Designing text that is easy to scan and read.
3.4. Visual layout and elements Page layouts meeting users' needs.
3.5. Media Using animation and other media effectively.
4. Production Building all the pieces.
4.1. Preparation Establishing conventions for file management.
4.2. Browser compatibility Supporting different browsers.
4.3. Creating images Images to meet performance requirements.
4.4. Cascading style sheets Making good use of CSS.
4.5. Final testing Ensuring the site is ready for publish.
4.6. Rollout Publishing the site.
5. Maintenance Make it a site worth coming back to.
5.1. Administration Keeping your site healthy and vital.
5.2. Advertising your site Your web site gets deserved attention.
6. e-commerce topics Selling goods and services online.
6.1. Customer support Supporting before, during, and after purchase.
6.2. Trust Establishing trustworthiness.
6.3. Product navigation Enabling users to browse products easily.
6.4. Product information Providing product info that users need.
6.5. Purchase transaction Easy means to purchase products.
7. Bibliography Research cited in these guidelines.
March 28, 2006
Usability Testing Mistakes
#1: Do You Know Why You're Testing?
#2: Not Bringing the Team Together
#3: Not Recruiting the Right Participants
#4: Not Designing the Right Tasks
#5: Not Facilitating the Test Effectively
#6: Not Planning How You'll Disseminate the Results
#7: Not Iterating to Test Potential Solutions
Jared M. Spool writes for uie.com:
Seven Common Usability Testing Mistakes
#2: Not Bringing the Team Together
#3: Not Recruiting the Right Participants
#4: Not Designing the Right Tasks
#5: Not Facilitating the Test Effectively
#6: Not Planning How You'll Disseminate the Results
#7: Not Iterating to Test Potential Solutions
Jared M. Spool writes for uie.com:
Seven Common Usability Testing Mistakes
Top 10 Usability Blunders
Blunders Of The Big Players:
1. No Search Function (Guilty party: NBA)
2. Massive Download Time (Guilty party: ESPN)
3. Non-scannable Text (Guilty party: Boeing)
4. Unclear Link Text (Guilty party: Real Player)
5. Poor 404 Error Page (Guilty party: Monster)
6. Visited Links Not Shown (Guilty party: About)
7. Frames Used (Guilty party: Ocado)
8. Links Point to the Current Page (Guilty party: Ford)
9. Important information contained in images (Guilty party: AOL)
10. Unique Scrolling System (Guilty party: BMW)
Trenton Moss writes for sitepoint.com:
Top 10 Usability Blunders of the Big Players
1. No Search Function (Guilty party: NBA)
2. Massive Download Time (Guilty party: ESPN)
3. Non-scannable Text (Guilty party: Boeing)
4. Unclear Link Text (Guilty party: Real Player)
5. Poor 404 Error Page (Guilty party: Monster)
6. Visited Links Not Shown (Guilty party: About)
7. Frames Used (Guilty party: Ocado)
8. Links Point to the Current Page (Guilty party: Ford)
9. Important information contained in images (Guilty party: AOL)
10. Unique Scrolling System (Guilty party: BMW)
Trenton Moss writes for sitepoint.com:
Top 10 Usability Blunders of the Big Players
Making Poweful Personas
Personas ought to be one of the defining techniques in user-focused design. Lots of professionals create them, yet too often the personas end up being too vague to guide a product’s focus.
They often lack the detail to be useful in guiding low-level design trade-offs. And, as typically done, personas have been too narrowly focused. They often aren’t helpful in identifying the information a user needs or creates.
After gathering information, George Olsen prioritizes personas into the following types:
* Focal
* Secondary
* Unimportant
* Affected
* Exclusionary
* Stakeholders
Read more about:
Making Personas More Powerful: Details to Drive Strategic and Tactical Design
They often lack the detail to be useful in guiding low-level design trade-offs. And, as typically done, personas have been too narrowly focused. They often aren’t helpful in identifying the information a user needs or creates.
After gathering information, George Olsen prioritizes personas into the following types:
* Focal
* Secondary
* Unimportant
* Affected
* Exclusionary
* Stakeholders
Read more about:
Making Personas More Powerful: Details to Drive Strategic and Tactical Design
R.I.P. WYSIWYG
Macintosh-style interaction design has reached its limits. A new paradigm, called results-oriented UI, might well be the way to empower users in the future
Displaying commands in menus, toolbars, and dialog boxes works with a limited number of elements. But Microsoft Word 2003 has 1,500 commands, and users typically have no clue where to find most of them.
Another WYSIWYG downside is that it forces too much manual labor on users and requires a stretch of imagination to envision results in advance. Yes, you can gradually massage your work into the shape you desire, one modification at a time, and visually confirm progress as you go. But you have to make each modification yourself, at the cost of many a mouse click.
Even worse, you begin with a blank screen and must build up to your goal one step at a time. Although Michelangelo might readily see a statue hidden within an uncarved marble block, such a feat is considerably more taxing for the average person.
Jakob Nielsen writes:
R.I.P. WYSIWYG
CSS Background Position Bug
A close examination of different browsers will show that each has a unique pattern to their combined centering displays as the window width is varied.
IE win is the one that has the problem when both the test box and the background image are the same "even" pixel width.
But if both are an "odd" width then it is Firefox that gets it wrong!
Opera only shows errors when the BG and test box are opposite, one being even and the other odd.
There is no combination of odd/even widths on background images and test boxes that will behave identically in all browsers.
Well, check the details here:
IE Background Positioning Bug - An explaination and a fix
IE win is the one that has the problem when both the test box and the background image are the same "even" pixel width.
But if both are an "odd" width then it is Firefox that gets it wrong!
Opera only shows errors when the BG and test box are opposite, one being even and the other odd.
There is no combination of odd/even widths on background images and test boxes that will behave identically in all browsers.
Well, check the details here:
IE Background Positioning Bug - An explaination and a fix
March 27, 2006
CSS Rounded Corner - Slide Box
Sliding Doors Box– Rounded Corners
- A Simple, Semantically Correct CSS Box with Clean Code by Ryan Thrash
The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup and to make sure they could resize while keeping their backgrounds intact.
CSS Rounded Corner - Slide Box
- A Simple, Semantically Correct CSS Box with Clean Code by Ryan Thrash
The goal of the exercise was to create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup and to make sure they could resize while keeping their backgrounds intact.
CSS Rounded Corner - Slide Box
Simplified task analysis - 6steps
Indi Young of Adaptive Path has spend a lot of time helping clients conduct task analysis to form mental-model diagrams. When teams first start analyzing the interview transcripts they’ve collected, they often run into a confidence issue. “How will we know if we get the task groups right?”
This question usually arises because the team doesn’t have the kind of details it needs to identify clear tasks. The problem isn’t in sorting; it’s in the data-gathering stage. If interviews don’t provide details, task sorting becomes much more complex. Fortunately, there are six simple things you can do to improve the quality of your interviews, and clarify task analysis.
Indi Young writes...
6 steps to better interviews and simplified task analysis
This question usually arises because the team doesn’t have the kind of details it needs to identify clear tasks. The problem isn’t in sorting; it’s in the data-gathering stage. If interviews don’t provide details, task sorting becomes much more complex. Fortunately, there are six simple things you can do to improve the quality of your interviews, and clarify task analysis.
Indi Young writes...
6 steps to better interviews and simplified task analysis
Business value of web standards
How important is standardization to an individual business?
Do Web standards give organizations a return on investment?
Does the transition to XHTML and CSS make financial sense?
Jeffrey Veen answers...
The Business Value of Web Standards
Do Web standards give organizations a return on investment?
Does the transition to XHTML and CSS make financial sense?
Jeffrey Veen answers...
The Business Value of Web Standards
March 26, 2006
Information Architecture - Intro
Information architecture is the science (some would insist art) of defining the structure, organization, navigation, labeling and indexing of a Website.
It is the role of the information architect to decide how a site should be structured, what kind of content it should host, and how to accommodate future growth. In short, information architecture defines the backbone of a Website.
Subha Subramanian writes...
An Introduction to Information Architecture
It is the role of the information architect to decide how a site should be structured, what kind of content it should host, and how to accommodate future growth. In short, information architecture defines the backbone of a Website.
Subha Subramanian writes...
An Introduction to Information Architecture
Quantify - User Experience
Many look to the user experience as an overall indicator of Website success. Analyzing how effectively a Website provides for a net positive user experience can often turn into a subjective affair, rife with opinion and short on objectivity.
Robert Rubinoff outlines a quick-and-dirty methodology for quantifying the user experience, which I've found to be very useful in providing clients with a quick, objective, visual representation of where their site stands vis-Ã -vis the competition or past development efforts.
How To Quantify The User Experience
Robert Rubinoff outlines a quick-and-dirty methodology for quantifying the user experience, which I've found to be very useful in providing clients with a quick, objective, visual representation of where their site stands vis-Ã -vis the competition or past development efforts.
How To Quantify The User Experience
Improve Usability for Older Users
According to the 2001 UK census, the UK now has more people aged over 60 than under 16. It also revealed that there are now 1.1 million people aged over 85 in the UK -- and the trend toward an ageing population is common in many other western countries.
Tim Fidgeon writes: The 40-minute 'talk-aloud' sessions involved our asking participants to find information on a range of government web sites. The results of this research provided insights into the ways older users differ from their younger counterparts when it comes to using the Internet.
Improve Usability for Older Users
Tim Fidgeon writes: The 40-minute 'talk-aloud' sessions involved our asking participants to find information on a range of government web sites. The results of this research provided insights into the ways older users differ from their younger counterparts when it comes to using the Internet.
Improve Usability for Older Users
Usability: Why Consistency is Critical
Consistency can be something that you can use to your advantage, rather than a straitjacket that constricts you unnecessarily.
It can help minimize your development and maintenance costs, free you from having to be concerned about relatively trivial design issues, and provide an enhanced user experience for your customers.
Gerry Gaffney writes..
Why Consistency is Critical
It can help minimize your development and maintenance costs, free you from having to be concerned about relatively trivial design issues, and provide an enhanced user experience for your customers.
Gerry Gaffney writes..
Why Consistency is Critical
Seven Screen Reader Usability Tips
Simply ensuring that your Website is accessible to screen reader users is, unfortunately, not enough to guarantee that these users can find what they're looking for in a reasonably quick and efficient manner. Even if your site is accessible to screen reader users, its usability could be so poor that they needn't have bothered stooping by in the first place.
Fortunately, there are plenty of simple-to-implement guidelines that you can follow. Trenton Moss lists down seven easy tips that will drastically improve a site's usability for screen reader users, as well as all other visitors.
7 Screen Reader Usability Tips
Fortunately, there are plenty of simple-to-implement guidelines that you can follow. Trenton Moss lists down seven easy tips that will drastically improve a site's usability for screen reader users, as well as all other visitors.
7 Screen Reader Usability Tips
Usable Interactivity with Remote Scripting
Usable Interactivity with Remote Scripting
Cameron Adams explains what is remote scripting and its advantages, Remote Scripting and Accessibility advantage ans much more...
If your bookmarks contain even one Web development blog, you'll undoubtedly know that remote scripting is being touted as the new "future of the Web".
Cameron Adams explains what is remote scripting and its advantages, Remote Scripting and Accessibility advantage ans much more...
If your bookmarks contain even one Web development blog, you'll undoubtedly know that remote scripting is being touted as the new "future of the Web".
Browser-Specific CSS Hacks
Introduction to Browser-Specific CSS Hacks
More and more Web developers are ditching tables and coming round to the idea of using CSS to control the layouts of sites. And, given the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management... An article by Trenton Moss.
More and more Web developers are ditching tables and coming round to the idea of using CSS to control the layouts of sites. And, given the many benefits of using CSS, such as quicker download time, improved accessibility and easier site management... An article by Trenton Moss.
March 01, 2006
All about Web Accessibility
- Day 6: Choosing a DOCTYPE
- Day 7: Identifying your language
- Day 8: Constructing meaningful page titles
- Day 9: Providing additional navigation aids
- Day 10: Presenting your main content first
- Day 11: Skipping over navigation links
- Day 12: Using color safely
- Day 13: Using real links
- Day 14: Adding titles to links
- Day 15: Defining keyboard shortcuts
- Day 21: Ignoring spacer images
- Day 22: Using real lists (or faking them properly)
- Day 23: Providing text equivalents for images
- Day 24: Providing text equivalents for image maps
- Day 25: Using real horizontal rules (or faking them properly)
- Day 26: Using relative font sizes
- Day 27: Using real headers
- Day 28: Labeling form elements
- Day 29: Making everything searchable
- Day 30: Creating an accessibility statement
- Conclusion
February 19, 2006
Overlay images on a webpage
Lightbox JS
Lightbox JS by Lokesh Dhakar is a simple, unobtrusive script used to to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Benefits
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.
Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity.
http://www.huddletogether.com/projects/lightbox/
Lightbox JS by Lokesh Dhakar is a simple, unobtrusive script used to to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Benefits
Places images above your current page, not within. This frees you from the constraints of the layout, particularly column widths.
Keeps users on the same page. Clicking to view an image and then having to click the back button to return to your site is bad for continuity.
http://www.huddletogether.com/projects/lightbox/
February 16, 2006
Yahoo User Interface Library
http://developer.yahoo.net/yui/
The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX.
The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM).
The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.
If there is one thing to love about this library, it's the documentation. From day one, every available component has full API documentation as well as a short "Getting Started" guide complete with working examples. No trawling through the developers' blogs, no pulling apart complex applications: this toolkit has all the spit and polish of a commercial product.
For now, the library's scope is somewhat limited. Beyond the core utilities for animation, remote scripting (AJAX), event handling, DOM manipulation, and drag-and-drop (which are certainly nothing to sneeze at!), the library currently offers only three actual widgets for building user interfaces:
Calendar for selecting dates
Slider for visually choosing from a range of values
TreeView for browsing through a hierarchy of items
Though the selection isn't overwhelming, these three widgets alone already solve some problems that have traditionally taken a lot of work to overcome. No doubt future widget releases will address some of the more mundane needs of web application user interfaces.
It's particularly refreshing to see Yahoo! opening up its box of goodies and sharing them with the web development community. This move contrasts sharply with Google's approach of protecting its JavaScript assets by hiding them away in obfuscated code.
The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX.
The UI Library Utilities facilitate the implementation of rich client-side features by enhancing and normalizing the developer's interface to important elements of the browser infrastructure (such as events, in-page HTTP requests and the DOM).
The Yahoo UI Library Controls produce visual, interactive user interface elements on the page with just a few lines of code and an included CSS file. All the components in the Yahoo! User Interface Library have been released as open source under a BSD license and are free for all uses.
If there is one thing to love about this library, it's the documentation. From day one, every available component has full API documentation as well as a short "Getting Started" guide complete with working examples. No trawling through the developers' blogs, no pulling apart complex applications: this toolkit has all the spit and polish of a commercial product.
For now, the library's scope is somewhat limited. Beyond the core utilities for animation, remote scripting (AJAX), event handling, DOM manipulation, and drag-and-drop (which are certainly nothing to sneeze at!), the library currently offers only three actual widgets for building user interfaces:
Calendar for selecting dates
Slider for visually choosing from a range of values
TreeView for browsing through a hierarchy of items
Though the selection isn't overwhelming, these three widgets alone already solve some problems that have traditionally taken a lot of work to overcome. No doubt future widget releases will address some of the more mundane needs of web application user interfaces.
It's particularly refreshing to see Yahoo! opening up its box of goodies and sharing them with the web development community. This move contrasts sharply with Google's approach of protecting its JavaScript assets by hiding them away in obfuscated code.
February 14, 2006
CSS Basics
CSS Basics
contains following chapters:
contains following chapters:
- Chapter 1 - Introduction to CSS
- Chapter 2 - CSS Syntax
- Chapter 3 - CSS Classes
- Chapter 4 - CSS IDs
- Chapter 5 - CSS Divisions
- Chapter 6 - CSS Spans
- Chapter 7 - CSS Margins
- Chapter 8 - CSS Padding
- Chapter 9 - CSS Text
- Chapter 10 - CSS Fonts
- Chapter 11 - CSS Anchors, links and pseudo classes
- Chapter 12 - CSS Backgrounds
- Chapter 13 - CSS Borders
- Chapter 14 - CSS Lists
- Chapter 15 - CSS Width and Height
- Chapter 16 - CSS Classification
- Chapter 17 - CSS Position
- Chapter 18 - CSS Pseudo Elements
February 10, 2006
Web Design related topics
Web Design from Scratch
- Free web design course - basics, layout, free tutorials, case studies, how to guides and examples.
Contains mainly the following sub-sections:
- Free web design course - basics, layout, free tutorials, case studies, how to guides and examples.
Contains mainly the following sub-sections:
Topics in Usability
Topics in Usability
Usability Basics
Introductory information about usability
Usability Toolkit
A collection of forms, samples and other useful tools
Research and Resource Sites
Links to other sites with good resource collections
More about the following:
- Usability Labs and Participant Recruiting Services
- User Analysis and Usability Evaluation Methods
- Conducting and Reporting Usability Activities
- Accessibility, Ergonomics and Special Audiences
- Design Topics
- Standards and Guidelines
- Career and Training Information
Usability Basics
Introductory information about usability
Usability Toolkit
A collection of forms, samples and other useful tools
Research and Resource Sites
Links to other sites with good resource collections
More about the following:
- Usability Labs and Participant Recruiting Services
- User Analysis and Usability Evaluation Methods
- Conducting and Reporting Usability Activities
- Accessibility, Ergonomics and Special Audiences
- Design Topics
- Standards and Guidelines
- Career and Training Information
January 18, 2006
How to Improve Your Logo
http://www.fizbang.com/1-3-06.php
Logo "touch-up" is one of our most frequent requests. Our final work must be more effective, more visually appealing, and most importantly, recognizable as a revision of the old logo. How do we go about this? I wrote this guide both to offer potential business clients insight into our graphic design process and to help aspiring graphic designers.
- Logo Design Objectives
- Tips for Improving Logos
- Apple's and Microsoft's Logos
- How We Improve a Logo
- Conclusion
Logo "touch-up" is one of our most frequent requests. Our final work must be more effective, more visually appealing, and most importantly, recognizable as a revision of the old logo. How do we go about this? I wrote this guide both to offer potential business clients insight into our graphic design process and to help aspiring graphic designers.
- Logo Design Objectives
- Tips for Improving Logos
- Apple's and Microsoft's Logos
- How We Improve a Logo
- Conclusion
January 09, 2006
CSS Hacks and IE7
CSS Hacks and IE7
Recently the Microsoft blog announced some of the changes we may expect for the release of the IE7 browser, perhaps in early 2006. It's very good that we are getting this advance notice, because MS is biting the bullet and cleaning up a lot of selector effects that coders are using to hack special rules for Explorer.
Specifically a number of CSS hacks that rely on IEwin's failure to support certain advanced selectors will be failing, because IE7 will introduce IE's support those selectors. In the long run, this is a very good thing for us CSS'ers, since it will give us a lot more power and control over what our CSS does and where. Unfortunately, in the short run it will mean rewriting stylesheets and making alternate provisions for hacking IEwin.
Read More...
Recently the Microsoft blog announced some of the changes we may expect for the release of the IE7 browser, perhaps in early 2006. It's very good that we are getting this advance notice, because MS is biting the bullet and cleaning up a lot of selector effects that coders are using to hack special rules for Explorer.
Specifically a number of CSS hacks that rely on IEwin's failure to support certain advanced selectors will be failing, because IE7 will introduce IE's support those selectors. In the long run, this is a very good thing for us CSS'ers, since it will give us a lot more power and control over what our CSS does and where. Unfortunately, in the short run it will mean rewriting stylesheets and making alternate provisions for hacking IEwin.
Read More...
January 03, 2006
CSS Zen Garden
http://www.csszengarden.com/
A demonstration of what can be accomplished visually through CSS-based design.
Download the sample html file and css file from the site for trying it out yourself.
A demonstration of what can be accomplished visually through CSS-based design.
Download the sample html file and css file from the site for trying it out yourself.
Subscribe to:
Posts (Atom)