Welcome back to another weekly roundup of resources for your web projects. This week you’ll learn about the new HTML5 template tag, find out how to put your website pages on a diet, get advice from usability guru Steve Krug for your website, and more.

This week’s favorite tweet of the week is a shoutout about one of my pet peeves about blog posts, from my friend Stef Sullivan Rewis:

Google is not your user/reader. Trying to hide the date so Google thinks you’re fresher—or whatever you’re doing—does not help your readers.

— Stef. Sullivan Rewis (@stefsull) May 17, 2013

CSS and HTML

• Introducing the new HTML5 template Tag: Using the new HTML5 template tag, you can define HTML markup fragments as prototypes.
• Learn to Count with CSS: Using CSS counters, automatically add numbers to web page content, without using ordered lists.
• How to use the flexbox layout method (part 2): In the second post in the series, Sam Piggott highlights how to organize and resize responsive elements and how that can affect your project workflow.

Responsive Design

• Putting Your Site on a Diet: Retina display, videos, responsive web design, you name it, our web pages have become heavy. Learn how to improve performance on your web pages.
  
• 17 New Best Responsive Frameworks: If you’re looking for a responsive framework for your next web project, check out this collection from Smashinghub. Quite a few frameworks I’ve never heard of.

• If you guys are using responsive images hacks today, please answer this short survey: wil.to/56 We need use-case data!

  — Yoav Weiss (@yoavweiss) May 17, 2013

• Could Mobile Responsive Website Design Hurt Your SEO?: In this Copyblogger article, Jerod Morris highlights the four C’s as he discussed why you should use responsive design for mobile devices.

User Experience

• Mobile User Testing with Reflector & UX Recorder or Magitest: Matthew Niederberger, Digital Insights and Analytics Manager at Philips, walks you through his mobile testing setup using an iPad, laptop and two apps. I didn’t know Reflector, an app that displays your iPad screen on your laptop, was available for both Mac and Windows.
• A Look at Flat Design and Why It’s Significant: Are you a fan of flat design? Luke Clum argues flat design makes a site functional and beautiful. Good discussion in the comments, with some saying it doesn’t work for digital interfaces. Your thoughts?
• Can Card Sorting Improve the Usability of Your Designs?: Card sorting is one of my favorite usability techniques. Have you used it to improve your designs?
• Interview with UX Expert Steve Krug: The folks at Rosenfeld Media interview usability guru Steve Krug about about UX tactics and DIY usability. His advice for those who have money to hire a usability professional? Have them do an expert review and coach your team.
• How cognitive science and user empathy powered Google’s design breakthrough: Google has transformed itself from a company whose design was based on data to one that has implemented a user-focused design strategy.

Accessibility

• Should Web Development Books Include Accessibility?: Take this poll and share your feedback on whether web development books should include accessibility merged in the content, as its own chapter, or not at all. I suspect you can guess which option I chose.

• The fact that you don’t need an href for your <a> is a dead giveaway that it shouldn’t be an <a>. It should be a <button>. #a11y

  — Zoe M. Gillenwater (@zomigi) May 17, 2013

• The Gamification of Accessibility, Round 1: Lessons Learned: Love this. For Global Accessibility Awareness Day, North Carolina State University served up a contest for its campus units to see which ones could fix the most accessibility issues on their web pages.
• Tutorial: Replacing Cynthia Says in the Web Developer Toolbar: Whoa, I didn’t realize Cynthia Says used a CAPTCHA on their testing page. If you’re a user of Chris Pederick’s Web Developer Toolbar in Chrome or Firefox, and like to use the Validate WAI and Validate Section 508 features to test accessibility on your web pages, follow these instructions from Karl Groves to replace Cynthia Says with a link to the WAVE tool.
• Time delay to live programmes proposed to aid subtitles: To improve the quality of subtitles, UK broadcasting watchdog OFCAM is proposing a time delay of live programs.

WordPress

