HTML5 Essentials and Good Practices


HTML5, together with CSS3 and responsive design are the new buzz around web technologies these days. This article will help you get started using HTML5 on your projects today and show you some good practices to put what you learned to good use.

HTML5 Logo

Lets see a typical HTML5 page markup:

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1></h1>
<nav>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</nav>
</header>

<section>
<article>
<hgroup>
<h1>Post title</h1>
<h2>Subtitle and info</h2>
</hgroup>
<p>Content goes here.</p>
</article>
<article>
<!-- Another article here -->
</article>
</section>
<aside>
<!-- Sidebar here -->
</aside>
<footer></footer>
</body>
</html>

With some styling the structure of our page will be like the image below

HTML5 Logo

Doctype

If you come from an HTML 4 or XHTML background, the first thing you might have noticed on the sample markup above, is the new doctype declaration. Really simple, just type it as you see it. And no reasons to worry, it is backwards compatible with all browsers. You can actually change it right now on all your html pages.

Apart from the new simple doctype declaration, you will see many new tags. Most of them are pretty much self explanatory but lets see them in detail.

Block level Elements

In HTML5 we no longer have to resort to “div-itis” to give structure to our page. We have a great selection of new block level elements that help us to create a semantic structure quickly and of course our code becomes more readable and maintainable.

With the new structural elements we can begin to forget about <div id=”header”> and <div id=”footer”> and start using the new <header> and <footer> tags. They work the same as a div but hey, less writing, more semantic code. We are also introduced to other new elements such as <section> <article> <nav> <aside> <hgroup> <figure> and <figcaption>.

The use of <header> and <footer> is obvious. The <nav> tag specifies the navigation links of our page instead of having <div id=”navigation”>. <aside> refers to a section of the page that is separated from the main content. It is mostly used for sidebars today, though some developers suggest it could be used to contain some secondary information for example, for articles.

<section> is used to give structure to our page and contain parts related to a certain theme while <article> can contain a blog post, news post, comment etc. A <section> can contain many <article> elements and an <article> element can contain many <section> elements.

We also have a new container for our headings <h1> to <h6> which is the <hgroup>. Finally we have a <figure> element which is container for a representational image, related to the content but its presence is not mandatory. The <figure> element can also contain a caption using the <figcaption> element.

Inline Elements

HTML5 introduces some new inline elements too. <time> and <mark> are a couple of these new ones that help to make our markup even more semantic.

<time> is used to display time semantically. You can choose to display time, date and both. Example below

<time datetime="20:00">8pm</time>

<mark> is used to highlight parts of content for example when a user searches for a specific term. Its difference from <strong> or <em> is that it gives no special meaning or importance to the content it highlights.

Media Elements

HTML5 also brings us some new media elements. We have <audio>, <video> and tags together with the <source> tag to specify media sources. The simplest way to use them is below

<!-- simple audio use -->
<audio src="audio-file.ogg" controls>
</audio>

<!-- simple video use with multiple sources-->
<video controls>
<source src="video-file.mp4" type="video/mp4"/>
<source src="video-file.ogv" type="video/ogg"/>
</video>

Unfortunately, support is not so great yet. Browser makers chose different filetypes and encoding for the sources they support so you have to use multiple versions of the same media with different encoding and you need a flash fallback to support even older browsers.

Canvas Element

One of the other great new features HTML5 has to offer, is the <canvas> element. It gives you the ability to draw shapes dynamically or even manipulate images. <canvas> by itself provides vast possibilities in modern web design and development but it is not a matter to discuss in this article.

Good Practices

With all those new elements some people are bound to get confused. Should we use a header inside an article to contain all the title info? Should we wrap every heading with an <hgroup>? To help you out, here are some good practices about these new elements.

The less is more motto stands in HTML5 markup too. For example when you have a single <h1> heading in your <article>, there is no need to wrap it with an <hgroup> tag. If you have two or more headings, then wrapping both of them with an <hgroup> would be a good use of the <hgroup> element.

<!-- incorrect use of hgroup -->
<article>
<hgroup>
<h1>Heading</h1>
</hgroup>
<!-- rest of content here -->
</article>

<!-- correct use of hgroup -->
<article>
<hgroup>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</hgroup>
<!-- rest of content here -->
</article>

