3rd Time Media Ltd

Get in touch: 020 3170 7150
Curly line

Responsive Style with
HTML 5 and CSS 3

Posted by Javid Ali

The universal buzzword seems to have caused a pandemic of requests from digital marketers across the globe, including some of our larger clients. After plenty of research and practise using this new technology wonder of the web, I decided it was time to obtain in-depth formal training. The development team at 3rd Time Media were already HTML 5 ready-to-rollout, but the core of the question was – Should it be used today to target markets of our customers?

So I put the question forward to the experts and delved into the statistics: The typical summarised answer after lengthy discussions was – Indeed HTML 5 should be used immediately to take advantage of its benefits and future proofing, however coding should be done with backward compatibility and accessibility in mind.

Doesn’t this mean more code?

Initially this threw me off into an incredulous outlook. Does this mean that we have to build multiple websites for one purpose? Or is there an implication of doubling up code for older browsers on every webpage? After having a deeper look into other websites showing off this new technology, my jealous instinct forced me into further exploration and training. Comparing distinct examples and going through several trials proved that this is not the case at all. In fact, even less code is required for the most common parts of web development!

The 3rd Time Media Approach

After the investigation phase, 3TM have successfully created a tailored HTML 5 implementation structure based around Direct Response Marketing. The fundamentals principles for us are based around the economic advantages to our customers, new usability offerings, SEO, accessibility and optimisation for the target audience.

The development team are now in a position to channel this new selling power source directly into a web production environment. This enables clients to mesmerise their customers and inspire them into a spellbound keenness of clicking away on the attractive web interface on their screen or mobile phone. These sites can be rolled out with graceful degradation for browsers that are not quite ready for the quick selling techniques.

Background information summary

What is HTML 5 and CSS3?

HTML stands for Hypertext Mark-up Language. HTML 4 and CSS 2 are the technologies that most websites are built on today. HTML 5 is the next generation mark-up language that provides far more richness on a webpage. It has the ability to organise page content into a large set of meaningful tags, including Article, Section, Figure, Header and Footer. It includes a lot more tag syntax, which is not the case with HTML 4. It allows for powerful pages where areas can be targeted for styling and scripting more easily and efficiently.

CSS stands for Cascading Style Sheets. HTML is used for holding content on a page, whilst CSS is used to produce a desired look and feel of the content. CSS 3 offers many more interface enhancements than its predecessor, allowing for a graphical user interface without using actual images.

When was it invented?

Work had begun since 2004, but HTML 5 has been in Last Call for completion at W3C since late 2009. It is now being used on some of the best websites on the web. W3C expect to recommend it as a fully completed standard by 2014, by which time we expect the competition to have nourished themselves with most of its fruits.

Advantages of using HTML 5 and CSS 3 today?

  • Better organised content and less code
  • New graphical features of CSS 3
  • Cheaper cost, less build time
  • More efficient and faster loading due to having less page code
  • Allows for more styled content on a page
  • Allows for videos and audios without using Adobe Flash
  • Supports iPhone, iPad and Macintosh platforms better than older web technologies
  • Richer page means more power for interactivity using JavaScript
  • Device enabled features – Each browser has their own suitable features to facilitate HTML 5 pages, allowing for a more device-tailored usability
  • Cross-browser with easy backward compatible fixes
  • Supports drag and drop
  • Supports graphics without images
  • Supports phone applications and offline web applications
  • More methods for geolocation
  • Removes dependency of plugins on compatible browsers
  • Simpler code maintenance
  • Transitions and animations without any script or plugins