Monthly Archives: January 2016

Advantages & Disadvantages of Parallax Scrolling

The word parallax comes from the Greek word παράλλαξις (parallaxis), meaning “alteration”.Parallax scrolling is a technique in web design,which allows the foreground and background content to scroll at different speeds. It creats an illusion of depth in a 2D scene and adding to the immersion. This effect has been gaining popularity on websites for a couple of years.But before using this we must go through it’s advantages & disadvantages.

Advantages & Disadvantages of Parallax Scrolling

Advantages:

• It has the ability to create an interactive user experience that is vivid and catchy.Floating images will significantly freshen up and enrich the appearance of a page.
• We can put all the contents on one page so that users do not have to navigate through several different pages or wait for them to load.That is making a single page website using parallax.
• Not only for two-dimensional effect creation but also adding different effects to the page such as icon moving, icon enlargement and minimization based on scrolling.

Disavantages:

• As sites that utilize parallax scrolling tend to be made up of one page, there’s usually little in the way of content that can be crawled by the search engines.That means it is responsible for bad seo.
• Due to the heavy use of graphics and JavaScript it takes time to load. And sometime it will not function smoothly across all browsers.
• Parallax Scrolling is not as perfect in mobile versions.

Read more

Fixing iOS vh-unit bug with CSS

This bug affects the at the time of rendering the viewport height units. As example: when you are trying to make a full viewport height container with height:100vh, it will display a very tall empty gap.We use necessary javascript
(as an example:vh-unit buggyfill)for fixing this. But if we want to fix it with css then we go through the following codes:

/* fix iOS bug not displaying 100vh correctly */
/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.fullheight {
height: 768px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.fullheight {
height: 1024px;
}
}
/* iphone5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {
.fullheight {
height: 568px;
}
}
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
.fullheight {
height: 320px;
}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
.fullheight {
height: 480px;
}
}

source: web designer wall

Read more

Android Marshmallow

Android 6.0 “Marshmallow” is a version of the Android mobile operating system. It was unveiled in May 2015 at Google I/O under the codename “Android ‘M'”, & it was officially released in October 2015.

Marshmallow primarily focuses on improving the overall user experience of Lollipop,[5] introducing a new permissions architecture, new APIs for contextual assistants (a feature notably leveraged by “Google Now On Tap”—a new capability of the Google Search app), a new power management system that reduces background activity when a device is not being physically handled, native support for fingerprint recognition and USB Type-C connectors, the ability to migrate data to a microSD card and use it as primary storage, as well as other internal changes.

The Top Features of Android Marshmallow

• Marshmallow served us a new battery saving function known as “DOZE”.It uses the device motion sensors to detect that Smartphone is being used or not.
• Google has provided a platform for the fingerprint sensors in this android version.
• Google has provided with the secure mobile payment.
• No need to give apps access all the time. It lets you define what you want to share and when. Turn permissions off at any time, too.
• In marshmallow, Google has supported you with the new function of usb standard- usb type- c. For this usb connector can be used in either direction inside the unit.

Read more

5 Website motion design trends

New trends of website designing is motion design trends.These features into a website can help gain a real advantage by improving users’ experience and perception by making the site more interesting and unique.Here we will discuss five features.
Slow Animations:By introducing slow reveal animations that react to mouse movement or click get users more involved on a page .This can really help engage users with your content. We may bring some static backgrounds to life, by adding slow motion in some page’s of the website.
Header Transitions:Simplicity is the main key to great design.Lots of websites are suffering from animation overload.So, just use simple, smart & appropriate header transitions.
Slide Navigation: Now a days push down navigation along with pull-out sliders are growing in popularity.This makes the design of the site much slicker & eye-catching.
Animated , Dynamic Graphs & Charts:Mainly graphs & charts are often used by websites to display important and useful data.The animated & dynamic features of graphs & charts make these more quicker to make & update.Dynamic properties such as animation and interaction making them more engaging & eye catching.
Animated Progress bars and Buttons:A progress bar is a graphical control element used to visualize the progression of an extended computer operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format.Use animated progress bars & buttons to give an eye-catching & unique look.

Read more