UI Designer's Arena

Saturday, September 5, 2015

CSS Best Practices

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

In simpler words, Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

The below guidelines are the best practices for quality standard codes used in the industry and the conventions are searched and gathered around the internet.

Make it Readable

1.) Readability of your CSS makes it much easier to maintain in the future.
Start using multiple lines & spaces.

2.) Writing styles and properties in same line makes the style sheet untidy and tedious for
other users to work on it.

3.) Indent by 2 spaces for style declarations. Don’t use tabs or mix tabs and spaces for
indentation.

4.) Give single space between selector and open braces. Also single space between colon
and property value.

.header {
background: #EEE;
padding: 2em;
border: 1px solid #000;
}

.header{ background: #EEE; padding:2em; border:1px solid #000; }

Naming Conventions

1.) Use more versatile naming conventions and stay consistent.

2.) Use full descriptive words. Abbreviating a word may save you a few milliseconds to
type initially, but may make your code harder to read for other users.

3.) Usage of meaningful class name is advisable for user's quick understanding.

4.) Use hyphens instead of underscores while writing CSS classes and IDs.

.navbar-right {
background: #EEE;
padding: 10px;
border: 1px solid #000;
}

.alert-message {
background: #FF0000;
padding: 5px;
border: 1px solid #FF0000;
color:#FFF;
}

.sidebox_rgt {
background: #EEE;
padding: 10px;
border: 1px solid #000;
}

.red_box {
background: #FF0000;
padding: 5px;
border: 1px solid #FF0000;
color:#FFF;
}

Use Lowercase in Styles

1.) All code has to be lowercase: This applies to HTML element names, attributes,
attribute values (unless text/CDATA), CSS selectors, properties, and property values
(with the exception of strings).

2.) The dynamic classes rendering from the script should also be applied in lowercase is
also considered as best practise.

.widget-header{
color:#e1e1e1;
}

.primary-widget-applayout{
font-family:inherit;
}

<div><p>Good Bye World</p></div>

.Widget-Header{
color:#e1e1e1;
}

.primary-widget-APPLAYOUT{
font-family:inherit;
}

<Div><P>Good Bye World</p></Div>

Follow Declaration Order

1.) Related property declarations should be grouped together following the order:
(a)Positioning
(b)Box model
(c)Typographic
(d)Visual

2.) Positioning comes first because it can remove an element from the normal flow of the
document and override box model related styles. The box model comes next as it
dictates a component's dimensions and placement.

3.) Everything else takes place inside the component or without impacting the previous
two sections, and thus they come last.

.declaration-order {

/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
}

Use Generic CSS Structure

1.) Use the below generic structure which helps the CSS properly to inherit attributes and
makes it much easier for user to override a specific style.

(a) CSS Reset
(b) Import fonts
(c) Links, heading, font and its types
(d) Main layout
(e) Secondary layout
(f) Form elements
(g) Other elements

2.) Use CSS reset without fail in the main style sheet because every browser has its own
default ‘user agent’ style sheet, that it uses to make unstyled websites appear more
legible.

/*** CSS RESET***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a {
text-decoration:underline;
border:0;
}

a:hover {
text-decoration:underline;
}

h1, h2, h3, h4, h5, h6 {
color:#FF0;
font-weight:normal;
}

/*** MAIN LAYOUT ***/
#header {
...
}
#footer {
...
}

/*** FORM ***/
label{
...
}
input{
...
}
button{
…
}

Don’t Repeat Style Properties

1.) Re-use attributes whenever possible by grouping elements instead of declaring the
styles again.

2.) If two of your styles has same properties, group them using coma.

.alert-message,
.span p {
color:#FF0000;
font-size:12px;
float:left;
}

.alert-message {
color:#FF0000;
font-size:12px;
float:left;
}

.span p {
color:#FF0000;
font-size:12px;
float:left;
}

CSS Specificity

1.) Specificity is the means by which a browser decides which property values are the
most relevant to an element and gets to be applied. Specificity is only based on the
matching rules which are composed of selectors of different sorts.

2.) In case of specificity equality, the latest declaration found in the CSS is applied to the
element.

3.) The following list of selectors is by increasing specificity:

(a) Universal selectors
(b) Type selectors
(c) Class selectors
(d) Attributes selectors
(e) Pseudo-classes
(f) ID selectors
(g) Inline style

4.) Using !important is bad practice because it makes debugging hard since user break
the natural cascading in your style sheets.

