Web Design Services & Solutions
Custom. Professional. Affordable.
San Diego, California

Custom HTML5 video player with CSS3 and jQuery. Learn how to build an easily customizable HTML5 video player, including packaging it as a simple jQuery plugin.

Building a custom HTML5 video player with CSS3 and jQuery

By Cristian-Ionut Colceriu · 28 Jul, 2010

Published in: opacity, html5, css3, jquery, video, Transitions

Introduction

The HTML5 <video> element is already supported by most modern browsers, and even IE has support announced for version 9. There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible. There are a couple of barriers to this that remain, most notably the problem of which codecs are supported in each browser, with a disagreement between Opera/Firefox and IE/Safari. That might not be a problem for much longer though, with Google recently releasing the VP8 codec, and the WebM project coming into existence. Opera, Firefox, Chrome and IE9 all have support in final builds, developer builds, or at least support announced for this format, and Flash will be able to play VP8. This means that we will soon be able to create a single version of the video that will play in the <video> element in most browsers, and the Flash Player in those that don’t support WebM natively.

The other major barrier to consider is building up a custom HTML5 <video> player — this is where a Flash-only solution currently has an advantage, with the powerful Flash IDE providing an easy interface with which to create a customized video player component. IF we want to write a customised player for the HTML5 <video> element we need to handcode all the HTML5, CSS3, JavaScript, and any other open standards we want to use to build a player!

Full article can be viewed here: http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

The mobile web optimization guide. Provides an overview of three different strategies to make your websites work across all devices.

Mobile-friendly: The mobile web optimization guide

By Bruce Lawson · 28 Jul, 2010

Published in: media queries, mobile, viewport

Introduction

If I had a Euro for everyone who asks me at conferences how they can “mobilise” their web site, I’d be extraordinarily rich as well as breathtakingly handsome.

It’s easy to see why people wish to make their sites “mobile friendly”; Gartner research suggests that by 2013, mobile phones will overtake PCs as the most common Web access device worldwide. And don’t forget other visits from devices such as games consoles like Nintendo Wii, DSi, web-enabled TVs, in-car browsers and the like.

Many customers are already using mobile devices as their main method of Web access, particularly in emerging markets — the July 2009 Statistical Report on Internet Development in China states that “”the proportion of [people] accessing the Internet by mobile increased enormously from 39.5% in late 2008 to 46% in June 2009″, while the proportion of using desktops and laptops decreased”. That translates to 150 million people. In the developed world, many have a mobile device as their secondary method of accessing the Web while they’re out and about.

It’s a truism that on the Web, there is always someone offering the same service as you are. And if you’re not catering for the mobile user, you can be sure that your competitors are. In the current harsh economic climate, sending customers into the arms of the competition doesn’t succeed as a business strategy.

This article provides an overview of three different strategies to make your websites work across all devices. We’ll call them “mobile-aware” websites, as they’re not specifically for mobile sites, but they will work on mobile, as well as across different alternative browsing devices. These strategies are not mutually exclusive; you can mix and match as your project, budget and sanity allows.

View entire article here:  http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

Understanding border-image. Learn how the border-image shorthand property works in today’s browsers.

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that’s your thing) with a single div and a single image. In this article I explain how the border-image shorthand property works in today’s browsers.

View full article here: http://css-tricks.com/understanding-border-image/

A Guide on Layout Types in Web Design. A nice recap of the many different types of layouts that can be used in web design.

One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.

For many years, we have rotated between the benefits and pitfalls of using fixed, elastic, and liquid measurements in a quest to give optimal viewing experiences in highly varied situations, while balancing our need to control things in our web pages.

But, as Bob Dylan proclaimed a long time ago, “The times, they are a-changin’,” and with these changes come a variety of new ways for laying out your website’s pages and an even more variable landscape of methods for viewing websites.

In this article, we will examine web layout types — old, new, and the future. We will explore the subject in the context that websites are being viewed in a diverse amount of ways, such as through mobile phones, netbooks, and touchscreen personal devices like the iPad.