May 2, 2012

CSS HTML Footer in modern web design

Filled under: , ,

According to the classical principles of web design, all at the bottom of the page is not very much matter.And so they think the majority of ordinary users. And most designers are also convinced that this is true.Elements of the layout at the bottom of the village can not really draw the attention of visitors, which is why footers are often forgotten about, or even ignore them and do not pay the attention they deserve.
CSS HTML Footer in modern web design
In fact, most footers, quite boring and not inspiring. Designers typically use area at the bottom of the page to post everything that for which they have not found a place at the top. For example, disclaimers, click Validation W3C, copyright information, the reference "on top" and contact information. But if most designers forget about the footer, then why not take advantage of this ? Why not use footers to impress visitors with what they did not expect?

In this article we will look at creative examples of footers and ideas for their design. We have tried to identify some trends and options for non-standard approach that you could use or develop while working on their projects.

What are the benefits footers?

In general, the footers are needed to ensure that users can get the information they are looking for .That is why in the footer should be contact information and a brief description of the site and / or information about the owner of the site. Design websites for corporate use can also include instructions for the location of the office, phone numbers, web form, or at least, the usual email address.

However, you can still use the footer, and to any express your creativity, or something personal . For example, if you're a fan of the television series "My Fair Nanny", then why not add a small number of Victoria with the contact information in the footer? Thus, a small detail can make your site different from the others and it will focus on the visitor's attention.

The design of the blog is usually present mass of various information, hidden or displayed in the footer. For example, recent posts, comments, available jobs, the topics on the forum or a link to the posts, selected at random.
What are the benefits footers?
In the CSS Beauty bottom of the page you can see the latest forum threads and the available jobs.Although it is not clear, they belong to the footer , or do not .

Some designers go even further and placed at the bottom of a full navigation bar. In such cases the site, as it is divided into two parts, the upper part moves, all content, while the bottom all the rest. In these circumstances, the footer of all it makes no sense to talk about.

A typical example might be DesignShack , where all the navigation menu located at the bottom of the site.
DesignShack
The site Designshack in the footer are full navigation, choice of layout options, color schemes and other information.

This provides us with certain opportunities: in the footer may be personal illustrations, links to sister sites, photos, web forms, icons, and other creative. Unfortunately, we found that also in the footer often are SEO spam and ads that directly relate to the website.
A. Simulating the Earth's surface

Well, looks like it's all pretty weird, but this trend we've seen too often that it does not mention. Many designers in their design often imitate what looks like the earth's surface. This means that they are trying to create a layout that would be like on the structure of the earth's surface - in such cases, the trees, birds, and the horizontal perspective are quite frequent. Using funny characters, figures, illustrations and drawings done by hand, as is the usual method in the footers.

The site YoDiv tiny bubbles arranged race.
YoDiv

In the footer Volll family lives octopus with an umbrella.

Volll

On Vimeo you can see the little people in the perspective of the user.

Vimeo

The site The Rissington Podcast , we see the plane ready for takeoff. There is the use of techniques from the comics.

The Rissington Podcast

The site Rapidweaver cared even about small things. A wonderful selection panel language is well suited to the overall design of the site.

Rapidweaver

Website created by MB Dragan loves drawings by hand. We are too. It's simple and tasteful.

MB Dragan

Miloslav Lešetický is one of the illustrators, so we see his image in the right footer.

Miloslav Lešetický

The site Paul Otaneda footer plays the role of a light green theme. With icons, wood, and three birdies.

Paul Otaneda

TNTPixel - Wow, but this contact must be careful ...

TNTPixel

TNTPixel - Wow, but this contact must be careful ...

TNTPixel

Sawyer Hollenshead

Sawyer Hollenshead

Miss Web Lash

Miss Web Lash

Viget Inspire

Viget Inspire

Studio Racket

Studio Racket

Laura Alter

Laura Alter

Soh Tanaka

Soh Tanaka

David Hellmann

David Hellmann

Kailoon
Kailoon

Sam Rayner

Sam Rayner

Caty Design Studio


Caty Design Studio

Productive Dreams

 Productive Dreams

Blogsolid

Blogsolid

Store NVY

Store NVY

Manndible Cafe

Manndible Cafe

ClanDrei

ClanDrei

Cooper Live

Cooper Live

3 comments:

  1. Amazing html footer in modern web design...

    ReplyDelete
  2. Amazing css-html footer....!!

    Thanks for Sharing

    ReplyDelete
  3. Thanks for one’s marvelous posting! I truly enjoyed reading it, you are a great author.I will be sure to bookmark your blog and may come back from now on.

    Website designing

    ReplyDelete