These templates are easy to use and fully customizable, making it simple to create a professional-looking website without breaking the bank. With a responsive design, your website will look great on any device, from desktop computers to mobile phones.

By utilizing templates, you can impress your visitors with your design expertise without needing to be an expert in web design. These templates offer a wide range of features and customization options, allowing you to create a website that stands out from the competition.

Using templates can save you both time and effort when building web pages online. They come pre-built with various design elements, including typography, color schemes, and layouts. This means you don’t have to spend hours creating each page from scratch, freeing up time for other important tasks.

Whether you’re a small business owner, blogger, or designer, you’ll find a free template that meets your needs in this collection. There are templates available for various industries, including business, e-commerce, portfolio, and more.

The post The 50 Best Free Responsive HTML Website Templates for 2024 appeared first on Speckyboy Design Magazine.

People love the simplicity of a pick-up-and-play game. They also love the childhood memories associated with old school titles. Plus, the thought of making new memories by playing with friends and family is still a strong draw.

Designers in particular seem eternally gaga over the likes of Mario, Pokémon, and Sonic. In fact, a jaunt through CodePen shows us there are several odes to classic video games made with good old HTML5, CSS, and JavaScript. Here are 10 of our favorites:

CSS Q*bert by Patrick Cox

The strange little orange creature named Q*bert was all the rage back in the 1980s, even starring in his own Saturday morning cartoon. While this is just a CSS animation, any mention of Q*bert is a good thing.

See the Pen CSS Q-Bert by Patrick Cox

Enduro HTML5 Game by Rafael Castrocouto

Enduro is a racing game originally released back in 1983 for the Atari 2600. No worries if you don’t have a spare cartridge at home – you can play a recreation of the game with this HTML5 version!

See the Pen Enduro – Atari – Html5 Game by rafaelcastrocouto

Media Query Super Mario Bros. by Ashley Watson-Nolan

CodePen is absolutely full of Mario-related goodness. Unfortunately, there’s no way to spotlight all of them. But Media Query Mario is one of the coolest tributes we’ve seen. It’s an animated remake of Super Mario Bros. 3. The only catch is that you have to resize your browser to between 320 and 420 pixels to watch.

See the Pen Media Query Mario by Ashley Watson-Nolan

CSS Sonic the Hedgehog by Ryan Petersen

Nothing said Sega like good old Sonic. Originally introduced back in 1991 for the Sega Genesis console, the little blue guy sped his way into many hearts (where, like Mario, he still resides). He’s also kept up his endurance, as seen in this CSS animation.

See the Pen CSS Sonic the Hedgehog 2:Chemical Plant Zone by Ryan Petersen

The Legend of Zelda by Stix

Zelda was one of those games you could play for hours on end. Thanks to the original’s battery backup included on the cartridge, it was one of the few games of the era that let you save your progress. Here we see Link repurposed nicely for a 404 screen.

See the Pen Retro Error 404 – Zelda 2 by Stix

Asteroids by Artem N

A true classic, Asteroids goes all the way back to 1979. And it’s still just as addictive as it was back in the day. It goes to show fancy graphics only get you so far. You can play right from your browser with this HTML5 Canvas version.

See the Pen Asteroids by Artem N

HTML5 Pac-Man by Hellokatili

The little yellow dot-eater is one of the most recognizable game characters of all time. He (and later, his lady friend) became an arcade sensation. Here, you can chew up dots and outrun ghosts in your browser with this fun HTML5 offering.

See the Pen HTML5 Pacman by hellokatili

Galaxian by Adonis Domingues Vieira

Another spaceship shooter from the ‘70s (1979, to be exact), Galaxian was one of the rare games for its time that was as fun to play at home as it was in the arcade. The otherworldly sound effects were great for driving parents to insanity. Here’s a HTML5/JS edition.

See the Pen Galaxian by adonis domingues vieira

JavaScript Pong by Gabriel Dubé

If you had Pong in your home, you probably got bored after about 20 minutes. But, as one of the first really significant video games, it paved the way for everything to come. Enjoy a JS version of the game below.

See the Pen Pong game with JavaScript by Gabriel Dubé

HTML5 Canvas Pokémon by Panagiotis Vourtsis

Pokémon is the second best-selling game franchise of all time – trailing only Mario. From its humble beginnings for the Nintendo Game Boy, all the way to the hysteria of Pokémon Go, the franchise has remained a cultural phenomenon. Below is a decidedly retro HTML5 Canvas game.

See the Pen HTML5 canvas games – POKEMON ! by panagiotis vourtsis

Going Back to the Future

It’s amazing to think that, decades after their debuts, these games still resonate. But not only are the examples above a testament to the power of classic games, but it also shows how far web development has come in a relatively short amount of time.

Complex games and animations can now be created on the web with just a bit of code. Now, who’s up for some Pac-Man?

The post 10 Retro Video Games Recreated with HTML, JS & CSS appeared first on Speckyboy Design Magazine.

Yet if you dig into various login form pages you’ll find a ton of design ideas. And if you have some code snippets to work with you can quickly build login form pages without coding it all from scratch.

This collection offers 10 of the open source login pages you can use & reformat for any web project.

1. Login Page UI

Developer Khaled Mneimneh built this sleek login UI with some basic CSS3 properties.