• Migrating A Website To WordPress Is Easier Than You Think: Definitely a site worth bookmarking. Excellent resource on how to migrate a website to WordPress.
• A 10 Year Visual History of WordPress.org: WPMU shares a visual walkthrough of how WordPress has changed over the past ten years.
  

  

• Jumpstarting Your WordPress Development Process with BackupBuddy: While WordPress professionals know BackupBuddy as a method for backing up and moving sites, you can also use it to package your customized WordPress development install.
• An In-Depth Overview of WooCommerce 2.0: The recent update of the WooCommerce plugin brought many new features including a new orders screen, inline star rating display and many more. Nathan Weller discusses the new features and highlights the benefits and disadvantages of the new version.

What I Found Interesting

• The Art of the Five-Minute Favor: Do you get more joy from giving than receiving?
• The CodePen Intro Cartoon: Need help understanding CodePen? Check out this video.
  
• Find a Quick Exercise Routine You Can Actually Stick to This Weekend: Find a routine that works for you, whether it’s a seven-minute routine, 20-minute interval training or a routine that uses your own body weight.

For those of you celebrating Mother’s Day today, I hope you had a wonderful day and enjoyed the time with your family.

Each week I share some of my favorite resources I’ve discovered for web professionals. This week’s collection was fun to curate, with a great resource for learning CSS via video tutorials, strategies for reducing page load times, as well as a number of resources to celebrate Global Accessibility Awareness Day. Enjoy!

Favorite Tweet of the Week

Be good to others and surround yourself with good people. You never know when their support is the only way you make it through the day.

— Leslie Jensen-Inman (@jenseninman) May 10, 2013

CSS and HTML

• 10 Years: Wonderful to hear Dave Shea is celebrating the tenth anniversary of CSS Zen Garden with a new look and a responsive design.
• Learn CSS: top 15 tutorial videos: Thanks to Creative Bloq for compiling this list of video tutorials for learning CSS, from the basics to more advanced methods, including creating a navigation bar, to working with grids and creating animation. Videos are from Lynda, CSS Tricks, SitePoint and others.
• Line Clampin’: What methods do you use to restrict the lines of text that display, with an ellipsis displaying after reaching the limit? Chris Coyier shares several interesting techniques in this article; check the comments for more alternatives.
  

  

