Infinite Scrolling!

Infinite Scrolling is a technique employed in web design that creates pages that are very long or do not have an end. Such pages could be updated with content and old content is shown the further you scroll. 

Infinite Scrolling works by pre-loading content from another page and adding it to the current page the user is viewing. 

It is used when the web master wishes the users to remain on the web site for an extended period of time without having to be moved to another page to see more information. Usually, this technique is used if the content to be loaded on the page is too large to show on initial load and if this content is similar in nature. 

This technique, however, is not recommended for webpages that have an objective like finding specific content or being able to make comparisons. This is because if you have a goal for an infinite scrolling website, it may be lost due to the sheer mass of content that the viewer can see.

Advantages of Infinite Scrolling

• Users are on the page for a longer period of time because of a lack of having to move to another page and adjust viewing habits. 
• Users need little to no instructions
• Can be made responsive
• Effective for presenting content is used well

Disadvantages of Infinite Scrolling

• Adding content to a webpage can increase the amount of memory needed for the browser to run
• There is no way to opt-out or cancel this page behaviour
• It is basically impossible to reach the footer of the page
• Analytics will not immediately pick up event and therefore further configuration would be required 

Like all web design trends, Infinite scrolling has its place on the internet. However, knowing how to use and when to use it is most important. Infinite scrolling is not for you if your visitors want to achieve goal-oriented activities.

Parallax Scrolling

Parallax Scrolling 

Parallax Scrolling is a graphical computer effect in which an illusion of depth is created by having objects in the background moving slower than objects in the foreground. This technique was adapted from side scrolling video games where the same principle was used to give depth to 2D games.

                        FOREGROUND                                                       BACKGROUND

It is useful in enchanting users in an interactive web page, encouraging them to scroll through the entire web page and promoting your call to action. It also peaks the curiosity of the user and wows them with page depth and animation.

To implement Parallax Scrolling effectively, one must have a working knowledge of HTML5, CSS3, jQuery and Javascript. All these tools will help you to show content on the web page, edit their look and adjust how the user will interact with them.

Apart from these tools, here are some tips for those who intend to implement the wonderful trend of parallax scrolling: 

• Don't make your site too complicated
• Emphasize your call to actions throughout the site in a neat deliberate way
• Ensure browser compatibility 
• Use it to tell a story
• HAVE FUN!!

Before you go off on your journey to achieving the ultimate parallax website, however, here are some parallax sites that are awe inspiring:

• Flat vs. Realism: http://www.flatvsrealism.com/
• Wipro: The Future Thought of Businesshttp://www.wipro.com/future-thought-of-business/
• VonDutch: http://www.vondutch.com/com/

Last week we discussed the importance of making responsive websites in regards to devices. This week, we'll explore the use of a website across all browsers.

What is a Browser?

A browser is a computer application that allows users to view HTML files. It is a large part of the internet as it is the access point to the world wide web.

What is Browser Compatibility?

Browser compatibility is the ability of a web page to be viewed in any browser. More technically, it describes the ability of a browser to interpret HTML code. 

Why is it Important?

In this modern area, people are using a plethora of browsers to access a website. It would be a shame if a potential client or customer was hindered from viewing your website due to not being able to view it from their browser.

Browser compatibility creates potential headaches for web developers. As newer popular scripting languages create flashy Web pages, older browsers may not understand the new code. For security reasons, many people disable scripting languages in their Web browsers, reducing compatibility. If the webmaster has been thorough, there should be a way to surf the site’s content without the flash and bang. Unfortunately, this often isn’t the case, and a browser that has scripts or cookies turned off may not be able to get into the site at all.

What Can Web Developers do?

Once you've created your web design, you should review your site's appearance and functionality on multiple browsers to make sure that all your visitors are getting the experience you worked so hard to design. Ideally, you should start testing as early in your site development process as possible. Different browsers - and even different versions of the same browser - can see your site differently.  You can also use services such as BrowserShots and Browsera to check how your websites would look in different browsers and adjust as necessary.

Responsive Design

About

Responsive Design, as it relates to web design, is a concept that explores the use of web pages on all devices without actually creating different websites. 

Mobile First

It is now a popular trend with many services now offering a "mobile-first" approach to web design; meaning that the developer would consider how the website would look and feel on a mobile device like a tablet or a phone before editing it for a pc layout. 

When one starts with the desktop platform, one tends to want to take advantage of everything that platform has to offer. An amazing product that leverages lots of great technology is built, only to realize that none of it scales well down to mobile. This can and does lead to severely watered down mobile products that feel more like an afterthought than a polished, finished product. Hence, instead of working down from desktop to mobile, the idea is to work in the opposite direction.

Responsive + Mobile First

With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-needed basis to platforms that can handle them well.

Responsive design is built around the concept of media queries that target specific devices and viewport sizes. With this in mind, you can code up your initial CSS given a mobile perspective and then use media queries to selectively serve up additional styling as the viewport size increases.

This is likely the opposite of the method that you typically take with responsive design: start big and then reduce. Given the arguments above though, there’s obviously a lot of logic behind structuring your media queries from small to large.