February 18, 2018

Unlocking the Potential of HTML5 & CSS3

The release of HTML5 and CSS3 was nothing short of an evolutionary leap, yet few designers make very much use of the new features provided by the technology. In part this is because the full potential of HTML5 and CSS3 have been overlooked, so people are continuing to develop more or less the same sites, just with minor differences in coding.

There’s nothing especially wrong with that, but there are many things HTML5 and CSS3 make available to you that you could be taking advantage of to create more amazing creations than you ever have before.

Don’t ignore the canvas

Getting to grips with the canvas object is one of the most difficult tasks for a new HTML5 coder to do, especially when that coder has previously been coding in other versions of HTML and does not have a background in computer graphics programming.

Learning to use the canvas object, even if you rarely intend to do any drawing, is a valuable skill that every serious coder should take the time to learn. It can be used for all kinds of things including creating animated infographics, slideshows, charts (including interactive charts), and a whole lot more besides.

Unlocking the Potential of HTML5 & CSS3

illustration courtesy of 

 Using the canvas is simply a matter of creating the object in HTML5 and then populating it with JavaScript. The techniques involved are a topic for another day, but you can already find some tutorials here on this site that will help get you started.

You don’t need Flash any more

Most of what we previously used Flash for does not require Flash. Now you can do it all with CSS3 transitions, HTML5 drawing, HTML5 animation, HTML5 video and HTML5 audio.

The only things we’re not doing in HTML5 that Flash allowed you to do is spy on your users and violate their privacy, but that is not something you want to do anyway, is it?

Most users found Flash to be very annoying, though most also grudgingly installed it as an inevitable necessity. That was until the serious security risks and privacy problems associated with Flash made it now something that most users either don’t install at all, or activate only on a case-by-case basis when it’s strictly required for a task they want to perform.

CSS3 gives you new pseudo classes

Some pseudo classes were around in CSS2, but with CSS3 you’re able to use important positional pseudo classes to gain more control. Mainly they’re used with text, as the pseudo class names indicate: before, after, first-letter, first line…

You also have access to transitions, which can be used to modify anything at all, including text. These transitions animate or transform what the user sees on the screen.

Your web pages can communicate directly with the GPU

You should do this with some caution, as any kind of hardware acceleration is going to drain battery life from mobile devices, but it’s still pretty cool that you can do it.

GPU acceleration works when you use transitions, 3D transforms, canvas in 3D mode, and WebGL 3D. The latter is my favorite, but you’ll need to do a lot of reading to get to grips with everything involved in WebGL. It will give you a lot of scope for creating animations and games, however.

GPU acceleration doesn’t work with older browsers, even if they support HTML5 and CSS3.

Unlocking the Potential of HTML5 & CSS3

gif courtesy of 

Use game engines to take the hard work out of 3D graphics

Game programmers have been using game engines since forever to make the task of game programming simpler, but it is only in the past year or two that truly capable HTML5 game engines have emerged that could stand up to the task of creating high quality 3D gaming in a browser based environment.

One of the simplest to get started with is PlayCanvas, and even though it’s free to experiment with and really cheap for a personal license, it’s no lightweight. Here’s Swoop, a game created in PlayCanvas:

Unlocking the Potential of HTML5 & CSS3

 

And this is RoboStorm:

Unlocking the Potential of HTML5 & CSS3

Could you create games like this? Absolutely, and it’s far easier now than it has ever been.

For a retro game building experience, try Construct2 or Construct3. It’s got everything you need to start creating games on a drag and drop basis (though some will find this too limiting). You create your games online and people play them online. It’s an engine for those who don’t know any programming and don’t want to bother with learning.

Here’s Kiwi Story, an old-school 2D platformer created in Construct3:

Unlocking the Potential of HTML5 & CSS3

You’re not limited only to gaming with these engines. For making entire movies and presentations, it would be better to use Blender or Maya, and for games dedicated to a specific platform it will usually be better to use a native programming environment dedicated to that platform. For cross-platform interactive games, story telling, education software, or presentations, the HTML5 engines are an excellent option.

HTML5 and CSS3 give you more power