Do you really need to have a <header> and a <footer> element on your <article>? Depends. Do you have many info regarding the article like multiple headings, date information, comment information etc? Then the <header> would have semantic meaning and would be used correctly. Again refrain in using too many elements when they are really not needed. No need to nest a single <h1> in a <header>. Same goes for the <footer> element. Do you have post information, author information etc? Then a <footer> would be appropriate.

<!-- incorrect use of header -->
<article>
<header>
<h1>Heading</h1>
</header>
<!-- rest of content here -->
</article>

<!-- correct use of header -->
<article>
<header>
<hgroup>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</hgroup>
<p>Date and Author information</p>
</header>
<!-- rest of content here -->
</article>

Should you use <section> or <article>? There really is only one way to tell whether you should use one of these elements. <section> refers to a structure that contains related content. <article> on the other side, contains independent content. So a <section> can have many <article>s and an <article> can have many <section>s. It all gets down to what the content is.

Do you use <aside> only for a sidebar structure? <aside> started out that way, but the specs have changed since then. Nowadays <aside> gets another semantic meaning when used inside an <article>. It denotes secondary content related of course to the main content inside the <article>. When used outside of an <article> it is still considered secondary content but for the page as a whole, sidebars being a perfect example.

<!-- aside outside of article -->
<div>
<aside>
<!-- use as sidebar for example -->
</aside>
</div>

<!-- aside inside of article -->
<article>
<!-- main article content here -->
<aside>
<!-- secondary related content -->
</aside>
</article>

Browser support

Support is great for most of the new HTML5 tags, especially the block level ones. All you have to do to enable all the modern browsers to understand them, is to include the code below in you css file.

article, aside, figcaption, figure, footer, header, hgroup, nav, section
{
display: block;
}

For IE, this is, of course, not enough. Still all you need to do, is include the html5shiv script when the page load in IE. Use the code below

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And that’s pretty much it. You can start using these new HTML5 elements today and make your markup much more semantic, readable and maintainable.

Advertisements

9 Tips To Make Your Website Load Faster


One of the most important aspects of any website is loading time.  No matter how flashy your graphics or interesting your content is, if it doesn’t appear to the visitor in a speedy manner, it’s unlikely they’ll ever see any of it.  Below we’ve outlined some helpful tips to ensure that your website will load in a blink of an eye and keep your viewers in place!

1. Optimize, optimize, optimize.

In the event that your pages have more than five images displayed on them, you will want to optimize the images for the Internet. This essentially means using a mode of compression to make the images smaller and load faster.  Many commercial websites use this technique to great effect – how do you think Facebook loads so quickly?  A good rule of thumb is to use GIF files as much as possible at lower optimizations when it comes to the graphics on your page.  Insofar as photographs are concerned, highly compressed JPGS are good.  PNG files tend to take up a lot of space, and don’t go anywhere near a bitmap!

Facebook

2. Physical distance still matters in the virtual age.

If your web host is farther than forty miles away from where you live, you might want to look into getting a new host.  You can figure out where your web host is located by doing a simple ping test.  If the ping test shows that your web host is on the other side of the planet, you might want to consider hosting elsewhere.  The closer they are to you, the faster your load times will be.

3. Is your web host’s equipment cheap?

These days, it seems as though you can get your website hosted for less than pennies on the dollar.  In general this would be seen as a good thing for those of us who don’t have hundreds of dollars a month to spend on hosting, but it could also be affecting your load times.  Cheaper companies often use cheaper equipment, which means that your visitors might have to wait longer for your pages to load.  Remember: you get what you pay for.  This applies to web hosts, as well.  Weigh the cost of web hosting against how much traffic your website gets – if you’re having thousands of visitors per day, it might be worth it to upgrade to a more expensive web host that utilizes better equipment.

4. Cache it.

Want to get your website to load quick as a blink for your repeat visitors?  Enable PHP caching. This will instruct the browser to load the website once and then store away the images and everything else for later retrieval.  This way there’s only one time that the visitor has to wait for the Internet to produce the images.

5. Is your bandwidth slow?

Most larger hosts have multiple bandwidth providers in order to handle a lot of traffic.  You can check to see how fast your own bandwidth is by performing a trace route test.  Once you’ve done that, check to see if your provider is linked up with companies such as Sprint, Level (3) Communications, AT&T, MCI-Verizon or Mizma.  If it is, your bandwidth has a good chance of being fast – but many of the smaller web hosts can’t afford to partnership with these companies.  How important this is to you depends on the size of your website.  If you’re running a larger page, you might want to consider moving to a web host that works with one of the above companies.  This will go a long way toward ensuring that your pages load reliably and quickly for many visitors!

