[webdev] Web Design Update: July 29, 2011

Laura Carlson lcarlson at d.umn.edu
Fri Jul 29 06:21:16 CDT 2011 

+++ WEB DESIGN UPDATE.
- Volume 10, Issue 05, July 29, 2011.

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

++ISSUE 05 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: EVALUATION & TESTING.
04: EVENTS.
05: INFORMATION ARCHITECTURE.
06: MISCELLANEOUS.
07: NAVIGATION.
08: STANDARDS, GUIDELINES & PATTERNS.
09: TOOLS.
10: TYPOGRAPHY.
11: USABILITY.

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

[Contents ends.]


++ SECTION ONE: New references.

+01: ACCESSIBILITY.

A Simple Introduction to Web Accessibility
By Ian Hamilton.
"Accessibility can often seem daunting and complex but in fact there
are only four types of disability you need to be aware of. Through
groupings, simulations and quick fixes, UX and accessibility
consultant Ian Hamilton shows that the basics are actually
surprisingly simple..."
http://www.netmagazine.com/features/simple-introduction-web-accessibility

Lack of Interoperability 'Is Biggest Accessibility Barrier'
By Dan Jellinek.
"The biggest barrier to making make the web more accessible to
disabled people is interoperability, Sandi Wassmer, member of the UK
government's e-Accessibility Forum, told delegates at e-Access '11
conference in London last month..."
http://www.headstar.com/eablive/?p=609

Open University Media Player Passes Accessibility Test
By Dan Jellinek.
"An online video and audio player being developed by the Open
University (OU) for its students and the wider learning community has
successfully passed through a round of accessibility testing including
testing with deaf and dyslexic users, E-Access Bulletin has
learned..."
http://www.headstar.com/eablive/?p=611


+02: CASCADING STYLE SHEETS.

CSS3 Bling in the Real World
By Chris Mills.
"...I will get down to business and look at some of the basic CSS3
yumminess we all know and love, and how to make it as cross-browser as
possible: Linear gradients, Drop shadows, Opacity, Rounded corners,
Web fonts..."
http://www.alistapart.com/articles/css3-bling-in-the-real-world/

Create an Adaptable Website Layout with CSS3 Media Queries
By Jean-Baptiste Jung.
"With the rise of both very large screens and mobile devices, web
developers have to be able to create websites that display correctly
and look good whatever the device is. Sure, you can use good old
techniques like fluid layouts, but I've got something better to show
you today. This tutorial will teach you how you can create an
adaptable website layout using CSS3..."
http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

320 and Up
By Andy Clarke.
"'320 and Up' prevents mobile devices from downloading desktop assets
by using a tiny screen's stylesheet as its starting point. Try this
page at different window sizes and on different devices to see it in
action."
http://stuffandnonsense.co.uk/projects/320andup/

Seamless Responsive Photo Grid
By Chris Coyier.
"Let's say you have a bunch of images you want to display, and the
goal is to get them edge-to-edge on the browser window with no gaps.
Just because you think that would be cool. They are of all different
sizes. You don't care if they are resized, but they should maintain
their aspect ratio..."
http://css-tricks.com/13372-seamless-responsive-photo-grid/


+03: EVALUATION & TESTING.

A Few Notes from Usability Testing - Video Tutorials Get Watched, Text
Gets Skipped
By Tom Johnson.
"This week was the first time I've actually seen our usability labs
used. We have a new usability research group led by someone with years
of experience doing usability engineering for Microsoft. I watched in
our observation room as he led a handful of users through 60-90 minute
usability tests for an application I documented..."
http://idratherbewriting.com/2011/07/22/a-few-notes-from-usability-testing-video-tutorials-get-watched-text-gets-skipped/

Requirements-Driven Software Development Must Die
By Fred Beecher.
"...For all our mental and linguistic prowess, we human beings are
remarkably bad at communicating our needs, understanding what other
human beings are trying to say, and visualizing complex systems in our
heads. All three of these factors combine to make the typical
requirements review meeting a futile exercise..."
http://userexperience.evantageconsulting.com/2011/07/requirements-driven-software-development-must-die/


+04: EVENTS.

UX Masterclass Chicago
September 15-16 2011.
Chicago, Illinois, U.S.A.
http://events.boxesandarrows.com/events/1567

Accessibility Camp Toronto
September 24, 2011.
Toronto, Canada
http://lanyrd.com/2011/a11ycampto/

Information Architecture Summit
September 23-24, 2011.
Prague, Czech Republic
http://www.euroia.org/