The rounded input fields are pretty simple to replicate, and the drop shadow effect doesn’t take many lines of code either. This whole thing could easily work on any website given some time editing the styles and colors.

But the one part that stands out to me is the custom gradient in the submit button. That’s some attention to detail.

2. Gradient Form

Tyler Fry developed a fun gradient page with a dark-styled login form.

The part I like most here is the darker background and how it works great with lighter text in the form.

Typically designers stick to dark grey backgrounds for dark pages, but this one looks fantastic using darker hues in the gradient.

Even the input fields have a bit of style when you focus. Look real close, and you’ll see shadow highlights creeping in on focus.

3. Pure HTML5

The paper stack login form is a pretty common technique for designers. We don’t see this as often nowadays thanks to the popularity of flat design.

Yet I’m still a fan of this style and it’s why this HTML5 form by Vladimir Banduristov deserves praise. It works entirely in HTML and CSS with some very clean form input designs.

But it’s the whole page that stands out, and this is a design you could add to practically any website.

This could even work as a template for a custom WordPress login page if you wanted to go that far.

4. Show/Hide Password Field

The basic dark design in this snippet is super clean and easy to use. But that’s not even the focal point.

As you work through the form you’ll notice the password field has a show/hide button. Typically this is used in mobile apps since it’s harder to type in passwords there.

But you could add this feature to all your login fields just to give users some peace of mind. It’ll help people avoid mistaken logins, and it’s not so much a security issue unless someone’s standing right behind the screen.

5. Clean Login Form

Here’s a super clean blue login page using some brilliant gradient effects.

The input fields actually have a slight outer glow with light borders and a darker text style. The whole thing is just incredibly professional, and I could see this login form being used on everything from startups to corporate websites.

Overall I’m a big fan of this design with a brilliantly styled login to grab anyone’s attention.

6. Apple Dev Login

Developer Christophe Molina created this Apple-style login field designed for a practice Apple Dev panel.

It’s not something that most Apple users would recognize or even use on a day-to-day basis.

But it’s got a really crazy design style with skeuomorphism and a brilliantly-styled header ribbon.

Not to mention the entire form runs on pure CSS which is a real accomplishment by itself.

7. Animated Form

It’s always fun to add some animation into your UI designs. That’s what this form offers with a brief jQuery-powered form animation.

It’s easy to convert this into a working form field even though the demo doesn’t do much. However, you can also handle user inputs directly in jQuery if that’s more your style.

Overall a pretty darn simple design with a not-so-simple animation. But it should be easy enough to replicate given some time to edit the code.

8. Dark Signin

Dark UI design is not the norm on the web. But when it’s done right I personally find dark colors to be much more enticing.

Have a look at this dark login form created by Andreas Storm. It uses bright lime green colors for the login button and the custom radio button.

It’s perhaps one of the most aesthetically pleasing forms in this entire list without too many blinding features.

I highly recommend testing this out for any dark website. It’ll work great as a custom login page or even as a form embedded onto your site.

9. Login w/ Register Modal

You see plenty of login+register modal windows nowadays all powered by JavaScript. And this one by Andy Tran is merely one more example of a nice design mixed with a great user experience.

The page background itself is clean, and the form fields are large enough to quickly grab attention. But if you click the small blue sidebar to the right, you’ll see a registration window flies into view.

This appears on top of the login form so it works just like a typical modal window. Pretty cool effect!

It does require a bit of jQuery but in total this works on 25 lines of JS. That’s impressive considering the incredible usability of this form.

10. Minimalist Login

Super light and super basic is the best way to describe this easygoing form developed by Marcello Africano.

It’s a real basic page, and the form itself is also minimalist enough to blend into any layout. The pen only uses HTML and CSS so you can get this working sans-JavaScript if you’d like to avoid flashy effects.

The post 10 Open-Source Login Page Templates Built With HTML & CSS appeared first on Speckyboy Design Magazine.

Recently, I faced the challenge of setting up an HTML5 video inside a WordPress page. It’s in a static location and would need to be replaced every so often. While it’s fine to use the Video Shortcode, in this case I wanted to make things extra simple for the folks who would be updating the page. I didn’t want them to have to learn what a Shortcode was or how to use it.

So, the simplest solution (in my mind, anyway) was to create some custom fields where the related video files could be uploaded. From there, the theme’s template would automatically create the necessary code to display the video. Here’s how I did it:

Project Requirements

You’ll of course need a WordPress site and access to edit your theme (please use a child theme if you aren’t already doing so). Some familiarity with PHP and HTML will also be a big help. Beyond that, you should have:

• A way to create custom fields. The free version of Advanced Custom Fields (ACF) will do the job quite well. Install and activate it on your WordPress website.
• A video – ideally in multiple formats. Although MP4 files are now supported across every major browser, it might not be a bad idea to provide a WEBM version for extra coverage. And, while you’re at it, a FLV fallback for those using really ancient browsers couldn’t hurt. You’ll want to make sure that each version of your video is set to the same resolution.
• A ‘poster’ image. Either a screen capture or custom graphic made to the highest resolution your video will be played at.

Step 1: Create the Custom Fields

Once you’ve installed and activated the free version of ACF, go to the Custom Fields menu inside WordPress and then click Add New.

