+++ WEB DESIGN UPDATE. - Volume 10, Issue 42, April 12, 2012. An email newsletter to distribute news and information about web design and development. ++ISSUE 42 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: BOOKS. 03: CASCADING STYLE SHEETS. 04: EVALUATION & TESTING. 05: EVENTS. 06: JAVASCRIPT. 07: MISCELLANEOUS. 08: PHP. 09: STANDARDS, GUIDELINES & PATTERNS. SECTION TWO: 10: What Can You Find at the Web Design Reference Site? [Contents ends.] ++ SECTION ONE: New references. +01: ACCESSIBILITY. CAPTCHA-less Security By Karl Groves. "...The level of effort expended at abusing a system is directly proportional to the perceived benefit gained by the abuser. This applies to the recommendations I make below as well. CAPTCHA is, in many cases, very effective. Otherwise websites wouldn't use it. But it does lock real people out of your site and it can be beaten. For those reasons, I'd like to discuss some approaches of thwarting website abuse without CAPTCHA..." http://www.karlgroves.com/2012/04/03/captcha-less-security/ Building Accessible Charts (Video) By Nick Pettit. "In this 6 minute video, you'll learn how to create a simple bar graph from scratch by using HTML and CSS. This bar graph is made with screen readers in mind, and doesn't make use of images or browser plugins..." http://thinkvitamin.com/uncategorized/free-video-building-accessible-charts/ 02: BOOKS. O Connor, Joshue. "Pro HTML5 Accessibility" Apress 2012. +03: CASCADING STYLE SHEETS. Relative Pixels By Alastair Campbell. "Layout methods in web design have gone through a transition in the last few years, unfortunately we're still using floats a lot, but flexible layouts have made a comeback in the form of responsive design - which is great..." http://alastairc.ac/2012/04/relative-pixels/ On Responsive Images By Chris Coyier. "There is a real need for serving media that is appropriate for the device and circumstance, since we know so little about any particular web request. I recently posted a blog post with so many images on it the page weighed in at 2.29 MB. I should have posted a warning when I tweeted it: "Don't click this if on a 3G network, it probably take forever, just check it out when you get home." http://css-tricks.com/on-responsive-images/ Media Query and Asset Downloading Results By Tim Kadlec. "A little while back, I mentioned I was doing some research for the book about how images are downloaded when media queries are involved. To help with that, I wrote up some automated tests where Javascript could determine whether or not the image was requested and the results could be collected by Browserscope for review. I posted some initial findings, but I think I've got enough data now to be able to go into a bit more detail." http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Cross Browser Drop Caps with CSS By Ian Devlin. "The other day I read Laura Franz's excellent in-depth article on Drop Caps: Historical Use And Current Best Practices With CSS over on Smashing Magazine, and it prompted me to look into adding this to my site as I was intending to do so anyway. Naturally there were some issues. In Laura's article, all of..." http://www.iandevlin.com/blog/2012/04/css/cross-browser-drop-caps-with-css On :Target By Chris Coyier. "The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same..." http://css-tricks.com/on-target/ What's the Deal With :Target in CSS? By Joshua Johnson. "...Read on to learn all about the basic functionality associated with the :target pseudo class and how you can stretch that ability to perform all kinds of crazy stuff with pure CSS. Along the way we'll build some great navigation and slideshow examples for you to learn from..." http://designshack.net/articles/css/targetcss/ Announcing PrintShame.com By Adrian Roselli. "For many years I've pushed for print styles for sites. It's an easy step to take in the course of developing a site, easy to test, and the techniques to do it have been around for over a decade. Something as rigid as a tabled layout could be relatively easily wrangled into a print-friendly document - without breaking any budgets..." http://blog.adrianroselli.com/2012/04/announcing-printshamecom.html +04: EVALUATION & TESTING. 10 Things to Know About Card Sorting By Jeff Sauro. "Here are at least 10 things to know about using this popular user research method.." http://www.measuringusability.com/blog/card-sorting.php Caroline Jarrett - Designing Effective Surveys By Sean Carmichael. "...Caroline offers tips on how to entice people to take the survey and keep them engaged to ensure you get accurate answers from them. During the seminar, we ran short on time to answer all of the audience's questions, so Caroline joins Adam Churchill to tackle the remaining ones for this podcast." http://www.uie.com/brainsparks/2012/04/06/caroline-jarrett-designing-effective-surveys/ +05: EVENTS. Front-End Design Conference June 8-9, 2012. Saint Petersburg, Florida, U.S.A. http://frontenddesignconference.com/ Hypertext 2012 June 25-28, 2012. Milwaukee, Wisconsin, U.S.A. http://www.ht2012.org/ OSCON 2012 July 16-20, 2012. Portland, Oregon, U.S.A. http://www.oscon.com/oscon2012/ +06: JAVASCRIPT. JavaScript And Recursion By Kim S. Teeple. "Recursion is an age old concept used in mathematics when an object is defined by other objects of the same type. A real life example would be the mirrors in a department store dressing room. If you look in the right spot, you can see both reflections repeating themselves in each other..." http://www.developerdrive.com/2012/04/javascript-and-recursion/ +07: MISCELLANEOUS. From Built-to-Last to Built-to-Change By Gerry McGovern. "The Web facilitates continuous testing and improvement. Great web designs are responsive and flexible. They allow for rapid innovation based on feedback..." http://www.gerrymcgovern.com/nt/2012/nt-2012-04-09-Built-to-last.htm Paying Attention to Content Hierarchy Across Screen Sizes By Andy Clarke. What are the lessons from all this? It's that we need to pay attention to the hierarchy of our content across screen sizes, in particular small screens. This definitely applies to images but it could just as easily apply to typography too. Sometimes it's all too easy just to squeeze elements to fit onto smaller screens, but unless we're careful, we can significantly change the meaning of our page designs. http://www.stuffandnonsense.co.uk/blog/about/paying_attention_to_content_hierarchy_across_screen_sizes Dive into Responsive Prototyping with Foundation By Jonathan Smiley. "There are hundreds of devices out there right now that can access the full web, as Steve Jobs once put it. They come with different capabilities and constraints, things like input style or screen size, resolution, and form. With all these devices set to overtake traditional desktop computers for web traffic next year, we need tools to help us build responsively. Jonathan Smiley shows how to dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites..." http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/ +08: PHP. Metatesting - Testing Constructors By Chris Hartjes. "If you have a PHP application that makes heavy use of objects (which is probably 95% of you reading this) then you will have objects with constructor methods in them. It is also very likely that there is some stuff going on in those constructors. So how do you test things like this?..." http://www.littlehart.net/atthekeyboard/2012/04/05/metatesting-testing-constructors/ 6 Skills Every PHP Freelancer Needs, Pragmatic Testing, MySQL, and More By Daniela Baker. "PHP development is hot right now, but there are also lots of people in PHP development. If you want to make it as an independent PHP developer you've got to know more than just PHP. Here are six other essential skills you need to succeed as a PHP developer..." http://phpmaster.com/6-extra-skills-every-php-developer-should-have/ +09: STANDARDS, GUIDELINES & PATTERNS. HTML5 Accessibility Chops: Data for the Masses By Steve Faulkner. "One of the stumbling blocks for working out what the effects on the accessibility of new (and old) HTML5 features is not having any publicly accessible usage data. It is difficult without data to argue for the inclusion of features in HTML5 or working out how features should be accessibility supported. I have made an initial attempt to rectify this by collecting the HTML content of the home pages of the the top 10,000 web sites..." http://www.paciellogroup.com/blog/2012/04/html5-accessibility-chops-data-for-the-masses/ [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@d.umn.edu [Issue ends.]