<div id="test">
<span>Text</span>
</div>

div#test span {
color: green;
}

span {
color: red;
}

div span {
color: blue;
}

Organize CSS Styles Using Flags

1.) Separate CSS into blocks using flags.

2.) Comment all the block level elements (header, body content, nav bar, footer, etc.) in
the style sheets, so that it will be useful for user's usability and readability.

/*************************
*******MAIN LAYOUT********
*************************/
.header {
background:#AEAEAE;
height:150px;
float:left;
border-bottom:1px solid #CCCCCC;
}

/*** logo ***/
.logo{
background:url(“..images/logo.jpg”) no-repeat;
width:300px;
height:120px;
float:left;
}

/*** login info***/
.login{
float:right;
width:30%;
}

.login p{
font:12px Arial;
color:#CCC;
}

Use Shorthand CSS

1.) Start using shorthand styles properties in style sheet.

2.) Unwanted or lengthy style properties will not only affect user's readability, but also it
affect browser style rendering time.

3.) Use 3 character hexadecimal notation wherever needed in style property.

4.) Try to use all attributes in same style properties.

.sidebar {
color: #CCC;
padding: 10px 15px 5px 10px;
margin:10px 0;
background:url(“../images/bg.png”) no-repeat 0 0;
}

.sidebar {
color: #CCCCCC;
padding-left: 10px;
padding-right:15px;
padding-top:10px;
padding-bottom:5px;
margin-top:10px;
margin-bottom:10px;
background-image:url(“../images/bg.png”);
background-repeat:no-repeat;
background-position:0 0;
}

Use Multiple External Style sheets

1.) Avoid using inline or internal style sheets because it mixes up content and
presentation, which can lead to more trouble.

2.) Instead of using inline or internal style sheet, a global change can be done in the single
external style sheet.

3.) Be sure to consider the number of HTTP requests that are being made due to multiple
style sheets.

<span>
This is an alert message!
</span>
span {
color: red;
font-weight: bold;
}

<span style="background:red;">
This is an alert message!
</span>

<style>
span{
font-weight:bold;
}
</style>

Make Use of Generic Classes

1.) Start using generic classes like right ,left, no-padding, no-margin, clear, hidden, etc..

2.) Instead of adding some particular properties to each styles, you can create generic
classes and add them to the IDs or other CSS classes.

.left {
float: left;
}
.right{
float:right;
}

.no-padding {
padding: 0;
}

.no-margin {
margin: 0;
}

.clear {
clear: both;
}

.hidden{
display: none;
}

<div class="sidebar left no-margin">
...
</div>

<ul>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li class="no-padding"> Item4 </li>
</ul>

.sidebar {
float:left;
margin:0;
}

ul li.last {
p ad
ding:0;
}

<div class="sidebar”>
...
</div>

<ul>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li class=”last”> Item4 </li>
</ul>

Use Simple and Clean Styles

1.) Try to keep the CSS from being as simple and clean as possible.

2.) Adding extra selectors to the styles may clutters the style sheet.

3.) However, if a particular class is to be targeted, its parent div can be used as an extra
selector.

.content li {
…
}

body #container .content ul li {
….
}

Images in Style Sheets

1.) For repeating pattern images, use something larger than 1x1 pixels.

2.) Usage of spacer images can be avoided.

3.) CSS Sprite images are recommended to use for background images to reduce number
of HTTPS requests.

4.) For responsive devices, images can be made responsive by giving max-width value.

.new-icon {
background: url(“../images/icons-sprite.png”) no-repeat 0 -20px ;
}

.container {
background: url(“../images/bg_blue.png”) repeat-x ;
width: 100%;
...
}

.profile-image {
float: left;
max-width: 100%;
}

Using Media Queries

1.) It is generally advisable to keep media queries grouped by media at the bottom of the
style sheet.

2.) Rule sets for media queries should be indented one level in.

3.) Media queries can be written from larger devices to smaller for easier understanding.

4.) Use meta viewport tag in the html file for responsive pages.

Saturday, August 29, 2015

Best Practices of HTML5

This post is specifically for those who are just diving into web design industry. If you've one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!

Learning HTML is not a big task but coding it in proper manner makes you a perfect front end developer. These are the do's and dont's in the HTML page.

1.) Use the Proper Document Structure