Inside your new set of fields (ours are called ‘Video Fields’), you’ll need to create an ACF File field for each video format you plan to upload, plus another for the poster image. In our setup, we have fields for MP4, WEBM, FLV and a Poster. For each file field, make sure to select the radio button in Return Value that says “File URL”. Also, be sure to make note of the Field Names – we’ll need those later on.

Next, inside the ACF ‘Location’ setting, assign your new fields to whatever page or post you’d like and save your work. When you go to edit that assigned page, you should see the fields (you may have to scroll down a bit to find them).

Step 2: Upload Video Files

Navigate over to edit the page or post where you assigned your new custom fields. From there, it’s a matter of uploading the correct files. Once you’ve uploaded the requisite files, save your page/post.

Step 3: Edit the Template

Now comes the fun part – adding some PHP magic to your theme’s template. If you’re not familiar with the WordPress template hierarchy, now may be a good time to study up on it.

Find the correct template file and location where you’d like to place the video. Then, copy and paste the following code snippet and customize to match your needs:

<?php
// Get the Video Fields
$video_mp4 =  get_field('mp4_video'); // MP4 Field Name
$video_webm  = get_field('webm_video'); // WEBM Field Name
$video_flv =  get_field('flv_video'); // FLV Field Name
$video_poster  = get_field('poster_image'); // Poster Image Field Name
                

// Build the  Shortcode
$attr =  array(
'mp4'      => $video_mp4,
'webm'     => $video_webm,
'flv'      => $video_flv,
'poster'   => $video_poster,
'preload'  => 'auto'
);

// Display the Shortcode
echo wp_video_shortcode(  $attr );
?>

The first section of code references the names of the custom fields we created in Step 1. We’re creating a PHP variable for each field (they will output the URL of their respective file), which we’ll need to use in the middle section of code.

Down in that middle section, we have an array of attributes for the wp_video_shortcode function. Notice that there is an attribute for each file type. We’re also choosing to preload the video, but that’s completely optional. Here you can also set width, height, loop and even (gasp) auto-play the video if you like.

The bottom section of code is outputting the result of our work into our template.

Once you have everything set up satisfactorily, you will want to save your template and upload it to your website (or just save if you’re using the built in WordPress theme editor). Then, check your page on the front end to make sure the video is properly displayed.

WordPress has a HTML5 video player built right into the CMS and the default player looks and functions quite well. But you can style various options if you want to give it a more personal touch. Inspect the output code with your browser’s developer tools and make note of the various CSS classes. For example, the container element has a class of .wp-video. You may also want to take a look at a tutorial for a more in-depth look at possibilities.

Custom Fields Simplify the Process

Using custom fields can bring a wealth of new functionality and design possibilities to WordPress. But a core element of their awesomeness is that they can make managing content easier. Regardless of who will be adding and editing content, custom fields can streamline the entire process. That benefits us all, but it’s especially nice for users who aren’t expert developers.

Adding some simple functionality like the HTML5 video fields above can greatly reduce the learning curve a new user faces. Instead of having to think about what they’re supposed to do, it’s now become a matter of uploading a few files.

In the end, that little bit of extra work up front can save everyone some time and headaches for the life of the website.

The post How to Add HTML5 Video to WordPress Using Custom Fields appeared first on Speckyboy Design Magazine.

What is the HTML5 contextmenu attribute you may ask? Basically, it allows you to add different options to a browsers ‘right-click menu’ with just a few lines of HTML and will even work with Javascript disabled. Although, and very sadly, it currently only works in Firefox.

Let me show you how it works:

Using contextmenu is a lot simpler than you may think. All you need is to add the contextmenu attribute like so:

<section contextmenu="my-right-click-menu"> 
<!-- 
    Add anything you want here
  -->
</section>

As you can see you can add it just like you would add any id or class.

Next we create the menu:

<menu type="context" id="my-right-click-menu">
<!-- 
  Here we will add the new 'right-click' menu items 
  -->
</menu>

As you can see the id of the menu must match the name of the contextmenu, this gives more flexibility allowing you to have more than one menu item on the page within different sections.

Next we will add the menu items. Firstly, I will add one menu item with just plain text and an icon, secondly I will add a link for sharing the current page on Facebook, and the third menu item will be a link for refreshing the page, creating a simple contextmenu with three menu items:

<menu type="context" id="my-right-click-menu">
 <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menuitem label="Share on Facebook" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
    <menuitem label="Refresh" onclick="window.location.reload()"></menuitem>
  </menu>

You can also create sub menus just by adding another menu tag inside the existing one, like so:

<menu type="context" id="my-right-click-menu">
 <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
<menu label="Social Networks">
<menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;"></menuitem>
</menu>
    <menuitem label="Refresh" onclick="window.location.reload()"></menuitem>
  </menu>

As you can see with basic HTML5 you can create something really useful. But please be very careful when using it, as it is currently only supported by Firefox.

The post How to Use the HTML5 Context Menu Attribute appeared first on Speckyboy Design Magazine.

Previously, creating a dialog window required that you to use a jQuery plugin like Pop Easy, jQuery UI Dialog, or Twitter Bootstrap Modal. But now with the introduction of HTML5’s new <dialog> element, it has become much easier for developers to create popup dialogs and modals on a web page.

