Pros and Cons of Background Video in Website

This is important to think of videos as backgrounds, not stories. Don’t try to explain what you do, simply set the stage. Limit the length of background videos to 15 or maximum 20 seconds at most, and then loop the video to start over. Make Professional videos, which look simple have a positive effect on your brand. Do not have sound auto-play. If you really want music or ambient noise (which is not recommend), allow users to turn it on themselves. Don’t over complicate. If you add video to your website, keep the rest simple. Video can be distracting, so confusing users further with non-intuitive navigation and other design elements can be overwhelming.

Pros:

1. Video is engaging. We are naturally drawn to moving images. They pull us into the website and, hopefully, encourage us to explore more. 
2. Videos can help convey your brand. In a split second, a video can set a mood or evoke a feeling, which is harder to do with a static image or via text. 
3. Boosts SEO- If your video is cross-posted on several sharing platforms; it can boost the SEO value of your website. The more views your video takes in, the more it helps increase your rankings on search engines, especially if your visitors find your video good enough to continue sharing it.

Cons: 

1. If your homepage doesn’t load quickly, visitors may get frustrated and go elsewhere. A well programmed website should load a video quickly and not make visitors wait while a “loading” wheel churns. However, if a user has a slow connection, they may find your video homepage slower to load.
2. Video backgrounds are inherently auto-playing — they play without the user clicking anything. But many mobile platforms (including iOS) and legacy browsers do not support auto-playing video. Thus, a backup option is required, such as a static image. 
3. Videos can be distracting. It’s important to think of these as backgrounds, not documentaries. Lengthy or highly detailed videos will compound load speed issues.

Specifying a Webpage Icon for Web Clip.

The apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.

This file should be saved as a .png, have dimensions of  76 x 76 Or,  120 x 120 Or, 152 x152
To specify multiple icons for different device resolutions. For example, support both iPhone and iPad devices. Add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> 

for more detail on Apple site.

Fixed header/footer issue on iOS device

When you scroll the page and dismiss the keyboard while the page still scrolls, the header does not return to its fixed position. If you tap a link or button, the header shows up somewhere in the (vertical) middle of the screen and only returns to its fixed position after manually scrolling.

Solution:

if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
    $(document).on('focus', 'input, textarea', function()
    {
       $('header').css("position", 'absolute');
       $('footer').css("position", 'absolute');
      
    });
   
    $(document).on('blur', 'input, textarea', function()
    {
         $('header').css("position", 'fixed');
         $('footer').css("position", 'fixed');
       
    });
}

The above "unfixes" the header/footer while an input field is focused.

Different viewport meta for iphone and ipad

I found two simple solutions to set different viewport meta for different devices with jQuery. This work for iPad, iPhone or any other device to for that matter.

The first solution for changing the viewport per device. This method uses the width of the device to change the meta data.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, 

user-scalable=no" /> 

<script>

if ($(window).width() < 600) { 

     $('meta[name=viewport]').attr('content','initial-scale=0.54,

     maximum-scale=0.54, user-scalable=no'); 

}

</script>

The second method is to use the “User agent” tag, to check what kind of device it is. This method of Changing the viewport is not as precis due to different resolutions on the iPad or iPhone based on the model.

<!-- in head -->  <meta id="viewport" name='viewport'> 

<script>      

function(doc) {

var viewport = document.getElementById('viewport'); 

if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {

   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.3");          

 } 

else if ( navigator.userAgent.match(/iPad/i) ) {

   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.7");          

 }      

}(document)); 

</script>

Viewport Meta Tag For Non-Responsive Design

I'm sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven't got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the appearance of your design on mobile devices.

General Use of Viewport Tag

Viewport meta tag is generally used for responsive design to set the viewport width and initial-scale on mobile devices. Below is a sample viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Using Viewport Tag for Non-responsive Design

As you may know, the default viewport width on iPhone is 980px. But your design might not fit in that range. It could be wider or narrower. Below are two examples where you can utilize the viewport tag to improve the rendering of non-responsive design on mobile devices.

Example

Take a look at the Themify site on your iPhone.

The screenshot on the left shows how the site would render without the viewport tag. As you can see, the page is touching on both sides. I added viewport tag to specify the viewport width to 1024px so it leaves some margin space on the left and right sides.

<meta name="viewport" content="width=1024">

Another Example

If your design is too narrow, it might also cause an issue. Lets say the container width of your design is 700px and it is not responsive, it would look like the screenshot on the left where there is a big empty space on the right.

You can simply fix this by setting the viewport width to 720px. The width of your design doesn't change, but iPhone will scale it to fit in 720px.

<meta name="viewport" content="width=720">

Common Mistake

A common mistake is that people often apply initial-scale=1 on non-responsive design. This will make the page render at 100% without scaling. If your design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. This will disable the scaling and zooming capability of your site. With scaling disabled, users have no way to zoom out to see the complete page. Remember: if your design is not responsive, do not reset the initial-scale or disable scaling!

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">