Website Design facts

True colors - Color Pick Guide

Responsive Design Process

Simple Website Mistakes - Relax ! even pros do

HTML OR XML SITEMAPS - Anush Anilkumar

HTML OR XML SITEMAPS

In this article we will take a look at which sitemap search engine BOLTS look for the most whether its HTML or XML Sitemaps

The question any amateur designer, even pro one while making a site map is which one to choose with HTML sitemap or XML sitemap for your website, it indeed is a good question and many overcome this by making both of them.But it can be difficult to keep both of them updated at the same time.

Before we get deep lets have a glance about both XML and HTML site map.

XML SITEMAP

According to sitemaps.org sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling. In its simplest form, a Sitemap is an XML file that lists URLs for a site along with additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site) so that search engines can more intelligently crawl the site.

SAMPLE SITE MAP

<?xml version="1.0" encoding="UTF-8"?>

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

   <sitemap>

      <loc>http://www.example.com/sitemap1.xml.gz</loc>

      <lastmod>2004-10-01T18:23:17+00:00</lastmod>

   </sitemap>

   <sitemap>

      <loc>http://www.example.com/sitemap2.xml.gz</loc>

      <lastmod>2005-01-01</lastmod>

   </sitemap>

</sitemapindex>
              
              

HTML SITEMAP

HTML site maps are just a simple web page that visualizes how the contents are spread across your website; it's mainly used to inform the user, so it doesn't have a standard protocol to follow. Its used by many designers to make their pages easily crawled by search engines as it has all the pages with a informative name, and the page is also linked from all the pages in the site.

Many go with XML site map as they think as the XML is lower level language and more close to computer language that HTML, and the search engine bolts will index them faster as it provides link along with the frequency and Google web master tool even has an option to submit a XML site map, most importantly ´ easy to build.

Unfortunately things actually work the other way around, as the head of Google?s Web spam team, Matt Cutts explains it in his video that Google more give importance to HTML site map than XML sitemap as it helpful to both search engines and users as well, which agrees the fact that both websites and Search engines are after the user.

For a HTML sitemap example check out Sitemap

HOW TO CHOOSE

If you think you have only one option available, it's recommended that you stick to HTML than XML, so it solves the problem for both the user and Bolts.

If you have both time and patience it's recommended to keep both XML and HTML site maps.

Colour Meanings in Design

10 Amazing Web Font Combinations

SIMPLE STACK EFFECTS - Mary Lou

A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect.

Today we’d like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration. One can imagine a couple of triggers for these effects: item hover, on load, on scroll and on click effects. When using some subtle, but creative moves, we can make some interesting effects that elevate a static design.

Note that for some of the effects we use perspective and 3D transforms so they will only work in modern browsers.

The beautiful illustrations are by Isaac Montemayor. Check out his Dribbble profile, he’s an awesome illustrator.

The markup is the following:

1 2 3 4 5 6

<figure class="stack stack-sidegrid">     <img src="img/1.png" alt="img01"/>     <img src="img/3.png" alt="img03"/>     <img src="img/4.png" alt="img04"/>     <img src="img/2.png" alt="img02"/> </figure>

We use a figure with three or four images.

All images, except for the last one, will be absolute:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.stack {     margin: 20px auto;     width: 400px;     padding: 0;     position: relative;     max-width: 100%; }   .stack img {     max-width: 100%;     position: absolute;     top: 0;     left: 0;     transition: all 0.3s; }   .stack img:last-child {     position: relative; }

Setting one of the images to position relative will give our parent figure a height.

Content by: Mary lou