edUi 2011
October 13-14 2011.
Richmond, Virginia, U.S.A.
http://eduiconf.org

Design by Fire 2011
October 13-14 2011.
Utrecht, Netherlands
http://designbyfire.nl/2011

Web 2.0 Summit
October 17-19, 2011.
San Francisco, California, U.S.A.
http://www.web2summit.com/web2011


+05: INFORMATION ARCHITECTURE.

The UX of Learning
by Tyler Tate.
"Think of the last time you ordered a book, booked a flight, or bought
a car. How did you choose which book to read, where to go for
vacation, or which car was best for you? You may have searched online,
read reviews, or asked others for advice to help you make an informed
decision. In a word, you learned. Learning is a complex process with
distinct stages, each with corresponding tasks and emotions.
Understanding how users learn can help us design experiences that
support the user throughout the entire process. To design better
learning experiences online, start by learning a thing or two about
learning itself."
http://www.alistapart.com/articles/the-ux-of-learning/


+06: MISCELLANEOUS.

Catherine Roy WordCamp 2011 Interview (mp3)
By Moz Taylor.
"...first up, Moz interviews Catherine Roy, Director of CREin, about
Web accessibility standards."
http://thedigitallifeshow.com/july-23-matt-mullenweg-and-catherine-roy-from-wordcamp-2011/

HTML5 - Insights and Benefits with Chris Heilmann
By Bill Cullifer.
"...For today's podcast, I sat down with Chris Heilmann, Mozilla
Evangelist, author and speaker. Chris provides a terrific overview of
the benefits of HTML5 and what Web professionals and those that teach
need to consider when developing with this emerging technology
standard..."
http://webprofessionals.org/html5-insights-and-benefits-with-chris-heilmann-mozilla/


+07: NAVIGATION.

Link Purpose - Accessibility for Web Writers, Part 9
By Dey Alexander.
"Write links that clearly describe their purpose or content.
Meaningful links make content more usable. They usually stand out on a
web page (as they're a different colour and underlined), so anyone who
can see the page can scan it and identify the linked content. Search
engine optimisation experts tell us that meaningful links can improve
search ranking, making content easier for users to find."
http://www.4syllables.com.au/2011/07/accessibility-web-writers-part-9/

Responsive Navigation Menus: Convert a Menu to a Dropdown for Small Screens
By Chris Coyier.
"The Five Simple Steps website has a responsive design with a neat
feature. When the browser window is narrow, the menu in the upper
right converts from a regular row of links into a dropdown menu..."
http://css-tricks.com/13303-convert-menu-to-dropdown/


+11: STANDARDS, GUIDELINES & PATTERNS.

Avoiding Common HTML5 Mistakes
By Richard Clark.
"Between curating sites for the HTML5 gallery and answering readers'
questions here at HTML5 Doctor, I see a host of HTML5 sites and their
underlying markup. In this post, I'll show you some of the mistakes
and poor markup practices I often see and explain how to avoid
them..."
http://html5doctor.com/avoiding-common-html5-mistakes/

Getting Sourcey - Native HTML5 Audio and Video
By John Allsopp.
"...While HTML5 for the first time specifies a way of incorporating
audio and video content via the mundanely named audio and video
elements, the revolution in web content these bring is that browsers
now no longer require plugins to play the content, rather they do so
'natively'. Which has the advantage that users don't need to download
and install plugins, or keep them up to date. But there's more to it
than that. With plugin content, browsers effectively hand over a part
of the browser window and say to the plugin - 'ok, this is all yours,
do your worst'. Which makes applying style to a video player (rounded
corners, or adding a drop shadow, for instance) challenging, and
effects like layering HTML based content over the top of plugin
content a bit of a lottery...."
http://www.webdirections.org/blog/getting-sourcey-native-html5-audio-and-video/

Don't Let HTML5 Become the New DHTML
By Adrian Roselli.
"...Allowing HTML5 to mean CSS3, geolocation, H.264, or any other
technology just makes it harder on us who work in this space. A
technology for a project should be chosen based on the goals at hand,
not because a client insists on it because of a misunderstanding of a
brand or because the press release will sound great when citing how
cutting edge everyone is. Most importantly, a technology should not be
chosen because of confusion over terminology — least of all when that
term actually refers to one particular specification..."
http://blog.adrianroselli.com/2011/07/dont-let-html5-become-new-dhtml.html

