CSS Animations.exe

CSS3 and HTML5 have arrived and have made many things easier for web developers. One of those things is addressing the matter of animation. 

CSS3 allows web developers, designers and masters to create transitions from one CSS style configuration to another.

WHY?

Using CSS animations can be very advantageous to the creator and user of a web page. 

Some advantages are:

1) Usability - Transitions are easy to use and simple animations don't require any knowledge of CSS.

2) Quality - Animations run well with CSS because the rendering engine uses technology that allows for smoother animations. 

3) Performance - By allowing the browser to control the animation sequence, it allows the browser to optimize the performance of the animation.

HOW?

Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way.

To create a CSS animation sequence, you want to animate needs to be styled with the animation property or its sub-properties. This lets you configure the timing and duration of the animation, as well as other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is actually done using the @keyframes at-rule. 

The sub-properties of the animation property are:

animation-delay

Configures the delay between the time the element is loaded and the beginning of the animation sequence.

animation-direction

Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself.

animation-duration

Configures the length of time that an animation should take to complete one cycle.

animation-iteration-count

Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely.

animation-name

Specifies the name of the @keyframes at-rule describing the animation's keyframes.

Lets you pause and resume the animation sequence.

animation-timing-function

Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves.

animation-fill-mode

Configures what values are applied by the animation before and after it is executing.

If you  are interested, here is an example of how CSS3 animations can be implemented in your websites.

Finally, it is important to know that there are a variety of ways to achieve something in web design and it is even easier to create more beautiful and interactive websites now that new technologies have emerged. Let us embrace them! 

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.

Minimalist/Flat Design

Flat design is a very popular trend in web design now. It focuses on the use of simplistic icons and buttons, colour variety and typography. It uses 2D symbols and shapes to communicate ideas and colours and layouts to enhance them.

Incorporated into the minimalist idea is the use of simple, smooth animations that help to make the space clutter free. 

It is important, however, as with all trends, to know when to use them on a website. Hence, one has to know what the purpose of the website and what style would best suit the needs of said website. For more on this trend, see the video below. 

-- T Y P O G R A P H Y --

Typography is more important to us on a daily basis than we realize. Whenever we read a text on a phone or see a newspaper article, it is the designer's knowledge of typography that helps to clearly communicate the purpose of the text. A typical example of this is below. 

As seen above, The use of fonts and its variants create a hierarchy of importance for the information. Please note:

• The title is in bold with a larger font size to emphasize its importance and to catch the reader's attention. 
• The subheading is bold and italic with a smaller font size to explain in brief the title.
• The body of the text is narrow and spaced so that the text and individual characters can be clearly seen, however, note that the author's name is coloured to show some separation in the purpose of that specific text. 

As web designers, it is important that we understand the principles behind typography that they may be incorporated in our work. One way to do so is by knowing what the purpose of what we design is. If we know its purpose then we can apply the principles with the use of appropriate fonts and colours and arrangement. 

Click here to read more on typographic principles!