HTML5 and Website Design Checklist for Better Web

Learn more about HTML5 and some important elements of website design that must be considered when creating a web design.

This is the era of Internet, were most of the people spending a lot of their time inside their browsers. Websites became more and more rich and engaging.

But most of the people didn't aware, what kind of technology behind their browsing experiences. Actually, there are a lot of technology that make our life on the browsers better. There are scripting language like PHP or Javascript, server technology like CGI, web services, or Java-based technology like JSP or servlet.

Whatever the technology being used to create a web page, they must create a single universal page that can be read by browsers. This universal page must be formatted in HTML.

Say Hello to HTML5

HTML5 elements

via:http://m5designstudio.com/2013/orlando-web-design/html5-for-beginners-2/

HTML or (Hyper Text Markup Language) is a markup language that primarily used in world wide web. The development of HTML initiated in 1991 and now became standard in displaying information on the web.

The latest standard version of HTML is 4.01. Right now, World Wide Web Consortium (W3C) is making a new standard that we called HTML 5.

HTML 5 initiated for the first time in 2008 by W3C and WHATWG (Web Hypertext Application Technology Working Group). Before HTML5 initiated, there are a lot of developer that didn't follow the last standard of HTML (which is HTML 4.01).

HTML5 is trying to re-standard the web and adding extra functionalities to make a richer engaging experience in the world wide web.

It has new elements such as <video> and <audio> replacing the <object> tag. With these two new tags, we can directly embed video and audio files. This means we don't have to use Flash anymore in order to display video or audio files.

Another new elements give semantic meaning such as <nav> and <footer> in order to replace <div>and <span>. Brand new element called <canvas> also introduced. <canvas> tag can be used to draw 2D directly on the browser. HTML5 also supported by Javascript and the new CSS3 that has animation functionality.

Despite being new standard, HTML 5 already supported by modern browsers such as Chrome, Firefox, Opera, Safari, and the latest version of Internet Explorer. These browsers are racing to provide the best support for the new upcoming HTML 5 standard. One of the biggest video sharing site Youtube also provide a preview of HTML5 video.

With a lot of support like this, HTML5 will become the future of the web. Well, we could wait until the final draft of HTML5 is out. While we are waiting, why don't you check some demos of HTML5.

Website Design Checklist for Better Web

Website Design Checklist for Better Website

Designing website is a long process. There are some elements of web that must be considered. Designing these elements well could help increasing visitors.

Here are some elements of website design that must be considered when creating a web design.

Let's go to Website Design Checklist

1. Layout

Layout in website design means the arrangement of your web contents. Web layout held an important role in web pages. It could help the readers love your website or hate it and never gonna come again.

The key behind a great website's layout is how to display your information in an effective way and try not to annoy the reader. There are many techniques on how creating a layout, whether it's two columns, three columns, and various different columns in one layout.

We can use fix width layout, liquid layout, or using grid system. One thing to be considered, the layout must shows relatively same in various browsers. To achieve this, we must obey the web standards. Layout for mobile phone access must be considered too. We usually called the design that fits all devices as responsive web designs.

2. Typography

Typography

Typography here means fonts and its properties. We must take attention on font selection, considering our website target topics and target audiences.

We must make sure that the most important section in our website stands out from the others. For example, we usually go for a bigger font for title and choose smaller for footer.

One thing that must be remembered though, we must make sure that our font selection is readable for reader. We could also go into the details such as setting the space between each line and space between words. One of great tool that we could use to test our font configuration is Typetester.

Font design selection also important. We could choose font with larger width for title, or pick a unique font. Before we picked a font, we must make sure that we are legal to use that fonts.

We don't want troubles, right? Thank God, there are some websites that not only letting us pick font that we can use, but also hosts the fonts, so we didn't need to download it. These font providers are Google Web Fonts and Typekit.

3. Color

color

For a webite design, color maybe is the most important things. If we couldn't find a perfect color scheme, our website will be screwed.  Color could be suited to our website themes.

For example, if we do design a website about food or culinary, we could pick orange color because it's said that it could raise the apetite. Or maybe if we are designing with children theme, we could pick some bright colors to make it look playful.

Okay, let's back to the most tricky part, how do we choose the perfect color scheme. Well, if you don't know, I'll tell you a common secret that a good color scheme follow certain formula.

Don't worry though, we don't need to do solve it by ourselves, because some websites already make it easier for us to choose a good color combination that are free to use in our website.

We could just pick color scheme using Color Scheme Designer or Color Schemer. If you want to take it further, you can visit Colour Lovers (http://www.colourlovers.com/) or Color Combos to find curated color scheme.

4. Web Standards

Last but not least, when we are designing a website, we must pay attention to web standards. Website standards are defined by a community consisting of web browser companies, web tools authors, and web developers around the world to make a better web.

This community builds an organization called World Wide Web Consortium (W3C). W3C defined many standards related to web, from web design and applications, web architecture, and semantic web to web devices and web services.

It includes all the technology in the web, such as SVG, HTML, Javascript, XML, Semantic web stacks, and various APIs.

Following web standards while designing a website is a very good practice. Browser companies created their browsers according to the web standards, so if we follow the web standards guidelines, our design will be optimal.

In website design, we just need to make sure our design is valid to these standards. Don't worry, there are W3C validator tools that we can use to check the validity of our HTML/CSS. If our design passed the test, congratulations, our design has followed the web standards.

Conclusion

Designing website is a long process. We are not just need a good senses of art, but also must follow the standards. There are many tools in the Internet that we can use to help us designing a better website. So, Happy Designing. :D