Without a doctype and the structural HTML elements, pages will not render properly in every browser.So user must always be sure to the use proper document structure, including the <!DOCTYPE html> doctype, and the <html>, <head>, and <body> elements. Doing so keeps our pages standards compliant and fully semantic, and helps guarantee they will be rendered as it is. Always use correct doctype declaration.

<!Doctype HTML>
<html>
<head>
<title> Introduction to HTML</title>
</head>
<body>
<h1>Hello World!</h1>
<p> Introduction to HTML</p>
<span> Learn Semantic </span>
</body>
</html>

2.) Make Use of Semantic Elements

If a HTML document doesn't uses proper semantic structure, then it is meaningless. The HTML element which is opened first should be closed first. Dis-proper closing of HTML tags may not render correctly in browsers.

3.) Close tags where ever necessary

Leaving the tag element unclosed is the common mistake done by all developers. In some advance browsers, it may close tag automatically, but not in all. But there are some standalone tags which doesn't need closing tags and no need to care about that.

<ul>
<li><a href="index.html">Home </li>
<li><a href="about.html">About </li>
</ul>

<ul>
<li><a href="index.html">Home </a></li>
<li><a href="about.html">About </a></li>

</ul>

4.) Use Meta tags without fail

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata and makes your web page more meaningful for user agents like search engine spiders. So do not omit as others do!

5.) Provide style sheet link and script files in head tag

Placing link to style sheet files and js files can be given inside the head tag using <link> tag.

<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<script src="newscript.js" type="text/javascript"></script>
</head>

6.) Use Alt attribute for <img> tag

Provide text alternatives for any images added through <img> tag. This keyword helps the search engine in finding your site.

7.) Start Using HTML5 new Elements

Instead of staying with divs for everything, take some time to learn the new HTML 5 elements like <header>, <footer>, <article> and others. They work the same way but improve readability with less writing.

<html>

<head>

<title> Learn Semantic HTML </title>

</head>

<body>

<div>

</div>

<div>

<div>

<article> first article </article>

<article> second article </article>

<article> third article </article>

</div>

Copyrights Info

</div>

</body>

</html>

<html>

<head>

<title> Learn Semantic HTML</title>

</head>

<body>

</header>

<div>

<article> first article </article>

<article> second article </article>

<article> third article </article>

</section>

Copyrights Info

</footer>

</div>

</body>

</html>

8.) Use Selectors appropriately

Classes can be used multiple times in the documents. They are reusable. But id's are unique. One id can be used only once in a page.

<div id="content">
<p id="loginname"> Vimal Raj </p>
<p id="loginname"> 29th Aug, 2015 </p>
</div>

<div id="content">
<p class="loginname"> Vimal Raj </p>
<p class="loginname"> 29th Aug, 2015 </p>
</div>

9.) Use Title attributes in anchor

Use of title attribute in anchor tags helps the user to understand the need of that link and also it helps in SEO operations.

<a href="../profile.pdf"> Click here</p>

<a href="../profile.pdf" link="profile-info"> Click here</p>

9.) Simplify form elements

Enclose all label names with the <label> tag. Try using the new email and url input types to define these common fields. Using placeholder attribute to provide input hints. Use the required attribute to request validation. Drop the name attribute in favor of an id where needed. Differentiate submit and cancel buttons for easier view.

<form>

<label> Username </label>
<input type="text" name="username" placeholder="Type Username"/>

<label> Email</label>
<input type="email" name="email" placeholder="Type Your Email"/>

<input type="submit" name="sub_form" value="Login"/>

<input type="reset" name="can_form" value="Cancel"/>

</form>

10.) Provide necessary fallback

Provide proper fallback in the HTML. Use browser supportive (IE 8/9) or specific scripts whenever HTML5 components are used in the document. Also provide proper information for non supportive browsers.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

11.) Use External Stylesheet

As said earlier, always use external stylesheet inside head tag. Avoid using inline style which makes the code clumsy.

<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
...
</head>

<p style="color:#365233" font-size:16px;> Login </p>

13.) Validate your HTML

Finally, dont forget to validate your html file. A semantic html should be pass all the guidelines said in the W3C HTML validator.

Tuesday, August 25, 2015

HTML 5 - A Quick Reference

Get a Quick Reference of HTML5

1.) Are you new to Web design?
2.) Are you a beginner to HTML5?
3.) Are you willing to create new webpage on your own?

If your answer is YES, then this article is surely going to help you a lot. Today, with this blog post, we are going to talk about HTML5 for beginners, where we will define what HTML is and how it evolved from HTML to HTML5, why you should learn it, what you require for learning HTML5, and much more.