Initially, the <dialog> tag entered the HTML5 spec as a great solution for marking up conversations, but it was dropped from the HTML5 specification back in 2009. Nonetheless, it’s back again in a new form.

In this post, I’ll take you through the <dialog> element and show how you can make the most of it. Let’s begin!

If you want to see the <dialog> element in action or play around with the code, view the live demo here.

Browser Support for the <dialog> Element

Unfortunately, browser support for <dialog> is limited for now. The element is currently only supported in Safari 6.0 and Chrome Canary. Even though Chrome Canary fully supports the tag, you must enable a flag to use it. Go to chrome://flags and enable the flag “Enable experimental Web Platform features”.

After enabling the flag, you must re-launch the browser fot the changes to take effect.

The HTMLDialogElement Interface

The HTMLDialogElement interface, which is included in the HTML specifications for the <dialog> element, has numerous properties and methods that you can use to make your dialogs appear and disappear. They are as follows:

Methods:

The HTMLDialogElement interface has three methods for opening and closing dialogs.

• show(): This method is used to show a dialog. Users can still access other contents of the HTML document as long as a dialog box is open.
• showModal(): Used to launch a “modal dialog”, which prevents a user from accessing anything except the dialog window on a web page.
• close(): Used to close a dialog. You can pass returnValue as an optional parameter that will update the property returnValue.

Properties:

There are two properties included in the HTMLDialogElement interface.

• returnValue: Retrieves the parameter that was optionally passed into close().
• open: This property is a Boolean value. If true, the dialog will be visible to the user. Otherwise, it’ll be hidden.

Events:

When a dialog is closed, a close event will be fired.

dialog.addEventListener('close', function() {
Other code will go here…
});

Apart from these key methods and properties, the <dialog> element also supports:

• form[method="dialog"]: Used to integrate a form with a <dialog>. Only valid inside a dialog.
• autofocus attribute: Used to give focus to a form control inside a dialog.
• cancel event: A cancel event is fired when a modal dialog is closed via “Esc”

Now after understanding the basics of the <dialog> element, let’s get practical with some examples.

Creating a Dialog

Firstly I’m going to show you how to create a simple dialog. The code given below defines a simple <dialog> element with some content, a close button to hide the dialog, and a show button to launch the dialog.

Welcome to Responsive Junction!
Get Your Existing Site to Responsive
Exit

Show Dialog

When you test the above code in your browser, you’ll see nothing except the “Show Dialog” button without any functionality, as shown in the screenshot given below:

To open and close the <dialog> element, you need to use the JavaScript .show() and .close().

