[net-gold] [webdev] Web Design Update: August 19, 2011
- From: "David P. Dillard" <jwne@xxxxxxxxxx>
- To: Net-Gold -- Educator Gold <Educator-Gold@xxxxxxxxxxxxxxx>, Educator Gold <Educator-Gold@xxxxxxxxxxxxxxxx>, net-gold@xxxxxxxxxxxxx, Net-Gold <Net-Gold@xxxxxxxxxxxxxxx>, NetGold <netgold@xxxxxxxxxxxxxxx>, Net-Gold <net-gold@xxxxxxxxxxxxxxxx>, K-12ADMINLIFE <K12ADMIN@xxxxxxxxxxxxxxxxxxx>, K12AdminLIFE <K12AdminLIFE@xxxxxxxxxxxxxxx>, MediaMentor <mediamentor@xxxxxxxxxxxxxxx>, Digital Divide Diversity MLS <mls-digitaldivide@xxxxxxxxxxxxxxx>, NetGold <netgold@xxxxxxxxxxxxxxxx>, Net-Platinum <net-platinum@xxxxxxxxxxxxxxx>, Sean Grigsby <myarchives1@xxxxxxxxxxxxxxx>, Net-Gold <NetGold_general@xxxxxxxxxxxxxxxxx>, Temple Gold Discussion Group <TEMPLE-GOLD@xxxxxxxxxxxxxxxxxxx>, Temple University Net-Gold Archive <net-gold@xxxxxxxxxxxxxxxxxxx>
- Date: Fri, 19 Aug 2011 11:25:24 -0400 (EDT)
.
.
Date: Fri, 19 Aug 2011 06:58:07 -0500
From: Laura Carlson <lcarlson@xxxxxxxxx>
To: webdev <webdev@xxxxxxxxxxxxxxx>
Subject: [webdev] Web Design Update: August 19, 2011
+++ WEB DESIGN UPDATE.
- Volume 10, Issue 08, August 19, 2011.
An email newsletter to distribute news and information about web
design and development.
++ISSUE 08 CONTENTS.
SECTION ONE: New references.
What's new at the Web Design Reference site?
http://www.d.umn.edu/itss/training/online/webdesign/
New links in these categories:
01: ACCESSIBILITY.
02: CASCADING STYLE SHEETS.
03: DREAMWEAVER.
04: EVALUATION & TESTING.
05: EVENTS.
06: MISCELLANEOUS.
07: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: USABILITY.
SECTION TWO:
10: What Can You Find at the Web Design Reference Site?
[Contents ends.]
++ SECTION ONE: New references.
+01: ACCESSIBILITY.
HTML5 Accessibility Chops - SVG Text Alternative Example
By Steve Faulkner.
"The W3C HTML5 specification contains an SVG (Scalable Vector
Graphics) based interactive Venn diagram. The diagram illustrates the
relationship between HTML content categories. Currently the content
and interactivity of the diagram is not accessible to some users. A
bug SVG content model VENN diagram needs to be made accessible was
filed. The HTML5 editors' response..."
http://www.paciellogroup.com/blog/2011/08/html5-accessibility-chops-interactive-image-example/
Musings on Microsoft Office - Alt Text, Save as PDF, and More
By Terrill Thompson.
"Adding alternate text to images in electronic documents is simple. In
most authoring software you simply right click on an image, select an
option such as 'Format Picture' or something equally intuitive, and
locate a form field where you are prompted to enter alt text.
Unfortunately it's a bit more complicated than that in Microsoft
Office."
http://terrillthompson.blogspot.com/2011/08/musings-on-microsoft-office-alt-text.html
Testing for Accessibility
By Sara Ford.
"Sara Ford explains what accessibility means, and shows you how to
test your applications for accessibility. Topics covered include
keyboard accessibility, High Contrast, focus and selection, and
Assistive Technology Compatibility." This is a 2004 article that is
stll relavant.
http://msdn.microsoft.com/en-us/library/ms971307.aspx
Inclusivity Requires A Paradigm Shift
By Neil Milliken.
"1 Billion plus people is not a niche market. According to the World
Health Organisation: One in seven of the world's population has some
kind of disability..."
http://atrophiedmind.wordpress.com/2011/08/14/inclusivity-requires-a-paradigm-shift/
+02: CASCADING STYLE SHEETS.
Do Not Use display:none to Visually Hide Content Intended for Screen Readers
By Roger Johansson.
"...When auditing websites for accessibility I occasionally find
elements that are incorrectly hidden with display:none. The most
common example is probably skip links intended to help keyboard and
screen reader users. The irony is that those well-intended skip links
are made useless by display:none..."
http://www.456bereastreet.com/archive/201108/do_not_use_displaynone_to_visually_hide_content_intended_for_screen_readers/
The Importance of 's' in CSS3 Transition Shorthand
By Greg Rewis.
"On a recent project, I spent the better part of an hour (okay, maybe
longer) fighting with what I would learn is an interesting anomaly in
the way that Firefox (4 and 5) deal with CSS3 shorthand transition
notation. What baffled me was the fact that the other players, Webkit
(Safari and Chrome) and Opera browsers, worked properly with the exact
same code. The premise was to have an area with a fixed height, set to
overflow: hidden, but then allow the site navigation to scroll
(transition) to the proper anchor, resizing the content box's height
to accommodate the contents while keeping the other contents
hidden..."
http://blog.assortedgarbage.com/2011/08/the-importance-of-s-in-css3-transition-shorthand/
Transitions and Animations on CSS Generated Content
By Chris Coyier.
"Generated content means pseudo elements added to the page via the
::before and ::after. The support for applying transitions or
animations to these in the current browser landscape is not great. I
think this is a huge bummer, so I'm just making this blog post my
permanent home to track the progress on this..."
http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
'Space' and 'Round' Values
By Chris Coyier.
"...If you've seen the code for CSS3 border images then you're
probably familiar with the space and round values for the
border-image-repeat property. Well, in the CSS3 spec, the well-known
background-repeat property now includes those two new values (in
addition to repeat, repeat-x, repeat-y, and no-repeat - all of which
most CSS developers will be thoroughly familiar with)..."
http://www.impressivewebs.com/space-round-css3-background/
CSS3's 'space' and 'round' Values for background-repeat
By Louis Lazaris.
"...in the CSS3 spec, the well-known background-repeat property now
includes those two new values (in addition to repeat, repeat-x,
repeat-y, and no-repeat - all of which most CSS developers will be
thoroughly familiar with). To demonstrate what these new values do,
here are some screenshots and accompanying explanations..."
http://www.impressivewebs.com/space-round-css3-background/
The Shapes of CSS
By css-tricks.
"All of the below use only a single HTML element. Any kind of CSS
goes, as long as it's supported in at least one browser..."
http://css-tricks.com/examples/ShapesOfCSS/
When Visitors Print - About That Print Stylesheet
By Tim Connell.
"Grab yourself a beverage, hit print and read about the simple things
that make a big difference when visitors print..."
http://designfestival.com/when-visitors-print-about-that-print-stylesheet/
CSS3 Properties, Values and Browser Support
By Estelle Weyl.
"Below is every most CSS3 Properties, all the possible values for that
property, and the support for each property value from grade-A
browsers..."
http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/
+03: DREAMWEAVER.
Understanding HTML5 Semantics - Part 2, Document Structure and Global
Attributes attributes
By Stephanie (Sullivan) Rewis.
"Understand the differences between the HTML4 and HTML5 document
structure, including the addition of new global attributes."
http://www.adobe.com/devnet/dreamweaver/articles/understanding-html5-semantics-pt2.html
Understanding HTML5 Intelligent Forms - Part 1: New Input Elements
By David Powers.
"In this first part of a two-part tutorial, I'll describe the new
input elements and the <datalist> element, which allows you to suggest
options for a text input field. In Part 2 (coming soon), you'll learn
about the HTML5 form attributes...."
http://www.adobe.com/devnet/dreamweaver/articles/html5-forms-pt1.html
+04: EVALUATION & TESTING.
Try to Be a Test User Sometime
By Jakob Nielsen.
"In pilot studies, you can occasionally relax the need for real users
and let members of your own team serve as test participants. It's good
for them."
http://www.useit.com/alertbox/being-a-test-user.html
+05: EVENTS.
Do-It-Yourself Usability Testing - The Workshop
September 7, 2011 in Washington, DC, U.S.A.
September 27, 2011 in Seattle, Washingon, U.S.A.
October 5, 2011 in London, England, United Kingdom
http://sensible.com/workshops.html
EuroIA
September 22-23, 2011.
Prague, Czech Republic
http://www.euroia.org/
Axure Basic Training Class
September 24, 2011.
Marina Del Rey, California, U.S.A.
http://uxconsultant.com/AxureTraining.html
Etre Get Together
October 3-5, 2011.
London, England, United Kingdom
http://events.etre.com/
+06: MISCELLANEOUS.
Ethan Marcotte Interview - The Way of Responsive Web Design
By William Channer.
"Ethan Marcottee explains responsive web design. He also takes us
through his own process to building a responsive site which includes
applying media queries and designing for the mobile."
http://www.dormroomtycoon.com/ethan-marcotte-responsive-web-design-interview-the-way-of-responsive-web-design-design-interview/
+07: NAVIGATION.
Re-tabulate
By Jeremy Keith.
"Right after I wrote about combining flexbox with responsive design-to
switch the display of content and navigation based on browser size-I
received an email from Raphaël Goetter. He pointed out a really
elegant solution to the same use-case that makes use of
display:table."
http://adactio.com/journal/4780/
+08: STANDARDS, GUIDELINES & PATTERNS.
Stephanie Sullivan Rewis and Greg Rewis - What Designers Need to Know
About HTML5 and CSS3 (Podcast)
By Sean Carmichael.
"The introduction of CSS3 and HTML5 brings with it a host of new
capabilities. With most modern browsers supporting CSS3 and HTML5,
implementing them into your designs is becoming easier. Understanding
what is now possible with these new standards can help you create
better designs more efficiently and effectively than ever before..."
http://www.uie.com/brainsparks/2011/08/12/stephanie-and-greg-rewis-html5-and-css3/
HTML5 - Another Postcard from the Trenches
By John Foliot.
"...There is a lot of questions, confusion, and out-right
mis-information surrounding HTML5 today. Over the next 90 minutes I
hope to address these questions, and more..."
http://stanford.edu/group/accessibility/cgi-bin/presentations/postcard2/
HTML5 And The Document Outlining Algorithm
By Derek Johnson.
"...The document outlining algorithm is a mechanism for producing
outline summaries of Web pages based on how they are marked up. Every
Web page has an outline, and checking it is easy using a really simple
free online tool, which we'll cover shortly..."
http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
HTML5 Forms Input Types, Attributes and New Elements - Demos, Tips and Tricks
By Robert Nyman.
"...There are basically five areas of improvements when it comes to
form features in HTML5..."
http://robertnyman.com/2011/08/16/html5-forms-input-types-attributes-and-new-elements-demos-tips-and-tricks/
W3C Works to Speed Web Standard Creation
By Stephen Shankland.
"The World Wide Web Consortium has begun its effort to speed its
processes for standardizing Web technology..."
http://news.cnet.com/8301-30685_3-20092839-264/w3c-works-to-speed-web-standard-creation/
6 Best Practices for Marking up Your HTML5
By Estelle Weyl.
"There are several coding rules required for XHTML that were optional
or even unsupported in HTML 4. While HTML5 supports both coding
formats, here are some non-required best practices.."
http://www.standardista.com/6-best-practices-for-marking-up-your-html5
+09: USABILITY.
Use Words Your Readers Understand
By Rachel McAlpine.
"Use the vocabulary of your reader. That's a key factor in plain language..."
http://contented.com/contented/2011/writing-tip-use-words-your-readers-understand/
5 Principles of User-Centered Interface Design
By Adrian Jones.
"...I've outlined below 5 principles of user-centered interface
design, principles to help our websites and applications keep us on
track..."
http://designfestival.com/5-principles-of-user-centered-interface-design/
[Section one ends.]
++ SECTION TWO:
+10: What Can You Find at the Web Design Reference Site?
Accessibility Information.
http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html
Association Information.
http://www.d.umn.edu/itss/training/online/webdesign/associations.html
Book Listings.
http://www.d.umn.edu/itss/training/online/webdesign/books.html
Cascading Style Sheets Information.
http://www.d.umn.edu/itss/training/online/webdesign/css.html
Color Information.
http://www.d.umn.edu/itss/training/online/webdesign/color.html
Dreamweaver Information.
http://www.d.umn.edu/itss/training/online/webdesign/dreamweaver.html
Evaluation & Testing Information.
http://www.d.umn.edu/itss/training/online/webdesign/testing.html
Event Information.
http://www.d.umn.edu/itss/training/online/webdesign/events.html
Flash Information.
http://www.d.umn.edu/itss/training/online/webdesign/flash.html
Information Architecture Information.
http://www.d.umn.edu/itss/training/online/webdesign/architecture.html
JavaScript Information.
http://www.d.umn.edu/itss/training/online/webdesign/javascript.html
Miscellaneous Web Information.
http://www.d.umn.edu/itss/training/online/webdesign/misc.html
Navigation Information.
http://www.d.umn.edu/itss/training/online/webdesign/navigation.html
PHP Information.
http://www.d.umn.edu/itss/training/online/webdesign/php.html
Sites & Blogs Listing.
http://www.d.umn.edu/itss/training/online/webdesign/sites.html
Standards, Guidelines & Pattern Information.
http://www.d.umn.edu/itss/training/online/webdesign/standards.html
Tool Information.
http://www.d.umn.edu/itss/training/online/webdesign/tools.html
Typography Information.
http://www.d.umn.edu/itss/training/online/webdesign/type.html
Usability Information.
http://www.d.umn.edu/itss/training/online/webdesign/usability.html
XML Information.
http://www.d.umn.edu/itss/training/online/webdesign/xml.html
[Section two ends.]
++END NOTES.
+ SUBSCRIPTION INFO.
WEB DESIGN UPDATE is available by subscription. For information on how
to subscribe and unsubscribe please visit:
http://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html
The Web Design Reference Site also has a RSS 2.0 feed for site updates.
+ TEXT EMAIL NEWSLETTER (TEN).
As a navigation aid for screen readers we do our best to conform to
the accessible Text Email Newsletter (TEN) guidelines. Please let me
know if there is anything else we can do to make navigation easier.
For TEN guideline information please visit:
http://www.headstar.com/ten
+ SIGN OFF.
Until next time,
Laura L. Carlson
Information Technology Systems and Services
University of Minnesota Duluth
Duluth, MN U.S.A. 55812-3009
mailto:lcarlson@xxxxxxxxx
[Issue ends.]
Other related posts:
- » [net-gold] [webdev] Web Design Update: August 19, 2011 - David P. Dillard