6. Keep your CSS files small.

If your CSS is over 75KB in size, it could be dragging your user’s experience down.  If you run a smaller website, be sure to keep it below this number.  However, if you have a bigger website with lots of pages with a lot of graphics and code, it might be necessary to exceed this amount. Should this be the case, be sure to monitor your website regularly and remove pieces of code that you no longer use regularly.  It may also be worth your time and money to pay a web designer to go through and edit your CSS to help you trim the fat, particularly if you are running a larger operation.

Unoptimized CSS

Unoptimized CSS

Optimized CSS

Optimized CSS

7. How are your databases optimized?

Poorly optimized databases can slow your website down.  If you’re not sure how to do this, simply run a Google search on database optimization for the lowdown.  There’s literally hundreds of ways to make sure that your databases are optimized for maximum performance.

8. Cool down the hotlinking.

The term “hotlinking” refers to when another website uses your website as a server for files.  For example, if you have a video file embedded on your website and another website embeds the same file yet uses your source code, that website is hotlinking.  This means that the second website is using your bandwidth to play that file.  Hotlinking takes up enormous amounts of a website’s bandwith and can really slow down your load time.  In order to eliminate hotlinking, you can check if social networking websites, such as MySpace, show up in your referral files or if a certain file is being served more often than the page that the file is located on.  If you notice hotlinking, you can usually access hotlinking protection through the control panels of your web host. If not, you may need to take the file down.

9. Use less JavaScript code and compress it!

Simpler code always leads to faster page loads.  One way to get your page’s JavaScript up to code is to remove the comments and compress it – this essentially takes out the line breaks and makes your JavaScript into one long sentence.  However, if you are not an experienced JavaScript user, this could make your code harder to read, so be sure that you know what you’re doing before you use it.  If you’re not confident in your abilities to read JavaScript without comments or line breaks, keep them in.  It’s a giant headache to undo JavaScript compression once it’s done!

Uncompressed JavaScript

Uncompressed JavaScript

Compressed JavaScript

Compressed JavaScript

With these tips in mind, get out on the web and make your presence known!  If you have a well optimized website that loads fast and is easy to navigate, you’ve already won half the battle.  The rest of it is all in your content and user experience – but having a quickly loading website is the first step in making sure that web surfers stick around long enough to see it!

A Guide on Layout Types in Web Design


A Guide on Layout Types in Web Design

One of the most variable aspects of web design is the way in which we approach width and height in terms of measurements and flexibility.

For many years, we have rotated between the benefits and pitfalls of using fixed, elastic, and liquid measurements in a quest to give optimal viewing experiences in highly varied situations, while balancing our need to control things in our web pages.

But, as Bob Dylan proclaimed a long time ago, “The times, they are a-changin’,” and with these changes come a variety of new ways for laying out your website’s pages and an even more variable landscape of methods for viewing websites.

In this article, we will examine web layout types — old, new, and the future. We will explore the subject in the context that websites are being viewed in a diverse amount of ways, such as through mobile phones, netbooks, and touchscreen personal devices like the iPad.

About Your Options

Let’s set our objectives for this exploration of layout types:

  • We shall examine the variety of options that exist
  • For each layout type, I’ll try to suggest some situations they are best used in
  • The pros and cons of a layout type compared to others

We will discuss 10 types of web layouts.

About Your OptionsWhile pixel perfection is a pipe dream, there’s more to layouts than fixed, liquid or elastic!

The main lesson to take away from these choices is to think carefully about why an option is suitable for a particular situation and how your choice will affect your audience.

Let’s dig in, starting with absolute layouts.

Absolute Layouts

One of the least commonly used methods of measurement employed in web design is absolute measurement (i.e. inches, cm, mm and picas). Absolute units and positioning is traditionally found in print media, which natively use these units of measurement.

The conversion of print to web format can be seen in word processing software such as Microsoft Word, which still uses these conventions when formatting text and sizing the dimensions of a document in order to make it appear as close as possible to printing on paper.

Absolute layouts have limited use in web designs.

Absolute LayoutsA use for absolute layouts on the web is for PDF documents where content remains static.

