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! 

-Depicting Your Journey With Canvas!-

HTML Canvas is a good tool to be used when you'd like to put graphics or animation in a web page. The <canvas> element allocates space in which graphic work may be drawn using JavaScript or even animations made. An example of how it works is shown here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_first

Journey to Validation

What is Validation?

Web validation is when a software program is used to verify the proper syntax of a HTML, XTHML or CSS document against the web standards. 

Why Validate?

We validate our web pages because if man made it, they are most likely errors in  the code used to create and validation identifies these errors and displays them. Validation is also a method of quality assurance, ensuring that your customer(s) receive web markups that are up to standard with what it should be. 

Where Can One Validate Their Document?

There are online sites that can help to validate your web page as a means of promoting good web development practice. 

If you wish to validate your HTML or XTHML documents you may click here.

However, if you wish to validate your CSS stylesheets, there is an online way to do it here. 

Errors in your code can become like a disease, so get tested and stay on the journey. 

Code. Preview. Repeat.

//CODE

Its what you're learning to do... And you can only successfully do it by trial and error. No matter how we know the syntax rules, you're always learning, you're always teaching yourself. Bachelors, Masters or Phd. its all the same in web development, you always second guess yourself if the image you have in your head is being achieved by what you're typing. Thankfully, there's a button for that! 

//PREVIEW

Boom! You're dead*. You ran out of content that you wanted. Now to go to the graveyard to see how your sins turned out. You review all the stuff you just typed and realized that there's just that there. Not what's in your head but what you just typed. Give it a second and the emotion you now feel is? Disappointment? Joy? Satisfaction? Anger? Who Cares? Not your IDE. You care. So wipe your tears of joy and or pain and go back to the code.

//REPEAT

Everybody loves repeating things! (Trust me I'm from the internet) So why not repeat what you just did there,bud? Code some more. Try and make it look pretty.. Get accustomed to dealing with the smaller parts of the problem in order to make your aim a reality. Also, in the mean time, be inspired by what I'm saying. If not, read this post over again. Why? Because life is a journey and you have to enjoy all the little bumps in the road and press on. When you code you have to be patient so you users won't have to be. And most importantly! Have fun! Until next time, code, review, repeat. 

*(Edge of Tomorrow, 2014)

-- Dangerous Terrain --

Coding HTML and CSS can really be a hassle. The outcome, if you do it right, can be quite pleasant however.

//TAGS

The tags I tell ya, an arch nemesis of the new web developer. Even more seasoned web developers have a problem with the use of tags and creating containers etc. I mean, <article> and <content> both have different uses. So does <aside> but their almost the same thing! Divs act as containers for a lot of the classes that will become useful to you in CSS, but a lot of times you forget the divs! So you have to go back through your code and add them >.> As if manually coding a complete webpage with content wasn't enough.

//CSS

Styling your webpage is another gruesome story. Remember those divs? Yeah, they're supposed to be helpful? Uh.. no. You don't know what you can do to them do you? Sometimes you just wanna say "Gooo to the left... no... not there... a little to the right.." but you end up saying "Gooo 50 pixels to the left... no...not there...45 pixels?" #WebDevProbs

Without knowing all you can do in CSS can limit what you can do to a webpage. 

//CONCLUSION

Study to show thyself approve. Try to study a large amount of tags, especially the new ones. And try to learn how you can manipulate your elements with CSS. Here's a little treat to help you adjust your divs and objects etc. Have fun web-bending! ~Till next time

Into the Depths of Markup

HTML is a simple language Hyper- Text-Markup-Language, it helps to create the skeleton of webpages. 

Today, we will take a journey into the depths of markup.

//What does HTML do? 

HTML uses tags to tell browsers what to display and how to display it! It basically sets out rules that the browser complies to like a good student who abides by the rules if his/her university.

//HTML++

With the introduction of HTML5 a lot of new tags have been added to help web developers and designers better manipulate elements on  a web page, tags like <aside>, <article> and others, with their closing tags, help to ease the tedious procedure of creating a web page. The new tags can be found here if you'd like to excavate some more information on the new tags. 

NEW HTML5 TAGS

//HOW TO TELL HTML DIFFERENT FROM HTML5

Please see the picture below for some simple steps on differentiating between HTML and HTML5.

And now you know.

Frankly I cant wait to start using HTML and CSS to improve the internet world! Until our next journey, take care!

Get Over Yourself

So far, in this class,I have learnt that the hardest thing that web developers or designers do is to get over themselves. The principles of design as far as the web is concerned is holistically made to help such persons with that problem. When a web developer or web designer creates a web page, it shouldn't be for themselves or even the client! It should be for the users.

When a web page is going to be made, a web designer has to have a purpose in mind. There must be an expected outcome, an aim, a goal to achieve. One has to also know the audience to which you target the information that will be shared on your website. Ask yourself, "what would they want?" and then ask THEM.

Why ask them? Because they are the customers! They are the people who will use your website and they are from different cultures, have different needs and attention spans, religious beliefs and these things must be taken into account when creating the website.