Web Development Blog » Web Design

Give Me HTML5

Stuart Gonsal — Tue, 09 Oct 2012 09:38:33 +0000

Steve Jobs says you can’t view Flash on your iPhone because they have a moral/technological objection to the utility. Adobe conspiracy theorists say that Apple want to protect the viability of their AppStore. Luckily, the rest of us mobile website developers caught in the middle can simply step out of the debate now, with the introduction of HTML5. The new mark-up language is the bouncer who has effectively said, “Get a room, Jobs and Adobe! We don’t want to hear it!”

What’s Different About HTML5?

This new version of the mark-up language which web development teams use to create your sites has media integration … which means that animations, interactive tools and movies can now be scripted into your website without using third party programs like Flash or Silverlight. These third party programs had issues of their own, and didn’t always work as well with different browsers and mobile devices (notably the iPhone and iPad).

How Do We Love Thee, HTML5?

Let us count the ways! HTML5 is a naturally better choice on the web, and even more so if you want to free your website from the shackles of the desktop computer and infiltrate the 2,000,000+ touchscreens of Australia. It’s most lovable characteristics include:

Ability to display rich media on ALL mobile devices: Any websites designed using Flash in the past could only be read by Apple mobile devices with certain plug-ins. This was not the most stable or user-friendly solution – HTML5 makes it much easier.

Offline opportunities: Some of the features of HTML5 expand the offline information storage capacity past what cookies or a cache could do. This means that blips in the wireless signal won’t necessarily kick your users off your website, and many features will be available without any signal.

Finding yourself: Apps which integrate geo-location work much more intuitively with HTML5.

However, HTML5 is not a robot. It is human. Oh, wait…

Perhaps I should say that HTML5 has failings along with its wonderful qualities! There is little backwards compatibility with the platform, so users with older browsers may miss out completely.

Flash: “What about Me?”

It seems set that HTML5 is the future of mobile website design. But what is the future of Flash? At Lava, we haven’t ditched Flash. In no way is Flash a tool of the past – although it will probably start to be used in more niche situations. Especially for desktop-based websites, you’ll still see the superhuman reflexes, super-speed and manipulation of the laws of physics that Flash is known for!

Getting Acquainted with HTML5 and CSS3

Thu, 12 May 2011 07:24:32 +0000

CSS3 and HTML5 have been highly anticipated by web developers and designers for several years. Although both languages are currently considered “works in progress,” some of their key features have recently been made available for demonstrational use on the most popular browsers. For anybody familiar with traditional CSS and HTML, the new techniques should be fairly easy to implement.

CSS3 Improvements

CSS3 is simply an evolution of the well-known styles and cascade of traditional CSS. It introduces several new features, including new properties, selectors, and pseudo-classes. This facilitates setting up layouts quickly and efficiently. Most of the basic rules concern typography, background colors, etc.

The @font-face feature will let you easily add custom fonts. You can do this by uploading the font file to your server, linking to a CSS file, or creating a font family.
Use the Multiple Columns feature to divide your text into columns. You have the option to choose the number of columns, column width, column spacing, and column separators.
The Multiple Backgrounds feature allows you to place multiple backgrounds on any element.
With the Border Image feature, you can replace any element’s border with a specified image.
The Box-Shadow feature provides for easy creation of inner and outer drop shadows on any element. You can specify values for color, offset, and blur.

HTML5 Improvements

HTML5 is the next generation of HTML. It has been designed to facilitate the search engines’ navigation and categorization of a website. The main attraction of HTML5 is its simplified, built-in video element. It also introduces offline storage capability for offline use of web applications and new design tools that allow easier creation of websites. HTML5 generally looks like old-fashioned HTML. However, there are a few key changes to be aware of.

Including a doctype in HTML5 is not necessary, but some older browsers may need to have it included. Only one doctype is needed: . This simply notifies the browser of the existence of an HTML document.
The Canvas tag allows developers to create two-dimensional images and graphics directly within the element. This eliminates the need to use separate software for image creation.
The Content Editable tag is a new element that will let your users edit any text that you place within the tag. This tag can be written as (ul contenteditable=true).
The Application Cache element supports caching of web pages and apps for use offline.
HTML5, once it is fully supported, will allow you to embed and playback audio and video without the use of any plugin. This will be extremely useful in relation to mobile devices, which are currently unable to access Flash or similar media content.

HTML5 and CSS3 can be used in conjunction with technologies such as JavaScript to improve the speed, format, and style of any web page. Due to their advanced features and improved elements, these two languages are poised to transform the way we create and use the Internet.

1. Tattoos By Neal

2. Woody Wide Web

3. Delostrelecke Tvrze Adam

4. One-Nyne Design

5. Lab (1.0) – HTML5 Theme

6. CatCubed

jQuery Cycle Plugin

Richard Havelock — Thu, 15 Oct 2009 21:36:28 +0000

jQuery Cycle Plugin is a lightweight jQuery plugin which offers an easy way to create a slideshow of images for your website.

The plugin provides a bunch of different effects for cycling between each slide, from a simple fade to the more elaborate ‘shuffle effect’, you can choose to cycle through each slide on a time delay or for it to be initiated by the user through a click.

The jquery Cycle Plugin does not only cycle through images but it can also cycle through which can contain text and images, allowing for more freedom of what goes into each slide of the slideshow.

I prefer the fading option and use it for small advertisements on a number of domains or sometimes as the main focus of a website (such as small accommodation sites). The effect is not as clean or visually sharp as a flash movie but it takes a lot less time to implement and does not require flash, therefore it will display in android devices and on the iPhone with no problems.

Implementing the code is easy, list the images inside a

and then specify the plugin to cycle through that

by using the small piece of code provided on the jQuery Cycle Plugin website.

jQuery Cycle is easy to set up, run and configure, while the end result can help give a website that extra feel of professionalism. I am a big fan of the jQuery Cyle plugin and have used it in quite a few websites to great effect.

Download jQuery Cycle Plugin at:

jQueryCycle