I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
Optimise your site for mobile devicesAshley
With the advent of smart phones and more powerful handheld devices like the iPad are your mobile users having the best experience? The mobile arena introduces a layer of complexity that can be difficult for designers and developers to accommodate. Mobile development is more than cross-browser, it should be cross-platform.
Add a Mobile Stylesheet
In the code below we’ve included two stylesheets, the first main.css targets desktop computers and laptops using the ‘screen’ media type, while the second mobile.css targets mobile devices. While this would otherwise be an excellent approach, device support is another issue. Older mobile devices tend to support the handheld media type, however they vary in their implementation: some disable the screen stylesheets and only load handheld, whereas others load both.
<link rel="stylesheet" href="main.css" media="screen" /> <link rel="stylesheet" href="mobile.css" media="handheld" />
Make phone numbers clickable
It’s easy to make phone numbers clickable, just like we can use ‘mailto:’ to link email addresses through (although this isn’t advised due to email harvesting) we can add ‘tel:’ followed by the number as shown below.
<a href="tel:+44203948578" class="phone-link">(+44) 203 94 8578</a>
Make filling in forms easier
HTML5 input types allows us to make it easier for users to fill in forms by providing the correct keyboard configuration. this can be achieved by changing the input type to either ’email’ or ‘tel’.
<input type="email" name="email" /> <input type="tel" name="telephone"/>
jQuery just released the mobile version of its popular framework that allows you to use Its lightweight code is built with progressive enhancement, which also has a flexible, easily themeable design.
jQuery mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms.