[webdev] Web Design Update: May 31, 2012

Laura Carlson lcarlson at d.umn.edu
Thu May 31 06:37:47 CDT 2012


+++ WEB DESIGN UPDATE.
- Volume 10, Issue 49, May 31, 2012.

An email newsletter to distribute news and information about web
design and development.

++ISSUE 49 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: EVENTS.
04: MISCELLANEOUS.
05: NAVIGATION.
06: TYPOGRAPHY.
07: USABILITY.
08: XML.

SECTION TWO:
09: What Can You Find at the Web Design Reference Site?

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

Using Tabbed Interfaces with a Screen Reader
By Leonie Watson.
"...Tabbed interfaces are increasingly common on web pages. They make
good use of space, and they can be visually intuitive. Using tabs with
a screen reader is a different experience though. When it comes to
tabbed interfaces on web pages, there are two disadvantages for screen
reader users. The visual clues that establish the tab metaphor are not
available, and the required form of interaction isn't obvious. This
makes understanding and using a tabbed interface with a screen reader
an interesting experience..."
http://tink.co.uk/2012/05/using-tabbed-interfaces-with-a-screen-reader/

President Obama Orders Government Agencies To Optimize Websites For
Mobile Web Accessibility
By James Johnson.
"President Barack Obama on Wednesday issued a directive that requires
all major government agencies to make two of their key services
available on mobile phones within the year. The President then ordered
those agencies to create websites to report on their mobile progress,
sites that are due within 90 days..."
http://www.inquisitr.com/242107/president-obama-orders-government-agencies-to-optimize-websites-for-mobile-web-accessibility/

Web Accessibility: Putting People and Processes First
By Brian Kelly.
"For many web authors, developers and policy makers, the issue of
accessibility to disabled people is addressed mainly by trying to
ensure that their sites conform with the international Web Content
Accessibility Guidelines (WCAG) maintained by the Web Accessibility
Initiative (WAI) of the World Wide Web Consortium..."
http://www.headstar.com/eablive/?p=719

What's 'large text' in WCAG 2.0 Parlance?
By Steve Faulkner.
"...The take away from this is that it is likely your pages will be
viewed on a range of devices and screen sizes, so I suggest sticking
with the 4.5:1 color ratio for all text."
http://www.paciellogroup.com/blog/2012/05/whats-large-text-in-wcag-2-0-parlance/


+02: CASCADING STYLE SHEETS.

The Cost of Performance, part 1 - CSS Selector Rewriting
By Niels Matthijs.
"...A good css selector tries to keep future changes in mind. It
defines which styles should hit in what particular set of contexts.
Each element within the selector should be there for a reason and
shouldn't be allowed to be removed. Sometimes removing a part won't
affect the css on your current site, but keep in mind the most obvious
of changes in requirements. This requires a certain level of
experience, but you'll catch up quickly after doing a couple of
real-world projects. Clients love to swap certain boxes around,
pulling them from their context and placing them where you would never
have expected them to go. Making these kind of changes as painless as
possible could well enough prove more important than shaving off those
few milliseconds of rendering time..."
http://www.onderhond.com/blog/work/cost-of-performance-css-selector-rewriting

5 Patterns To Rearrange Responsive Layouts
By Steven Bradley.
"The most obvious way a responsive design changes is in its layout.
Multiple columns become a single column. A sidebar drops below the
main content. One block of design elements becomes integrated with
another..."
http://www.vanseodesign.com/web-design/responsive-layout-patterns/

The CSS Clip Property
By Louis Lazaris.
"You've probably heard of CSS's clip property. It has some unique
features and syntax, and in this post I'll outline how it's used. At
the end of the post you'll find a link to a demo page where some
photos are used to animate the clip property, just to visually
demonstrate what this property does."
http://www.impressivewebs.com/css-clip-property/


+03: EVENTS.

eAccess 12
June 28, 2012.
London, England, United Kingdom
www.headstar.com/eaccess12

Open Web Camp
July 14, 2012.
San Jose, California, U.S.A.
http://openwebcamp.org/

Smashing Conference
September 17-19, 2012
Freiburg, Germany
http://smashingconf.com/


+04: MISCELLANEOUS.

Website Design for Tablets and Mobile
By Neal Cabage.
"Recently I went through a redesign, and as part of the effort, I
reviewed how best to support tablets and mobile visitors. If you
haven't been researching this topic recently, no one could blame you
for dismissing mobile/tablets as a novelty that won't have much impact
on your web presence. But if that's where you're at, consider this..."
http://www.sitepoint.com/website-design-for-tablets-and-mobile/

Responsive Workflow
By Viljami Salminen.
"During the last week I was at the Webshaped conference listening
Stephen Hay's talk about responsive design workflow. This post isn't
going to be strictly about that, but as Stephen's way reminded
somewhat the way I work myself, it made me want to write down some
thoughts about my own workflow and how it has evolved during the past
two or three years and how it might still evolve in the future..."
http://viljamis.com/blog/2012/responsive-workflow/

Design Process In The Responsive Age
By Drew Clemens.
"You cannot plan for and design a responsive, content-focused,
mobile-first website the same way you've been creating websites for
years-you just can't. If your goal is to produce something that is not
fixed-width and serves smaller devices just the styles they require,
why would you use a dated process that contradicts those goals?.."
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/


+05: NAVIGATION.

Navigation and Search are Twins
By Gerry McGovern.
"Well-organized websites are easier to search and navigate."
http://www.gerrymcgovern.com/nt/2012/nt-2012-05-28-Navigation-twins.htm


+06: TYPOGRAPHY.

Responsive Typography
By Oliver Reichenstein.
"With the chaos of different screen sizes and a new generation of Web
browsers, the design paradigms of layout and typography have shifted
away from static layouts and system fonts to dynamic layouts and
custom Web fonts. But screens have not just changed in size but also
in pixel density. In other words: We do not just need responsive
layouts, we also need responsive typefaces. To test that assumption,
iA has created its new Website with responsive typography-with a
custom typeface..."
http://informationarchitects.net/blog/responsive-typography/


+07: USABILITY.

It's About the Content Stupid
By Stephanie Rieger.
"Here's a revolutionary idea. What if all sites were lightweight?..."
http://stephanierieger.com/its-about-the-content-stupid/


+08: XML.

How to Add Scalable Vector Graphics to Your Web Page
By Craig Buckler.
"...At some point, you'll want to embed your finely-crafted SVG
directly into a web page. There are no less than six ways to achieve
that goal - but not all methods are created equally..."
http://www.sitepoint.com/add-svg-to-web-page/

Creating Inline SVGs with HTML5
By Sue Smith.
"With HTML5 you can embed SVG (Scalable Vector Graphics) markup
directly into your pages. In this tutorial we go through the process
of including a simple SVG element in an HTML page. We will also run
through the technique for altering SVGs in JavaScript in cases where
this is preferable to using the HTML5 canvas element..."
http://www.developerdrive.com/2012/05/creating-inline-svgs-with-html5/


[Section one ends.]


++ SECTION TWO:

+09: 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 at d.umn.edu


[Issue ends.]


More information about the Webdev mailing list