Of course, just because it isn’t popular doesn’t mean it doesn’t have its place on the web designer’s bevy of options.

If you are someone who utilizes printer-friendly stylesheets — yes, people do still print web pages — the absolute measurements of cm, mm, inches, and pt can help you prepare a page layout for printers more accurately.

Relative Layout

Relative positioning and layouts adjust in size depending on the size of the user’s browser viewport.

Absolute LayoutsThe area inside the red border is the browser’s viewport. You can change the size of the viewport by resizing the window. Different monitor sizes have various maximum sizes for the view port.

Typically, this type of layout relies on everything working at 100% width, whether it’s a small screen (like a netbook) or a 24-inch widescreen desktop monitor. This means that the layout will scale according to the viewer’s situation.

Absolute LayoutsVery few sites make use of 100% widths, but it does work.

Fixed Layout

Commonly regarded as one of the least flexible methods of laying out a web design, the use of pixel-based measurements has almost a digital resonance associated with it that transfers across from the print industry, in that the medium relies on fixed/static measurements.

This unit of measurement is accurate and leaves little guessing as to how a web design will appear across different web browsers and has become exceptionally popular among sites that favour control and predictability over optimizing the layout for the audiences’ particular viewing situation.

Absolute LayoutsA fixed width layout is used on Six Revisions.

We all know that problems can arise from having to scroll in all sorts of directions, and the fixed measurement of a px-based layout has this general issue in spades.

While many people seek out some sort of ideal width to ensure maximum compatibility, it’s worth mentioning that if you use a lot of elements that require fixed layout rules like non-repeating background images or borders with other non-relative elements, fixed measurement layouts can do the job well and act as the best all-around solution.

Elastic Layout

One of the most used methods of laying out a design’s content is using the relative em unit of measurement.

Commonly referred to as an elastic layout design (due to the way it flexes by growing and shrinking to meet the content’s needs), it has shown a great deal of appreciation within the web design community due to its ability to scale content, text sizes, and such.

Unlike with fixed units of measurements where absolute-unit elements like images are best suited (due to maintaining without distorting), elastic layouts work best when flexible content (such as text blocks) takes the front seat (though there are ways to have images scale elastically as well).

Absolute LayoutsPopular for its elastic nature, em measurements are recommended for font sizes.

Of all the methods listed, the elastic layout type is the most subservient to your content as it gives the content itself the deciding position as to how the layout should scale.

Making the text smaller in such a design will reduce the width or height, and enlarging the text will have the opposite effect.

This unique attribute allows the layout to resize based on the content rather than the needs of the layout.

Using an elastic solution is perfect if you want the layout to be determined by the content, but it can have issues if the text scales beyond the viewport (causing unwanted horizontal scrolling).

Scaled Layout

One of the latest methods in CSS3 allows the manipulation of the available viewport around certain device orientations (i.e. portrait and landscape).

Depending on the way in which the device is held, the design has the potential to alter its visual layout (altering the amount of space given to the content itself).

Unlike the others, this type of layout does not rely on measurement units, but rather a specific layout type. However, this notion shouldn’t be underestimated as a way of dealing with complex columns on small screens.

Absolute Layouts10 years ago, we wouldn’t have considered a screen’s orientation. How the times have changed!

Scaled layouts truly shine in the smartphone market where the display can be rotated or moved frequently (such as the iPhone, for example).

Scaled LayoutThe iPhone adjusts orientation of your websites on-the-fly.

With such limited space being available on handheld mobile devices, you cannot only maximize the way your pixels are allocated, but you can also allow people the option to choose whichever method they prefer to visualise the information.

Each person will use his or her web-enabled mobile device in a different way, and by allowing your design to relate your content in a transformative way depending on the orientation, you can maximize the usability of your content.

Liquid (or Fluid) Layout

The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement.

This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it.

Absolute LayoutsPercentages require careful calculation as you can’t give more than 100% without issues!

The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width).

Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.

Equated Layout

The next method of laying out content we shall look at is the equated layout, which makes use of a new CSS function called calc (see W3C calc spec).

Absolute LayoutsWhen this measurement capability reaches browsers, a new level of control will exist.

While the previous layouts we’ve covered rely on specific widths or heights being provided, an equated layout allows you to mix a fixed and relative value by using a calculation like width: calc(50% - 200px).