With HTML5 and CSS3 you now have complete control over every element that appears on your page, including the ability to manipulate each object in practically any way you wish.

While the basic unit of construction is still the rectangle, your websites no longer have to follow rectangular linearity. You can put things on any angle you want, rotate them, skew them, twist them and bend them, and your web browser won’t complain a bit.

You can now also control opacity and scaling much more easily than before, and the techniques will work across all the major browsers.

As of the time of writing in early 2018, there are still some issues with scaling between different browsers, with some browsers capable of scaling accurately while others give extremely different results for the same page.

That means that at least for now we are still stuck with having to program different versions of a site if we want to use scaling for responsive purposes.

Fortunately you rarely will ever have a need for that, but sometimes fitting something on the screen no matter how small that screen is will be your primary objective. In those cases, the lack of standardized scaling across different browsers will remain a problem.

Still, these problems are not HTML5 or CSS3 problems, they are problems of the browser developers failing to properly support the features provided by HTML5 and CSS3.

As time goes on, we should see improvements in the browsers, and everything will work as expected. By then it may be time to start learning HTML6 and CSS4, but at least it’s a step in the right direction.

header image courtesy of 

The post Unlocking the Potential of HTML5 & CSS3 appeared first on Design Reviver – Web Design Blog.

Unlocking the Potential of HTML5 & CSS3

Get Free Site Analysis
Featured Services

What our customers say…

Click On Solutions
Reviewed from Google

5 out of 5 stars

Locksmith Mad River
Locksmith Mad River

5 out of 5 stars

posted 1 week ago

Great place to be! Wonderful group of people. Fantastic location. I highly recommended

Barbara Williams
Barbara Williams

5 out of 5 stars

posted 6 months ago

Utilized Click On Solutions to help do a few plans for my logo and the work they did was first class! Was sick of procuring individuals at a mid-cost and getting alright work. At long last got an OK cost with a quality item also. I highly recommend them to everyone. They are the best in their field.

Jones Blaze
Jones Blaze

5 out of 5 stars

posted 9 months ago

I just never knew I could get in touch with so many people just by using some simple marketing tools and targeted Google keywords. The Click on Solution guys (and gals) have been a huge part of the growth that my business has been through in 2017. Being a stay-at-home mom with a creative streak, I have started sowing wedding dresses out of my home in south Florida about 4 years ago, when my first baby was born. Recently, however, I’ve been desperately hoping to increase my clientele throughout the US. I’ve read about other folks who’ve done that, and thought, what is stopping me? I am so glad I signed up for Click on Solutions, because guess what?? I even get orders from around the world now! Places like Canada, Germany and Ireland, to name a few. The best part (besides the obvious increase in revenue) is that learning about all these things, like targeted marketing and business plans, and Google AdWords, has been such a great process! Ronnie and Michelle have explained to me what they’re going to do every step of the way and helped me get on the first page (!) on Google, and it really just tightened my marketing to target those women that want a unique wedding dress made by yours truly! So fun and so cool, I am thoroughly thankful to you guys, and I already told Paul there—when he finally proposes to his girlfriend, I’d like first dibs on designing a one-of-a-kind wedding dress for her! Thank you again, guys!

Anthony Varela
Anthony Varela

5 out of 5 stars

posted 6 months ago

Strong innovative shop with an introduction to the business comes about. Presented by an outsider since we were searching for an imaginative asset to help create sites and versatile applications for our customers; comes about have been solid, on the spending plan and on time. The solid support of the group and its administration ethics. I would definitely recommend them to everyone who need Advertising solutions.

Jillian Morrison
Jillian Morrison

5 out of 5 stars

posted 9 months ago

A lot of the stuff that they were able to help me with were things that I was familiar with BUT they kind basically showed me how my knowledge looks like on steroids, so to speak. So although I'm quite savvy about all these things marketing your website and expanding your clientele through social media, I was still able to make such an amazing use of what this team had to offer! — I got so much more clients and expanded my business through their marketing strategies, that I literally had to hire an assistant. As a by-the-way, I’ve always been envious of people who have personal assistants, and I had always wanted to join that elite group. And now I did, and I wholly feel that it’s thanks to Click on Solutions.