HTML5 Canvas Drawing Web App

Posted on May 12, 2011 by andrea

I’ve had the pleasure the last couple months of working on a fantastic drawing app that will allow the user to interactively draw on a canvas simultaneously with friends and family. The drawing app will available as an iPhone app as well as a web app for desktop browsers.

The example below is not what the app looks like, but it is a simplified version I have put together for fun, to test my skills, and give you a playground to try. Give it a go on your desktop computer using pretty much anything but IE.  Touch tablets also work well and support two finger gestures that make for a neat drawing effect.  Double click the eraser to clear the canvas. To commit text, select the draw or erase tool. Post your drawing in the comments section; I would love to see what you can do!

HTML5 Canvas Drawing App

Posted in Web Design | Tagged , , , , | Leave a comment

Autoplay is bad for business

Posted on December 23, 2010 by andrea

Autoplaying audio or video on web page load is a bad idea not just for accessibility, but for usability and general sanity while browsing. The sound from the clip will override or conflict with other sounds that the user may be listening to at that time. At best, this is intrusive for someone who is listening to music or in a quiet area while browsing like a library or work. At worst, the site becomes unusable for people who have to listen to their screen-reader software and can not continue browsing the page until the clip has finished. If the audio loops they may not be able to use the site at all.

To understand the frustration that screen reader users face, compare it to the interruption caused by advertising overlays. They obstruct what you are trying to read and you can only continue once you’ve found and clicked on the close button. To a screen reader, the autoplaying clip acts as an overlay covering the entire page and the close button only appears once you’ve listened to the entire video.

Playing audio automatically when landing on a page may affect a screen reader user’s ability to find the mechanism to stop it because they navigate by listening and automatically started sounds might interfere with that navigation. As a rule, the sound should be started by an action initiated by the user after they reach the page as opposed to requiring that the sound be stopped by an action of the user after they land on the page.

If autoplay is an absolute must, stick to these guidelines:

  1. Only autoplay if the clip lasts for five seconds or less.*
  2. If the clip lasts for more than five seconds, you must provide the user with an obvious option to stop or pause it.
  3. When linking to a page with a video clip that will automatically play, make sure it is clear to the user.

*Why five seconds? Five seconds is long enough to get a user’s attention, but not so long that a user cannot wait out the distraction if necessary to use the page. Moving content can also be a severe distraction to some people. Certain groups, particularly those with attention deficit disorders, find blinking content distracting, making it difficult for them to concentrate on other parts of the web page.

Posted in Web Design | Tagged , , , | 2 Comments

Handmade Amigurumi Crochet Snowmen

Posted on December 15, 2010 by andrea

My own design for stuffed crochet snowmen. Enjoy!

Posted in Crochet, Home | Tagged , , | Leave a comment

Web Content Accessibility

Posted on November 30, 2010 by andrea

Happy Blue Beanie Day!

Today is the 4th annual Blue Beanie Day for accessibility awareness in the web community. Get out there and wear a blue beanie to support this important cause. Write a web standards haiku on Twitter with hash tag #bbd4 for a chance to win free books from Peachpit and A Book Apart. Join the celebration in making the web a valuable resource for everyone!

What is Web Accessibility?

Web accessibility is a combination of Web development, design, and content methods that provide equal access to Web content regardless of the user’s physical or technical limitations. There is a range of disabilities that may affect a website’s audience. Some website users were born with a disability while others can develop disabilities as they age, like decreased vision or hearing, or impaired motor skills.

According to the 2000 US Census, one in five people have some type of disability. As the population ages, this number is expected to rise, and so will the idea of developing accessible websites. For example, currently about eight percent of males and .5 percent of females suffer from some kind of color deficiency. Examples of limitations include:

  • Visual disabilities, such as blindness , low vision, and color blindness
  • Hearing impairments
  • Physical disabilities
  • Speech disabilities
  • Cognitive and neurological disabilities
    • Dyslexia and Dyscalculia
    • Attention deficit disorder
    • Intellectual disabilities
    • Memory impairments
    • Mental health disabilities
  • Multiple disabilities
  • Aging-related conditions

Although Web accessibility is most often discussed in conjunction with the physically disabled, building sites with accessibility in mind also benefits people without disabilities. Other groups include:

  • Older people with diminishing capabilities
  • People with lower-than-average literacy
  • Individuals with technical disabilities, such as an older computer or a slow Internet connection
  • Users who in general are not familiar with the Internet or interacting with websites.

Benefits of web accessibility

Having a site that is accessible for visually, hearing, or otherwise impaired visitors is not only a moral obligation, but it also increases your audience resulting in more sales and customers. In some instances, it is even required by law that your website be Section 508 compliant.

Be an EOE

Most organizations intend to be supportive of people with disabilities, but this support is often neglected online. True equal opportunity means that all channels of interaction with patients, employees, and the community are available to those with disabilities. Equal opportunity relates to employees as well. The administrative components of the website or Intranet should be usable by those with disabilities.

More access means more users

It is important to recognize that this relates to more than disabled users. Web accessibility makes your site easier to use for many other populations, including elderly users, those with older computers and visitors with low-bandwidth connections.

Cross-browser compliant

Many of the technical tools used to achieve Web accessibility such as CSS and div-based layouts are also helpful in achieving interoperability with different browsers and platforms.

An accessible site streamlines management and reduces costs

The techniques used for Web accessibility create efficient sites that download faster and are easier to maintain. By separating site content from design, pages are smaller and a consistent look and feel is enforced. Smaller pages reduce the bandwidth needs and server load, lowering overall costs.

