5 Templates For HTML5 That Every Designer Needs To Know

There are a number of reasons why a web designer would want to use an HTML5 template, the key one being that they need a little assistance in kickstarting a project. If you have never used a template before, you might be unaware of how to find a good one. We have shared 5 of the best template providers that will have you designing for HTML5 in no time.

  1. FlexApp
    This is a mobile-first template that has been designed to deliver premium experiences on mobile devices. The provider also offers support for tablets and desktops, allowing you to ensure that the website looks great on all platforms. One of the main reasons this provider is so popular is that it forces you to think about what content is important.

    flex-app

  2. HTML5 UP
    The increase in better platforms and devices has meant a greater need for crosstesting. This has resulted in a flow of fully responsive, fail-proof HTML5 templates that require little to no coding. HTML5 UP is perfect for designers who are short of time or are after high quality results but actually have very little knowledge of front-end code.

    html5up

  3. Initializr
    This provider is a little different to the others in that it allows you to select a base template, then allows you to select other features that you would like to include (such as Google Analytics, Robots.txt and .htaccess configurations). It also offers support for HTML5 Boilerplate and Bootstrap, which is good to note.
    initializer
  4. Templated.Co
    This provider actually offers a pretty impressive collection of over 800 responsive HTML5 templates, which are ready for designers to implement in their projects. The website also offers a good variety of designs that are ready to download in a single client, which is perfect if your skills in the field are practically nonexistent.
  5. W3 Layouts
    This provider offers plenty of great templates that are sure to give your website a good responsive starting point. To make your life easier, all of the designs have been split into categories so that you can browse how you like. The designs have also been optimised for both mobile and desktop browsing for your convenience.
    w3_layout

Regardless of the reason you are looking for an HTML5 template, we hope that the above list of providers helps you to find exactly what you’re looking for. These templates are suitable for both web designers with little code knowledge and the general public who would like to tackle website projects on their own. Happy browsing and good luck with your endeavour!

The Best Emulators For Testing Your Mobile Web Design

Every day, the number of people accessing the internet via their smart phones and other mobile devices (such as I Pads and tablets) is growing. Many believe that it won’t be long before this is the norm in terms of surfing the net, leaving desktop computers and even laptops far behind. Because of this, it is important that all companies focus on mobile web design.

Whilst it is possible to create a website specifically for mobile devices, it is also possible to make a single site (known as a responsive one) that can be accessed appropriately on all devices. Simply creating a design that can be viewed on a smart phone is not enough, however; you need to test the site out and make sure that it works on these smaller devices and platforms.

This can be achieved with the assistance of mobile emulators, which allow you to check the site’s responsiveness and functionality across a variety of platforms. Some of the better emulators out there include: ‘Mobi Ready’ (which also allows you to check dot Mobi compliance); ‘Screen fly’ (which covers a variety of platforms); and ‘Responsive’ (which allows you to check responsiveness).

The other great thing about using an emulator to test your mobile website design rather than the devices themselves is that they provide you with free feedback regarding the functionality and responsiveness of your site. They also ensure that you can test the design on all platforms and devices without having to actually go out and buy them, which will save you money.

 

Why Touchscreen Target Sizes Are Imperative To Mobile Web Design

Think about the last time you looked something up on your mobile phone – did you keep hitting the wrong link or button when you were trying to navigate the site? This is a clear sign that the designer or developer has little experience with mobile web design, as they have failed to take into account the fact that fingers need a large target size for clicking.

But how big do these targets need to be to ensure that touchscreen users can navigate the website in relative ease? Even though developer guidelines for these sorts of features do exist, these guidelines don’t seem to be consistent with each other. When Apple says that they expect a minimum target size of 44 x 44 pixels and Nokia says that they will accept a minimum of 28 x 28 pixels, you can see why there is a problem.

Would you be surprised to learn, then, that both of these recommendations are entirely too small for most fingers? The average index finger size is around 45 to 57 pixels square, whilst the average thumb is about 72 pixels square. If you are working to the recommendations provided by Apple, your users will probably find that they are still experiencing the same problems.

As mobile web design becomes more and more popular, it is imperative that you take into account the target sizes that you are using. When testing how the design works, ask yourself whether you would struggle to press links and use the navigation or whether you would find it fairly easy. If you think that you would still struggle, you should consider making targets bigger.