<body>
<div id="pageContainer">
<header id="pageHeader"></header>
<div id="contentContainer" class="clearfix">
<nav id="pageNav"></nav>
<section id="pageSection">
<header class="sectionHeader"></header>
<article class="sectionArticle"></article>
<footer class="sectionFooter"></footer>
</section>
<aside id="pageAside"></aside>
</div>
<footer id="pageFooter"></footer>
</div>
</body>
 | ||
| sprite image |
<!Doctype html>
<html lang="en">
<head>
<title>Your Page title</title>
</head>
<body>
<!-- Define Header -->
<header>
</header>
<!-- End Header -->
<!-- Define Navigation/Menu -->
<nav>
</nav>
<!-- End Navigation -->
<!-- Main content area -->
<section>
</section>
<!-- End of Main content area -->
<!-- Sidebar -->
<aside>
</aside>
<!-- End Sidebar -->
<!-- Footer -->
<footer></footer>
<!-- End of Footer -->
</body>
</html>
<header> <h1>HTML 5 Tutorial Sample </h1> </header>
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul>
nav {
width:77%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; //for opera
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}
<aside> <section> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Contact</a></li> </ul> </section> </aside>
<footer> <section>Anything you want to put in footer goes here. </section> </footer>
footer{background:#666666;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:5px; // for Opera
text-align:center;
color:#ffffff;
}
#my_id {
height: 100px;
width: 100px;
border: 1px solid #FFF;
/* For Mozilla: */
-moz-border-radius: 15px;
/* For WebKit: */
-webkit-border-radius: 15px;
}
Adding Images to the border:
#my_id {
/* url, top image, right image, bottom image, left image */
border-image: url(border.png) 30 30 30 30 round round;
}
#my_id {
text-size: 12px;
/* For Mozilla: */
-moz-column-gap: 1em;
-moz-column-rule: 1px solid #000;
-moz-column-count: 3;
/* For WebKit: */
-webkit-column-gap: 1em;
-webkitcolumn-rule: 1px solid #000;
-webkit-column-count: 3;
}
#my_id {
background:
url(topbg.jpg) top left no-repeat,
url(middlebg.jpg)center left no-repeat,
url(bottombg.jpg) bottom left no-repeat;
}
inset‘ keyword can be supplied, preceding
the length and color values. If present, this keyword causes the shadow
to be drawn inside the element. According to the specification:An inner box-shadow casts a shadow as if everything outside the padding edge were opaque. The inner shadow is drawn inside the padding edge only: it is clipped outside the padding box of the element.
Sr.
|
Check Point / Defect
Statement
|
Check
Mark (Ö)
the Appropriate Column
|
||
Yes |
N/A
|
|||
Checks for Functionality
of Links
(Checks aimed at all links in the website) |
||||
1.
|
Internal links wherever present, are
functioning or not?
|
|||
2.
|
External links wherever present, are
functioning or not?
|
|||
3.
|
Mail to links wherever present, are opening
the mailbox or not?
|
|||
4.
|
Whether any orphan pages are present or not?
|
|||
5.
|
Whether any broken links are present or not?
|
|||
Checks for Functionality
& Integrity of Data Entry Forms
|
||||
6.
|
Whether field level checks carried out like
checks for length, special characters, numerical characters etc.?
|
|||
7.
|
Whether field level validation carried out
like checks for unique records, date validation etc.?
|
|||
8.
|
Whether functional checks carried out like
Create, Modify, View and Delete are functioning properly?
|
|||
9.
|
Whether checks for error handling for wrong
inputs or actions carried out like proper error messages are getting
displayed or not?
|
|||
10
|
Whether checks for optional and mandatory
fields carried out like a mandatory field should not be left blank and an
optional should allow the user to skip the field.
|
|||
Functionality Checks for
Cookies
(Checks aimed at enabling
cookies & how to clear them)
|
||||
11.
|
Whether cookies are enabled according to the requirement
of the project?
|
|||
Functionality Checks for
Web Indexing
(Checks aimed at
ensuring that the website is searchable in variety of ways)
|
||||
12.
|
Whether Meta tags are present or not?
|
|||
13.
|
Whether Syntax of html are valid or not?
|
|||
14.
|
Whether Frames are Ok or not?
|
|||
“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff BezosYour user’s goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user’s skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.
“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob NielsonYour users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.
“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.” – Jeffery Veen, The Art and Science of Web DesignDesign your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).
“If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. ” – Getting RealAll interfaces require some level of copywriting. Keep things conversational, not sensational. Provide clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves and/or their peers.
“A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them.” – Pär AlmqvistThe best interface designs are invisible. They do not contain UI-bling or unnecessary elements. Instead, the necessary elements are succinct and make sense. Whenever you are thinking about adding a new feature or element to your interface, ask the question, “Does the user really need this?” or “Why does the user want this very clever animated gif?” Are you adding things because you like or want them? Never let your UI ego steal the show.