Web accessibility helps with SEO

Web accessibility makes sites easier to read by software such as screen readers. Search engine spiders function similarly to a screen reader in many ways, making accessible websites search engine friendly as well.

Resources for more information

Accessibility Guidelines

Accessibility Checklist

Assistive Technologies

The Web is often thought of as a visual medium, but individuals with visual impairments can be active Web users too. Fortunately, tools such as screen readers, screen magnifiers and special browsers can act as a bridge from the visual, point-and-click world of the Web to an experience that is available to users with special needs. For assistance technologies to work effectively, your website must be correctly coded.

Browser Tools

Automated Testing Tools

Posted in Web Design | Tagged , , , , | Leave a comment

CD cover design tips

Posted on October 27, 2010 by andrea

With MP3s and digital downloads becoming the new wave of music format, one might not put as much consideration into their album artwork. Having a great CD cover and packaging is still very important, however. You may still wish to sell your CDs in stores like Barnes and Noble, or send demos to a label or radio station. Even digital albums need a way to stand out and be easily recognizable online. An iconic image to display next to your Facebook updates and in your iPod player are just two great examples.

5 steps to creating effective album packaging

1. Choose your album cover art

The first step to designing your album packaging is to decide on what the cover should look like. Having a good visual for your work insures buyers, labels, and music critics can easily identify you.

Your cover should be unique and stand out. It can include photographs, illustrations, typography, humor, and should fit within the style of music it represents.

Don’t make it too complex. Some people will see your physical CD in its high quality package but most of the time it will be display as a small thumbnail on a website. It should be recognizable at all sizes.

2. Add your title and band name

Select a font or title design that is readable and fits for the theme of your music. Some bands choose to over stylize their logo and title. Avoid doing this so more people can find and recognize your band name. Many people will pass a CD by because the cover looks amateurish. Even a comedic album cover needs to utilize good design practices and typography.

If you want to have a wild font on the front cover or leave off your band name and title entirely, make sure that info is clearly legible on the spine for easy cataloging on store shelves.

3. Back cover information and design

The next step in designing your CD packaging is to add all the production information that buyers and reviewers need to know. The most accessible place for this is the back cover or an insert. Include the copyright, publishing dates and label.

UPC will help identify your album and will help greatly with sales. Need to purchase a UPC barcode? Visit Azalea Software and get a unique UPC barcode for only $39.

The label name can be your own label if you don’t have another one. Even if you create a label for just one project it looks professional and allows you to separate the business from the music.

A catalog number is another unique identifier for your album that is often used by physical and online retailers to uniquely identify your album. This is a good reason to create a label name.

Social media and website addresses are important because they leads buyers to places where they can find out about the artist, buy merchandise and find out about tour dates. Make sure you keep these pages updated and interesting. Also, buyers today like to “try-before-they-buy.” Give them a chance to check out a couple of tracks they may come back and buy your full album.

Include contact Information if you’re actively seeking gigs, representation or a record deal, having your booking and PR contact info on the back cover is crucial.

Show artwork that doesn’t interfere with the legibility of all the important information that is on the back cover. Information should always come first.

4. Decorate the inside inserts and disc

Add production information that wasn’t included on the back. If you want to display a lot of information it is a good idea to save some of it for the inside insert. Copyright, publishing credits for individual songs, production credits and engineering credits can go here.

Biographies should include information about what each group member does in the band.

Multiple page inserts will increase the production cost of your album. Make sure it’s worth it by providing valuable information there.

5. Make an iTunes digital booklet

The digital booklet is in PDF format and can be accessed from your Purchased Media list in iTunes. Double-clicking the booklet will activate your default PDF reader, such as Adobe Acrobat Reader on a PC or Preview on a Mac to open the file. You will then be able to view the contents of the booklet on your computer and even print it if desired.

Bands can also offer interactive booklets with their albums. The interactive booklets can be accessed by iTunes Store customers who have iTunes 8 or higher installed on their computers. Digital booklets can include the same basic facts found in the typical CD insert such as song lyrics, photos, recording details, guitar tabs, acknowledgments and other information from the artist. The new interactive booklets may include video and links to the band website.

One of the best benefits of digital booklets is that in order to download it from iTunes, the customer must purchase the entire album which is likely to increase revenue due to the demand for the booklets.

iTunes Digital Booklet Specs

These booklets are expressly designed for the iTunes Store format, and cannot be reproductions of the liner notes with borders to increase their size.

  • PDF format with “.pdf” extension. Make sure the PDF opens in full-screen with no negative space surrounding the document.
  • 4 page minimum
  • Number all pages except page 1
  • 10 MB maximum file size. If the digital booklet contains many pages, consider using fewer images or optimizing images to achieve lower overall file size.
  • Embed all fonts and images
  • 72 dpi minimum
  • 11 in x 8.264 in (28 cm x 21 cm) Horizontal presentation
  • RGB color formatted for on screen
  • All images full bleed
  • Crop or printer’s marks and barcodes are not allowed.
  • You cannot sell or advertise other products or services. No other promotional sites are allowed.
  • No links to anything outside of the booklet, except to the artist and/or label website(s).
  • Your digital booklet will be timeless so don’t include any time-sensitive information like dates for an upcoming tour or concert.

Upload your booklet to iTunes

Select the optional iTunes Digital Booklet Service during the album submission process and then upload the digital booklet after checkout.

Posted in Print Design | Tagged | 6 Comments