Tag Archives: Business – Oriented Solutions

HTML5 Elements

In the previous chapter we have discussed about some of the basic HTML 4 elements. Apart form those HTML 5 has introduced some other useful elements and tags and also some of the old elements removed in HTML 5. Let’s discuss those in detail.

HTML 5 New Elements

<canvas>
<details>
<datagrid>
<menu>
<summary> Defines a visible heading for a <details> element
<mark>  to indicate content that is marked in some fashion
<time>  to indicate content that is a time or date
<meter>  to indicate content that is a fraction of a known range – such as disk usage
<progress>  to indicate the progress of a task towards completion
<wbr>

HTML 5 Media Elements

<audio>
<video>
<source>
<embed>
<track>

HTML 5 Form Input Type

datetime
datetime-local
date
month
week
time
number
range

email
url

(Click here for more detail about HTML 5 form elements and input types)

Some elements removed in HTML 5

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • strike
  • tt

Responsive Table Design

Responsive HTML Table

Lets create our first responsive table. Here we will discuss about two type of table design, one is when the screen width reduce the scroll bar will display and another one is the table will increase row wise. The following image shows how it change on resolution change. We have used bootstrap.css to designthe table.

Table With Scrollbar:

The same table in small resolution

Here you can see the scroll.

Table Structure – 2

The same table in small resolution

Download File from here

Media Queries

How to create media queries in Responsive Web

We need to write our media query for the following resolutions in our css file.  320px,  480px,  600px,  800px,  960px, 1024px and 1280px+.  So @media will from 320px to 479px,  480px to 599px, 600px to 767px,  768px to 959px,  960px to 1023px, 1024px to 1279px and lastly the default css which display 1280px and higher resolutions.  If your design layout is below 1024px the you need not to write mediaquery for 1024px to 1279px.

For the above criteria the css file should be like this

/*
 Your default css code goes here..
*/

@media (min-width: 960px) and (max-width: 1023px) { 
  /* CSS for browsers less than 1024px*/
}

@media (min-width: 768px) and (max-width: 959px) { 
  /* CSS for browsers less than 960px*/
}
@media (min-width: 600px) and (max-width: 767px) { 
  /* CSS for browsers less than 768px*/
}

@media (min-width: 480px) and (max-width: 599px) { 
  /* CSS for browsers less than 600px*/
}

@media (min-width: 321px) and (max-width: 479px) { 
  /* CSS for browsers less than 480px*/
}

@media (max-width: 320px) { 
 /* CSS For 320px or less browsers */
}

Though there is no standing rule for device width, you can use media width for any screen resolution. The above is just a sample to show how to define @media and write css code.

Click here to view list of devise and screen resolution in pixel.

Web Application Development

“Internationally, IWCn has leading expertise in Usability and User Interface Design.”

EXPERIENCE AND RESEARCH
IWCn has been working in the field of custom software development since 2009. Our expert team has taken part in dozens of application development projects. We are experienced in developing advanced systems with complex business logic dealing with large amounts of data and transactions. We are able to supply you with an innovative, trustworthy software solution to complement your most complicated business ideas.