Fixed header position jumps down when keypad is opened in IOS IPhone device only.

Fixed header position jumps down when keypad is opened

We can overcome this issue by using below script. The logic is when we focus the input elements only, keypad will open.

isiPhone method is used to detect the Iphone device.


 $("input,textarea").focus(function () {
   if (isiPhone()) {
        //Set of conditions When keypad is opened
      }
      }).focusout(function () {
      if (isiPhone()) {
        //Set of conditions When keypad is closed
   }
});

Note:
navigator.userAgent.match method also used to detect the devices.

Continue Reading

How can do a PSD to HTML conversion?

PSD to HTML conversion

First of all we should know about basic HTML and CSS (HTML5 and CSS3). Javascript & Jquery also used for creating interactions between the web page and user.

Now we are living in the smart world, so our website should be fit with all kind of devices. We can create Responsive websites by using media queries, bootstrap and foundation.

Following points we have to focus when doing HTML conversion:

  • Pixel perfect User Interface Development using HTML and CSS.
  • Cross browser compatibility check & cross platform support.
  • Responsiveness for all kind of devices by using Media Queries.
  • SEO friendly codes.
  • User Accessibility check.
  • Code Validation Check, Code Review and Code Minification.
Continue Reading

How can create a responsive web design?

Responsive Design

We can develop responsive webpage by using following ways.

  1. Media queries
  2. Responsive frameworks like Bootstrap and Foundation.

Media Queries Example:

To write CSS codes for accepting in mobile view only:


@media (max-width: 767px){
//CSS declarations
}

To write CSS codes for accepting in tablet view only:


@media (min-width: 768px) and (max-width: 1024px){
// CSS declarations
}

To write CSS codes for accepting in desktop view only:


@media (min-width: 1200px){
// CSS declarations
}

Some of Device Resolutions:

  • 768px – IPad portrait
  • 1024px – Ipad Landscape
  • 375px – Iphone6 Portrait or latest mobile devices
  • 360px – Some android phones
  • 320px – IPhone5 Portarit
  • 1280, 1366+ – desktop resolutions

Responsive design using CSS Frameworks (Bootstrap / Foundation):

This is like plug and play type. They have already predefined the required classes and components for responsiveness. We can use those class names and UI components for achieving responsiveness with minimal efforts.

Continue Reading