Have you ever had a situation where you wished that you could make up the full 100% but also account for things like divs with borders and elements that have fixed widths (such as an image)? If you’re anything like me, it’s certainly something that has crossed your mind.

The calc CSS3 function, which has not been widely adopted yet (but is part of the CSS3 spec) may just be the thing you are looking for. While the function still isn’t widely supported by existing web browsers, this can be a future-forward option for building layouts with an added layer of pliancy.

Fluid-Min/Max Layout

A common problem that we have as designers is that whenever the amount of space we have becomes either too wide or too narrow (or too tall or too short), the relatively-measured and flexible content we have gets too diluted or too compressed (which is bad news).

Using minimum and maximum widths (or heights), you can set limits on how much the design can scale so that you can still have flexibility — but only to a certain extent. Rather than spanning the viewport like a liquid layout, this layout type flows only up to where it’s told (‘atta boy).

Absolute LayoutsA fluid/”jello” layout will scale only to a certain fixed width or height.

If there’s one thing that causes problems with layouts, it’s us making assumptions as to the amount of space that we will have available for our design elements.

The benefits of the CSS min-width, max-width, min-height and max-height properties are most widely noticed when you want your layout to be confined within certain dimensions (like within a fixed-width design) but don’t want to suffer the wrath of horizontal scrolling.

For example, if you wanted to have your width scale to 100% for small screens but only up to, say, 1,500px so that your layout doesn’t get too wide for larger screens, then you can use a max-width:1500px.

As this method of laying out a web page provides a safety net that browsers can rely on (based on the min and max values you supply), you can give your fixed work a bit of added flexibility.

Conditional Layout

With the rise in devices like the iPhone, a need has appeared for a way of altering web designs beyond conventional layouts to ensure that mobile device users can have an optimized experience.

The ability to serve a unique stylesheet based on the device or viewport width and height (through CSS3′s media queries) gives rise to an even more flexible and friendly way to represent your site’s content. This layout type is something I’d like to call “conditional layout.”

Conditional LayoutThe above design uses CSS3 media queries to scale the design down as required.

Of all the methods of laying out information that have appeared recently, this is by far the one with the most promise (once the browser compatibility issues are ironed out).

Most website designs rely on a single stylesheet. Using CSS3 media queries (especially with mobile and desktop experiences) can bring conditional layouts to best meet the user agent.

The downside of this is that it means you will need to develop and maintain stylesheets for particular devices — much like how you, in the past, maintained IE-specific stylesheets.

Hybrid Layout

Of course, while mentioning all of these layout types, we can’t forget to mention the most popular layout method of all — the hybrid layout pretty much stands by its name in that the design ends up using a mixture of various layout types. This includes mixing and matching various units and concepts to ensure that the design adapts to the browser’s viewport only when it needs to and still be able to retains a certain level of control over parts of a website that need more fixed structures.

While it requires you to be more thoughtful over your work, it’s possibly the smartest way to design and develop.

Hybrid LayoutMost sites don’t stick to one measurement type, they hybridise based on needs.

Most websites make use of a hybrid layout because certain measurement units are useful for certain situations. While many people still cling to the idea that there is one perfect layout method waiting to be found, I think that the hybrid will overcome situational issues by blending together the best of all worlds.

Perhaps you might end up with an absolute layout in your print stylesheet, and maybe you might have fixed widths using a liquid body with elastic content and a fluid control for the outside edges with scaled and flexible support for certain devices — the combinations are bountiful!

The Bigger Picture

Clearly, there are many options to consider when laying out your web pages, and thus it makes sense — both pragmatically and theoretically — to pay close attention to the details and scope of any design project you undertake.

Which layout type you utilize to produce your website is something that deserves as much attention as the fonts you use or the color theme you put together.

It’s also worth highlighting that there’s no perfect way to deal with every situation and therefore there’s no one type that is universally the best for all situations.

The Bigger PictureThere’s no right or wrong way to design, but careful thought can improve some situations.

Design is one of the most fundamental skills that any web professional must get to grips with. The way the Internet is being consumed is rapidly evolving, with wide disparities in both the devices we employ and the tools we take advantage of.

There’s more to contend with than good usability, accessibility, web copy, color contrast, and so forth. A good website must meet an ever increasing number of needs and thus the search for the perfect layout has become a Holy Grail quest of sorts for web designers.

While times are changing (as do situations), picking the right layout right now should be done methodically.