(function() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog.show();  
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

Now if you click the “Show Dialog” button, you can see the dialog window in the browser. Clicking “Exit” will close the dialog window. Here is the screenshot:

Adding Style to Dialog

You can add CSS styles to your dialog just as you would do to any other element. By default, the dialog window will be displayed horizontally centered while overlaying other elements. If you’re comfortable with the default position and look, no further CSS is required. Otherwise you can add you own CSS to fit and design the dialog window to your taste, like I’ve done below:

dialog {
top: 28%;
width: 400px;  
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
border-top: 5px solid #eb9816;
}
button{
display: inline-block;
border-radius: 3px;
border: none;
font-size: 0.9rem;
padding: 0.4rem 0.8em;
background: #eb9816;
border-bottom: 1px solid #f1b75c;
color: white;
font-weight: bold;
margin: 0 0.25rem;
text-align: center;
}
button:hover, button:focus {
opacity: 0.92;
cursor: pointer;
}

Creating a Modal Dialog

If you want to prevent your users from accessing the content of your HTML, you can make use of modal dialog windows. As the modal dialog window grays out all other things other than the dialog will be displayed, users will be unable to select the grayed-out text or click to select buttons while the dialog window is open.

Creating modals is similar to creating dialogs, with the only difference of using the .showModal() instead of .show(). There is no need to make any changes in the HTML code.

(function() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog. showModal(); 
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

While default dialogs are displayed horizontally centered, modal dialogs are displayed vertically as well as horizontally centered in the viewport. Also, you can close a modal dialog by pressing the “Escape” key.

Adding Modal Dialog Background Color

The <dialog> element features a pseudo-element called "::backdrop", which only works with Modal Dialogs. Using this element, you can dim the main page in order to communicate to users that it’s not accessible. You can position and style a backdrop by taking advantage of standard CSS properties:

dialog::backdrop{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
}

Implementing <dialog> with a Form

A form can be integrated with a <dialog> element by using form method="dialog". Upon form submission, the dialog window will close and return the value of the submit button via the dialog.returnValue property.

Here is the HTML code for the form dialog:

Do you agree with terms of use?
Enter your text here!

Yes
No


Open Form Dialog

Use the following JavaScript for the form dialog.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = function() {
formDialog.close(value);
};
document.getElementById('formDialog').addEventListener('close', function() {
alert(formDialog.returnValue);
});

Note: For better understanding, I’m using formDialog in place of Dialog in my demo.

If you want to see the <dialog> element in action or play around with the code, view the live demo here.

Conclusion

With the reincarnation of the <dialog> element, it has become much easier for developers to create dialogs without using a jQuery plugin. Even though Chrome Canary and Safari 6.0 interpret the <dialog> element properly, there is a polyfill available to make sure that other browsers will support the element.

If you would like to learn about other HTML5 properties, you might like to check out Getting to Grips with the HTML5 File API, or you might like to learn about the The HTML5 Context Menu Attribute.

The post Creating Native HTML5 Dialog Windows appeared first on Speckyboy Design Magazine.

If you aren’t familiar with the term, a hybrid app is a mobile app written using languages such as HTML5, CSS3 and JavaScript, then compiled into native iOS, Android or other mobile platform code using wrapper technologies such as PhoneGap/Cordova. Additionally, these frameworks have APIs allowing access to native functions such as the camera, GPS, etc.

The allure of HTML5 is hard to deny. If you’re proficient in building web apps, you’re 90% of the way to creating hybrid mobile apps. You can spend weeks learning Swift or Objective C to write your first iOS app or starting building something today that will also run on Android.

Native proponents are quick to say there’s no substitute for natively written apps. Aspects such as speed, stability, smooth transitions and ease of maintenance are major selling points.

Dismal early experiences developing hybrids placed me in the native camp. In 2010, smitten with the promise of “write once deploy everywhere,” I led a team that decided to give PhoneGap a whirl. It didn’t take much time to realize PhoneGap’s limitations. Our client wanted that “native feel,” but it wasn’t possible. Scrolling, fixed headers and transitions were an issue. Performance was awful. The entire project felt like swimming upstream.

That experience forced me to accept that unless we were willing to compromise aspects native apps take for granted, hybrid wasn’t ready for prime time.

Fast forward to 2013. PhoneGap 3 was released. Smartphones such as the iPhone 5 and Nexus 3 demonstrated exponential advances in processing power. OS support of CSS3 had come along considerably. It was time to give hybrid another try at bat.

The result? Mixed. We produced two apps. The first was a relatively simple calculator-style app with some reporting. We purposely avoided transitions between views and other processor-intensive actions. It turned out well—outputting to both iOS and Android was mostly painless. Unless you’re a seasoned mobile developer, you wouldn’t know it was a hybrid.

The second attempt was more challenging. The app was complex and the client had specific requests on how it needed to work. In hindsight, it wasn’t a good hybrid candidate. Despite this, we successfully completed the project. We also learned a ton along the way.

Having since been part of numerous native and hybrid projects, I’ve gained a pretty good perspective on the Do’s and Don’ts of taking a hybrid approach.

First, the good news: yes, hybrid is a viable solution (sorry, native evangelists). Advances in smartphone processing and memory, along with improved frameworks have helped level the playing field. However, there are guidelines one should follow when considering hybrid. Let’s start with the Don’ts.

The Don’ts…

1. Don’t Use Heavy Libraries, Frameworks or Plug-ins
If avoidable, Don’t use heavy libraries like jQuery. If you must use jQuery, opt for the much lighter Zepto.js. Completely avoid jQuery UI and jQuery Mobile. Both these libraries are performance hogs when compiled into mobile apps. jQuery Mobile in particular imposes a lot of rigidness.

2. Don’t Use HTML5 for Apps that are Multi-purpose or Complex
When it first launched, Facebook used a hybrid approach and it was a dismal failure due to performance. Facebook crammed a lot of functionality into the app, weighing it down considerably. When considering hybrid, your concept should be simple.

3. Don’t Load Views All at Once
If your views are a mix of text and graphics, load the text first and the graphics as separate data calls that load sequentially. Speed and performance are paramount to creating an engaging user experience.

4. Don’t Use Hybrid for Animation or Graphic-intensive Apps
For example, interactive games or rich-media.

5. Don’t Expect Your App to Run Perfectly in iOS and Android Out of the Gate
We’ve consistently developed for iOS first, and then re-factored for Android. The “write once run everywhere” mantra just isn’t that simple. Prepare to spend time adjusting your CSS and other formatting to accommodate each OS.

The Do’s…

1. For Data-driven Apps, Do Use Javascript MVC Frameworks Like AngularJS
Angular is particularly well-suited for hybrid apps because it doesn’t rely on heavy libraries like jQuery. Backbone.js has some nice helper libraries like Thorax and Marionette. App.js is a lightweight framework designed for hybrid apps.

2. Do Consider Using a UI Library such as Ionic

Ionic excels at delivering native-like transitions and pairs well with AngularJS.

3. Do Minify HMTL/CSS/JS to Reduce File Size and Improve Performance
Use tools like jscompress.com for Javascript files, and cssminifier.com for CSS. Will Peavy’s HTML minifier will compress your HTML nicely. Be sure to test your app thoroughly after minimizing to ensure everything works.

4. Do Crunch All Your Graphics
There are plenty of graphics optimizers out there. Tinypng.com is great at reducing PNGs without compromising quality.

5. Do Test for Performance
Clunky or inconsistent view transitions and slow load times make an otherwise great app unpolished. If you’re using PhoneGap/Cordova, test your hybrid apps using a tool like Browser-perf. Third-party services like New Relic’s mobile monitoring pinpoints issues across response times, errors, carrier performance and versioning optimization.

6. Do Use Chrome Canary to Emulate Different Environments
Canary’s Developer tools will emulate different devices and network speeds when testing your app.

7. Do Take Advantage of Local Storage
By leveraging local storage, your app can re-render views and reduce service calls. Speed is a big issue for hybrid apps and local storage increases performance.

8. Do Consider Learning a Hybrid Development Framework
There are numerous frameworks and platforms out there for developing hybrid apps. I’m particularly impressed with the offerings from AppGyver. Their platform uses a mix of native and hybrid components and is rooted in AngularJS. In evaluating several hybrid frameworks, I’ve found AppGyver’s Steroids platform produces incredibly responsive, native-like apps.

Conclusion

Native has clear advantages, but hybrid apps have come a long way. Recent platforms and frameworks have brought powerful new ways of building apps to the forefront of mobile development. If you’ve tried hybrid in the past with less than spectacular results or are considering it for the first time, there’s no better time in history to give it a try!

The post The Do’s and Don’ts of Building HTML5 Hybrid Apps appeared first on Speckyboy Design Magazine.

In this article, we will give you an overview to the two main media tags that you can use with HTML5: <audio> & <video>

The <audio> Tag

The audio tag allows you to put a music file directly into the HTML code without the use of a plugin, such as Flash or Javascript. There are three types of audio formats that are compatible with this tag: .ogg, .mp3 and .wav. However, some of these file types will only work with certain browsers. Here is a handy chart to show you which files are compatible with each browser.

Take care when using this tag! Make sure that the audio is not set to auto-play, or even auto-load – Give the user the choice of visiting your website in silence. Also, don’t make the music excessively loud. JUST LIKE IF I WERE TO WRITE THIS WHOLE ARTICLE IN CAPITAL LETTERS, IT WOULD TURN YOU OFF READING THE REST OF IT. (But, please keep on reading. I won’t do that again.)

One possible use of this tag could be for bands who want to get their music known, so they stick it up on an HTML5 compatible website.

Example Code

<audio src="audio.mp3" controls="controls">Your browser does not support the audio element</audio>

Example

Music Source

Try the audio code here →

The <video> Tag

One of the more exciting tags is the video tag. There has never before been a standard for video formats on the web. HTML5 is going to change all that.

Again, there are only three video formats that are supported with the <video> tag, they are: .ogg, MPEG4 and WebM. Here is another chart it show you which browsers are compatible with each format.

As opposed to what I had said about the <audio> tag, you could should set the <video> tag to auto play for the video. The only caveat is that you must start the video in mute (explained below), or at least in a low volume. At least the user will have a visual warning before the sound starts. You could even start the video off in muted audio if you want.

The only problem that I can see with this tag is if the video file is too large. Due to people wanting immediate action whenever they arrive onto a site. They don’t want to be waiting for 3 minutes, they could get bored of waiting and end up skipping the video altogether.

One possible use of this tag would src=”https://speckyboy.com/wp-content/uploads/2011/04/. You could make a nice Flash animation, render it as a MPEG4 and set it to autoplay on one of your clients’ sites.

Example Code

<video src="video.mp4" controls="controls">Your browser does not support the audio element</video>

Example

Video Source

Try the video code here →

Guidelines about Attributes

1. I don’t want to hear music right away when I go onto a website. As I had said before, users should get the choice if they want to listen to music or not. One of the guidelines that I would have to set would be to never use the audio autoplay="autoplay" attribute.

This also applies to video on the website. Always have the audio=muted attribute for the video tags, unless you really want to surprise them with the sound from the video.

2. Another guideline would be to have controls="controls" attribute in any use of the <video> or <audio> tag. Again, it’s all about the user having control with what they want to see or hear on the website. The only exception would have to be if you were using a video as a constant animation, then you wouldn’t need this control attribute.

3. To stick a video or an audio file into a webpage, remember the "src" attribute. It works exactly as if you were to put an image into a web page.

Conclusion

Some would argue that these two media tags are the most important part of HTML5. They allow people with basic HTML5 experience to add dynamic elements on the page without having to resort to using complex Javascript or Flash coding. Designers have to keep up with the development of new tools and update their tool box. It’s a new thing to learn in a discipline where we have to keep learning. So jump to it before HTML6 comes out!

The post Guide to HTML5’s Media Tags – Audio and Video appeared first on Speckyboy Design Magazine.

Consequently, we observed that an increasingly higher percentage of traffic was coming from phones and tablets. Should we continue to build just on the web? Should we abandon the web and build strictly for iOS and Android? Should we do both? Should we use a framework like PhoneGap or Ionic? After doing our due diligence, we built and released one single HTML5 app to support all users on all devices. Here’s why:

We’re a Small Team…of Web Developers

A little background on our company. We’re a small team of six full-time employees, most of whom spend most of their time on our e-commerce company that pays the bills. We had one developer (myself) and one designer to dedicate to this project.

Neither of us has had any experience deploying a commercial iOS or Android app, whereas we have both been developing commercial websites (including our own e-commerce software from scratch) for many years.

We work hard to keep ourselves up to date on the latest in the rapidly changing web design, web development, and web marketing communities. That, in and of itself, takes a lot of work. It would be naive to think that we could just jump in to building native apps and create anything near the quality of product that we expect from ourselves in any reasonable amount of time. We’d also be at the risk of spreading ourselves too thin – becoming capable at a lot of things but not exceptional in anything. We wanted to focus on what we do best, and that’s building for the web.

The Business of Building Once, Deploying Everywhere

HTML5 apps offer tremendous business advantages. We were able to reduce development time and cost, both up front and for the future. We can literally build once, deploy everywhere, as opposed to having to update several platforms at once. When there’s a bug fix or a new feature, we can release it as soon as it’s ready. It’s deployed to all of our users instantly, without having to wait for app store approval.

We’re allowed to show whatever ads we want or to accept whatever form of payment we choose without giving app stores a cut. HTML5 apps keep overhead low. It allows for us to spend more time on marketing, customer service, and all of the other aspects involved in running a business.

It’s a Better User Experience

Every other advantage in the world wouldn’t matter if HTML5 apps didn’t create a better user experience. The modern web browser is an incredible platform. For our service, it lacked nothing. Unless you need to access native functionality of a device like the camera or GPS system, or you’re building a game, there is no inherent need to go native.

Native apps might even create a fragmented experience where the user has to re-orient themselves to the app on each platform (Twitter is a great example of this inconsistent experience, although it’s getting better).

Comparatively, LockerPulse just "feels" the same whether you’re on an Android phone, iPad, or a Windows computer with a high-resolution monitor. The responsive design scales in a way that feels both familiar to the other experiences and custom to your current experience, something that’s easier to achieve in the browser than from platform to platform.

Browser fragmentation on the web is disappearing as well. The majority of our visitors (roughly 75%) use a WebKit based browser. WebKit is used for Safari on iOS, Chrome on Android, Safari and Chrome on the desktop, and even Internet Explorer 6 -8 using Google Chrome Frame.

With HTML5, responsive design using CSS3 media queries, and jQuery and other modern Javascript libraries, it’s possible to build a web app for a service like LockerPulse that does everything a native app could. The META tags recognized by both iOS and Android enable you to easily add an additional "native feel" to any web app. One of the simplest examples is creating a home screen icon so that users can launch the web app as if they’re launching a native one (we use the iOS Add to Home Screen script to prompt users to do this on their first log in on an iOS device).

The browser also just makes practical sense for any app like ours that does a lot of linking to stories on the web. We feel it’s a far better experience to switch browser tabs than it is to toggle between apps or to build a half-baked browser into a native app. Having our site indexable by search engines also ensures that each site we link out to gets the credit it deserves in the search results.

A Belief in the Future of the Open Web

As a company we’ve been fortunate enough to make our living on the web. We feel a strong sense of appreciation for all that the open web has to offer, along with a belief that the best is still to come.

We believe that the world is a better place with a free and open web, as opposed to the corporate controlled, walled gardens that are our current app stores. Whatever we lose in distribution and publicity of being in app stores is well worth the trade-off to us.

We’ve supported the W3C by buying our team the official HTML5 shirts that say “I’ve seen the future. It’s in my browser.” That’s not just an expression; it’s something we believe to be true. I think that the native app is a temporary solution.

Once connectivity becomes more ubiquitous, and the browser’s capability to access native resources expands beyond desktop notifications and launching default email programs, it’s my belief that the native app will cease to exist. That might be two years from now, it might be ten years from now, but I think that it will eventually happen.

When you start to ask yourself what skills to invest in for your career, and what platforms to build your business on, developing HTML5 apps seem like a pretty attractive choice.

The post Why We Chose HTML5 over Native Apps appeared first on Speckyboy Design Magazine.

Its advanced multimedia has enabled us to build creative websites with smooth transitions, fancy images sliders, and animations that previously had been built with Flash, JavaScript, or some seriously hardcore designing.

HTML5 brings a slew of new features any web designer should be excited over. First and foremost, HTML5 brings new media features and elements such as video, audio, the amazing canvas, making it easier to integrate media components into websites without using proprietary software (e.g. Flash, Javascript).

So, if you’re in need of inspiration or some direction for your next HTML5 website, we’ve compiled a round-up of 30 of the most creative and innovative HTML5 sites to dive into. We also have some free HTML5 web templates, just in case that’s what you were looking for.

1. The Mustache Game

The Mustache Game allows users to play a game where they have to add mustaches to people via video platforms like YouTube or Hulu. The site uses the <video> element to embed the movies.

2. Brandon Generator

Brandon Generator is an interactive story created to promote IE9. The site uses a mix of technologies (HTML5, CSS3, and jQuery), along with SVG and canvas to create fantastic animations and transitions, offering a visually rich and interactive experience.

3. Roger Dubuis

Swiss watchmaker Roger Dubuis’s use of HTML5’s video and audio features provides an unforgettable experience via interactive introductions to each timepiece. The site also uses the History and Geolocation API to offer visitors the location of their nearest store.

4. Björk

The Icelandinc pop icon Björk’s HTML5 website uses the Canvas element’s illustrative prowess to help create the amazing 3D galaxy. The galaxy can be rotated with the mouse cursor and a recording of Björk plays as you enter the site. Out of this world!

5. Metropol Band

This nice-looking HTML5 site uses a combination of canvas, Drag-and-Drop API and video that turns it into an interactive and fun video jukebox.

6. James Anderson

James Anderson’s website uses inline SVG to create appealing graphic visualizations of his stats. The site focuses on the cricket player’s career in numbers, and by using animation with the figures it makes it look like a huge interactive infographic.

7. Lois Jeans

This site uses HTML5 video. In addition, the <video> tag element is implemented with three alternative versions is a .ogv, .webm and .mp4 is a thus allowing optimal playback in most browsers.

8. Fritzo

If you ever wanted to learn how to play the piano, here’s your chance. Using the canvas element the site incorporates audio and the ability to interact with the keys with the mouse. Have a go at being Mozart.

9. Webcam Toy

This site is one of those examples of HTML5 replacing content originally built in Flash. HTML5’s new getUserMedia API defined by W3C allowed the site owner to switch from Flash and have browsers access the camera without having to use a plugin.

10. The Beast

Here is another creative example that showcases the possibilities of HTML5. The site self-scrolls as a poem is read out and at the same time illustrations and animations are revealed with some nifty effects.

11. Arcade Fire: The Wilderness Downtown

Written and directed by Chris Milk, this Google Chrome experiment is a stunning example of the versatility of HTML5. Visitors can input their address and the interactive music video will play out using Google Earth in the background. Give it a go!

12. Soul Reaper

This stylish digital comic book is brought to life using HTML5, through a combination of transitions and animations. Great fun for comic book fans.

13. Universeries

This interactive encyclopaedia of the biggest television series creators in Hollywood puts HTML5 visualisations to great use. Definitely worth checking out, especially if you’re a TV series fan.

14. The Expressive Web

The Expressive Web was created by Adobe to present a fantastic HTML5 user guide and showcase the functionality and power of HTML5 and CSS3.

15. CNN Ecosphere

CNN Ecosphere is a real time global representation of tweets around the Rio+20 Earth summit. The goal is to get visitors to plant “thoughts” using twitter and the hashtag #RIO20. Once enough tweets are “planted”, HTML5’s visualisation kicks in to create a beautiful sphere. Each bud representing a tweet.

16. Three Dreams of Black

Another interactive video by Chris Milk and his friends over at Google, this is an ingenious way to promote the album “Rome” created by Danger Mouse and Daniele Luppi. The site uses WebGL to add interactivity with objects in the video which react to the music and user input.

17. This Shell

Yet another unique and engaging way to promote an album, this site uses a simple puzzle game created using the canvas element, which needs to be solved within the allocated time limit. If you complete it, you are rewarded with a free download.

18. inTacto

inTacto uses HTML5, jQuery and Parallax to show a decade of history through a digital universe trip. What’s interesting is that when you enter the site, you have different possibilities to navigate through, either automatic or manual, using your mouse or keyboard arrows.

19. Google’s Arms Globe

Google’s arms trade visualisation presents arms imports and exports as lines between countries and details data on arms spending and percentage changes between 1992 and 2010. Project lead Michael Chang said this was a “pretty classic ‘make this data look sexy’ type of exercise”.

20. Wrangler Europe

In the past few years, Wrangler has been using the latest technology to create an online presence that supports its brand values. Its current website shows just how HTML5 can be used to showcase products online in an attractive way. They developed technology to animate film sequences within the 3D space and added a music soundtrack to each scene as well as sound effects that are synced to the interactions with the site. This is the ultimate user experience so don’t miss out.

21. Happiness Included

This piece of creative work takes you through an interactive journey of the “perfect holiday”, from beginning to end. You can either let it play automatically or you can control it manually by scrolling through the pages. Give it a go!

22. Frequency 2156

Frequency 2156 is a community-based internet radio station following a post-apocalyptic story from the year 2156 where users can send content. It uses new HTML5 techniques including canvas, video & audio, WebGL as well as CSS3 animations and transitions.

23. Creative9

Creative9’s space themed website uses a combination of HTML5 and CSS3 animations that makes the site look very life-like.

24. Wildlife

This interactive one-page website showcases a crew of digital pioneers, charting the unknown and mapping the digital future for those that have the courage to venture into the unprecedented and the unexplored.

25. Nike Jumpman

This site uses “scrolling storytelling” to offer an interactive visual representation of shoes and their features. Swiping up and down transitions the user through the product story while also offering a few stops along the way to access more information.

26. Saucony Kinvara 3

The Saucony Kinvara 3 website provides a fantastic interactive experience. What makes it so great is the narrative of the shoe coming together.

27. Vlog

This is Marco Rosella’s rotating HTML5 collection of YouTube and Vimeo favourites. It’s a HTML5 rotating site that lets you discover various videos by switching between the two video sources.

28. Danger of Fracking

This is a one-page parallax scrolling website that explains what resources and materials go into the controversial processes of Hydraulic Fracturing. The process is explained in a fantastic, long page that uses some nice illustrations & graphics and makes great use of parallax scrolling and CSS instead of Flash. Definitely worth checking out.

29. Screentoys

Screentoys is a creative JavaScript/ HTML5 experiment that uses CreatJS, Canvas and the data attributes to provide a fun, interactive experience to its users. You get to choose famous faces, morph them into strange creatures and then save or share them with others.

30. Art Ingenious

Art Ingenious is a single page HTML5 site where you get to scroll to navigate through the pages. It’s clean yet effective so check it out.

Rounding Up

The possibilities with HTML5 are endless. So let your imagination run wild and get creative!

Any other creative HTML5 websites you’d add to this list? Go ahead and share them in a comment below.

The post 30 Creative HTML5 Sites for Web Design Inspiration appeared first on Speckyboy Design Magazine.