HTML5 - Notes for Analysts and Journalists
By Bruce Lawson.
"There have been a few stories lately for investors rather than
techies that have a few inaccuracies, probably because they're written
by finance/ business journalists rather than tech journalists.
(Nothing wrong in that; I know my HTML5 from my CSS but couldn't tell
a gilt-edged bond from a derivative.) Here a few notes for analysts
and journalists that might chance upon this blog..."
http://www.brucelawson.co.uk/2011/html5-notes-for-analysts-and-journalists/


+12: TOOLS.

Respond.js
By Scott Jehl.
"Fast CSS3 Media Queries for Internet Explorer 6-8 and more..."
http://filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/

Test iPhone Simulator
This is a web browser based simulator for quickly testing your iPhone
web applications. This tool has been so far tested and working using
Internet Explorer 7, FireFox 2 and Safari 3.
http://www.testiphone.com/

dot Mobi Emulator
Allows you to see your page as it would look on either a Sony K750 or
a Nokia N70.
http://mtld.mobi/emulator.php

Mobile Emulators and Simulators: The Ultimate Guide
By Maximiliano Firtman.
"I've mixed all this information to create this ultimate guide to 37
download resources for hundreds of emulators and simulators."
http://www.mobilexweb.com/emulators

Color Oracle
By Bernhard Jenny.
"Color Oracle is a colorblindness simulator for Window, Mac and Linux.
It takes the guesswork out of designing for color blindness by showing
you in real time what people with common color vision impairments will
see..."
http://colororacle.cartography.ch/


+13: TYPOGRAPHY.

Contrast Rebellion
By Zoltan Gocza and Richard Gazdik.
"...Let's put an end to this low-contrast, light gray nonsense and use
typography for its purpose: making text readable."
http://contrastrebellion.com/

Interesting Cause - http://contrastrebellion.com
WebAIM Thread.
http://webaim.org/discussion/mail_thread?thread=4809

@font-face Solutions & Suggestions
By Nick La.
In the last post I talked about the design aspect of using CSS3
@font-face, today I would like to extend this topic to the technical
side on implementing custom web fonts. So what are the options for
implementing web fonts? I'm going to review the three main methods of
incorporating @font-face and explain the pros and cons of each method.
http://webdesignerwall.com/general/font-face-solutions-suggestions


+14: USABILITY.

Why Mobile UX Is More Than Users On-The-Go
By Laura Hampton.
"...The mobile user is no longer limited, and mobile experiences are
just as key as the desktop counterparts. Understanding how our users
behave and how we might engage them is therefore imperative..."
http://uxmag.com/design/why-mobile-ux-is-more-than-users-on-the-go

Responsive Web Design Techniques, Tools and Design Strategies
By Smashing Staff.
"We've compiled this round-up of resources for creating responsive
website designs. Included are tutorials, techniques, articles, tools
and more, all geared toward giving you the specific knowledge you need
to create your own responsive designs."
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

The Goldilocks Approach to Responsive Design
By Chris Armstrong.
"With over 4 billion mobile devices in use around the world, mobile
browsing is rising fast. We can no longer assume that our sites will
be viewed on a desktop monitor with an average resolution. Perhaps we
never could..."
http://www.designbyfront.com/workinprogress/article/the-goldilocks-approach-to-responsive-design

A Wider Context
By Stephanie Reiger.
"...Maybe mobile context isn't the problem. Maybe the real challenge
(some may say, the real opportunity) lies in finding ways to ensure
'the next web' brings as many opportunities to coming generations as
it has to us so far..."
http://yiibu.com/articles/wider-context/

Who Says Accessible Web Design is Boring? Announcing New Windows with
Trendy Style
By Glenda Watson.
"Recently I explained why opening links in new windows is an
accessibility issue and I offered one technique that announced in the
link text that a new window opens as in this example..."
http://blogaccessibility.com/who-says-accessible-web-design-is-boring-announcing-new-windows-with-trendy-style/

7 Uability Principles That Make Your Website More Engaging (Video)
By Susan Weinschenk.
"Dr. Susan Weinschenk shares seven usability principles to make your
website more engaging."
http://www.youtube.com/watch?v=3J85SUZFXNM

Is That a Usability Problem or a Feature?
By Jeff Sauro.
"...There has to be a balance between usability, business and
security.  Even the most intransigent usability wonk would agree to
that. But when there's too little usability and too much business
someone has to sound the alarm. And while security is essential, it
shouldn't discourage usage..."
http://www.measuringusability.com/blog/problem-feature.php



[Section one ends.]


++ SECTION TWO:

+11: 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