• How to Code an Expanding HTML5/CSS3 Search Input Field: In his Design Shack tutorial, Jake Rocheleau shares two methods for creating an expanding search input field, the first method uses CSS transitions (only available in modern browsers, the second method uses JavaScript.

Responsive Design

• The Weight of the Web: Niall Thompson discusses the issues with JPEG compression and page weight, and offers strategies to reduce page load times and serve images responsibly. My favorite strategy from Thompson’s collection: set a performance budget.
• Adobe Explores the Future of Responsive Digital Layout with National Geographic Content: Using balanced text, CSS exclusions, and CSS regions, Adobe used content provided from National Geographic to demonstrate the future of responsive digital layout.

• How To Avoid Duplicate Downloads In Responsive Images: Interesting article by David Newton explaining the benefits and issues with using the picture element. Newton suggests object and embed may be short term solutions for image display while avoiding bandwidth issues.

User Experience

• The mobile testing challenge: How to improve your UX and prepare for the future: Raj Kaneru discusses the four types of testing needed for mobile and suggests that the future approach to mobile testing will be more automated.
• Seven Ways To Test The Effectiveness Of Icons: Rather than using intuition to determine if an icon is effective, make better decisions using data-driven methods, says Jeff Sauro.
• It’s All About Context: Research your users and offer the best content, based on the results.
  

  With contextual design comes the Goldilocks principle: You have to get things just right, or it could have consequences.

• Mozilla’s New UX Quarterly: Mozilla’s UX research & design team publish their first UX Quarterly. My only wish? The quarterly was available in a format other than PDF.

Accessibility

• GAAD 2013 wants accessibility on web devs’ minds: Craig Grannell talks with several accessibility experts, including Global Accessibility Awareness Day co-founder Jennison Asuncion, about what web designers and developers can do to learn more about digital accessibility.
• Regal to let deaf moviegoers see what they’ve been missing: Regal Entertainment Group, the largest theater chain in the United States, will equip their 6,000 theater screens with closed-captioning glasses. Developed by Sony, the glasses will project closed-caption text inside the lenses that will sync with the dialog on the screen.
• HiSoftware Gives the Cynthia Says Web Accessibility Testing Tool a Makeover: It’s back! I believe Cynthia Says was the first online accessibility tool I used. The new (and free) version helps users identify errors related to Section 508 standards or WCAG guidelines.
• Testing for Accessibility–What You Need to Know for a Successful Testing Effort: Want to learn the basics of web accessibility training? Check out this free webinar from HiSoftware.
• Is Hearing Device a Magic Wand?: Don’t presume that someone using a hearing device can magically hear and understand everything that is said.

WordPress

• How to Contribute to WordPress: Get involved! You don’t have to be a designer or developer to contribute to WordPress. There are many other ways you can make a difference, including answering questions in the forums, writing documentation, testing, and organizing WordPress events.
• My Top Ten WordPress Snippets: Good code snippets to add to your functions.php file including snapshots of websites, customer rel tags in galleries, and custom media size dropdoown.
• Brad Williams on Secure WordPress Development: WordPress developer and author Brad Williams shares his tips for keeping your code secure and hack-free with advice on data validation, sanitization, and managing nonces.
• The Exhaustive ManageWP Guide to WordPress Theme Frameworks: Nathan Weller explains what a WordPress theme framework is and highlights what he likes in each of his top ten theme frameworks. What’s your favorite framework, and why? Share your thoughts in the comments.
• Live Workshop: How To Build a WordPress Plugin: In this five-week online class, held for one hour on one day each week, Tom McFarlin will walk you through the steps to create your own custom plugins for WordPress.

What I Found Interesting

• A great teacher can change a life. They light a lifelong curiosity, a desire to participate in democracy, & instill a thirst for knowledge.

  — Arne Duncan (@arneduncan) May 7, 2013

• Top 10 Computer Tricks Every Geek Should Know: I love these kinds of articles, I always discover some cool new computer tip to try out. This post will teach you how to monitor your home with Dropbox, improve performance on your hardware, crack passwords, and more.
• Common Patterns in Styleguides, Boilerplates and Pattern Libraries: Wow. Thank you Tyler Sticka for creating this Google Doc spreadsheet cataloging common styleguide patterns.

Welcome to the Cinco de Mayo edition of my weekly roundup of new web design and development resources for CSS, HTML, responsive design, accessibility, WordPress and user experience. Each week I highlight some of my favorite resources I’ve discovered online. Enjoy!

Favorite tweet of the week:

It’s not about your process, it’s about delivering delight.

— Alan Cooper (@MrAlanCooper) May 2, 2013

CSS and HTML

• Automatic Figure Numbering with CSS Counters: If you’ve ever wanted to automatically number figures in your posts, this demo page is for you. Use Chrome Inspector or Firebug to view the CSS.
• On CSS Documentation: Richard Powell discusses the need for CSS documentation, especially important when you have several team members working on the same project. Do you create a style guide for your CSS? How do you manage CSS documentation?
• CSS Architectures: Scalable and Modular Approaches: In the latest article in Denise Jacobs series on CSS Architectures, Denise shares strategies for keeping your CSS lean and clean using DRY, Object-Oriented CSS, SMACSS (Scalable and Modular Architecture for CSS), and CSS for Grownups.
• How to mark up subheadings, subtitles, alternative titles and taglines: With the hgroup element made obsolete, Steve Faulkner, co-editor of the HTML5 spec for the W3C, offers alternatives for marking up subheadings and subtitles.

Responsive Design

• Why the Web Is Ready for Responsive Web Design: The cost of supporting multiple platforms and managing fragmented ecosystems will lead you toward a unified approach with responsive web design.
• Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js): Solid plugin for a responsive lightbox that provides fully accessible content and keyboard navigation.
• What are Responsive Websites made of? Guy Podjarny of Akamai looks at the performance of responsive web sites, and concludes progress is being made on responsive images, but almost all other aspects of responsive web design are not optimized to screen size.
  

  

