iPixel Creative is a Singapore web design and development Company. At iPixel Creative, we provides web design solution which helps your company stand out from the competitors. Our Solutions includes web design, website development, cms development, ecommerce solution and hosting solutions.
Are you looking for a quick and easy to edit platform to speed up your web design process? Well, you have come to right place. We have collected 50 fantastic pre-built responsive HTML5 templates that with just a little bit of creative tweaking will have your web design project live in no time. And the best thing is they are all FREE!
A readymade template is the perfect option for you to build a powerful website for your business. There are numerous professionally designed templates available, but fairly often they require a degree of customization. Eventually, you find yourself with lines of code to change to get the required result. It’s great if you know some HTML and CSS basics, but what’s the option for those users who don’t know a thing about coding?
All templates you find in this collection have been sourced only from trusted websites. They are also built in accordance with the latest web design trends and combine a striking look with unmatched functionality. In addition, they feature a number of cool effects like parallax scrolling, mega menu, responsive design and much more. Here they are:
If you’re familiar with the HTML progress bar, which shows how much of an activity has been performed, you will find that the meter element is similar to that – both show a current value out of a maximum value. But unlike the progress bar, the meter bar is not to be used to show progress.
It is used to show a static value in a specific range, for example you can indicate the storage space used in a disk storage by showing how much of the storage space is filled and how much is not.
On top of that, the meter element can also be used to visualize up to three regions within its range. Reusing the storage space example, instead of only showing how much space is occupied, you can also visually indicate whether the occupied space is only sparsely filled (lets say below 30%) or near half full (between 30 to 60%) or more than half full (above 60%) using different colors. This helps the users know when they are reaching the storage limit.
In this post, we’ll show you how to style the meter bar for both purposes mentioned i.e. a simple gauge (with no indicated regions) and two examples of gauges with 3 color-indicated regions. For the latter, we will work on creating a "marks" gauge for showing poor, average and good marks, and a "pH" gauge for showing acidic, neural and alkaline pH values.
Attributes
Before we start with the examples and go in-depth, let us take a quick look into its list of attributes below, more about these attributes like their defaults, etc. will be covered in the examples.
value – The value of the meter element
min – The minimum value of the range of the meter
max – The maximum value of the range of the meter
low – Indicates the low boundary value
high – Indicates the high boundary value
optimum – The optimum point in the range
1. Styling A Simple Gauge
Here’s a very simple example using only one attribute, the value. Before we proceed, we need to know three things first:
(1) There is a default min and max value defining the range of meter, which is 0 and 1 respectively. (2) If the user-specified value does not fall within the meter range, it will take the value of either min or max, whichever it is closest to. (3) The Ending tag is mandatory.
Here is the syntax:
<meter value="0.5">0.5</meter>
Alternatively, we can also add min and max attributes thus providing a user defined range like so:
<meter min="10" max="100" value="30"></meter>
2. Styling The "Marks" Gauge
First, we need to divide the range into three regions (left/low, middle, right/high). This is were low and high attributes come into play. This is how the three regions are divided.
The three regions are formed between min & low , low & high and high & max.
Now it is obvious that there are certain conditions low and high values should follow for the three regions to be formed:
low cannot be less than min and greater than high & max
high cannot be greater than max and less than low & min.
And when a criteria is broken both low and high will take on the value of the other variable in the criteria which is not satisfied, i.e. if low value is found lower than min which it shouldn’t be, low will get the min value.
In this example, we will consider our three regions from left to right to be:
Poor: (0-33)
Average: (34-60)
Good: (61-100)
Hence, the following are values for the attributes; min="0" low="34" high="60" max="100".
Here is an image visualizing the regions.
Even though there are three regions in the meter we created just now, it will indicate only two "kinds" of regions in only two colors at the moment. Why? Because optimum is in the mid-region.
Optimum Point
In whichever region (of the three) the optimum point falls in, it is considered as an "optimal region" colored green by default. The region(s) immediately next to it is called the "sub-optimal region" and it is colored orange. The one farthest away is a "not-much-of-an-optimal region", colored red.
So far in our example we have not assigned a value for optimum. Hence, the default value becomes 50, making the mid-region the "optimal region" and the ones right next to it (both on the left and right) as "sub-optimal regions".
In short in the above case, any value to the meter element that falls into the mid-region is indicated by green; the rest orange.
That’s not what we want. We want it colored this way: Poor (red), Average (orange), Good (green)
Since the right-region is to be considered our optimal region, we will give optimum a value that will fall into the right-region (any value between 61-100, including 61 & 100).
We’re taking 90 for this example. This will make the right-region "optimal", the middle (its immediate next region) "sub-optimal" and the far left the "not-much-of-an-optimal" region.
This is what we will get on our gauge.
2. Styling The "pH" Gauge
Before we begin our final example, please take note of this that the CSS styles are User Agent dependent and experimental.
First, a breather on pH values. An acidic solution has a pH of less than 7, an alkaline solution has a pH of greater than 7 and if you land on 7, that’s a neutral solution.
Thus, we will use the following values and attributes:
low="7" , high="7", max="14", and the min will take the default value of zero.
Before we add the rest of the attributes to complete the code, let us decide on colors: Acidic (red), Neutral (white) and Alkaline (blue). Let us also consider the acidic region (left-region below 7) as "optimal"
Here are the CSS pseudo elements we will target to get the desired visual in firefox. (For the webkit meter pseudo elements and more, refer to the links listed under "reference".)
Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.
If you’re familiar with the HTML progress bar, which shows how much of an activity has been performed, you will find that the meter element is similar to that – both show a current value out of a maximum value. But unlike the progress bar, the meter bar is not to be used to show progress.
It is used to show a static value in a specific range, for example you can indicate the storage space used in a disk storage by showing how much of the storage space is filled and how much is not.
On top of that, the meter element can also be used to visualize up to three regions within its range. Reusing the storage space example, instead of only showing how much space is occupied, you can also visually indicate whether the occupied space is only sparsely filled (lets say below 30%) or near half full (between 30 to 60%) or more than half full (above 60%) using different colors. This helps the users know when they are reaching the storage limit.
In this post, we’ll show you how to style the meter bar for both purposes mentioned i.e. a simple gauge (with no indicated regions) and two examples of gauges with 3 color-indicated regions. For the latter, we will work on creating a "marks" gauge for showing poor, average and good marks, and a "pH" gauge for showing acidic, neural and alkaline pH values.
Attributes
Before we start with the examples and go in-depth, let us take a quick look into its list of attributes below, more about these attributes like their defaults, etc. will be covered in the examples.
value – The value of the meter element
min – The minimum value of the range of the meter
max – The maximum value of the range of the meter
low – Indicates the low boundary value
high – Indicates the high boundary value
optimum – The optimum point in the range
1. Styling A Simple Gauge
Here’s a very simple example using only one attribute, the value. Before we proceed, we need to know three things first:
(1) There is a default min and max value defining the range of meter, which is 0 and 1 respectively. (2) If the user-specified value does not fall within the meter range, it will take the value of either min or max, whichever it is closest to. (3) The Ending tag is mandatory.
Here is the syntax:
<meter value="0.5">0.5</meter>
Alternatively, we can also add min and max attributes thus providing a user defined range like so:
<meter min="10" max="100" value="30"></meter>
2. Styling The "Marks" Gauge
First, we need to divide the range into three regions (left/low, middle, right/high). This is were low and high attributes come into play. This is how the three regions are divided.
The three regions are formed between min & low , low & high and high & max.
Now it is obvious that there are certain conditions low and high values should follow for the three regions to be formed:
low cannot be less than min and greater than high & max
high cannot be greater than max and less than low & min.
And when a criteria is broken both low and high will take on the value of the other variable in the criteria which is not satisfied, i.e. if low value is found lower than min which it shouldn’t be, low will get the min value.
In this example, we will consider our three regions from left to right to be:
Poor: (0-33)
Average: (34-60)
Good: (61-100)
Hence, the following are values for the attributes; min="0" low="34" high="60" max="100".
Here is an image visualizing the regions.
Even though there are three regions in the meter we created just now, it will indicate only two "kinds" of regions in only two colors at the moment. Why? Because optimum is in the mid-region.
Optimum Point
In whichever region (of the three) the optimum point falls in, it is considered as an "optimal region" colored green by default. The region(s) immediately next to it is called the "sub-optimal region" and it is colored orange. The one farthest away is a "not-much-of-an-optimal region", colored red.
So far in our example we have not assigned a value for optimum. Hence, the default value becomes 50, making the mid-region the "optimal region" and the ones right next to it (both on the left and right) as "sub-optimal regions".
In short in the above case, any value to the meter element that falls into the mid-region is indicated by green; the rest orange.
That’s not what we want. We want it colored this way: Poor (red), Average (orange), Good (green)
Since the right-region is to be considered our optimal region, we will give optimum a value that will fall into the right-region (any value between 61-100, including 61 & 100).
We’re taking 90 for this example. This will make the right-region "optimal", the middle (its immediate next region) "sub-optimal" and the far left the "not-much-of-an-optimal" region.
This is what we will get on our gauge.
2. Styling The "pH" Gauge
Before we begin our final example, please take note of this that the CSS styles are User Agent dependent and experimental.
First, a breather on pH values. An acidic solution has a pH of less than 7, an alkaline solution has a pH of greater than 7 and if you land on 7, that’s a neutral solution.
Thus, we will use the following values and attributes:
low="7" , high="7", max="14", and the min will take the default value of zero.
Before we add the rest of the attributes to complete the code, let us decide on colors: Acidic (red), Neutral (white) and Alkaline (blue). Let us also consider the acidic region (left-region below 7) as "optimal"
Here are the CSS pseudo elements we will target to get the desired visual in firefox. (For the webkit meter pseudo elements and more, refer to the links listed under "reference".)
Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.
A readymade template is the perfect option for you to build a powerful website for your business. There are numerous pro designed templates available but fairly often they require a degree of customization. Eventually, you find yourself with lines of code to change to get the required result. It’s great if you know some HTML and CSS basics, but what’s the option for those users who don’t know a thing about coding?
All templates you find in this collection have been sourced only from trusted websites. They are also built in accordance with the latest web design trends and combine a striking look with unmatched functionality. In addition, they feature a number of cool effects like parallax scrolling, mega menu, responsive design and much more. Here they are:
If you need an up-to-date website with a hot look and advanced functionality this Landed template will be a perfect choice. It features a full-screen image at the top of the homepage, lazy loading images with parallax effect and much more.
This template offers a clean and responsive layout that allows you to engage more visitors as it automatically adjusts your pages to any screen resolution whether it is a desktop or a tablet.
Here is a responsive HTML5 template specially designed for cafe and restaurant websites. It is loaded with an assortment of cool effects like burger menu, full-screen slider, lazy-load, parallax and hover effects.
This one page template can be a perfect fit for an online CV or portfolio. It combines a lovely design with great functionality and features a full-screen slider with fixed mega-menu, gallery with lightbox, etc.
Alpha is another pro-designed template that features a simple design with clean layout. Thanks to these features it will be a great fit for business websites.
Choose this creative HTML5 template to give your design agency a brand new look. It is built in accordance with the latest web design standards and features a large hero area, clean layout, image with parallax effect, full-width Google maps, etc.
Need a powerful template for a blog? Ion would be a great option for that as it offers a clean and minimal design. It offers a full-width image at the top of the homepage and a fixed mega menu.
This simple HTML5 template with a clean and responsive layout will be a great option for blogs and online education courses. It features an image with parallax effect and mega-menu.
Modi is a pro designed HTML5 template with a number of cool effects that give it a touch of personality. It features a full-screen slider, fixed mega menu, images with hover and parallax effects, animated backgrounds, etc.
This one page portfolio website can be quite handy if you are a freelance designer, copywriter, or whatever. Thanks to a vertical menu at the left sidebar it ensures user-friendly interface and advanced navigation.
Build a powerful corporate website with this pro designed template that features a full-width slider, fixed mega menu, parallax, hover and lazy load effects.
Photon is a one page HTML5 template that features images with parallax effect and buttons with hover. Chose this template to give your online resume a striking look.
This HTML5 template is specially designed for layers so it features a conservative look with a clean and minimal layout. Thanks to a fully responsive design the website will automatically adjust to any screen resolution.
Highlights is a one page template specially designed for online CVs and portfolios. It offers a full-screen slider and a responsive design that makes the website perform equally well on screens of different sizes.
This template is a great option if you need both a conservative and modern look. It features images with parallax effect and a clean layout.
Finished!
Go ahead and find a suitable template for your website and give it a brand new look and enhanced functionality. With any of these HTML5 templates you will surely cultivate a growing audience and increase your conversion rate. If you like, you could check out last years HTML5 template collection as well.
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!