Let us begin now.

What is HTML5?

HTML is an abbreviated form of Hypertext Markup Language, which is used to build web pages that, informs a web browser to visually represent its elements, such as text and images with a set of codes and symbols. Moreover, HTML is the W3C (World Wide Web) recommended standard for creating websites. Tim Berners-Lee, the founder of HTML, introduced the HTML to the world in 1990.

Since 1990 HTML have go through a lot of modifications and improvements based on the suggestions from a wide group of web designers and developers to overcome the difficulties they face while making interactive websites. After the initial recommendation of HTML, it came in new versions such as HTML 2.0 in 1995, HTML 3.2 in 1997, HTML 4.0 in 1997, and HTML 4.01 in 1999, which is then followed by the latest HTML5.

Why to learn HTML?

Many people asks that why we need to learn HTML, when there are pre-designed templates are readily available such as wordpress,etc. It is good question. Not all the readily available website templates are bug free. If you need to customise or edit or alter the webpage, you need to know HTML and CSS. If you learn how HTML works and how to code in HTML, and once you are skilled in HTML, you can easily view the source code and make the customization correctly. But remember only if you are well skilled in HTML.

What is needed for learning HTML?

1.) HTML Editor- Notepad, Notepad++, Adobe Dreamweaver,etc..
2.) Browser - Chrome, Firefox, Internet Explorer, etc..
3.) Little bit of interest in learning and patience.

HTML5 :

There are 2 things to need to know before start learning HTML5.
a.) The basic HTML5 tags and elements.
b.) The structure of an HTML5 webpage.
c.) Cascading Style sheet (CSS).

Basic HTML5 Tags:

As HTML is a markup language it consists of various tags and elements. Tags are generally used in pairs, namely; an opening tag and a closing tag. An opening tag signifies that the browser should render the content placed after it by using all of its given properties, and a closing tag informs the browser about the end of that particular tag.

For example, the opening <html> tag defines the starting point of an HTML page, and its closing </html> tag defines that the HTML content ends here. These tags help browsers to understand what to display, when to display, and what not to display.

Apart from the above mentioned two tags, there are some tags which we call as the self closing tags. Additionally there are some empty HTML elements, which are used without content. For example; the <br> tag is used for single line break, and no content is placed for this tag. Above HTML tags are called as stand alone tags.

These are the commonly used and newly introduced HTML5 tags.

TAGS	HTML5 NEW ELEMENTS
<!DOCTYPE HTML>	<HEADER>
<HTML>	<HGROUP>
<HEAD>	<NAV>
<TITLE>	<ASIDE>
<BODY>	<FIGURE>
<DIV>	<SECTION>
<P>	<ARTICLE>
<SPAN>	<FOOTER>
<H1>	<AUDIO>
<IMG>	<VIDEO>
<UL>
<OL>
<LI>
<TABLE>
<TR>
<TD>
<IMG>
<BR>
<HR>
<FORM>
<INPUT>
<SELECT>
<OPTION>
<TEXTAREA>
<!-- -->

Basic Structure of HTML:

<HTML>

<HEAD>

<TITLE> Introduction to HTML</TITLE>

</HEAD>

<BODY>

<H1>HELLO WORLD!</H1>

<P> Introduction to HTML</P>

</BODY>

</HTML>

Output:

HELLO WORLD!

Introduction to HTML

Basic Structure of HTML5:

<HTML>
<HEAD>
<TITLE> Introduction to HTML5</TITLE>
</HEAD>
<BODY>
<HEADER>
<H1>LOGO</H1>
</HEADER>
<DIV>
<ASIDE> SIDE BAR </ASIDE>
<SECTION>
<ARTICLE> MAIN CONTENT</ARTICLE>
<ARTICLE> MAIN CONTENT</ARTICLE>
<ARTICLE> MAIN CONTENT</ARTICLE>
</SECTION>
<FOOTER>
COPYRIGHTS INFO
</FOOTER>
</DIV>
</BODY>
</HTML>

Output:

These are the basic things to learn in HTML5. There are more elements to be learnt in HTML5 and those topics will be discussed in later posts.

Source: instructables

UI Designer's Arena

Saturday, September 5, 2015

CSS Best Practices

Saturday, August 29, 2015

Best Practices of HTML5

Tuesday, August 25, 2015

HTML 5 - A Quick Reference

Flickr

Labels