• ZURB Presents Online Responsive Web Design Training: If you’ve been trying to figure out how to get started with responsive web design, ZURB is offering a one-day online responsive web design training May 13 for $300 (U.S dollars).

User Experience

• How to achieve the impossible with your web presence: What worked for the Gov.uk website may not work for websites of other large organizations, says Paul Boag. But we can all learn from their documentation of best practices for creating and running a large organization’s website.

• Document key user tasks for each screen in the wireframes, to make sure user objectives are being met in the #UX Design process.

  — Jonathan Lupo (@userexperience) May 3, 2013

• Content Knowledge Is Power: Taking time to understand the content that already exists allows you to make your entire design stronger and facilitates understanding among all members on the web team.
• UX is not just a fancy word for common sense: There’s a bit more to user experience than common sense. Your experience of a service, application or product is not everyone else’s experience. It’s a lot harder to design for someone else.
• How to Pull Your Content Creation Process out of Creative Hell: Ian Humphreys recommends ix steps to find your inspiration:
  1. Walk away
  2. Lighten the mood
  3. Search for inspiration
  4. Call for help
  5. Examine your process
  6. Persevere

Accessibility

• Global Accessibility Awareness Day In-Person Events on May 9: To celebrate Global Accessibility Awareness Day, several in-person and virtual events will be held. This post lists several opportunities to attend in-person or virtual events to learn about accessibility in Moodle, MOOCs, and the digital world.
• Why I Want Android Accessibility to Succeed: Google Voice Search outcompetes Siri, but there’s a lot of development work needed on Android before it can compete successfully with iOS for accessible features. Great discussion in the comments.
• Plain Language and Usable Accessibility: Whitney Quesenbery: Derek Featherstone of Simply Accessible talks with Whitney Quesenbery about her sessions at this month’s AccessU 2013 conference, to be held May 14–16 in Austin.
• Accessible Audio Descriptions for HTML5 Video: James Edwards walks you through developing a proof of concept accessible video player with audio descriptions.

WordPress

• WordPress 3.6 Beta 2: Released this week, the latest beta version of 3.6 contains an updated Post Formats UI, bug fixes, and other updates. Test it out, and submit any bugs you find in the Alpha/Beta area of the support forums.
• The Most Exciting Feature of WordPress 3.6: Native Audio and Video Support: What many people have been waiting for is finally here, native support for audio and video files in WordPress.
  

  
  

• Using BuddyPress as a Directory: Slideshow of John Hawkins’ presentation at last week’s BuddyCamp Minneapolis 2013 event.
  
• Curating Content for a WordPress Blog (How I Do It): After moving his blog from Tumblr to WordPress, Nathan Weller discusses his process for curating content, describing the WordPress features and plugins he uses, and shares what can be improved.

What I Found Interesting

• I’m still here: back online after a year without the internet: The past year has not been exactly what Paul Miller expected when he unplugged from the Internet.
  

  And now I’m supposed to tell you how it solved all my problems. I’m supposed to be enlightened. I’m supposed to be more “real,” now. More perfect.

• Google adds remote desktop to Hangouts, lets users simultaneously video chat and troubleshoot: This will be a boon for people who troubleshoot issues on remote desktops, and is replacement for sites like LogMeIn or Join.me.
• Now You Can Buy 3D Printers From Staples: Whoa. Staples will be selling 3D printers in select stores by the end of June, for $1,299 (U.S. dollars). Will you buy one? It’s not on my wish list. Yet.