Here is a test post for the Read more functionality.
Friday, December 18, 2009
Tuesday, June 23, 2009
Sprint CFO: We don’t see any big change since the iPhone 3G S came out - yet 6:37 PM
Sprint has not felt any impact from the new iPhone so far...
[From Sprint CFO: We don’t see any big change since the iPhone 3G S came out - yet]
Yeah because it hit you BEFORE the 3GS came out...it took you a week to sell 100,000 units. Apple did 1 million in ONE weekend. If the new iPhone's and price drops didn't happen, maybe you would have had more than 100,000 sales in a week. It's obvious Sprint and the Pre WERE affected by the iPhone...
Monday, June 22, 2009
Animoto for iPhone gets offline viewing 6:09 PM
App now lets people download their creations for offline viewing and offers the capability of creating full-length videos.
[From Animoto for iPhone gets offline viewing]
Adobe on HTML 5 1:50 PM
Adobe CEO Shantanu Narayen, in response to a question about whether HTML 5 is a threat to Flash:
I think the challenge for HTML 5 will continue to be how do you get a consistent display of HTML 5 across browsers. And when you think about when the rollout plans that are currently being talked about, they feel like it might be a decade before HTML 5 sees standardization across the number of browsers that are going to be out there.
Translation into plain English: We’re not worried about HTML 5 because we know IE will never support it.
[From Adobe on HTML 5]
Saturday, June 20, 2009
10 Ways To Make Your Site Accessible Using Web Standards 2:32 PM
Advertisements
Without argument, one of the most important things to consider when creating a website is that it be accessible to everyone who wants to view it. Does your website play nice with screen readers? Can a user override your style sheet with a more accessible one and still see everything your website has to offer? Would another Web developer be embarrassed if they saw your code? If your website is standards-compliant, you could more confidently answer these questions.
Let’s take a look at 10 ways to improve the accessibility of your XHTML website by making it standards-compliant. We’ll go the extra mile and include criteria that fall beyond the standards set by the W3C but which you should follow to make your website more accessible. Each section lists the criteria you need to meet, explains why you need to meet them and gives examples of what you should and shouldn’t do.
1. Specify The Correct DOCTYPE
Criteria.
The Document Type declaration (DOCTYPE) is an instruction that sits at the top of your document. The DOCTYPE is required to tell the browser how to correctly display your page.Why do I need it?
Without a proper DOCTYPE declaration, the browser tries to automatically assign a DOCTYPE to the page. This can slow down the rendering of your page and cause the page to be displayed inconsistently or incorrectly in different browsers. Consistency is the name of the game when it comes to accessibility.Okay, so what do I do?
Include a proper DOCTYPE at the top of each page of your website. XHTML 1.1 is recommended, but XHTML 1.0 Strict is an option as well.
- XHTML 1.1
This is the cleanest way to code your website. All style for the website is contained in external CSS files. Be sure to add the XML declaration at the top, which is essential because XHTML 1.1 is considered to be true XML.<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Note: if you are using XHTML 1.1, you cannot include the XML declaration for visitors who are using Internet Explorer 6. Instead, to support IE6 users, you should conditionally display the XML declaration.
- XHTML 1.0 Strict
An alternative to XHTML 1.1. The technical differences between the two are minor, but using XHTML 1.1 is recommended to accommodate future website growth.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Two other XHTML 1.0 declarations exist for niche uses. But using either of these DOCTYPEs is discouraged.
- XHTML 1.0 Transitional
This is used for pages that need to be viewed on legacy browsers that don’t support CSS. Transitional allows inline styles to be applied to elements.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- XHTML 1.0 Frameset
Use Frameset only on websites that require HTML frames. Of course, static CSS divisions should be used instead of HTML frames, right?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">2. Define The Namespace And Default Language
Criteria.
The XHTML namespace and default language of your page must be included in the<html>element.Why do I need it?
XHTML websites should define the default namespace. A namespace defines all of the elements you can use within the page. Setting a default language allows a screen reader to tell the visitor which language the page is in without even seeing the content. It is also required by W3C standards.Okay, so what do I do?
Append the xmlns and lang attributes to the<html>element. In XHTML 1.1, the lang attribute is xml:lang.
- XHTML 1.1
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">- XHTML 1.0
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">3. Supply Proper Meta Tags
Criteria.
Supply the http-equiv, language, description and keywords meta tags in the <head> element on your page.Why do I need it?
The http-equiv meta tag is by far the most important. Used in conjunction with the DOCTYPE, it helps the browser display your page correctly. The language meta tag is important for non-English websites, but it has become common practice to include it on every page, despite the language. The description and keywords meta tags are required more for accessibility than to meet standards because they are commonly used by screen readers.Okay, so what do I do?
Include these four meta tags in the<head>element on your page.<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<meta name="description" content="Updating Windows using Microsoft Update" />
<meta name="keywords" content="updating, windows, microsoft, update, techworld" />Make sure the language you specify in the
<html>element is the same one you define in the language meta tag. Also, if you are using XHTML 1.1, make sure the encoding specification in the XML declaration matches the charset in the http-equiv meta tag.4. Use Accessible Navigation
Criteria.
Allow users to easily identify what page and sub-section of a page they are viewing.Why do I need it?
A majority of websites today use a combination of text, colors and graphic styles to organize and display information. Many people with disabilities cannot see or use graphics and thus rely on screen readers, custom style sheets and other accessibility tools to retrieve information. Regardless of who visits your website, implementing an accessible navigation system helps them quickly and accurately find the information they are looking for.Okay, so what do I do?
Create a descriptive title for your website, and then split the page into sub-sections using the heading elements.
- Include exactly one
<title>element within the<head>element:<title>Smashing Magazine</title>- Include exactly one
<h1>element on the page. The<h1>element should match all or part of your<title>element:<h1>Smashing Magazine: We smash you with the information that makes your life easier. Really!</h1>- All heading tags (
<h1>,<h2>, etc.) should have textual content. Alt tags on images do not count.Incorrect:
<h2><img src="logo.png" alt="Smashing Magazine" /></h2>Correct:
<h2><img src="logo.png" alt="Smashing Magazine" />Smashing Magazine</h2>5. Properly Escape JavaScript
Criteria.
When including JavaScript directly on the page, you should properly escape it as character data.Why do I need it?
In HTML, text in the<script>element is rendered as CDATA (character data). In XHTML, text in the<script>element is treated as PCDATA (parsed character data). PCDATA is processed by the W3C validator and, therefore, must be escaped properly as CDATA. In addition, while most screen readers are intelligent enough to ignore content within the<script>element, regardless of the type of data it contains, if the code isn’t correctly escaped, another potential point of failure is created in accessibility.Okay, so what do I do?
Use the CDATA tags around any content in the<script>element. We also comment out the CDATA tags for legacy browser support.Example:
<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
$('#divtwo').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>6. Properly Escape HTML Entities
Criteria.
Ampersands, quotes, greater- and less-than signs and other HTML must be escaped.Why do I need it?
Using HTML entities, especially in URLs, can cause not only validation problems but also usability problems. For example, the ampersand (&) happens to be the initial character in HTML entities. If you do not properly escape the ampersand, the browser assumes you are telling it to show an HTML entity, one that doesn’t even exist.Okay, so what do I do?
Escape HTML entities with their appropriate entity value.
- Replace & with &
- Replace " with "
- Replace < with <
- Replace > with >
- Other HTML entities
Example:
<a href="http://www.example.com?page=1&view=top">A "Cool" Link</a>
<code><div id="content">Test information.</div></code>7. Use Only Lowercase Tags And Attributes
Criteria.
All elements and element attributes must be lowercase. Attribute values can be both uppercase and lowercase.Why do I need it?
Because the XHTML standard set by the W3C says so.Okay, so what do I do?
Make sure you use only lowercase for all elements and attributes. A common mistake most developers make is using uppercase letters when giving an element JavaScript attributes (e.g. onClick, onLoad, etc.).Incorrect:
<A href="#" onClick="doSomething();">Send us a message</A>Correct:
<a href="#" onclick="doSomething();">Send us a message</a>8. Label All Form Input Elements
Criteria.
All form elements should be given a<label>tag.Why do I need it?
The<label>element adds functionality for people who use the mouse and a screen reader. Clicking on text within the<label>element focuses the corresponding form element. Screen readers can read the label so that visitors know what information to provide.Okay, so what do I do?
Add a<label>element to each field in your form.Example:
<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p>
<p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>9. Supply Alternative Content For Images
Criteria.
Every image on your page should be accompanied by a textual alt tag.Why do I need it?
The alt tag tells visitors what an image is if it cannot be displayed or viewed. The Americans with Disabilities Act dictates that all images must have an alt tag.Okay, so what do I do?
Include one with every image. The alttagattribute must include text and cannot be left blank. If you use images in your design for stylistic reasons alone, find a way to achieve that style using CSS. And don’t forget to provide explicit values for width and height of your images.Incorrect:
<img src="picture.png" />
<img src="spacer.gif" alt="" />Correct:
<img src="picture.png" alt="A warm sunset" width="450" height="350" />10. Use The "id" And "class" CSS Attributes Correctly
Criteria.
When using CSS attributes, use each "id" only once on a page. Use each "class" as much as you want.Why do I need it?
Developers often get careless and include an "id" multiple times on a single page. This can create unexpected results across different browsers and get you a big red “Validation Failed” from the W3C.Okay, so what do I do?
Be certain to use a particular "id" only once on a page. If you need the same style applied to mutliple elements, use the "class" attribute.Incorrect:
<p id="leftNav">Home</p>
<p id="leftNav">Contact</p>Correct:
<p id="homeNav" class="leftNav">Home</p>
<p id="contactNav" class="leftNav">Contact</p>Summary: Validate, Validate, Validate!
Using all the techniques in this article, you’ll be well on your way to a more accessible, standards-compliant website. But don’t stop there! Continually validate your website and address problems immediately. Here is a list of validators you should run on every page you create:
- W3C Markup Validation Service
- W3C CSS Validation Service
- HiSoftware Cynthia Says Accessibility Validation
- Functional Accessibility Evaluator
About the Author
Michael Irigoyen is a Web developer and graphic designer for Computer Infrastructure Support Services at Illinois State University.
(al)
© Michael Irigoyen for Smashing Magazine, 2009. |
Permalink |
160 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: accessibility, standards, xhtml
[From 10 Ways To Make Your Site Accessible Using Web Standards]
40+ Helpful Resources On User Interface Design Patterns 2:31 PM
Advertisements
If there is a commonly reoccurring need for a particular solution, there is a great probability that someone has - by now - solved that need and has finished the legwork involved in researching and constructing something that resolves it. At the very least, you will find documentation on general solutions to related problems that will enable you to gain insight on best practices, effective techniques, and real-world examples on the thing you are creating.
A design pattern refers to a reusable and applicable solution to general real-world problems. For example, a solution for navigating around a website is site navigation (a list of links that point to different sections of the site), a solution for displaying content in a compact space are module tabs.
There are many ways to tackle a specific requirement - and as a designer - the most important thing you can do is selecting the option that best reflects the needs of your users.
In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns. Use these recommended sources to gain knowledge about a particular UI problem or to gain inspiration and insight on best practices, techniques, and examples of exemplary UI designs. Great thank-you goes to Pavel Konoplitski for providing us with related resources.
UI Design Patterns for Sites and Web Applications
UI-patterns.com
UI-patterns.com is a large collection of design patterns for UI designers to gain inspiration from. The site allows users to keep sets of their own (publicly accessible to site visitors) so that you can see other UI design pattern collections.
Konigi
Konigi highlights exemplary interaction design and visual design use in the real-world. There are plenty of ways to utilize, navigate, and find your desired content on the site, including a Tags page featuring popular keywords used in entries within the showcase split up into three categories: keyword, product, and company.
QUINCE: X Patterns Explorer
QUINCE is a beautiful and stunning web application that helps you explore an innumerable amount of user experience design patterns such as date pickers and two-panel selectors. The application requires the Silverlight plugin and is best viewed under Internet Explorer (though we have verified it to work well in Firefox and Safari).
Interaction Design Pattern Library
Welie.com has an interaction design pattern library maintained by Martijn van Welie, a Ph. D. graduate in Human Computer Interaction who now works as an Interaction Design Senior Consultant for Philips Design. The library features a ton of design patterns involving various site tasks such as navigating around a site, searching a site, and basic interactions such as slideshows. Each pattern follows a specific format: (1) the problem, (2) the solution, (3) when to use the pattern, (4) why you should use the design pattern, and (5) examples of the pattern in use.
Pattern Tap
Created and maintained by Matthew Smith and Chris Pollock, Pattern Tap is a gallery of popular web-based User Interface components and design patterns such as slideshows and breadcrumbs. Pattern Tap allows users to create their own sets, and they now have over 7,000 user sets. There’s plenty of inspiration to be gained at Pattern Tap.
design|snips
This design gallery focuses on common web page components such as navigation as well as popular design trends such as Grid layouts. design|snips has over 30 categories so that you can easily find the design pattern/trend that you’re interested in. What’s more, users are allowed to rate each design featured in the gallery so that you can see what the overall consensus is with regards to the effectiveness and appeal of a design being shown.
UI Scraps
Written by Experience Designer Jason Robb, UI Scraps is a weblog that catalogs, good, bad, and notable interface designs. Expect to find critiques of submission forms and praises for good designs and UI Scraps.
The UI Pattern Factory
The UI Pattern Factory is a UI design library and gallery. What’s great at UIPF is that they sometimes share videos in each entry to improve the description of design problems and solutions. Entries are further enhanced by user-submitted examples of the pattern, which they archive in their Flickr group: UIPatternFactory.com.
Yahoo! Design Pattern Library
The Yahoo! Design Pattern Library, maintained and presented by the Yahoo! Developer Network (YDN), shares design patterns to the web design and web development community. They also have a recently-launched forum where you can swap stories with fellow UI designers and discuss patterns showcased in the design pattern library.
StyleIgnite
StyleIgnite archives and displays the latest trends in web design. Hundreds of styles that are submitted by users are there for you to check out and gain inspiration from. What’s unique about StyleIgnite is that not only are they a gallery, but they also provide you with code snippets and assets to achieve the designs that you like.blink design library
blink design library is a weblog-formatted design library that centers a post’s topic on a particular user interaction pattern with the aim of cataloging and exploring that subject. You will find topics and discussions on common interaction components such as buttons and web forms.patternBrowser
patternBrowser is a unique web application for browsing user interface design patterns on a variety of products including mobile devices. It is a great resource for quickly finding a ton of inspiration in a compact, well-organized, and very searchable manner.
Web Design Practices
Web Design Practices is a gallery of web design patterns such as breadcrumb navigation with very thoughtful and comprehensive write-ups on each design pattern, often including statistics and helpful resources about a particular website component.
Elements of Design
Elements of Design focuses on particular components of a web design such as login forms and site navigation in the hopes of inspiring designers, as well as to highlight prevalent patterns for typical website needs and features.
User Interface Engineering
User Interface Engineering is an organization on usability, web design, and information architecture. It is a great place for learning about effective design patterns for common UI problems. For example, you can learn about faceted search or previous and next actions in web forms.CSSbake
CSSbake is a unique web design gallery that focuses on website components rather than the overall web design. For example, you can find showcases of good navigation or beautiful comment sections. CSSbake “focuses on the ingredients that make a site good” and is a great place to attain inspiration for common User Interface design patterns.
UI Patterns
UI Patterns is a UI design library that follows a weblog format where each post is a design pattern and a showcase of it in use on a website or web application.
Functioning Form
Functioning Form is the weblog of UI designer and author Luke Wroblewski. You can learn about designing for humans by reading through his insightful articles on the site and find useful lists such as a collection of resources on website buttons.MephoBox
MephoBox is a design gallery that presents web design patterns and trends such as login forms and typography use with the aim of inspiring designers with their own work. Users can vote on designs and leave comments on them, allowing viewers to sort results by “most popular” and “most viewed” for quickly finding well-liked designs.
Designing Interfaces
Designing Interfaces is a book format site for the book, “Designing Interfaces: Patterns for Effective Interaction Design” written by Jennifer Tidwell. In the site, you will find loads of design patterns and articles on interaction design. You’ll learn about topics such as organizing site content, soliciting actions and commands from users, and presenting complex data.
UIZEN
UIZEN is a collection of user interface designs that features real-world websites and web applications. The site serves as a useful reference for times when you are in need of effective design inspiration.UXmatters
UXmatters is a web magazine dedicated to sharing information about the user experience. In the publication, you will find a ton of information on effective and usable design patterns and techniques regarding the design of interfaces centered around its users.Boxes and Arrows
Boxes and Arrows is an online publication dedicated to the art and science of designs. In the site, you will find plenty of information regarding effective interaction designs such as how to get a web form’s structure right and designing for user-generated and social media based content. The tone and style of Boxes and Arrows is professional and academe-centric so articles usually leverage information from research and academic papers.Niche and Specialized Design Pattern Resources
Design Patterns for Data Graphics
This resource deals with the discussion of useful design patterns for presenting data. You will find information and downloads on suggested diverging color themes (to easily distinguish related data sets between each other) and data resolution.
Patterns Of cooperative INTERaction
This web page shares information on cooperative (social/team-based) systems design patterns. Here, you will find resources and articles on topics such as multiple presentations of information and collaboration in small groups.Information Design Patterns
There is an art and a science behind presenting information to users. This site discusses and shares information regarding effective and usable information and data structures.
Learnability Gallery
What makes information and interfaces learnable? How can you present data so that users are able to absorb the content you are presenting? This visual gallery features effective design patterns that expose techniques for designing information with high-learnability.
Designing Social Interfaces
In this resource, you will find patterns for social and collaborative sites and applications. The site is a wiki-style site that allows for user-generated and user-edited content, and is a companion site for a book called “Designing Social Interfaces“. You will find insights on how to effectively present content and build features into your project that leverage the advantages of collective and shared knowledge.
Open Source Design Pattern Library
This resource features design patterns as it pertains to open source websites and applications. Users are able to submit their own pattern entries to share.
hcipatterns.org
This resource deals with pattern languages in Human-Computer Interaction and user interface design. You can learn about common language patterns, tools used in the study of HCI, and additional useful news and information.Common Ground
Common Ground is a documentation of a pattern language for Human-Computer Interaction design. You will find a lot of wonderful resources on HCI such as WYSIWYG Editor design patterns and presenting information to users using step-by-step instructions.ecommr
ecommr is a website showcase of the best (and worst) e-commerce site and web application designs. The site explores topics in e-commerce content presentation and user interface patterns that allow for a great user experience. They focus on entire site designs as well as specific components of an e-commerce website such as customer service landing pages and size charts.
Ajax Patterns
Ajax Patterns is a wiki-style site discussing design patterns that apply the use of Ajax techniques. It is a massive resource for web application developers to gain insight on design patterns involving highly-responsive Rich-Internet Applications.30 Essential Controls
This article is a discussion on design patterns involved in the creation of RIA’s. It talks about important user controls that application designers can take advantage of to clearly denote actions that they’re able to perform when interfacing with an application.
Design For Mobile
This site is dedicated to designing mobile applications and websites. The site is a wiki so the content is truly collaborative and user-edited. With mobile devices becoming very prevalent, the need for compatible and usable mobile systems grows, and this should be your first stop to learning more about this emerging field in web technology.Wiki Patterns
Wikis allow for shared collaboration and puts the responsibility of creating and maintaining the site’s content towards its users. This resource discusses effective design patterns for creating (or implementing) a user-friendly wiki.Flickr Collections and Groups
Flickr is a wonderful and visual-based resource for learning and finding design patterns. In this section, we share with you some notable collections and groups to peruse for interaction design pattern research and inspiration.
Design Patterns
This Flickr collection maintained by Chris Messina is a showcase of unique and interesting interfaces on the web. The collection is well-organized into sub-sets such as Drag and Drop interfaces and Calendar Views.
Design Patterns Group
In this Flickr Group, there are over 300 items that you can browse through to see interface design trends. With a membership of over 360 Flickr users, you’ll be sure to encounter fresh content on a regular basis.Web Form Design: Filling In the Blanks
Maintained by Luke Wroblewski, this Flickr set is a collection of images pertaining to web form design. It is a handy and inspirational resource to have around for times when you are crafting highly-usable web forms.[Design Solutions]
This Flickr collection by User Experience Designer Gustavo Pimenta presents common interactive design patterns neatly subcategorized into sets such as Graphs and Logins.
namics UI Pattern Library
This public Flickr group consists of 9 Flickr members and is a group intended for capturing UI design pattern trends from the real-world.Search Patterns
Peter Morville has a Flickr collection dedicated to gathering design patterns for effective search, subcategorized into helpful sets such as Web Search and Advanced Search.
Related content
If you enjoyed this article, please check out the following article which you might also like:
- Usability and Interface Design Books
- Breadcrumbs In Web Design: Examples And Best Practices
- Evolve Your User Interface To Educate Your Users
- Showcase Of Well-Designed Tabbed Navigation
- Designing Drop-Down Menus: Examples and Best Practices
About the Author
Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals. If you would like to contact him, send him a tweet and follow him on Twitter.
© Jacob Gube for Smashing Magazine, 2009. |
Permalink |
76 comments |
Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: design, patterns, ui, user interface
[From 40+ Helpful Resources On User Interface Design Patterns]
![[Design Solutions]](http://media2.smashingmagazine.com/wp-content/uploads/images/ui-design-patterns/design-solution.jpg)
