Weekly Roundup of Web Design and Development Resources: July 11, 2014

cars suspended in air at Rock and Roll Hall of Fame Museum

Welcome to weekly resource roundup post. Each week I publish a post with some of my favorite web design and development resources I’ve read about or discovered on Twitter in the past week. Hope you find the resources useful in your projects.

In this week’s roundup, you’ll learn about designing websites nonprofit organizations can manage, find out how to embed a live Google+ Hangout on your WordPress website, discover how responsive design can initiate discussion about web performance, and more.

If you want to stay-up-to-date daily with resources like these, follow me on Twitter.

This week’s photo is from the Rock and Roll Hall of Fame in Cleveland, Ohio I visited last week. On the main floor, suspended in air, you’ll view the U2 Zoo TV stage props from their 1992 tour: East German Trabant automobiles. The headlights on the Trabants served as spotlights on stage during U2’s performance. Cool!

Favorite Tweet

User Experience

  • Designing Sites for Nonprofits: As user experience designers, we need to get it right for nonprofits and provide them with a better experience managing their site. It’s critical to ask the right questions, learn the capabilities of the nonprofit team, and plan for growth.
  • Help Joy help you. On the unusability of internal systems.: Imagine you’re a frontline staff person for a major airline. You’re computer literate and love your job. And the only way you can work with the internal system the airline constantly updates is to reference your two-inch thick notebook you created with handwritten notes. Argh. Demand time during projects to focus on the user experience of internal systems.
  • Observing Usability Studies: A Guide for Stakeholders: Having stakeholders observe usability studies helps them gain better understanding of the issues and allows them to discuss what they observed between sessions. Cory Lebson offers a good set of ground rules for managing observers.
  • Do less – Problems as shared spaces: Interesting case study on how removing traffic signs, lights, and road markings made traffic move slower, reducing the number of accidents. In solving problems, adding something isn’t always the answer. Perhaps we can move something out of the way.


  • Audio Accessibility with Svetlana Kouznetsova: In this episode of A Podcast for Everyone, Sarah Horton interviews Svetlana Kouznetsova about the current state of audio accessibility, how to create accessible audio experiences, and how we can promote audio accessibility.
  • Accessibility in Google Apps: To more effectively use Google Apps, the first two things you need to know are your browser and your assistive technology, says Marco Zehe as he shares accessibility information about Google Apps along with tips and links to online resources.
  • The WAI Forward An excerpt from Heydon Pickering’s recently published Apps For All: Coding Accessible Web Applications book will provide you a better understanding of Accessible Rich Internet Applications (ARIA) and how you can implement in your projects. Good discussion in the comments.


Responsive Design

  • Behold the Fold: Funny conversation between Sophie Shepherd at Happy Cog and a “Defender of the Fold” on why we shouldn’t worry about the fold.

    Scrolling is kind of like breathing; you don’t even realize you’re doing it until someone brings it to your attention.

  • “RWD Is Bad for Performance” Is Good for Performance: Tim Kadlec explains how the myth that responsive design is bad for performance can spark the discussion for an organization to be intentional about web performance.
  • Breakpoints and the Future of Websites: Obinwanne Hill takes a look at breakpoints beyond screen size and explore and offers different approaches for using breakpoints. Check the comments for good discussion and alternate viewpoints.


  • HTML5 Download Attribute Guide: Did you know you could use the download attribute to force media file downloads onto the user’s computer or mobile device?
  • 28 Free Open Source CSS3 Code Snippets: If you haven’t already started your own library of CSS code snippets, this is a great post to get you started with your own library. And if you already have a library, you’ll likely find new CSS code snippets in this collection of fixed menus, form inputs, and more from Spyre Studios.
  • Adding captions and subtitles to HTML5 video: This how-to guide describes how to implement captions and subtitles in the video player, with an explanation of the track element, changes to HTML and CSS, and JavaScript code needed.

What I Found Interesting

  • 9 Communication Tips to Save Your Next Design Project: Communicating with clients is critical for a good relationship and a successful project. Good communication is an investment and takes time to learn, says Kerry Butters as she shares her tips.
  • How to Check Broken Links on Your Website: Who doesn’t hate broken links on website? Checking broken links on your website can be a tedious job, but online tools and programs can make the job easier. Fixing broken links will make your website visitors happy, and so will search engines that index your site.
  • Easy Peasy Heatmaps with Crazy Egg: Go beyond Google Analytics to get a better understanding of what people find useful and how effective your site layout is with heatmaps, a visual way of tracking what people click/select on your website.
About Deborah Edwards-Onoro

Deborah is a web developer and user experience professional focused on usability and accessibility. She's active in local groups as a leader for Detroit User Experience, Refresh Detroit, and Metro Detroit WordPress. In her free time, you'll find her birdwatching, shooting photos, reading, or watching tennis.

%d bloggers like this: