Web Animation and Transitions

Long exposure photograph with streaks of light left by vehicles outside of the Printworks in Manchester

Animation is a great tool for adding interactivity, providing narrative and generally making a web page more enjoyable to use.

In this article I discuss the techniques used to animate a simple statistics page to help tell the story of the data as well as add some simple interactivity and the challenges I encountered doing so.

Aim

To use current and relevant animation techniques to add interactivity to a demonstator page.

Objectives

  • – Use CSS3 transitions and animations to add interactivity
  • – Manipulate page elements to create unexpected interactions
  • – Produce an interactive and enjoyable demonstrator
  • – Apply animation theory through the demonstrator

Take a look at the demo.

Approach

When I started this project, I said foolishly I was going to do it as ‘a bit of fun’, a vacuous statement which showed my lack of understanding of the complexities of animation. Initially I played around with animations which would have looked more at home as a Windows 98 screen saver with water ripples triggered by a mouse-over.

I soon realised how ridiculous this was and started looking into other techniques I could play with. The next experiment being a slowly rotating planet Earth. I was pleasantly surprised by the result of this, but I had fallen into the trap of putting style over substance, designing fancy animations without considering what my content would be.

Another advantage of putting all the grid styles within a supports rule is the ease in testing your fall-back solutions. You can quickly comment out the whole rule to see your design reset to flex-box.

At this point I stopped myself and began deciding on a concept. I chose to create a page providing information about water using various infographics which would animate as the user navigates the page. The challenge here was triggering the animations when they were scrolled into the visible portion of the viewport. After several attempts the animations would keep triggering as soon as the page had been scrolled down a single pixel, or the class-swapper would trigger the change on the page loading. Whilst these were most likely a problem with my code, I was struggling to find the exact cause as the animations would trigger correctly when viewed offline, just not live.

After a few days spent with my head against the wall I decided in a final attempt to try and trigger my animations using the AOS library which I use on my portfolio. On inspection it appeared the AOS library simply triggers its own animations by adding a new class the element. Knowing this I could use this class to trigger my own animations. AOS also provides some pleasant and easy to use animations for content entering the screen. I used Michal Sajnog’s guide on CSS-Tricks to learn how to implement AOS within the page.

Having created this interactive page, I regret not having used a demonstrator with more buttons and interactive elements as these seem like the most essential elements to animate. Subtle animations on UI elements can give content better flow and give users a better understanding of the effect their interactions have as seen in Pablo Stanley’s article ‘Good to great UI animation tips’. I did however implement some simple interactive animations on the down arrow at the top of the page which makes the window scroll down when clicked. The arrow bounces to show the user that there is content below and that if they click the arrow they can expect the page to react. In addition, when hovered over the arrow gets larger, implying that this is something you can click.

Conclusion

Overall the animations used on the page help to guide the user through the information presented and make the page more aesthetically pleasing and fun to use. Whilst I would have preferred to use more clickable interactive elements I did gain a lot of knowledge working on this project, learning how to use SASS and manipulate SVG using code.


Reading List


Take a look at the demo.

Fallback support for Grid

CSS-Grid has had an enormous impact on my workflow and the possibilities when designing for the web.

Aim

To create a variety of fall-back support for a CSS Grid website without having a negative impact on the design on modern browsers. The aim is to provide as close an experience as possible.

Objectives

  • – Create a responsive CSS grid template
  • – Create a flex-box fallback
  • – Create a float fallback
  • – Add relevant additional support for browsers that don’t support HTML5

Approach

At this point, only the latest browsers are supporting grid it is important to consider how to offer some form of support for users on older browsers. In this article I discuss various techniques that can be used to offer fall-back support for CSS-Grid layouts.

Take a look at the demo.

I started by created a basic grid layout, placing it into a @supports rule. This isn’t strictly necessary since as Rachel Andrew points out, browsers will ignore CSS they don’t understand. However, I intended on utilising some of the features of CSS-Grid to style my grid in ways I wouldn’t be able to within the fall-back solutions.

Once the basic grid was set up I took any CSS which would be relevant for my fall-back styles and placed them above my existing ones. The browser will always use the last property (it understands) within the CSS file when styling the page, so at this point I began styling the page as closely as possible to the original, this time in flex-box. It is important here however to reset any values used for the fall-back within the @supports (display: grid) rule so the designs don’t conflict with one another.

Another advantage of putting all the grid styles within a supports rule is the ease in testing your fall-back solutions. You can quickly comment out the whole rule to see your design reset to flex-box.

Whilst the flex-box backup does allow users on slightly older browsers some form of experience on the page, it doesn’t support the complexity of page grid I created without adding more div elements to the page to style it further. This wasn’t an option for me as it would make my primary grid less responsive.

That’ all well and good, but flex-box itself is a relative newcomer, meaning it only offers limited support and won’t help with older browsers. This is where the final fall-back comes in: floats. Setting all the grid boxes to float left won’t have any negative impact on the default template but will allow older pages to render a simple version of the grid.

In addition to support for the grid itself I added fall-back background colours where I have used transparency so on older browsers text will still be legible. To ensure everything works smoothly on Internet Explorer 8 and earlier I implemented Sjoerd Visscher’s HTML5Shiv which teaches older browsers how to use HTML5, most importantly creating elements for <header> <main> and <footer>.

Results

Chrome 64

Pass: This is the main grid layout, working as intended

IE 11

Pass: Flex-box backup running as intended with simpler grid

IE 8

Pass: Float fall-back working as intended with simpler grid

IE 7

Fail: positioning isn’t working, article text has been lost, footer has floated next to the grid

Conclusion

Overall there is some reasonable fall-back support implemented here, however more could be done to ensure the layout performs across a wider range of browsers. The question is ultimately how much support is required for each individual project? If the answer is IE6+, is it worth using Grid in the first place?


Reading List


Take a look at the demo.

Performance and Optimization

In order to ensure my website run quickly and smoothly I took several steps to optimize the site as well as possible.

Code

As this was my first time developing a website with grid I wanted to be sure that I implemented it as efficiently as possible. To do this I first structured my homepage wireframes to the grid specification and began applying styles. My first attempt was scruffy at best and was particularly difficult to edit. To rectify this, I took the knowledge I had gained with my first attempt and began redeveloping the homepage in a much cleaner fashion with more focus on coding in such a way that it would be easier to implement design changes in future. This meant creating more reusable classes that could be used to quickly change colours and styles across the website quickly rather than having to change each element individually.

In order to reduce the size of the homepage and speed up loading times I seperated styles which are specific to project pages into another file meaning they aren’t being downloaded unnecessarily. Once the user clicks through to a project page the main styles should already be cached and the browser should only need to download the page specific styles and images.

One of the inspirations for my portfolio is my love of Netflix’s Stranger Things and 1980’s “retrowave” design. In fact the idea to create the neon-like headings on the website came from my attempt at creating the Stranger Things opening titles in CSS. To achieve this effect  I created a simple webkit keyframe animation, quickly changing the text colour to a darker shade and giving each character in the heading a different timer in order to create a realistic neon-flicker. To make the effect more convincing I then made the text-shadow disappear when the character flickers to give the illusion that there is light flickering on and off.

Optimization

The most significant impact on page size and loading times on my website is the images. To make the website more mobile friendly and reduce loading times I have optimized the images, increasing file compression as much as possible without subtracting from the perceived quality of the images on the website itself. In addition to this I have exported the images scaled to their relative max sizes on screen which drastically lowers file sizes.

Image scaling is particularly important where I have used images with transparency such as my logo as PNG graphics are typically larger in size than their JPEG equivalent. I have made any images which do not require transparency in JPEG format for this very reason.

SEO Integration

The majority of search engine optimization is dictated by the quality of the content on the website itself. I have attempted to create keyword rich content and blogs with a relevance to front end web development.

In addition to the content, as of April 2015, Google decided to “use mobile friendliness as a ranking signal”. To test whether or not my website confirms to Google’s specification of a mobile friendly website I ran their Mobile Friendly Test which confirmed the website was indeed mobile friendly.

Finally, I have included relevant metadata to my portfolio using relevant keywords and page descriptions.

Digital Industry and the Skills Gap

It appears to be a good time to aspire for a career in web development, with developer roles being the hardest to fill, at least within Manchester (Manchester Digital, 2017). The UK’s digital industry is attracting more than double the investment of its closest competitor, France, bringing in £28bn over the past five years (Tech Nation, 2017). In fact, over the same five years London has attracted more investment than Paris Berlin and Amsterdam combined (Tech Nation, 2017). However with digital businesses growing faster than non-digital businesses on average (Tech Nation, 2017), a skills gap as emerged forcing employers to inflate wages. This wage inflation is a growing concern for digital businesses, rising from 44% in 2016 to 51% in 2017 (Manchester Digital, 2017). In 2017 20% of digital businesses within Manchester reported having turned away work due to being unable to find the “right talent” (Manchester Digital, 2017). In a government digital strategy report it transpired that the skills gap costs the UK economy round “£63bn a year in lost income” (BBC News, 2017).

The issue seems deeply routed with a significant about of school IT equipment being considered ineffective. The majority of computer science teachers lack relevant qualifications of which there are already too few according to the government report which claims only 70% of teaching roles have been filled (as of 2016) (BBC News, 2017).

It’s not all doom and gloom for the skills gap however. Code bootcamps are popping up across the country in order to provide the necessary training for aspiring developers without necessarily having the high cost of a bachelor’s degree in just a few months. Triplebyte, a company dediated to finding work for software programmers conducted a study into how bootcamp graduates have faired in the industry. As it turns out programmers who studied at these bootcamps have “similar or better skills in two of the four areas it tests candidates: practical programming … and designing web systems” (Kokalitcheva, K., 2017). Triplebyte found that the education provided by bootcamps sets programmers up for careers in practical areas but lacks training in the more maths oriented roles such as algorithm programming.

One of the ways the government is attempting to reduce the skills gap is through the apprenticeship levy. The number of digital companies within Manchester recruiting apprentices has increased by around 3% in the last year up to 50.8%. Of these apprentices 80% have met the employer’s expectations (Manchester Digital, 2017), however there are concerns over the “work readiness” of some apprentices who perhaps haven’t had the basic level of training that should potentially be offered at high school and college level education.

So the question remains, how do we reduce the skills gap and increase the number of trained developers within an industry which has been consistently growing at a rapid rate? It seems clear that the level of training being provided at even the most basic levels within high schools and colleges is simply insufficient to keep up with the demands for new talented developers. Greater investment is needed in staff training and school equipment to better equip students to develop; whether that be at university level, apprenticeships or through code bootcamps. With Brexit looming ahead it’s tempting to ask what will happen to the UK’s leading role in Europe in the digital sector. Will the UK’s digital industry suffer the same fate as it’s manufacturing industry?

The government needs to be able to ensure the UK remains an attractive place to study in order to reduce the threat of Brexit on the industry as a whole. Currently 10% of talent within the North West of England is sourced from the European Union (Manchester Digital, 2017). With “fewer than 5,000 [students] a year stay[ing] on after their visa expires” (Stewart, H & Mason, R & Grierson, J., 2017) as well as government policy which may affect foreign students as part of their “crackdown” on immigration it is hard to see the skills gap shrinking any time soon.

Contact

Have a project in mind? Feel free to get in touch using the contact form and I'll be happy to help. Alternatively, you can email me directly at cprincewebdev@gmail.com.

profile for C Prince at Stack Overflow, Q&A for professional and enthusiast programmers

Get in touch